typeset

Establish a modular type scale with a consistent ratio such as 1.25 or 1.333, define clear weight roles for body, labels, and headings, and use semantic tokens like --text-body instead of value-based names. Apply the same styles to same-role elements throughout.

Body text should be at least 16px or 1rem, with line-height between 1.5 and 1.7 for comfortable long-form reading. Line lengths should stay between 45 and 75 characters, enforced with max-width in ch units.

Use fixed rem-based scales for app UIs where spatial predictability matters in dense layouts. Use fluid clamp(min, preferred, max) sizing for headings on marketing and content pages, while keeping body text fixed.

Limit yourself to 2-3 font families and 3-4 weights such as Regular, Medium, Semibold, and Bold. Load only the weights you actually use, since each additional weight increases page load time.

Layout shift happens when fallback fonts have different metrics than the web font. Use font-display: swap with metric-matched fallback fonts to minimize visible reflow during loading.