Question 1

What is a CSS typography scale?

Accepted Answer

A typography scale defines a consistent set of font sizes based on a ratio. Common ratios are 1.25 (Major Third) and 1.333 (Perfect Fourth). Start with a base size (e.g., 16px) and multiply/divide by the ratio for each step: xs=10px, sm=13px, base=16px, lg=20px, xl=25px, 2xl=31px.

Question 2

How do I use fluid typography with CSS clamp()?

Accepted Answer

clamp() sets a value that scales between a minimum and maximum: font-size: clamp(1rem, 2.5vw, 2rem). The font scales with viewport width but never falls below 1rem or above 2rem. This eliminates media query breakpoints for typography.

Question 3

What is the optimal font size for body text?

Accepted Answer

The general guideline is 16–18px for body text on screens. Below 14px text is difficult to read for users with slight vision impairments. WCAG 2.1 sets the minimum at 14pt (approximately 18px) for standard text and considers text under this 'small'. Use 16px as a minimum baseline.

CSS Typography Playground

Typography

Appearance

Related Tools