TypeLadder quickstart

Choose a base size and a ratio, pick your fonts, create the styles. Everything in this quickstart is free.

Install the plugin

1. When TypeLadder is published, open it on the Figma Community and click Install. Until then it is not yet available.
2. Open any Figma design file.
3. Run it from Plugins > TypeLadder, or press Cmd/Ctrl + / and type "TypeLadder".

Your first scale

1. Set the base size. 16 px is the usual body size on the web.
2. Choose a ratio. Major third (1.25) is a balanced default; smaller ratios suit dense product UI, larger ones suit editorial pages.
3. Set the steps. For example 2 below the base and 6 above.
4. Pick names. xs to 5xl, or caption, body and h6 to h1.
5. Pick fonts. Type a family in the Headings and Body fields; the list suggests the fonts available in Figma. Then pick a weight for each.
6. Check the preview list, then click Create text styles.

The status bar reports how many styles were created and updated. They appear under Local styles in a group named "Type". Click Preview frame to place a specimen of the whole scale in the middle of your view.

What next?

• Sizes, names, line heights and tracking explained
• What Pro adds
• A font or style did not work