typeset

Audit font choices, hierarchy, sizing, readability, and consistency, then apply a modular type scale with clear weight roles. Set body text to at least 16px, limit line lengths to 45-75 characters, and use rem units so text respects user zoom settings.

Pair fonts with genuine contrast, such as serif with sans-serif or geometric with humanist, or use a single family in multiple weights. Avoid pairing two similar geometric sans-serifs, and never use more than two to three font families.

Use a fixed rem-based type scale for app UIs, since dense container layouts need spatial predictability. Use fluid clamp(min, preferred, max) sizing for headings on marketing and content pages, while keeping body text fixed.

Body text should be at least 16px or 1rem to remain readable in long passages. Combine this with a line-height of 1.5-1.7 for body copy and a max-width around 65ch for comfortable line lengths.

Layout shift happens when web fonts load without fallbacks matched to their metrics. Use font-display: swap with metric-matched fallback fonts, and load only the weights you actually use to reduce page weight.