Embed

Embed the Typography Scale Calculator

Three quick steps — customize the look, choose how it behaves, then copy the code onto your site.

Name

Your reference only — not shown to visitors

Heading

Shown to visitors above the calculator, in every display mode. Leave blank for none.

Subheading

Optional supporting text shown just below the heading.

Theme

Accent / section color

Colors the calculator's own section bars and highlights — the whole calculator's look, not just the results panel.

#FF5C00

Background color

#FFFFFF

Results text color

#0A0C0B

Border radius

12px

Branding

Remove "Powered by Calcupedia"

Available on Creator plan →

Powered-by color

#FF5C00

Powered-by background

#FFFFFF

Already have an account? Sign in

Live preview

Base Font Size

8 px48 px

Scale Ratio

Steps Above Base

-510

Scaled Font Size

31.25

The font size at this number of steps above (or below, if negative) your base size, using the selected scale ratio.

Share result

Reload calculator

Clear inputs

Found this calculator useful?