What it does
Typescale is a browser typography tool for comparing body and heading styles. Its board combines scale ratios with font settings, while Pro adds responsive scales, saved boards and CSS with variables and classes.
Start in Board Settings with the base Font-size and Scale. Ratios range from Minor Second to Golden Ratio. Body and Headings have separate font, weight, line-height, letter-spacing and color controls, with an inherit option for the heading font. Switch between Blog post and Landing page previews to see the hierarchy in different arrangements.
A custom scale value is marked Pro. The Pro signup page also lists responsive sizing, adding or skipping sizes, unlimited saved boards and CSS generation with variables and classes. It offers monthly or annual billing; the annual price is paid for the full year.
For an implementation handoff, compare the headings with the body copy first, then use the Pro CSS output to carry the chosen values into the site. Exploring and cloning other users’ boards is another Pro feature, useful when you want to examine a complete combination of fonts and settings.
Strengths
- Body and heading controls can be adjusted independently.
- Blog-post and landing-page previews provide different layout contexts.
- Pro connects the chosen scale to CSS variables and classes.
Watch out for
- Custom ratios, responsive scales and saved boards are Pro features.
Best for
- Establishing a web type hierarchy
- Comparing body and heading scale relationships
Sources
- Typescale: Typography board (Oct 27, 2026)
- Sign up: Typescale Pro (Oct 27, 2026)