Amey-Thakur Web typography
Body text is the product for most sites. Get measure, leading, and loading right and the design is 80% done before a single decorative choice.
Method
- Set the measure first. 45-75 characters per line for body copy;
enforce with
max-width: 65chon prose containers, not on the page. Long-form reading quality collapses beyond 90ch faster than any font choice can rescue. - Build a modest scale. Base 1rem (never shrink the root), a ratio
around 1.2-1.333, and only the steps you use: sm, base, lg, xl, 2xl
covers most products. Make display sizes fluid with
clamp()(see responsive-design); body text stays fixed or barely fluid. - Tie leading to size and measure. Body: 1.5-1.7 line-height, unitless. Headings: 1.1-1.25. Long lines need more leading, short lines less. Add space above headings (two-thirds) more than below (one-third) so sections cohere.
- Load fonts without breaking the page. Self-host WOFF2, preload the
one or two critical files,
font-display: swap, and definesize-adjust-tuned fallback metrics (or use a tool that generates them) so the swap does not reflow the page. Subset to the scripts you serve; a 40KB font beats a 400KB one on every metric that matters. - Use variable fonts when you need three-plus weights. One file
serving 300-800 weights costs less than three static files and unlocks
font-variation-settingsanimation; check the file is not carrying axes you never use. - Turn on the quiet features.
text-wrap: balanceon headings,text-wrap: prettyon paragraphs where supported;font-variant-numeric: tabular-numsin tables; real quotes andhyphens: autofor justified or narrow columns;-webkit-font-smoothingleft alone.
Boundaries
- Users zoom and override; px-based font sizes and
maximum-scale=1fight accessibility and lose. Everything in rem. - Icon fonts are ligature hacks with screen-reader side effects; use SVG.
- Brand display faces are for display; do not push a quirky face into 10,000 words of documentation.