Typography is the art of visually organising text. 95% of content is text. Bad typography drives users away.
Font types
Serif, Sans-serif, Display, Monospace, Script.
Choice
1-2 fonts. Heading and body.
Google Fonts
1500+ free. Inter, Roboto, Open Sans, Poppins.
font-display: swap
Helps LCP.
Self-hosting
Speed and GDPR.
Type scale
1.125, 1.25, 1.333, 1.618 (golden ratio).
Line height
Body 1.5-1.8, headings 1.1-1.3.
Letter spacing
Headings -0.02em, body 0, UPPERCASE +0.05em.
Line length
45-75 characters. max-width: 65ch.
Hierarchy
H1 48px Bold, H2 32px SemiBold, body 16px Regular.
Responsive
clamp(16px, 4vw, 24px).
Variable fonts
One file with all weights. Inter Variable.
Sayt.uz
Inter Variable. 1.25 scale. Body line height 1.7. Self-hosted. font-display: swap.