EN 
Українська
Polski
Español
Deutsch
日本語
Italiano
Português (BR)
Français
العربية
Nederlands
中文
한국어
हिन्दी
Türkçe
Tiếng Việt
Русский
Bahasa Indonesia
فارسی
বাংলা
ไทย
Filipino
Kiswahili
اردو
Bahasa Melayu
தமிழ்
עברית
Ελληνικά
ਪੰਜਾਬੀ
አማርኛ
မြန်မာဘာသာ
ខ្មែរ
ქართული
नेपाली
Монгол хэл
Հայերեն
සිංහල
ລາວ
Čeština
Română
Magyar
Български
Svenska
Dansk
Suomi
Norsk
Slovenčina
Hrvatski
Српски
Slovenščina
Lietuvių
Latviešu
Eesti
Íslenska
Shqip
Македонски
Bosanski
Malti
Azərbaycanca
Қазақша
O'zbekcha
Тоҷикӣ
КыргызчаConsistent typographic scale for headings, body, and captions across d
Use a 1.2–1.25 modular scale for balanced steps. Base body = 16px.
Favor readability over dramatic jumps; keep H1 ≤ 2.5x body to avoid hierarchy collapse.
Responsive Adjustments
On mobile, reduce H1–H3 by ~12–16%: H1 34px, H2 28px, H3 22px. Keep body at 16px minimum; small at 14px.
Maintain line-height 1.4–1.6 for headings; 1.65–1.8 for body.
Headings should be short (≤2 lines) to keep hierarchy clear.
Use letter spacing -0.01em for H1–H3 to tighten large text.
Do not use small text for interactive controls.
Frequently asked questions
What is the minimum recommended font size for body text, and why should I avoid embedding text within images?
The minimum recommended font size for body text is 16px to ensure readability. Avoiding embedded text in images helps maintain sufficient contrast with backgrounds and preserves appropriate line lengths (between 55 and 80 characters) for comfortable reading.
What are exposure tokens like `--font-size-h1: 40px;`, and how should I use them?
Exposure tokens, such as `--font-size-h1: 40px;` and `--font-size-body: 16px;`, are reusable values that simplify font size management. You can map these tokens to text styles in tools like Figma or use CSS variables with `clamp()` for dynamic scaling.
© 2024 AI Usage by Countries. Font ?
© 2024 AI Usage by Countries. This refers to the copyright notice regarding AI usage and reinforces the established font size hierarchy within the design system.
Last updated: 2024 | Design System?
The last update to this design system was in 2024. This information indicates the current version of the documentation and guidelines.
▶ Try it live
Everything above runs in your browser — open Hash Function Avalanche Visualizer and change the parameters while it is running. Nothing is installed, nothing is uploaded, the whole model lives in one tab.