liveBook · Manning

Shrinking font problem

As explained in CSS in Depth, Second Edition

The shrinking font problem is the progressive reduction of text size caused by compounded em-based font sizes on nested elements.

The shrinking font problem occurs when nested elements repeatedly calculate their font sizes in ems. Each child inherits its parent’s already-reduced size, so text becomes progressively smaller. section 2.2.1

With a 16px body size and ul { font-size: 0.8em; }, the first list calculates to 12.8px, the next to 10.24px, and the third to 8.192px. The selector affects every nested list, so the reduction compounds down the tree. section 2.2.1

Keeping nested lists readable

Retain a smaller top-level list size, then reset nested lists to the inherited size: ul { font-size: 0.8em; } and ul ul { font-size: 1em; }. Nested lists remain consistent instead of shrinking at every level.

How CSS in Depth, Second Edition covers it

How deep it goes
Explains inherited and calculated sizes numerically, then stops at a targeted nested-list correction.
Examples
Uses a five-level nested-list example with a 16px body size and successive 0.8em calculations.
What it assumes
Assumes basic CSS selectors and inheritance while demonstrating em calculations from a 16px body size.
What you can do after
Diagnose compounded list sizing and apply a 1em nested-list reset to keep text consistent.
How it connects
Connects em units with inheritance, calculated values, font-size, padding, and nested lists.
Cover of CSS in Depth, Second Edition
liveBookmanning.com
Read CSS in Depth, Second Edition on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of CSS in Depth, Second Edition. The section links point to the parts of the book it draws on.