Skip to main content

The font-size Property

The CSS font-size property is used to specify the height of the characters in a font. Choosing the right font size and unit is one of the most critical decisions in web design, directly impacting readability and accessibility.


Units for font-size​

Font sizes can be set using several different types of units, which fall into two main categories: absolute and relative.

1. Absolute Units (Fixed)​

Absolute units are fixed measurements that do not change based on any other element or user setting.

UnitDescriptionBest Use Case
px (Pixels)A fixed number of dots (pixels) on the screen.Small elements that must be pixel-perfect, such as thin borders or box shadows. Avoid for font size.
Accessibility Warning

Avoid using px for font sizes on body text. If a user tries to zoom their browser text using system settings, px-based fonts will often fail to resize, creating an accessibility barrier.

2. Relative Units (Scalable)​

Relative units are the best practice for typography because they allow the text to scale up or down relative to another size, respecting user settings and promoting responsiveness.

UnitDescriptionCalculationBest Use Case
emRelative to the font size of the parent element.1em=1×(Parent’s Font Size)1\text{em} = 1 \times (\text{Parent's Font Size})Component-level scaling (e.g., a button inside a card).
remRelative to the font size of the root element (<html>).1rem=1×(Browser’s Default Font Size)1\text{rem} = 1 \times (\text{Browser's Default Font Size})Global sizing consistency, main typography. The recommended unit.
% (Percent)Relative to the font size of the parent element.100%=Parent’s Font Size100\% = \text{Parent's Font Size}Similar to em, but % is often used for explicit scaling.

Using rem (Root EM) is the modern standard because it prevents sizing issues caused by complex nesting.

  1. Browser Control: By default, 16px16\text{px} is the browser's root font size (i.e., 1rem=16px1\text{rem} = 16\text{px}). If a user changes their browser's default font size to 20px20\text{px}, then 1rem1\text{rem} automatically becomes 20px20\text{px} across your entire site.
  2. Predictability: Unlike em, where the size multiplies on every nested parent (the "compounding problem"), rem always refers back to the single <html> root size, making calculations simple and predictable.

Example Scaling with rem​

If your site's root size is set to the default 16px16\text{px}:

Desired Sizerem ValueCalculation
Standard Body Text1rem1×16px=16px1 \times 16\text{px} = 16\text{px}
Large Heading2.5rem2.5×16px=40px2.5 \times 16\text{px} = 40\text{px}
Small Caption0.875rem0.875×16px=14px0.875 \times 16\text{px} = 14\text{px}

Interactive font-size Demo​

Use the live editor to change the font-size values for both the parent (.parent-box) and the child (.child-text). Observe how the em value scales relative to its parent, while the rem value remains constant relative to the root (16px16\text{px}).