o-typography

FT brand typographic styles

active

Headings

<h1 class="o-typography-heading1">Heading 1</h1>
<h2 class="o-typography-heading2">Heading 2</h2>
<h3 class="o-typography-heading3">Heading 3</h3>
<h3 class="o-typography-heading4">Heading 4</h3>
<h2 class="o-typography-subhead">In Article Subheading</h2>
<h2 class="o-typography-subhead--crosshead">In Article Crosshead</h2>

Leads

<p class="o-typography-lead">Belgian-Brazilian brewer ups the stakes in beer takeover battle</p>
<p class="o-typography-lead--small">Belgian-Brazilian brewer ups the stakes in beer takeover battle</p>

Body

<article class="o-grid-row demo demo-article">
	<div data-o-grid-colspan="12 S11 Scenter M9 L8 XL7">
		<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>
			<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>
			<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>
			<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>
			<p class="o-typography-body">
				Bold: <strong class="o-typography-bold">o-typography-bold</strong><br>
				Italic: <em class="o-typography-italic">o-typography-italic</em><br>
				Superscript: <sup class="o-typography-sup">o-typography-sup</sup><br>
				Subscript: <sub class="o-typography-sub">o-typography-sub</sub><br>
			</p>

			<ul class="o-typography-body o-typography-list">
				<li>Lorem ipsum dolor sit amet.</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-body o-typography-list">
				<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>
			<footer class="o-typography-footer">Footer such as copyright notice.</footer>
		</div>
	</div>
</article>

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-link-topic o-typography-link-topic--medium">Standard Chartered PLC</a>
		</div>
		<h1 class="o-typography-heading1">A &#x2018;Rosetta stone&#x2019; that may unlock the mystery of life on Earth</h1>
		<p class="o-typography-lead">Belgian-Brazilian brewer ups the stakes in beer takeover battle</p>
		<span class="o-typography-timestamp">Today</span>
		<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-heading2">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-heading3">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-heading4">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-body o-typography-body__list">
				<li>Lorem ipsum dolor sit amet.</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-body o-typography-body__list">
				<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>
			<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><span class="o-typography-subhead--standard">Letter in response to this article:</span></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>

Asides

<article class="o-grid-row demo demo-article">
	<div data-o-grid-colspan="12 S11 Scenter M9 L8 XL7">
		<aside class="demo-article__body o-typography-aside-wrapper">
			<h3>This is the aside title</h3>
			<article>
				<h4>
					<a href="#">Headline link to another article</a>
				</h4>
			</article>
			<div>
				<p>Here&apos;s some content in the aside.</p>
				<p>There could be a few paragraphs.</p>
			</div>
			<blockquote>
				<p>Here&apos;s a blockquote that&apos;s pulled out into an aside</p>
				<footer>This is who said it</footer>
			</blockquote>
		</aside>
		<br>
		<aside>
			<div class="o-typography-big-number">222m</div>
			<footer class="o-typography-footer o-typography-bold">This is quite a big number</footer>
		</aside>
		<br>
		<aside>
			<h3 class="o-typography-aside__title">This is the aside title - standard</h3>
			<h3 class="o-typography-aside__title--large">This is the aside title - large</h3>
			<br>
			<article>
				<h4 class="o-typography-aside__headline">Headline to another article no link - standard</h4>
				<h4 class="o-typography-aside__headline--large">Headline to another article no link - large</h4>
				<h4 class="o-typography-aside__headline--small">Headline to another article no link - small</h4>
			</article>
			<br>
			<div>
				<p class="o-typography-aside__body">Aside content in standard size.</p>
				<p class="o-typography-aside__body--small">Aside content in small size.</p>
			</div>
		</aside>
	</div>
</article>
Bower Dependencies
o-colors >=3.4 <4
o-hoverable >=0.1.1 <4
o-fonts ^2.0.0
GitHub Repository

Quickstart

Build Service

Add the following to your <link> tag

o-typography@^4.3.4

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"@"^4.3.4"

For more information see the Origami build process.