Typography
Typography in the Mukoko design system uses three font families, each with a specific purpose. The font choices prioritize African language support and readability across diverse devices.
Font stack
| Role | Font | CSS Variable | Why |
|---|---|---|---|
| Body | Noto Sans | --font-sans | Broad language coverage, excellent screen readability |
| Display | Noto Serif | --font-serif | Elegant headings, cultural weight for page titles |
| Code | JetBrains Mono | --font-mono | Monospaced, ligatures for code samples |
Loading fonts
Use next/font/google for automatic optimization and subsetting:
import { Noto_Sans, Noto_Serif, JetBrains_Mono } from "next/font/google"
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>.
Type scale
The type scale uses Tailwind’s default sizing with specific guidance for Mukoko apps:
| 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-base | 16px | 1.5 | Default body text |
| Caption | text-sm | 14px | 1.5 | Secondary text, labels |
| Footnote | text-xs | 12px | 1.5 | Metadata, timestamps |
| Micro | text-[10px] | 10px | 1.4 | Version numbers, badges |
When to use serif vs sans
Noto Serif (display/headings):
- Page titles and hero headlines
- Brand-level messaging
- Section headings on landing pages
- The word “mukoko” in display contexts
Noto Sans (body/UI):
- All body text and paragraphs
- UI labels, buttons, inputs
- Navigation items
- Card content
- Error messages and notifications
{/* Serif for page titles */}
<h1 className="font-serif text-4xl font-bold tracking-tight">
mukoko weather
</h1>
{/* Sans for body content */}
<p className="text-base text-muted-foreground">
AI-powered weather intelligence for Zimbabwe.
</p>Heading hierarchy
Use heading levels sequentially — never skip from h1 to h3:
<h1>Page title</h1> {/* 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 must have exactly one <h1>. Screen readers use heading hierarchy to build a page outline.
Line height and letter spacing
| Context | Line height | Letter spacing |
|---|---|---|
| Display text | leading-tight (1.1-1.2) | tracking-tight (-0.025em) |
| Body text | leading-relaxed (1.5) | Default (0) |
| UI labels | leading-normal (1.5) | Default (0) |
| All caps text | leading-normal | tracking-widest (0.1em) |
| Code | leading-relaxed | Default (0) |
Tight tracking on display text prevents large headings from looking too spread out. Wide tracking on all-caps labels improves readability.
Brand wordmarks
All Mukoko ecosystem brand names are rendered in lowercase:
- mukoko
- nyuchi
- shamwari
- bundu
- nhimbe
- bushtrade
- lingo
This is a brand rule, not a suggestion. The lowercase treatment is part of the visual identity.
Typography component
The registry includes a typography component with pre-styled elements:
import { TypographyH1, TypographyH2, TypographyP, TypographyLead } from "@/components/ui/typography"
<TypographyH1>Page title</TypographyH1>
<TypographyLead>Introductory paragraph with larger text.</TypographyLead>
<TypographyH2>Section heading</TypographyH2>
<TypographyP>Standard body paragraph.</TypographyP>Install it via:
npx shadcn@latest add https://registry.mukoko.com/api/v1/ui/typography