Style Guide Menu

Typography


Typographic scale Back to top

This is the basic typographic scale provided by the Toolkit. For this scale, only the h1 and small elements have a bigger size from the medium breakpoint.

CSS classes are also provided for these sizes, so that should a developer need to create a certain visual hierarchy, they can, without breaking the semantics of the page. This is known as a Double strand hierarchy.

H1 (36px, 30px mobile)

H2 (21px)

H3 (19px)

H4 (16px)

H5 (13px)
H6 (11px)

body (base, 16px)

small (13px desktop (11px mobile)

Using classes: h1, h2, etc.

<h1>H1 (36px, 30px mobile)</h1>
<h2>H2 (21px)</h2>
<h3>H3 (19px)</h3>
<h4>H4 (16px)</h4>
<h5>H5 (13px)</h5>
<h6>H6 (11px)</h6>
<p>body (base, 16px)</p>
<p><small>small (13px desktop (11px mobile)</small></p>
<p>Using classes: <span class="h1">h1</span>, <span class="h2">h2</span>, etc.</p>

Custom scale Back to top

The typographic scale can be customised by overriding the default variable. To do so, set a new $typographic-scale variable with at least a base property containing all the default sizes. You can also pass optional extra breakpoints containing the sizes you want to modify as the screens get bigger:

$typographic-scale: (
  base: (
    body: 24px, // This is the default size for the main content
    h1: 40px,
    h2: 32px,
    h3: 28px,
    h4: 24px,
    h5: 20px,
    h6: 18px,
    blockquote: 28px,
    small: 16px
  ),
  medium: (
    h1: 50px // h1 will be 50px from medium breakpoint and above
  ),
  large: (
    h2: 40px // h2 will be 40px from large breakpoint and above
  )
);

Typographic styles Back to top

Font style can be regular, bold, italic, or bold-italic.

Using standard HTML elements: strong, bold, emphasized, italic, deleted.

Abbreviation: HTML. Text links: link.

This text is a short inline quotation.

This is a block quotation.

This is a citation

Intro text is the size of an h2 element.

<p>Font style can be <span class="regular">regular</span>, <span class="bold">bold</span>, <span class="italic">italic</span>, or <span class="bold-italic">bold-italic</span>.</p>
<p>Using standard HTML elements: <strong>strong</strong>, <b>bold</b>, <em>emphasized</em>, <i>italic</i>, <del>deleted</del>.</p>
<p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr>. Text links: <a href="#">link</a>.</p>
<p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation.</q></p>
<blockquote>
    <p>This is a block quotation.</p>
    <cite>This is a citation</cite>
</blockquote>
<p class="intro-text">Intro text is the size of an <code>h2</code> element.</p>