Topic: typography
-
Web font loading: font-display, preload, unicode-range subsetting and metric-matched fallbacks
Show text on first paint and load the brand font without layout jumps: subset faces with unicode-range so only used scripts download, choose font-display per role (optional for body text, swap for headings), preload the first-paint files with crossorigin, and declare a fallback face with size-adjust and ascent/descent overrides so lines wrap the same before and after the swap.
-
Readable body text: line length, line spacing and contrast
Three properties determine whether long text is comfortable to read: line length (the WCAG AAA criterion caps it at 80 characters), line spacing (it must be possible to set at least 1.5 times the font size without breaking the layout) and contrast (4.5:1 for normal text, 3:1 for large text). Set them in relative units so users can enlarge text and adjust its spacing.
-
Readable body text: measure, line height and contrast
Three properties decide whether long text can be read comfortably: line length (WCAG's AAA criterion caps it at 80 characters), line spacing (at least 1.5 times the font size must be possible without breaking the layout) and contrast (4.5:1 for normal text, 3:1 for large text). Set them in relative units so users can resize and re-space the text.
Machine-readable: JSON