Typography

Utilise a full range of typography to more clearly communicate your content.

Contents

1. Headings
2. Paragraphs
3. Blockquotes
4. Chips

Headings

Write all headings in sentence case.

Use heading tags, such as <h1>, <h2> and so on, to tag the headings on a page. Apply a heading class, such as tna-heading-l, to style them visually. Style headings consistently to create a clear content structure throughout your service.

Headings contain a single sentence and do not need a full stop.

Large and extra large headings are Supria Sans Cond Medium and smaller headings are Open Sans Bold.

<h1 class="tna-heading-xl">tna-heading-xl</h1>
<h2 class="tna-heading-l">tna-heading-l</h2>
<h3 class="tna-heading-m">tna-heading-m</h3>
<h4 class="tna-heading-s">tna-heading-s</h4>

Headings with supertitles

Sometimes you may need to make it clear that a page is part of a larger section or group. To do this, you can use a heading group with a supertitle above the main heading.

The supertitle style uses chips.

<hgroup class="tna-hgroup-xl">
  <p class="tna-hgroup__supertitle">Supertitle</p>
  <h1 class="tna-hgroup__title">Title</h1>
</hgroup>

If the caption should be considered part of the page heading, you can also nest the supertitle within the heading.

<hgroup class="tna-hgroup-xl">
  <h1>
    <span class="tna-hgroup__supertitle">Supertitle</span>
    <span class="tna-hgroup__title">Title</span>
  </h1>
</hgroup>

Paragraphs

Body

The default paragraph font size is 18px on large and medium devices and 17px on small and tiny devices.

All paragraphs within .tna-template are styled with the correct font and colour without the need for additional classes.

Width

Line lengths should not exceed about 110–120 characters. This increases the readability of the text.

Use the TNA Frontend grid system to help limit line lengths. Body copy should be contained in:

• two-thirds width on large devices (tna-column--width-2-3)
• five-sixths width on medium devices (tna-column--width-5-6-medium)
• full width on small and tiny devices (tna-column--full-small, tna-column--full-tiny)

Using the standard widths that the grid system provides, these classes produce line lengths of no more than about 100–120 characters across all devices.

<div class="tna-container">
  <div class="tna-column tna-column--width-2-3 tna-column--width-5-6-medium tna-column--full-small tna-column--full-tiny">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consequat semper sagittis. Quisque magna nisl, vulputate a nunc id, efficitur luctus metus. Sed viverra metus sed lacus iaculis, at ultricies quam tristique.</p>
    <p>Integer ipsum nisl, tempus sed quam vel, ultricies finibus tortor. Vestibulum laoreet sagittis risus at accumsan.</p>
    <p>Curabitur ut varius nulla. Sed nec quam massa. Nulla vitae diam at purus tincidunt convallis sed non neque. Cras condimentum molestie nunc, sed auctor ex iaculis ut.</p>
  </div>
</div>

Large

You can use a larger paragraph as an introduction to the page or section.

<p class="tna-large-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>

There is also a slightly bolder version of the large paragraph.

<p class="tna-large-paragraph tna-large-paragraph--bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>

Small

You can use the <small> element sparingly to make your paragraph font size smaller.

<p><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</small></p>

Bold

You can use the <strong> element to increase the weight of your paragraph font.

Use bold sparingly. Overuse will make it difficult for users to know which parts of your content they need to pay the most attention to.

<p>Your reference number is <strong>ABC12345678</strong>. Use this to track your application. Updates will be sent to <strong>name@example.com</strong>.</p>

Scene setter

Use the scene setter as a stylistic alternative to the large body text.

<p class="tna-scene-setter">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>

Blockquotes

<blockquote class="tna-blockquote" cite="https://www.azquotes.com/quote/1728">
  <div class="tna-blockquote__quote">
    <p>A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.</p>
  </div>
  <footer class="tna-blockquote__citation">Douglas Adams, <cite>Mostly Harmless</cite></footer>
</blockquote>

Chips

Chips are small "tags" of information. They are used in the supertitles of heading groups as well as labels in the top left of some card components and index grid items.

The chip should be short, at most about 2–3 words or 12–15 characters.

<span class="tna-chip">Online event</span>

By default, the chip is a contrasting colour to the text, usually inverted. It is controlled by the accent colour of the page.

You can use a plain style chip to avoid too much contrast in visually complex pages.

<span class="tna-chip tna-chip--plain">Online event</span>

Chips can be presented in a list format with a chip list.