Origami Frontend Components & Services

Demos: o-typography

Scale

Demonstrates the default typographic scale.

Line Width

Demonstrates line width capping for different font-sizes (see the SASS mixin `oTypographyMaxLineWidth`).

Headings

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

Non-article 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>

Body

<p class="o-typography-body">Body - Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#" class="o-typography-link">Link</a> a rem <strong class="o-typography-bold">excepturi</strong> consequuntur commodi dolores ad <em class="o-typography-italic">laboriosam</em> qui odit ipsum distinctio quos laborum dolore magnam iure rerum, enim deleniti saepe sunt.</p>
<p class="o-typography-body">Lorem ipsum dolor sit amet<sup class="o-typography-sup">Sup</sup>, consectetur adipisicing elit<sub class="o-typography-sub">Sub</sub>. <a class="o-typography-link" href="#">Link Necessitatibus asperiores</a></p>
<p class="o-typography-body">Lorem ipsum dolor <a href="#" class="o-typography-link--external">sit amet consectetur</a> adipisicing elit. Non atque doloribus quaerat, esse ipsum doloremque.</p>

Blockquote

<blockquote class="o-typography-blockquote">
	<p>Blockquote - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis ea suscipit iusto perspiciatis harum, qui maxime necessitatibus facilis, quo natus rem accusamus autem! Magnam pariatur, perferendis molestiae et tenetur repudiandae.</p>
	<footer>by Oliver Powell</footer>
</blockquote>

Caption

<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=origami-build-tools">
    <figcaption class="o-typography-caption">
        <a class="o-typography-link" href="#void">&#xA9;Lorem</a> John Doe
    </figcaption>
</figure>

Lists

<ul class="o-typography-list o-typography-list--unordered">
	<li>List</li>
	<li>List</li>
</ul>

<ol class="o-typography-list o-typography-list--ordered">
	<li>List ordered</li>
	<li>List ordered</li>
</ol>

Big Number

<div class="o-typography-big-number">&#xA3;37m Big number</div>

Article

This shows article styles such as the collection headings, topic, author name, standfirst, timestamp, and big number.

<a href="#" class="o-typography-topic">Standard Chartered PLC</a>

<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>

<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>

Wrapper

As an alternative to adding classes to each html element, adding a wrapper class on a parent element will apply typographic styles to child html elements semantically.

<div class="o-typography-wrapper">
	<h1>Heading level 1</h1>
	<h2>Heading level 2</h2>
	<h3>Heading level 3</h3>
	<h4>Heading level 4</h4>
	<h5>Heading level 5</h5>

	<p>Body - Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#">Link</a> A rem <strong>excepturi</strong> consequuntur commodi dolores ad <em>laboriosam</em> qui odit ipsum distinctio quos laborum dolore magnam iure rerum, enim deleniti saepe sunt.</p>
	<p>Lorem ipsum dolor sit amet<sup>Sup</sup>, consectetur adipisicing elit<sub>Sub</sub> reiciendis neque et facilis quidem quasi autem tenetur adipisci eum aut magni atque cupiditate laboriosam. <a href="#">Link Necessitatibus asperiores</a></p>

	<blockquote>
		<p>Blockquote - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis ea suscipit iusto perspiciatis harum,
			qui maxime necessitatibus facilis, quo natus rem accusamus autem! Magnam pariatur, perferendis molestiae et tenetur
			repudiandae.</p>
		<footer>by Oliver Powell</footer>
	</blockquote>

	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt aspernatur aut corporis eius. Neque consequuntur commodi consectetur ullam laudantium saepe.</p>

	<ul>
		<li>List</li>
		<li>List</li>
	</ul>

	<ol>
		<li>List ordered</li>
		<li>List ordered</li>
	</ol>

	<footer>Footer such as copyright notice.</footer>
</div>
Switch component view

GitHub Repository

Install o-typography

If using the Build Service, add o-typography@^5.12.0 to your script and link tags.

If running a Manual Build, run bower install --save "o-typography@^5.12.0".

Help & Support

o-typography is maintained directly by the Origami team. If you have any questions about o-typography or Origami in general, we are happy to help. 😊

Slack: #ft-origami
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #ft-origami
Email: origami.support@ft.com