TypeLadder feature guide

How TypeLadder computes a scale, and what each control changes.

The scale

Name
Base size
Type
8 to 200 px
Description
The size of the base step. The base step always equals this value.
Name
Ratio
Type
presets or custom
Description
Minor second 1.067, major second 1.125, minor third 1.2, major third 1.25, perfect fourth 1.333, augmented fourth 1.414, perfect fifth 1.5, golden ratio 1.618, or Custom with any ratio from 1.01 to 3.
Name
Steps below and above
Type
0 to 5, 0 to 12
Description
How many sizes to generate under and over the base. Each step multiplies or divides by the ratio once.
Name
Rounding
Type
whole px, 0.5 px, none
Description
Whole pixels, half pixels, or two decimals. If rounding makes two neighbouring sizes equal, the one further from the base moves one rounding unit away, so sizes always increase.

Names

xs, sm, base, lg, xl, 2xl. Below the base: sm, xs, 2xs and so on. Above: lg, xl, 2xl, 3xl and so on.
caption, body, h6 to h1. The base is body; below it caption, small, tiny. Above it the largest step is h1. With more than six steps above, the extra largest steps become display-1, display-2 and up, with the highest number the largest.
step--1, step-0, step-1. Numbered steps, handy for fluid type systems.
Custom list. Comma separated names from smallest to largest. Missing names fall back to the default names, and slashes become hyphens.

Headings covers every step above the base; Body covers the base and the steps below it. The family field suggests every font Figma can use in this file; pick a weight from the list next to it. The preview uses the same font if it is installed on your computer, and scales the samples so the largest step is 36 px; the size column shows the real values.

Line height and tracking

Line height is a ratio of the size: 1.5 at and below the base, easing in a straight line to 1.1 at the largest size, then rounded to whole pixels. Tracking is 0 at the base and eases to -2 percent at the largest size. These defaults are free; changing them is Pro, which also adds tracking for the smallest size and snapping line heights to a 4 or 8 px grid.

Create text styles

Writes one local text style per step, named group/name, such as Type/xl. Each style gets the font, size, line height in pixels and tracking in percent. Styles that already have the name, ignoring case and spaces around slashes, are updated instead of duplicated. Change the Style group field to write a second scale side by side.

Preview frame

Places a frame named after the group in the middle of your view, listing every step from largest to smallest with its name, size, line height and tracking above a sample line. Samples are linked to the matching text styles when they exist, so create the styles first if you want a live specimen.

Mobile mode as variables (Pro)

Tick Mobile mode as variables and set a mobile base and ratio. Create text styles then also writes number variables font-size/<name> and line-height/<name> in a collection named "Type scale" with a Desktop and a Mobile mode, and binds them to each style's font size and line height. Switch the mode on a frame to see the mobile sizes. If Figma cannot add a second mode or bind variables to text styles, the status bar says so and the styles are still written.

Export (Pro)

The Export tab turns the scale into code. Sizes are in rem (16 px root), line heights are unitless ratios and tracking is in em.

CSS custom properties. --text-xl, --text-xl--line-height and --text-xl--letter-spacing in :root.
Fluid CSS with clamp(). Each size grows from the mobile scale at the mobile viewport width to the desktop scale at the desktop width, and stays fixed outside that range.
Tailwind v3. fontSize entries with line height and letter spacing for tailwind.config.js.
Tailwind v4. The same variables in an @theme block, used as text-xl and so on.

Presets (Pro)

Save every setting on the Scale tab under a name, load it later or delete it. Presets are stored on your device with Figma's client storage.