Why Random Font Sizes Look Inconsistent
When font sizes are chosen case by case — 14px here, 17px there, 22px for this heading — the result feels random even if each individual choice seemed reasonable. The eye detects that there is no underlying system, which reads as lack of polish.
Modular Scale Rationale
A modular scale picks a base size (commonly 16px or 1rem) and a ratio, then multiplies repeatedly to generate the scale. Common ratios:
- 1.25 (Major Third): compact, good for dense UIs and dashboards.
- 1.333 (Perfect Fourth): balanced, widely used in web applications.
- 1.5 (Perfect Fifth): dramatic, suits editorial and marketing pages.
- 1.618 (Golden Ratio): visually striking but can produce large jumps between sizes.
Choosing the Right Ratio
Use a smaller ratio (1.25–1.333) for information-dense UIs where many text sizes need to coexist within a small range. Use a larger ratio (1.5–1.618) for marketing pages where hierarchy needs to be bold and immediately readable.
Integrating with CSS or Tailwind
In CSS, define the scale as custom properties: --text-sm, --text-base, --text-lg, etc. In Tailwind, override the fontSize key in tailwind.config.js with your computed scale values. Consistency comes from committing to the scale and never adding one-off sizes outside it.