Font size in CSS - Browser Rendering Trace

Render Flow - Font size

[Parse CSS] -> [Match selectors] -> [Apply font-size property] -> [Calculate element box size] -> [Reflow text layout] -> [Paint text with new size] -> [Composite layers]

The browser reads the CSS, finds elements matching the selector, applies the font size, recalculates layout for text, paints the text with the new size, and then composites the final image.

Render Steps - 3 Steps

Code Added:No CSS applied

Before

[__________]
| Hello,  |
| world!  |
[__________]

→

After

[__________]
| Hello,  |
| world!  |
[__________]

The paragraph uses the browser's default font size, usually 16px, so text appears normal sized.

🔧 Browser Action:Creates DOM node and applies default styles

Code Sample

This code makes the paragraph text larger by setting its font size to 2 times the root element's font size.

CSS

<p>Hello, world!</p>

CSS

p {
  font-size: 2rem;
}

Render Quiz - 3 Questions

After applying step 2, what visual change do you see in the paragraph?

A Text becomes larger and paragraph box grows

B Text becomes smaller and paragraph box shrinks

C Text color changes but size stays same

D Paragraph disappears

Common Confusions - 3 Topics

Why does changing font-size with px not scale on different devices?

Pixels are fixed units, so text stays the same size regardless of screen or user settings, unlike rem or % which scale.

💡 Use rem or % for flexible, accessible text sizing.

Why does font-size: 2rem make text bigger than 200% sometimes?

rem is relative to the root font size, while % is relative to the parent element's font size, so they can differ if parent sizes vary.

💡 Remember rem always relates to root, % relates to parent.

Why does the paragraph box size change when font size changes?

Text size affects line height and width, so bigger font means bigger box to fit the text.

💡 Font size changes trigger layout recalculations.

Property Reference

Property	Value Applied	Unit Type	Visual Effect	Common Use
font-size	16px	Absolute (px)	Sets exact text size	Precise control on text size
font-size	2rem	Relative (rem)	Text size relative to root font size	Responsive scaling
font-size	150%	Relative (%)	Text size relative to parent element	Adjust size relative to container
font-size	small	Keyword	Predefined smaller size	Quick size presets

Concept Snapshot

font-size sets text size in CSS. Units include px (fixed), rem (root-relative), % (parent-relative). Changing font-size affects text size and element box size. Use rem for scalable, accessible text. Font size changes trigger layout recalculations (reflow).