Goodfolk Design Utilities
Typography Scale Calculator
Generate a consistent typography scale from a base font size and ratio.
Smaller ratios create subtle scales. Larger ratios create stronger heading jumps. Major third is a solid default for many interfaces.
Type scale
minus-2
10.24px · 0.640rem
The quick brown fox jumps.
minus-1
12.80px · 0.800rem
The quick brown fox jumps.
base
16.00px · 1.000rem
The quick brown fox jumps.
plus-1
20.00px · 1.250rem
The quick brown fox jumps.
plus-2
25.00px · 1.563rem
The quick brown fox jumps.
plus-3
31.25px · 1.953rem
The quick brown fox jumps.
plus-4
39.06px · 2.441rem
The quick brown fox jumps.
plus-5
48.83px · 3.052rem
The quick brown fox jumps.
CSS variables
--font-size-minus-2: 0.640rem; /* 10.24px */ --font-size-minus-1: 0.800rem; /* 12.80px */ --font-size-base: 1.000rem; /* 16.00px */ --font-size-plus-1: 1.250rem; /* 20.00px */ --font-size-plus-2: 1.563rem; /* 25.00px */ --font-size-plus-3: 1.953rem; /* 31.25px */ --font-size-plus-4: 2.441rem; /* 39.06px */ --font-size-plus-5: 3.052rem; /* 48.83px */
Related tools
HEX Color Converter
Convert HEX colors to RGB and HSL, preview the color, and copy CSS-friendly values.
Color Contrast Checker
Check contrast between text and background colors and see basic WCAG-style pass/fail guidance.
Color Palette Generator
Generate color palettes from a base color, lock favorite colors, and copy HEX values or CSS variables.