Basics

• typography follows the rules from our brand guidelines with some web specific adaptations (for responsive etc)
• we use Lato, which can be referenced or downloaded from Google
• follow NICE’s style guide for writing.

Usage

• there are set of typographic SASS constructs to allow consistent use of responsive typography
• favour using mixins e.g. @include font-size(1) rather than specifying font sizes directly
• we use REMs and automatically add fallbacks to px for older browsers via PostCSS.

Headings

• use sentence case for headings
• use headings consistently to create a clear hierarchy
• don’t skip headings; use classes like .h1, .h2 etc or mixins like @include h1 etc if you need a visual difference in heading
• do not put a full stop at the end of the heading.

<h1>This is a heading 1</h1>
<h2>This is a heading 2</h2>
<h3>This is a heading 3</h3>
<h4>This is a heading 4</h4>
<h5>This is a heading 5</h5>
<h6>This is a heading 6</h6>

Body copy

Avoid using long lines of text, as it makes it harder for the user to read. Aim for between 45 to 75 characters per line, as it is regarded as the optimal range for a single-column page. Reference: The Elements of Typographic Style Applied to the web

• only use smaller font sizes if there’s a user need (16px, 14px)
• follow the NICE colour palette for text, the only coloured text should be links
• use class="lead" for leading, important, introductory paragraphs
• use only 1 lead per page
• body copy is 0 on our modular scale
• in SASS, body copy is @include font-size(0).

<p class="lead">
    Curabitur dapibus risus at sem fermentum rhoncus sit amet vitae lectus. Morbi molestie, tortor et ultrices eleifend, nisi velit suscipit sem, et pulvinar nunc sapien sit amet risus.
</p>
<p>
    Donec tincidunt pretium mi, sit amet mattis leo auctor quis. In hac habitasse platea dictumst. Maecenas condimentum fringilla arcu eu convallis. Maecenas varius, orci ut fringilla varius, nibh felis sodales nunc, id ornare urna ex et urna.
</p>

Inline text

Bold

To emphasize a snippet of text with a heavier font-weight use the <strong> tag.

<strong>rendered as bold text</strong>

Italics

To emphasize a snippet of text with italics <em> tag.

<em>rendered as italicized text</em>

Strikethrough text

For indicating blocks of text that are no longer relevant use the <s> tag.

<s>This line of text is meant to be treated as no longer accurate.</s>

Small text

For de-emphasizing inline or blocks of text, use the <small> to set text at 85% the size of the parent. Alternatively, use .small instead.

<p>This is some text <small>with some</small> <span class="small">smaller text</span></p>

Alternate elements

Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

Quotations

• use when you want to emphasize excerpts of text
• use a citation where possible.

With citation

<blockquote class="quote">
    <p>We do the right work in the right way at NICE. We mix content, dev, design and research at the start to solve user problems.  We produce things quickly, get data and refine. </p>
    <footer>
        <cite><strong>Dafydd - Content Team</strong></cite>
    </footer>
</blockquote>

Lists

• follow the bullet points guide lines on the NICE style guide
• use unordered or ordered lists appropriately to semantically define content
• list items start with a lowercase letter and have no full stop at the end.

Bulleted list

Use a list to display a set of terms, phrases, or statements clearly.

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li><a href="#">item 3</a></li>
    <li>
        nested list:
        <ul>
            <li>item a</li>
            <li>item b.</li>
        </ul>
    </li>
</ul>

Numbered list

Use numbered lists when you want to indicate a hierarchy.

<ol>
    <li><a href="#">item 1</a></li>
    <li>item 2</li>
    <li>item 3.</li>
</ol>

Unstyled

Unstyled lists don’t have bullets and can be uses for lists of links

<ul class="list list--unstyled">
    <li><a href="#">list item</a></li>
    <li><a href="#">list item</a></li>
</ul>

Piped

Use piped lists as an alternative to unstyled lists. Use them to display a finite number of links horizontally, for example guidance statuses. Use a maximum of 4 links:

<ul class="list list--piped">
    <li><a href="#">Published</a></li>
    <li><a href="#">In consultation</a></li>
    <li><a href="#">In development</a></li>
    <li><a href="#">Proposed</a></li>
</ul>

Edit on GitHub