Loading...
Build a modular type scale for harmonious typography
A type scale is a sequence of font sizes that increase by a consistent ratio (e.g., 1.25 or the golden ratio 1.618). It creates visual harmony and clear hierarchy in typography, ensuring headings and body text relate proportionally.
--font-size-3xs: 0.64rem; --font-size-2xs: 0.8rem; --font-size-xs: 1rem; --font-size-sm: 1.25rem; --font-size-base: 1.5625rem; --font-size-lg: 1.9531rem; --font-size-xl: 2.4414rem; --font-size-2xl: 3.0518rem;
{
"3xs": "0.64rem",
"2xs": "0.8rem",
"xs": "1rem",
"sm": "1.25rem",
"base": "1.5625rem",
"lg": "1.9531rem",
"xl": "2.4414rem",
"2xl": "3.0518rem"
}| Step | px | rem | Preview |
|---|---|---|---|
| Aa | |||
| Aa | |||
| Aa | |||
| Aa | |||
| Aa | |||
| Aa | |||
| Aa | |||
| Aa |
Each step in the scale is calculated by multiplying (or dividing) the base size by the chosen ratio. This creates a mathematically harmonious progression.
size = baseSize × ratio^step
Example (base: 16px, ratio: 1.25):
lg = 16 × 1.25^1 = 20px
xl = 16 × 1.25^2 = 25px
sm = 16 × 1.25^-1 = 12.8pxFormula
size = baseSize × ratio^stepbaseSize = Base font size in pixels (browser default: 16px)
ratio = Modular scale multiplier (e.g., 1.25 = Major Third)
step = Position relative to base: positive = larger, negative = smaller
Worked Example
Major Third scale (1.25) with 16px base
Did you know? The term 'modular scale' was popularized by Tim Brown in 2011. Musical interval ratios like Perfect Fourth (4:3) and Perfect Fifth (3:2) produce type scales that feel naturally harmonious because they share the same mathematical basis as pleasing sound frequencies.
Sources
Convert text to ASCII codes and back. Supports decimal, hex, binary, and octal formats.
Convert width/height to aspect ratios, scale dimensions, and generate responsive embed CSS for any layout.
Calculate required internet bandwidth based on devices and activities in your household.
Encode and decode Base64 strings. Convert text for data URIs, APIs, and safe data transmission.
Create CSS border-radius with visual controls for each corner. Generate circles, pills, and custom shapes.
Create CSS box shadows with multiple layers, live preview, and copy-ready code.