Typography

Font

The web font chosen for this design system is Noto Sans from Google.

Fluid typography

Using a combination of the clamp() CSS function and the vw unit, font sizes adapt between lower and upper limits based on viewport width.

For example, regular body copy ranges from 15px at the minimum viewport width, to 16px from a viewport width of 1120px and above. Note: relative rem units are used that equate to the pixel values mentioned here.

The Utopia fluid typescale calculator was used to generate the design system typescale.

Nine font sizes are defined as CSS custom properties (CSS variables) in assets-src/styles/sass/00-settings/_font-sizes.scss.

The names of the CSS variables generated by the Utopia tool have been adapted so they are name-spaced for this design system and use kebab case. From largest to smallest font size, these are:

  • --w3c-text-7
  • --w3c-text-6
  • --w3c-text-5
  • --w3c-text-4
  • --w3c-text-3
  • --w3c-text-2
  • --w3c-text-1
  • --w3c-text-0 (used for body copy)
  • --w3c-text-01

Font size override classes

The font size variables previously mentioned correspond to the following classes, which can be used to override font size:

  • .text-xl
  • .text-l
  • .h1
  • .h2
  • .h3
  • .h4
  • .h5
  • .h6 (the same font size as body copy)
  • .text-sm

Classes .h1 through .h6 also correspond to the sizes of headings <h1> through <h6>.

Open this Font override classes in a new tab

HTML:

<p class="text-xl">text-xl</p>

<p class="text-l">text-l</p>

<p class="h1">h1</p>

<p class="h2">h2</p>

<p class="h3">h3</p>

<p class="h4">h4</p>

<p class="h5">h5</p>

<p class="h6">h6</p>

<p class="text-sm">text-sm</p>

Headings

Use the appropriate semantic <h#> to mark up headings. Check that headings are ordered hierarchically, without skipping levels: <h2> is the next level down from <h1>, <h3> is the next level down from <h2>, etc.

Heading anchors

There is a script which automatically adds anchor links to headings <h2> through <h6>, with some exceptions. Read the heading anchors documentation.

Lead paragraph

A lead paragraph is an introductory paragraph with a slightly larger font size that you can use at the start of a page to summarize the content. It should only be used once per page if needed.

Open this Lead paragraph in a new tab

HTML:

<p class="lead">This is a lead paragraph.</p>