Figma typography styles template

Nobody notices well-set type. Everybody feels the other kind: headings that arrive in five sizes because five people picked them, body copy at 15px on one screen and 17px on the next, line height left wherever Figma dropped it. A type scale is a set of decisions made in advance so they never have to be made in a hurry. This one has been through enough projects to have lost the sizes that were never used.

Eleven sizes, four weights, 44 styles

The scale splits into two ranges with different jobs. Display runs 2xl down to xs and is for headlines and marketing type: Display 2xl is 72px on a 90px line height with -2% letter spacing, and Display xs is 24px on 32px. Text runs xl down to xs and is for interface copy: Text xl at 20px on 30px, Text md at 16px on 24px as the paragraph default, Text xs at 12px on 18px for captions, table labels, and the small print in data tables.

Four weights cross every size, Regular 400, Medium 500, Semibold 600 and Bold 700, which is where the 44 styles come from. Each row prints px and rem side by side, so 16px and 1rem are the same conversation instead of two.

Line height belongs to the style

Body sizes hold a 1.5 ratio all the way down: 12 on 18, 16 on 24, 20 on 30. That is not a coincidence, it is the same 1.5 that WCAG's text spacing criterion expects users to be able to reach without your layout breaking, so designing at it means you are already there.

Display sizes tighten as they grow, reaching 1.25 at Display 2xl, because a 72px headline set at 1.5 opens a canyon between the lines. The largest display sizes also pull letter spacing negative, since type drawn for 16px reads loose once you scale it to poster size. Figma's own guidance on typography systems lands in the same place: multiply by 1.5 for body, reduce as you climb.

Inter by default, and how to change it

The file is set in Inter, which was drawn for screens and holds up at 12px where a lot of prettier faces stop being legible. Swapping it is the most common thing people want to do, and the trick is to do it in one place.

Edit the typeface on the styles themselves, or in the typography variable collection, and every layer that references them follows; changing fonts layer by layer is how you end up with three headings that missed the memo. The documentation pages list alternatives that pair with this scale, from DM Sans, Work Sans and Space Grotesk through to licensed faces like Graphik, Aeonik, Neue Montreal and GT America, along with where to go looking when none of them fit.

The part the scale cannot decide for you

Sizes and weights are the easy half. Measure is the other half, and the notes in this file spend real space on it: a paragraph that runs the full width of a 1,440px frame is unreadable no matter how good the type is, which is why the grid and spacing system caps content columns rather than letting text fill the viewport.

Weight is the other lever people reach for too late. Hierarchy usually wants a weight change and a color change before it wants another size, and the semantic text tokens in the color styles are built for exactly that, with primary, secondary, tertiary and quaternary text doing work that extra font sizes would otherwise be asked to do.

Decisions like these are worth writing on the file itself, which is what the design annotations are for.

The same scale exists in code. Untitled UI React typography is open source, built with Tailwind CSS and React Aria, and exposes the identical names as CSS variables, so --text-md and --text-display-xs in a build mean exactly what Text md and Display xs mean in the file.