Typography and Spacing

‹ Back

By default, ornament does not assume anything about content spacing, formatting or styling. It's entirely up to the document author to specify how things should be styled and spaced out. Luckily, this is super easy to do with content and spacing classes.


WYSIWYG content

To style a large area of content you simply use the class content. This is usually applied to areas of content generated by a WYSIWYG editor. It will automatically space out and style headings, paragraphs, lists, images and everything else an editor spits out:

Heading one

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur fuga vitae numquam accusantium quam quidem ex impedit aperiam modi ab.

Heading two

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, eligendi!

Heading three

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius provident voluptas aspernatur at dolor, libero placeat eum beatae illum ducimus.

Heading four

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem quo aliquam velit voluptas laborum eum quod in qui rerum possimus consequatur fugiat dolor alias eius, reiciendis repellat accusamus optio tenetur aspernatur veritatis perferendis, odio illo! Eveniet dolor earum porro est totam, minus adipisci quos exercitationem! Reprehenderit dolore ipsum repellat inventore.

Heading five

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, alias ullam, nesciunt earum distinctio recusandae odit obcaecati temporibus quasi rem!

Heading six

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto cum assumenda minus, minima odio cupiditate, nulla autem qui animi iste, modi aperiam. Officia eius quis, alias ipsam odio aliquid repellat.

  • Lorem
  • ipsum
  • dolor
    • Lorem
    • ipsum
    • dolor
    • sit
    • amet
  • sit
  • amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores repudiandae molestias excepturi non odio maiores beatae tenetur explicabo, blanditiis minus.

  1. Lorem
  2. ipsum
  3. dolor
    • Lorem
    • ipsum
    • dolor
    • sit
    • amet
  4. sit
  5. amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores repudiandae molestias excepturi non odio maiores beatae tenetur explicabo, blanditiis minus.

<div class="content">
  <h1>Heading one</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur fuga vitae numquam accusantium quam quidem ex impedit aperiam modi ab.</p>
  <h2>Heading two</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, eligendi!</p>
  <h3>Heading three</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius provident voluptas aspernatur at dolor, libero placeat eum beatae illum ducimus.</p>
  <h4>Heading four</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem quo aliquam velit voluptas laborum eum quod in qui rerum possimus consequatur fugiat dolor alias eius, reiciendis repellat accusamus optio tenetur aspernatur veritatis perferendis, odio illo! Eveniet dolor earum porro est totam, minus adipisci quos exercitationem! Reprehenderit dolore ipsum repellat inventore.</p>
  <h5>Heading five</h5>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, alias ullam, nesciunt earum distinctio recusandae odit obcaecati temporibus quasi rem!</p>
  <h6>Heading six</h6>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto cum assumenda minus, minima odio cupiditate, nulla autem qui animi iste, modi aperiam. Officia eius quis, alias ipsam odio aliquid repellat.</p>
  <ul>
    <li>Lorem </li>
    <li>ipsum </li>
    <li>dolor 
      <ul>
        <li>Lorem </li>
        <li>ipsum </li>
        <li>dolor </li>
        <li>sit </li>
        <li>amet</li>
      </ul>
    </li>
    <li>sit </li>
    <li>amet</li>
  </ul>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores repudiandae molestias excepturi non odio maiores beatae tenetur explicabo, blanditiis minus.</p>
  <ol>
    <li>Lorem </li>
    <li>ipsum </li>
    <li>dolor 
      <ul>
        <li>Lorem </li>
        <li>ipsum </li>
        <li>dolor </li>
        <li>sit </li>
        <li>amet</li>
      </ul>
    </li>
    <li>sit </li>
    <li>amet</li>
  </ol>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores repudiandae molestias excepturi non odio maiores beatae tenetur explicabo, blanditiis minus.</p>
</div>

Compressed

For smaller areas such as tiles or panels we have the compressed class that tightens things up significantly. This class only determines spacing and will not style headings or lists.

Heading one

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur fuga vitae numquam accusantium quam quidem ex impedit aperiam modi ab.

Heading two

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, eligendi!

Heading three

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius provident voluptas aspernatur at dolor, libero placeat eum beatae illum ducimus.

Heading four

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem quo aliquam velit voluptas laborum eum quod in qui rerum possimus consequatur fugiat dolor alias eius, reiciendis repellat accusamus optio tenetur aspernatur veritatis perferendis, odio illo! Eveniet dolor earum porro est totam, minus adipisci quos exercitationem! Reprehenderit dolore ipsum repellat inventore.

Heading five

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, alias ullam, nesciunt earum distinctio recusandae odit obcaecati temporibus quasi rem!

Heading six

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto cum assumenda minus, minima odio cupiditate, nulla autem qui animi iste, modi aperiam. Officia eius quis, alias ipsam odio aliquid repellat.

  • Lorem
  • ipsum
  • dolor
    • Lorem
    • ipsum
    • dolor
    • sit
    • amet
  • sit
  • amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores repudiandae molestias excepturi non odio maiores beatae tenetur explicabo, blanditiis minus.

  1. Lorem
  2. ipsum
  3. dolor
    • Lorem
    • ipsum
    • dolor
    • sit
    • amet
  4. sit
  5. amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores repudiandae molestias excepturi non odio maiores beatae tenetur explicabo, blanditiis minus.

<div class="compressed">
  <h1>Heading one</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur fuga vitae numquam accusantium quam quidem ex impedit aperiam modi ab.</p>
  <h2>Heading two</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, eligendi!</p>
  <h3>Heading three</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius provident voluptas aspernatur at dolor, libero placeat eum beatae illum ducimus.</p>
  <h4>Heading four</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem quo aliquam velit voluptas laborum eum quod in qui rerum possimus consequatur fugiat dolor alias eius, reiciendis repellat accusamus optio tenetur aspernatur veritatis perferendis, odio illo! Eveniet dolor earum porro est totam, minus adipisci quos exercitationem! Reprehenderit dolore ipsum repellat inventore.</p>
  <h5>Heading five</h5>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, alias ullam, nesciunt earum distinctio recusandae odit obcaecati temporibus quasi rem!</p>
  <h6>Heading six</h6>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto cum assumenda minus, minima odio cupiditate, nulla autem qui animi iste, modi aperiam. Officia eius quis, alias ipsam odio aliquid repellat.</p>
  <ul>
    <li>Lorem </li>
    <li>ipsum </li>
    <li>dolor 
      <ul>
        <li>Lorem </li>
        <li>ipsum </li>
        <li>dolor </li>
        <li>sit </li>
        <li>amet</li>
      </ul>
    </li>
    <li>sit </li>
    <li>amet</li>
  </ul>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores repudiandae molestias excepturi non odio maiores beatae tenetur explicabo, blanditiis minus.</p>
  <ol>
    <li>Lorem </li>
    <li>ipsum </li>
    <li>dolor 
      <ul>
        <li>Lorem </li>
        <li>ipsum </li>
        <li>dolor </li>
        <li>sit </li>
        <li>amet</li>
      </ul>
    </li>
    <li>sit </li>
    <li>amet</li>
  </ol>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores repudiandae molestias excepturi non odio maiores beatae tenetur explicabo, blanditiis minus.</p>
</div>

Headings and content-spacing

Not all heading tags should dictate their styling. Sometimes semantically you need a h6 that looks like a h2. This can be achieved by using heading classes.

When customising headings like this we can assume you have control over the HTML that's getting output, so do not use the content class above as it will fight with the heading styles you assign and will turn in to a nightmare to manage. Instead, you can use content-spacing to space out your content, leaving the headings unstyled so you can come in and assign their classes as you see fit.

Heading one with heading-six class

Heading two with heading-four class

Heading six with heading-two class

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, perspiciatis?

<div class="content-spacing">
  <h1 class="heading-six">Heading one with heading-six class</h1>
  <h2 class="heading-four">Heading two with heading-four class</h2>
  <h6 class="heading-two">Heading six with heading-two class</h6>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, perspiciatis?</p>
</div>

Lists

If you have a spot where lists need to look like lists, you can do so by adding the content-lists to the wrapper:

  • Lorem
  • ipsum
  • dolor
    • Lorem
    • ipsum
    • dolor
    • sit
    • amet
  • sit
  • amet
  1. Lorem
  2. ipsum
  3. dolor
    • Lorem
    • ipsum
    • dolor
    • sit
    • amet
  4. sit
  5. amet
<div class="content-lists">
  <ul>
    <li>Lorem </li>
    <li>ipsum </li>
    <li>dolor 
      <ul>
        <li>Lorem </li>
        <li>ipsum </li>
        <li>dolor </li>
        <li>sit </li>
        <li>amet</li>
      </ul>
    </li>
    <li>sit </li>
    <li>amet</li>
  </ul>
  <ol>
    <li>Lorem </li>
    <li>ipsum </li>
    <li>dolor 
      <ul>
        <li>Lorem </li>
        <li>ipsum </li>
        <li>dolor </li>
        <li>sit </li>
        <li>amet</li>
      </ul>
    </li>
    <li>sit </li>
    <li>amet</li>
  </ol>
</div>

content-lists also supports a few type attributes on lists:

  1. Lorem
  2. ipsum
  3. dolor
  4. sit
  5. amet
  1. Lorem
  2. ipsum
  3. dolor
  4. sit
  5. amet
  1. Lorem
  2. ipsum
  3. dolor
  4. sit
  5. amet
  1. Lorem
  2. ipsum
  3. dolor
  4. sit
  5. amet
  • Lorem
  • ipsum
  • dolor
  • sit
  • amet
<div class="content-lists">
  <ol type="a">
    <li>Lorem </li>
    <li>ipsum </li>
    <li>dolor</li>
    <li>sit </li>
    <li>amet</li>
  </ol>
  <ol type="aup">
    <li>Lorem </li>
    <li>ipsum </li>
    <li>dolor</li>
    <li>sit </li>
    <li>amet</li>
  </ol>
  <ol type="i">
    <li>Lorem </li>
    <li>ipsum </li>
    <li>dolor</li>
    <li>sit </li>
    <li>amet</li>
  </ol>
  <ol type="iup">
    <li>Lorem </li>
    <li>ipsum </li>
    <li>dolor</li>
    <li>sit </li>
    <li>amet</li>
  </ol>
  <ul type="1">
    <li>Lorem </li>
    <li>ipsum </li>
    <li>dolor</li>
    <li>sit </li>
    <li>amet</li>
  </ul>
</div>

Inline typography styles

Along with the content classes above, we have some element styling out of the box to make marking up your document easier. Unlike headings, these tags are usually used in specific-enough situations that styling should be assumed:

Regular text with a link

Small text with a link

Deleted text with a link

Superscript with a link

Subscript with a link

.type--primary with a link

.type--passive with a link

.type--grey with a link

.type--success with a link

.type--error with a link

.type--alert with a link

.type--notice with a link

<p>Regular text with <a href="#">a link</a></p>
<p><small>Small text with <a href="#">a link</a></small></p>
<p><del>Deleted text with <a href="#">a link</a></del></p>
<p><sup>Superscript with <a href="#">a link</a></sup></p>
<p><sub>Subscript with <a href="#">a link</a></sub></p>
<p class="type--primary">.type--primary with <a href="#">a link</a></p>
<p class="type--passive">.type--passive with <a href="#">a link</a></p>
<p class="type--grey">.type--grey with <a href="#">a link</a></p>
<p class="type--success">.type--success with <a href="#">a link</a></p>
<p class="type--error">.type--error with <a href="#">a link</a></p>
<p class="type--alert">.type--alert with <a href="#">a link</a></p>
<p class="type--notice">.type--notice with <a href="#">a link</a></p>

If you have a crazy long word that is just breaking everything, you can add .type--wrap on the text to force wrap it:

Loremipsumdolorsitamet,consecteturadipisicingelit.Nobisquamdoloremeaquisquamatfugiatnostrumquoquidemestexcepturi.Loremipsumdolorsitamet,consecteturadipisicingelit.Nobisquamdoloremeaquisquamatfugiatnostrumquoquidemestexcepturi.
<span class="type--wrap">Loremipsumdolorsitamet,consecteturadipisicingelit.Nobisquamdoloremeaquisquamatfugiatnostrumquoquidemestexcepturi.Loremipsumdolorsitamet,consecteturadipisicingelit.Nobisquamdoloremeaquisquamatfugiatnostrumquoquidemestexcepturi.</span>

Alternatively instead of wrapping it you can truncate it with the .type--ellipsis class.

Loremipsumdolorsitamet,consecteturadipisicingelit.Nobisquamdoloremeaquisquamatfugiatnostrumquoquidemestexcepturi.Loremipsumdolorsitamet,consecteturadipisicingelit.Nobisquamdoloremeaquisquamatfugiatnostrumquoquidemestexcepturi.
<span class="type--ellipsis">Loremipsumdolorsitamet,consecteturadipisicingelit.Nobisquamdoloremeaquisquamatfugiatnostrumquoquidemestexcepturi.Loremipsumdolorsitamet,consecteturadipisicingelit.Nobisquamdoloremeaquisquamatfugiatnostrumquoquidemestexcepturi.</span>

SASS Mixins

These content classes have mixins for making life easier on the CSS side. You can find the mixins by exploring the stylesheets/aspects folder.


Block spacing

There are several block-level spacing classes that can be used to evenly space out block-level elements.