Typescale

ConfigurationTypescale AI

Generate harmonic modular type scales & design tokens.

Preview Context

Scale & Sizing

Base Size (px)

16px

Scale Ratio

The multiplier used to generate the type scale. Standard musical intervals (like 1.250) create natural harmony.

Rounding Strategy

Fine-tune Sizes

H1Calc: 62

H2Calc: 48

H3Calc: 40

H4Calc: 32

H5Calc: 26

H6Calc: 20

BodyCalc: 16

SmallCalc: 12

Values match the mathematical scale by default. Type to override specific levels.

Typeface

Header Font & Weight

Body Font & Weight

Heading Line Height

1.10

Body Line Height

1.50

Theme & Contrast

Background

#ffffff

Text

#1e293b

WCAG AAA

Contrast Ratio: 14.63:1

Type Scale

Base: 16px•Ratio: 1.25•Rounding: grid-2

Primary Font

Merriweather

h162px

Effective Typography

h248px

Effective Typography

h340px

Effective Typography

h432px

Effective Typography

h526px

Effective Typography

h620px

Effective Typography

Body16px

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.

Small12px

The quick brown fox jumps over the lazy dog. 1234567890