This component hasn't been branded yet.

If you would like to discuss having it branded please get in touch with the Origami team.

o-typography

FT brand typographic styles

active

Article

<article class="o-grid-row demo demo-article">
	<div data-o-grid-colspan="12 S11 Scenter M9 L8 XL7">
		<div>
			<a href="#" class="o-typography-topic">Standard Chartered PLC</a>
		</div>
		<h1 class="o-typography-headline">A &#x2018;Rosetta stone&#x2019; that may unlock the mystery of life on Earth</h1>
		<p class="o-typography-standfirst">Belgian-Brazilian brewer ups the stakes in beer takeover battle</p>

		<span class="o-typography-timestamp">Today</span>
		<div class="o-typography-author"><span>by</span> <a href="#">Peggy Hollinger</a></div>

		<div class="demo-article__body">
			<p class="o-typography-body">Anheuser-Busch InBev raised its proposed takeover offer for SABMiller to &#xA3;43.50 a share on Monday, upping the stakes in a takeover battle to create the world&#x2019;s dominant brewing company, according to people familiar with the latest bid.</p>
			<p class="o-typography-body">News of the fourth proposal by <a href="#" class="o-typography-link">AB InBev</a> for its London-listed rival, which values SABMiller&#x2019;s equity at $70bn, came with less than 52 hours before a UK bid deadline.</p>
			<h2 class="o-typography-heading-level-2">Heading 2 Lorem ipsum dolor sit amet.</h2>
			<p class="o-typography-body">Glencore has fired the starting gun on a sales process for two copper assets after the miner-cum-trader was approached by several suitors.</p>

			<h3 class="o-typography-heading-level-3">Heading 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam!</h3>
			<p class="o-typography-body">People close to the company said there was no guarantee that Glencore would sell either the Cobar mine in Australia or Lomas Bayas in Chile, which analysts said could be worth between $500m to $1bn.</p>

			<h4 class="o-typography-heading-level-4">Heading 4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam!</h4>
			<p class="o-typography-body">Nemo, aspernatur. Quae delectus necessitatibus recusandae corporis, dolorem, molestiae vel pariatur, perspiciatis nisi in saepe non asperiores iure quo, blanditiis.</p>
			<ul class="o-typography-list o-typography-list--unordered">
				<li><p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae natus totam necessitatibus, sequi placeat atque debitis eligendi saepe, perferendis incidunt et in, ducimus aspernatur. Quasi consequuntur iste consectetur, assumenda laboriosam!</p> <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae natus totam necessitatibus, sequi placeat atque debitis eligendi saepe, perferendis incidunt et in, ducimus aspernatur. Quasi consequuntur iste consectetur, assumenda laboriosam!</p></li>
				<li>Officia sequi autem in explicabo.</li>
				<li>Dolores placeat, <a class="o-typography-link" href="#void">at distinctio</a> non!</li>
				<li>Quo totam numquam, molestias consequatur.</li>
				<li>Quasi libero fuga soluta quisquam!</li>
			</ul>
			<ol class="o-typography-list o-typography-list--ordered">
				<li>Article ordered list item</li>
				<li>Officia sequi autem in explicabo.</li>
				<li>Dolores placeat, <a class="o-typography-link" href="#void">at distinctio</a> non!</li>
				<li>Quo totam numquam, molestias consequatur.</li>
				<li>Quasi libero fuga soluta quisquam!</li>
			</ol>
			<p class="o-typography-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas aperiam magni, sint ut minus omnis eligendi velit non dolor odio optio quaerat dignissimos assumenda excepturi impedit, modi molestias iste. Suscipit tempora nemo, id ducimus vero voluptates omnis cumque provident. Eum velit temporibus consectetur officia! Sit saepe deserunt at nisi necessitatibus!</p>
			<h4 class="o-typography-heading-level-4">Heading 4 above an image!</h4>
			<figure>
				<img alt="" src="https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fim.ft-static.com%2Fcontent%2Fimages%2Fa60ae24b-b87f-439c-bf1b-6e54946b4cf2.img?source=otype">
				<figcaption class="o-typography-caption">
					<a class="o-typography-link" href="#void">&#xA9;Lorem</a> John Doe
				</figcaption>
			</figure>
			<p class="o-typography-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas aperiam magni, sint ut minus omnis eligendi velit non dolor odio optio quaerat dignissimos assumenda excepturi impedit, modi molestias iste. Suscipit tempora nemo, id ducimus vero voluptates omnis cumque provident. Eum velit temporibus consectetur officia! Sit saepe deserunt at nisi necessitatibus!</p>

			<p class="o-typography-body"><em><a class="o-typography-link" href="#void">Spending &#x20AC;1.4bn for the &#x2018;Rosetta stone&#x2019; is a tragic misappropriation of resources / From J Antoni Rafalski</a></em></p>
			<footer class="o-typography-footer">Footer such as copyright notice.</footer>
		</div>
	</div>
</article>

Headings

<h1 class="o-typography-headline--large">Headline large &#x2014; Don&#x2019;t settle for black and white</h1>

<h1 class="o-typography-headline">Headline &#x2014; Don&#x2019;t settle for black and white</h1>

<h2 class="o-typography-heading-level-2">Heading level 2 &#x2014; Don&#x2019;t settle for black and white</h2>
<h3 class="o-typography-heading-level-3">Heading level 3 &#x2014; Don&#x2019;t settle for black and white</h3>
<h4 class="o-typography-heading-level-4">Heading level 4 &#x2014; Don&#x2019;t settle for black and white</h4>
<h5 class="o-typography-heading-level-5">Heading level 5 &#x2014; Don&#x2019;t settle for black and white</h5>

Product Headings

<h2 class="o-typography-product-heading-level-1">Heading level 1 &#x2014; Don&#x2019;t settle for black and white</h2>
<h2 class="o-typography-product-heading-level-2">Heading level 2 &#x2014; Don&#x2019;t settle for black and white</h2>
<h3 class="o-typography-product-heading-level-3">Heading level 3 &#x2014; Don&#x2019;t settle for black and white</h3>
<h4 class="o-typography-product-heading-level-4">Heading level 4 &#x2014; Don&#x2019;t settle for black and white</h4>
<h5 class="o-typography-product-heading-level-5">Heading level 5 &#x2014; Don&#x2019;t settle for black and white</h5>
<h3 class="o-typography-product-heading-level-6">Heading level 6 &#x2014; Don&#x2019;t settle for black and white</h3>
<h4 class="o-typography-product-heading-level-7">Heading level 7 &#x2014; Don&#x2019;t settle for black and white</h4>
<h5 class="o-typography-product-heading-level-8">Heading level 8 &#x2014; Don&#x2019;t settle for black and white</h5>

Line Width

Demonstrates line widths for different font-sizes

<div class="line-width-demo">
	<div class="selection">
		Scale: <select class="select-scale">
			<option value="-2">-2</option>
			<option value="-1">-1</option>
			<option value="0" selected>0</option>
			<option value="1">1</option>
			<option value="2">2</option>
		</select>
	</div>

	<p class="scale-0">dictum, ultrices eros non, varius enim. Aenean quis porttitor magna, quis rutrum eros. Proin elementum justo a massa suscipit iaculis vel eget ex. Mauris non est non quam vestibulum scelerisque in a purus. Donec varius augue at est vulputate convallis. Proin accumsan varius nulla, nec sagittis tortor aliquet vitae. Praesent nunc diam, cursus vitae tellus ac, lobortis posuere quam. Mauris nibh arcu, aliquam quis ultricies non, ultrices in sapien. Quisque placerat ipsum a metus consectetur, vel sagittis velit sodales.

Morbi a nulla in mi tincidunt ultricies. Morbi mollis maximus est. Sed non elit bibendum, auctor orci lacinia, interdum augue. Sed pharetra id urna vel luctus. Phasellus elementum pulvinar leo et porta. Proin blandit id diam at ullamcorper. Nunc id blandit justo. Nam et vestibulum sem.
	</p>
</div>
Bower Dependencies
o-colors ^4.1.1
o-fonts ^3.0.0
o-grid ^4.3.1
fontfaceobserver ^2.0.9
o-icons >=4.4.2 <6
npm Dependencies
fontfaceobserver ^2.0.9
superstore-sync ^2.1.0
GitHub Repository

Quickstart

Build Service

Add the following to your <script> and <link> tags.

o-typography@^5.7.5

How do I do that?

For more information see the Origami build service.

Manual Build Process

Run the following command in the root directory of your project, to add this dependency to your bower.json file:

bower install --save "o-typography"@"^5.7.5"

For more information see the Origami build process.