Typography
Font families, type scale, and typographic conventions.
Font families
| Variant | When to use |
|---|---|
--font-sans | Gibson — Latin, Cyrillic. Primary UI font for headings, labels, and body text. |
--font-serif | Bitter — Latin, Cyrillic. Long-form editorial content and pull quotes. |
--font-mono | Fira Code — Latin. Code blocks, inline code, and terminal output. |
--font-arabic | Noto Naskh Arabic — Arabic (RTL). Default body and heading font for the Arabic locale. |
--font-chinese-sans | Noto Sans SC — Simplified Chinese. Sans-serif body text for the Chinese locale. |
--font-chinese-serif | Noto Serif SC — Simplified Chinese. Serif/editorial for the Chinese locale. |
The i18n fonts are loaded via next/font at build time. Arabic text renders right-to-left automatically when the page locale is set to ar.
Latin type scale
Sans — Gibson
--font-family-sans
Weights
400The quick brown fox jumps over the lazy dog
500The quick brown fox jumps over the lazy dog
600The quick brown fox jumps over the lazy dog
xs
The quick brown fox jumps over the lazy dogsm
The quick brown fox jumps over the lazy dogbase
The quick brown fox jumps over the lazy doglg
The quick brown fox jumps over the lazy dogxl
The quick brown fox jumps over the lazy dog2xl
The quick brown fox jumps over the lazy dog3xl
The quick brown fox jumps over the lazy dog4xl
The quick brown fox jumps over the lazy dog5xl
The quick brown fox jumps over the lazy dog6xl
The quick brown fox jumps over the lazy dogSerif — Bitter
--font-family-serif
Weights
400The quick brown fox jumps over the lazy dog
500The quick brown fox jumps over the lazy dog
600The quick brown fox jumps over the lazy dog
700The quick brown fox jumps over the lazy dog
xs
The quick brown fox jumps over the lazy dogsm
The quick brown fox jumps over the lazy dogbase
The quick brown fox jumps over the lazy doglg
The quick brown fox jumps over the lazy dogxl
The quick brown fox jumps over the lazy dog2xl
The quick brown fox jumps over the lazy dog3xl
The quick brown fox jumps over the lazy dog4xl
The quick brown fox jumps over the lazy dog5xl
The quick brown fox jumps over the lazy dog6xl
The quick brown fox jumps over the lazy dogMono — Fira Code
--font-family-mono
Weights
400const fn = (x: number) => x * 2;
500const fn = (x: number) => x * 2;
600const fn = (x: number) => x * 2;
xs
const fn = (x: number) => x * 2;sm
const fn = (x: number) => x * 2;base
const fn = (x: number) => x * 2;lg
const fn = (x: number) => x * 2;xl
const fn = (x: number) => x * 2;2xl
const fn = (x: number) => x * 2;3xl
const fn = (x: number) => x * 2;4xl
const fn = (x: number) => x * 2;5xl
const fn = (x: number) => x * 2;6xl
const fn = (x: number) => x * 2;Arabic type scale
Arabic — Noto Naskh Arabic
RTL--font-family-arabic
Weights
400الحق في التنمية حق من حقوق الإنسان غير قابل للتصرف
500الحق في التنمية حق من حقوق الإنسان غير قابل للتصرف
600الحق في التنمية حق من حقوق الإنسان غير قابل للتصرف
700الحق في التنمية حق من حقوق الإنسان غير قابل للتصرف
sm
الحق في التنمية حق من حقوق الإنسان غير قابل للتصرفbase
الحق في التنمية حق من حقوق الإنسان غير قابل للتصرفlg
الحق في التنمية حق من حقوق الإنسان غير قابل للتصرفxl
الحق في التنمية حق من حقوق الإنسان غير قابل للتصرف2xl
الحق في التنمية حق من حقوق الإنسان غير قابل للتصرف4xl
الحق في التنمية حق من حقوق الإنسان غير قابل للتصرفChinese type scale
Chinese Sans — Noto Sans SC
--font-family-chinese-sans
Weights
400国际电信联盟致力于连接世界各地的人民
500国际电信联盟致力于连接世界各地的人民
700国际电信联盟致力于连接世界各地的人民
sm
国际电信联盟致力于连接世界各地的人民base
国际电信联盟致力于连接世界各地的人民lg
国际电信联盟致力于连接世界各地的人民xl
国际电信联盟致力于连接世界各地的人民2xl
国际电信联盟致力于连接世界各地的人民4xl
国际电信联盟致力于连接世界各地的人民Chinese Serif — Noto Serif SC
--font-family-chinese-serif
Weights
400国际电信联盟致力于连接世界各地的人民
600国际电信联盟致力于连接世界各地的人民
700国际电信联盟致力于连接世界各地的人民
sm
国际电信联盟致力于连接世界各地的人民base
国际电信联盟致力于连接世界各地的人民lg
国际电信联盟致力于连接世界各地的人民xl
国际电信联盟致力于连接世界各地的人民2xl
国际电信联盟致力于连接世界各地的人民4xl
国际电信联盟致力于连接世界各地的人民Usage
Apply type styles using Tailwind's utility classes:
html
<h1 class="font-sans text-4xl font-bold">Page title</h1> <p class="font-serif text-lg leading-relaxed">Editorial paragraph.</p> <code class="font-mono text-sm">const x = 42;</code>
3 lines of html code
Prose presets
The @itu/mdx package provides prose presets that apply the correct font, size, and spacing to long-form content automatically. When writing MDX documentation, prose styles are applied by default — no extra classes needed.