BLOG

Typography in practice: fluid scale, readability, and fast font loading

Fluid clamp() scale, 60–75 ch, proper LH, WCAG contrast, and swap + metrics for zero-drama font loading.

Type scale, done right — small, fluid, predictable

Use 6–8 sizes with clamp() so text grows smoothly, keep good line-height and spacing, and use clear, semantic names.

Color system in practice — roles, tokens, OKLCH, contrast

Set roles (accent, neutrals, semantic), make tidy OKLCH shades, use tokens—not raw colors—derive states with color-mix(), flip dark mode, and meet AA contrast.