type scale generator — free browser tool | fatcousin

home

modular type scale · pick base + ratio · copy CSS custom properties

settings

base size16px

steps5

unit

ratiomajor third (1.25)

preview

3.05rem · 48.8px

The quick brown fox

2.44rem · 39.04px

The quick brown fox

1.95rem · 31.2px

lead

The quick brown fox

base

1.56rem · 24.96px

body

The quick brown fox

1.25rem · 20px

body sm

The quick brown fox

1rem · 16px

caption

The quick brown fox

css output

:root {
  --font-size-xl: 3.05rem;
  --font-size-lg: 2.44rem;
  --font-size-md: 1.95rem;
  --font-size-base: 1.56rem;
  --font-size-sm: 1.25rem;
  --font-size-xs: 1rem;
}

tailwind config

// tailwind.config.js → theme.fontSize
fontSize: {
  "xl": "3.05rem",
  "lg": "2.44rem",
  "md": "1.95rem",
  "base": "1.56rem",
  "sm": "1.25rem",
  "xs": "1rem",
},