Set the size on the intended element
For a paragraph rule, try p { font-size: 1rem; }. A relative heading might use h1 { font-size: 2rem; }. These are starting examples, not universal reading sizes.
Put the rule in a stylesheet that reaches the intended element. If nothing changes, inspect the matched selector and whether a later rule overrides it.
Understand the reference for each unit
When used for font-size, rem refers to the root element’s font size; em and percentages refer to the parent’s. A nested 1.2em rule can therefore grow repeatedly.
CSS px is a CSS reference unit, not a promise of one hardware pixel. Point and pixel conversion also does not establish the visible height of a particular letter.
Keep reading scale separate from line spacing
Set line-height independently. A unitless value such as line-height: 1.6 multiplies the element’s font size and can adapt when the text size changes.
Use real paragraphs and user zoom to judge the layout. Avoid fixed-height boxes that cut off larger text; a nominal size alone cannot guarantee a readable page.
Compare the underlying font
Different designs can look unlike at the same nominal size. Compare Inter and Lora for their own backgrounds and proportions, then read CSS font weight for another part of the hierarchy.
Your questions, answered.
Is 1rem always 16 pixels?
No. It depends on the root element’s computed font size and user or author settings.
Does font-size set the height of every visible letter?
No. It sets the nominal font size; glyph shapes and metrics differ.
Sources & background
Sources supporting this page’s explanations. Practical examples are our editorial suggestions.