MakerFlowTools
Free client-side suite
Back to MakerFlow

Typography Calculator

Typography & Text

A full type scale — H1 through H6, body and caption — from one base size and a named ratio like Perfect Fourth or the Golden Ratio.

Runs in your browser•Zero cloud uploads / Files stay on device•No account required
Base and ratio
Ratio

Each step up is the base multiplied by the ratio one more time — H6 is ratio¹, H1 is ratio⁶. A bigger ratio spreads the scale further apart; a smaller one keeps every heading closer to body size.

  • H1Aa89.76px5.61023remlh 1.01
  • H2Aa67.34px4.20873remlh 1.05
  • H3Aa50.52px3.15733remlh 1.09
  • H4Aa37.9px2.36859remlh 1.16
  • H5Aa28.43px1.77689remlh 1.26
  • H6Aa21.33px1.333remlh 1.39
  • BodyAa16px1remlh 1.5
  • CaptionAa12px0.75019remlh 1.56

The line-height column comes from the same curve the Line Height Calculator uses — H1 and H2 get tighter leading as display-scale text, H3-H6 as headings, Body carries the WCAG 1.4.12 floor of 1.5, and Caption gets its own smaller reading size. Body is always exactly your base size; every other step is base × ratio raised to that step's power.

Optimized For Platforms
designdeveloper

How it works

1Set your body text size and pick a ratio — Perfect Fourth (1.333) and the Golden Ratio (1.618) are common starting points.
2Every heading step up to H1 is the base multiplied by that ratio one more time; body is always exactly your base size.
3Each row also shows a suggested line-height, from the same calculator as the Line Height Calculator next door.
4Copy a single size, or the whole scale as CSS custom properties.

Related tools in Typography & Text

View all Typography & Text tools →