Typography

Three font families, each with a job. The choices prioritise African language coverage and readability on the devices people actually use.

The font stack

Role	Font	CSS variable	Why
Body	Noto Sans	`--font-sans`	Broad language support including African diacritics
Display	Noto Serif	`--font-serif`	Elegant display type with matching language coverage
Code	JetBrains Mono	`--font-mono`	Built for developer readability

The language-coverage reason is the load-bearing one and is covered in internationalisation.

Loading them

const fontSans = Noto_Sans({ subsets: ["latin"], variable: "--font-sans" })
const fontSerif = Noto_Serif({ subsets: ["latin"], variable: "--font-serif" })
const fontMono = JetBrains_Mono({ subsets: ["latin"], variable: "--font-mono" })

Apply the variables to <html> and set the default with font-sans on <body>.

The type scale

Name	Class	Size	Line height	Usage
Display	`text-5xl`	48px	1.1	Hero headlines
Title 1	`text-4xl`	36px	1.15	Page titles
Title 2	`text-3xl`	30px	1.2	Section titles
Title 3	`text-2xl`	24px	1.25	Subsection titles
Heading	`text-xl`	20px	1.3	Card titles
Subheading	`text-lg`	18px	1.5	Lead paragraphs
Body	`text-body`	17px	1.5	Default body text
Caption	`text-sm`	14px	1.5	Secondary text, labels
Footnote	`text-xs`	14px	1.5	Metadata, timestamps

The published scale also defines a 72px display step for hero type on marketing surfaces.

The floor under the scale

Body text is 17px on every device, desktop included, and nothing readable is smaller than 14px: captions, metadata, badges and chart labels are all 14px or more, so text-xs and text-sm both paint 14px. Only display and heading sizes step down as screens grow; body and secondary text never do. See the Bundu floor for where the numbers come from and how to migrate from the 16px body and 12px footnote. Write body copy as text-body. The token layer registers a text-base step at 17px too, but a theme that also defines a colour named base (--color-base) can make the class ambiguous, and the registry has not yet decided how to settle it, so prefer text-body for now.

Serif or sans

Noto Serif for page titles and hero headlines, brand-level messaging, and section headings on landing pages. Noto Sans for everything else: body text, UI labels, buttons, inputs, navigation, card content, error messages.

<h1 className="font-serif text-4xl font-bold tracking-tight">Page title</h1>
<p className="text-body text-muted-foreground">Supporting body copy.</p>

Heading hierarchy

Use heading levels in order. Never skip from h1 to h3.

<h1>Page title</h1>          {/* exactly one per page */}
  <h2>Major section</h2>
    <h3>Subsection</h3>
    <h3>Subsection</h3>
  <h2>Major section</h2>
    <h3>Subsection</h3>
      <h4>Detail</h4>

Every page has exactly one <h1>. Screen readers build a page outline from this, so a skipped level is a navigation failure, not a styling quirk.

Line height and tracking

Context	Line height	Letter spacing
Display text	`leading-tight` (1.1–1.2)	`tracking-tight` (-0.025em)
Body text	`leading-relaxed` (1.5)	default
UI labels	`leading-normal` (1.5)	default
All-caps text	`leading-normal`	`tracking-widest` (0.1em)
Code	`leading-relaxed`	default

Tight tracking stops large headings looking spread out; wide tracking makes all-caps labels readable.

Brand wordmarks

Ecosystem brand names are rendered with an initial capital — Mukoko, Nyuchi, Shamwari, Bundu, Bushtrade, Lingo. This is a brand rule, not a stylistic preference, and it holds everywhere, including headings, labels and running text.

The typography component

The registry ships pre-styled elements:

npx shadcn@latest add https://api.mzizi.dev/v1/ui/typography

<TypographyH1>Page title</TypographyH1>
<TypographyLead>Introductory paragraph with larger text.</TypographyLead>
<TypographyH2>Section heading</TypographyH2>
<TypographyP>Standard body paragraph.</TypographyP>

Mzizi Roots

The registry

Registry architecture

Foundations

Patterns

Blocks

Charts

Content style

The font stack

Loading them

The type scale

The floor under the scale

Serif or sans

Heading hierarchy

Line height and tracking

Brand wordmarks

The typography component

​The font stack

​Loading them

​The type scale

​The floor under the scale

​Serif or sans

​Heading hierarchy

​Line height and tracking

​Brand wordmarks

​The typography component

The font stack

Loading them

The type scale

The floor under the scale

Serif or sans

Heading hierarchy

Line height and tracking

Brand wordmarks

The typography component