Font Hierarchy Scale Calculator
Generate proportion-based sizing hierarchies. Choose base dimensions and scale ratios to output developer-ready CSS layout rules.
Scale Configuration
| Element | Size (px / rem) | Specimen Preview |
|---|
CSS Variable Scale
/* CSS Typographic Scale */Frequently Asked Questions
A typographic scale is a set of font sizes that increase proportionally based on a mathematical ratio. Using a scale ensures visual hierarchy, consistency, and structure, preventing size declarations from feeling arbitrary.
On small mobile screens, steep scales like the Golden Ratio (1.618) or Perfect Fifth (1.500) make headers too large and body text too small. We recommend using a gentle scale like the Major Third (1.250) or Perfect Fourth (1.333) for compact, highly readable layouts.
The standard browser base font size is 16px. By setting your body text relative to this (e.g., 1rem = 16px), scale sizes can be computed in rem values, allowing layout sizes to scale proportionally if users adjust their browser sizing preferences.