Typography

System fonts only, so a page loads with zero font requests. The scale is small on purpose.

Font stack

system-ui, "Noto Sans", Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif

Noto Sans is named early because it covers the Latin Extended ranges that Yoruba, Hausa, Igbo, Wolof and Fula need. See Language and script for the test lines.

Scale

4xl · 48px · page title on wide screens

3xl · 40px · page title

2xl · 32px · section heading

xl · 24px · subsection, lead text on wide screens

lg · 20px · lead text

md · 18px · body text in the large density

sm · 16px · body text

xs · 14px · hints, captions, table text. The smallest size allowed.

Headings

Plain h1 to h6 are sized by default. Only the page title should be extra large, and only when the page asks for it with ag-heading-xl. Use one h1 per page.

Renew a passport

Before you start

What you will need

Body text at 16px with a line height of 1.55, so diacritics never collide with the line above.

Lead text introduces a page. One paragraph, no more.

Captions and hints are 14px in muted ink.

Show HTML

<h1 class="ag-heading-xl">Renew a passport</h1>
<h2>Before you start</h2>
<h3>What you will need</h3>
<p>Body text at 16px with a line height of 1.55, so diacritics never collide with the line above.</p>
<p class="ag-lead">Lead text introduces a page. One paragraph, no more.</p>
<p class="ag-caption">Captions and hints are 14px in muted ink.</p>

Density

Set data-ag-density on html or any container.

large raises body text to 18px for public-facing pages aimed at older or low-vision readers.
compact tightens spacing and lowers targets to 44px for dashboards and admin screens.

Rules

Body text never goes below 16px. Hints and captions never below 14px.
Running text sits in ag-prose, which caps the line at 65 characters.
Do not use uppercase for anything but badges. It is harder to read and worse for screen readers.
Bold is the only emphasis. Italic is poorly supported in many system fonts for African languages.