Type Scale Calculator

Generate heading sizes based on a base font size and scale ratio.

ElementSize (px)Size (rem)Preview
body16px1remThe quick brown fox
h161.04px3.815remThe quick brown fox
h248.83px3.052remThe quick brown fox
h339.06px2.441remThe quick brown fox
h431.25px1.953remThe quick brown fox
h525.00px1.563remThe quick brown fox
h620.00px1.250remThe quick brown fox
CSS Output:
:root {
  --font-size-base: 16px;
  --font-size-h1: 61.04px; /* 3.815rem */
  --font-size-h2: 48.83px; /* 3.052rem */
  --font-size-h3: 39.06px; /* 2.441rem */
  --font-size-h4: 31.25px; /* 1.953rem */
  --font-size-h5: 25.00px; /* 1.563rem */
  --font-size-h6: 20.00px; /* 1.250rem */
}

What is a Type Scale?

A type scale is a set of font sizes that follow a consistent mathematical ratio. This creates visual harmony and hierarchy in your typography. Common ratios include the Major Third (1.250), Perfect Fourth (1.333), and Golden Ratio (1.618).