Why 16px Should Be the Default Font Size for Front‑End Design

1. Main Font Size

Early web pages displayed text much like Word documents; the author argues that text is the soul of a page and that a sensible base font size is crucial. Ant Design 3.0 chose 14 px because it covers about 77 % of users, but the author prefers 16 px because it is 2⁴, scales cleanly, and matches the browser’s default size.

Conclusion: for front‑end design specifications, use 16 px as the base font size.

2. Font Scale (字阶)

Ant Design’s scale is based on musical intervals and a power‑function formula, which the author finds overly complex and loosely tied to visual rhythm. The article lists common musical ratios (e.g., Minor Second 1.067, Perfect Fifth 1.500, Golden Ratio 1.618) and shows how starting from 14 px or 16 px produces different scale tables.

To obtain a more practical scale, the author combines the “4n” rule (font‑size = 4 × n) with the Fibonacci sequence, generating four possible series. Only the series starting at 8 px and 12 px contain the commonly used 12 px and 16 px sizes and have more than four steps, making them suitable for front‑end work.

These Fibonacci‑derived scales provide a mathematically grounded yet engineer‑friendly progression of font sizes.

3. Line Height

Ant Design states that line‑height = font‑size + 8. By referencing the Material Design 4dp baseline grid and the golden ratio (12 px × 1.618 ≈ 19.4 px, rounded to the nearest 4n value of 20 px), the author derives the same formula, confirming that a constant offset of 8 px yields a line‑height that feels natural across sizes.

4. Practice

The author applied the theory to real project mock‑ups, replacing arbitrary spacing values with multiples of 4. The redesign reduced the number of variables (e.g., from three vertical gaps plus three line‑heights to one gap plus two line‑heights) and showed minimal visual impact while greatly simplifying front‑end implementation.

Before and after screenshots illustrate that only headline spacing changed noticeably, while most text blocks remained visually consistent.

5. Re‑thinking Line Height

Further analysis suggests that each font size should map to a unique line‑height, making line‑height effectively a constant for a given size. This one‑to‑one relationship reduces the front‑end workload because designers no longer need to adjust multiple vertical metrics for each text element.

Adopting a rule such as "line‑height = font‑size + 8" across a project ensures consistency, improves maintainability, and aligns design intent with engineering practicality.