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).

Practice

1. What does the CSS property font-size control on a webpage?

easy

A. The color of the text

B. The background color of the text

C. The spacing between letters

D. The size of the text displayed

Solution

1. Step 1: Understand the role of font-size

   The font-size property in CSS sets how big or small the text appears on the screen.

2. Step 2: Compare with other text properties

   Other properties like color or spacing control different aspects, not size.

3. Final Answer:

   The size of the text displayed -> Option D

4. Quick Check:

   font-size controls text size [OK]

Hint: Font size changes text height, not color or spacing [OK]

Common Mistakes:

• Confusing font-size with color or spacing properties
• Thinking font-size changes background color
• Mixing font-size with letter-spacing

2. Which of the following is the correct CSS syntax to set the font size to 16 pixels?

easy

A. font-size: '16px';

B. font-size = 16px;

C. font-size: 16px;

D. font-size: 16;

Solution

1. Step 1: Recall CSS property syntax

   CSS uses a colon (:) to assign values, and units like px must be without quotes.

2. Step 2: Check each option

   font-size: 16px; uses correct syntax: property, colon, value with unit, and semicolon.

3. Final Answer:

   font-size: 16px; -> Option C

4. Quick Check:

   Correct CSS syntax uses colon and units without quotes [OK]

Hint: Use colon and units without quotes for CSS properties [OK]

Common Mistakes:

• Using equal sign instead of colon
• Putting units inside quotes
• Omitting units like px

3. What will be the visual result of this CSS on a paragraph?

p { font-size: 2rem; }

medium

A. The paragraph text will be half the root font size

B. The paragraph text will be twice the root font size

C. The paragraph text will be 2 pixels tall

D. The paragraph text size will not change

Solution

1. Step 1: Understand the unit rem

   rem means "root em" and is relative to the root (html) font size.

2. Step 2: Interpret 2rem

   Setting font-size to 2rem means text will be twice as big as the root font size.

3. Final Answer:

   The paragraph text will be twice the root font size -> Option B

4. Quick Check:

   2rem doubles root font size [OK]

Hint: rem units scale relative to root font size [OK]

Common Mistakes:

• Thinking rem is pixels
• Confusing rem with em
• Assuming no change in size

4. Identify the error in this CSS code snippet:

h1 { font-size: 20; }

medium

A. Missing unit after the number

B. Incorrect property name

C. Missing semicolon

D. Font size cannot be set on h1

Solution

1. Step 1: Check the font-size value format

   CSS requires a unit like px, em, rem after numeric values for font-size.

2. Step 2: Identify the missing unit

   The code uses "20" without any unit, which is invalid.

3. Final Answer:

   Missing unit after the number -> Option A

4. Quick Check:

   Font size needs units like px or rem [OK]

Hint: Always add units like px or rem after font-size numbers [OK]

Common Mistakes:

• Omitting units like px or rem
• Assuming numbers alone are valid
• Confusing semicolon errors

5. You want to make all paragraph text larger but keep it responsive to user settings. Which CSS rule is best?

p { font-size: ?; }

hard

A. font-size: 1.2rem;

B. font-size: 18px;

C. font-size: 120%;

D. font-size: 1.2em;

Solution

1. Step 1: Understand responsiveness and user settings

   To respect user font preferences (e.g., browser font size settings), use units relative to the root element.

2. Step 2: Compare options for responsiveness

   px is fixed and doesn't scale with user changes. em and % are relative to parent and can compound in nesting. rem is relative to root font size, scaling perfectly with user settings.

3. Step 3: Choose the best option

   1.2rem increases size by 20% relative to root, ideal for accessibility and responsiveness.

4. Final Answer:

   font-size: 1.2rem; -> Option A

5. Quick Check:

   rem units scale with root font size and user settings [OK]

Hint: Use rem units for scalable font sizes responsive to user preferences [OK]

Common Mistakes:

• Using fixed px units ignoring user preferences
• Using em which can compound unexpectedly
• Confusing em/% with root-relative rem