Demonstrates the default typographic scale.
Demonstrates line width capping for different font-sizes (see the SASS mixin `oTypographyMaxLineWidth`).
Headings.
<h2 class="o-typography-heading-level-1">Heading level 1 — Don’t settle for black and white</h2>
<h2 class="o-typography-heading-level-2">Heading level 2 — Don’t settle for black and white</h2>
<h3 class="o-typography-heading-level-3">Heading level 3 — Don’t settle for black and white</h3>
<h4 class="o-typography-heading-level-4">Heading level 4 — Don’t settle for black and white</h4>
<h5 class="o-typography-heading-level-5">Heading level 5 — Don’t settle for black and white</h5>
<h6 class="o-typography-heading-level-6">Heading level 6 — Don’t settle for black and white</h6><p class="o-typography-body">
We have a <a href="#" class="o-typography-link">standard link</a> and
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target" class="o-typography-link o-typography-link--external">external link</a> style.
External links may open in a new window/tab but we <a href="https://www.w3.org/TR/WCAG20-TECHS/G200.html" rel="noreferrer noopener" target="_blank" class="o-typography-link o-typography-link--external">recommend against this</a> in most cases.
</p><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 o-typography-link--external">sit amet consectetur</a> adipisicing elit. Non atque doloribus quaerat, esse ipsum doloremque.</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=origami-build-tools">
<figcaption class="o-typography-caption">
<a class="o-typography-link" href="#void">©Lorem</a> John Doe
</figcaption>
</figure><!-- o-typography-body used for demo purposes. List font size, line height, and colour are inherited -->
<div class="o-typography-body">
<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>
</div>
<!-- o-typography-body used for demo purposes. List font size, line height, and colour are inherited -->
<div class="o-typography-body">
<ul class="o-typography-list o-typography-list--unordered">
<li>
<p>List of paragraphs</p><p>
</p><p>List of paragraphs</p><p>
</p></li>
<li>
<p>List of paragraphs</p><p>
</p><p>List of paragraphs</p><p>
</p></li>
</ul>
<ol class="o-typography-list o-typography-list--ordered">
<li>
<p>Ordered list of paragraphs</p><p>
</p><p>Ordered list of paragraphs</p><p>
</p></li>
<li>
<p>Ordered list of paragraphs</p><p>
</p><p>Ordered list of paragraphs</p><p>
</p></li>
</ol>
</div>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>
<h6>Heading level 6</h6>
<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>
<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>