The CSS font-size property sets a text size that the browser computes before rendering. Different declarations can resolve to the same pixel value: 16px, 1rem, 100%, 12pt, and 0.166667in all compute to 16px under the stated conversions. Relative units matter because 1rem follows the root size, while 1em follows the current element’s computed size. section 3.1.1
Listing 3.1 Converting measurements to pixel values
font-size: 16px;
font-size: 1rem; #1
font-size: 100%; #2
font-size: 12pt; #3
font-size: 0.166667in; #4
Compare equivalent declarations that all compute to a 16px font size. section 3.1.1
Choose units according to what should control the size. em can compound through inheritance: with a 16px root, main at 1.25em becomes 20px; an h2 at 2em is 40px there, but becomes 70px inside an article at 1.75em. Use rem for headings when every heading should retain a root-relative size. section 3.4.5
For readable page text, treat font size as one part of a linked system:
- Use body text of at least 1.25rem (20px when the root is 16px), rather than relying on the usual 16px browser default. section 8.1.1
- Pair larger font sizes with smaller line heights and longer line lengths; pair smaller sizes with larger line heights and shorter lines. section 8.1.2
- Aim for line height around 1.4–1.5 and line lengths of 45–75 characters when balancing body text. section 8.5
Scale an article from a chosen size
Starting from a 16px base size, a 24px article size produces a calculated line-height of 1.37 and a maximum width of 720px in the supplied scaling system. Store unitless values in custom properties, then multiply by 1px for font-size; this avoids unsupported line-height calculations that mix unit types. section 8.1.2
For fluid type, viewport units let font-size respond to window dimensions: 2vw is 20px in a 1000px viewport but only 7.5px in a 375px viewport. Use bounds rather than viewport units alone. calc() combines a responsive and fixed value, min() and max() impose one-sided limits, and clamp() supplies a minimum, preferred value, and maximum. section 8.2.1 section 8.2.2
Bounded hero text
To scale a hero heading from 4rem at 320px to 8rem at 1600px, calculate a 5vw scale factor and set font-size: clamp(4rem, 2rem + 5vw, 8rem). The minimum protects small screens and the maximum caps large-screen growth. section 8.2.4
A fluid clamp() preferred value can be derived from target font sizes and viewport widths: scaleVW = (maxFontSize − minFontSize) / (maxVW − minVW) × 100. For 1rem at 400px and 2rem at 1200px, the scale is 2, yielding clamp(1rem, 0.5rem + 2vw, 2rem). section 8.2.3
