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
Switch component view

GitHub Repository

Install o-typography

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

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-typography@^7.0.1".

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