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

Headings.

<h2 class="o-typography-heading-level-1">
  Heading level 1 &#x2014; Don&#x2019;t settle for black and white
</h2>
<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>
<h6 class="o-typography-heading-level-6">
  Heading level 6 &#x2014; Don&#x2019;t settle for black and white
</h6>

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 o-typography-link--external"
    >sit amet consectetur</a
  >
  adipisicing elit. Non atque doloribus quaerat, esse ipsum doloremque.
</p>

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

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

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>
  <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>
Status
active Origami v1
Switch component view

GitHub Repository

Install o-typography

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

If running a Manual Build, run npm install "o-typography@^6.4.6".

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: #origami-support
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: #origami-support
Email: origami.support@ft.com