Typography scales

There is no magic number that defines how many styles or sizes you will need — for example, in this article creative director Dan Mall details his experience getting a lot of range from just 7 sizes. That could be a great starting point.

There is no shortage of philosophies on how to determine what these sizes will be, but here are a few common approaches (along with relevant links to learn more about each of them):

8-point grid with 4-point baseline system

Overview: In the 8-point grid system, everything is spaced and sized using numbers that are multiples of 8. Designers will often use an 8-point grid for spacing and sizing with a 4-point baseline grid for typography. The type baselines will sit on on the 4-point grid. In order to achieve this, the focus here is really more on the line-heights than the exact font sizes.

Purpose: In this system, the goal is for all of your line height values to be multiples of 4 so they correspond to your grid spacing. This makes it easier to establish vertical rhythm (top and bottom spacing between elements) and maintain vertical alignment of text across columns.

Pros: This is one of my favorite approaches to establishing typography scale. The math is easy when adding, subtracting, dividing, and multiplying values. Moving objects around the canvas during the design process can be greatly simplified by adjusting your "big nudge" setting to 8px in Figma.

Tip: While this approach can feel rigid, my recommendation is to use 8-point grids as a guide for the design process, but not necessarily reinforce them to the nth degree when QA-ing your designs in production. In code, there is no underlying grid that objects snap to. That, combined with the wide-variety of device resolutions (which are not always divisible by 8), will undoubtedly throw some of your measurements off slightly!

Modular scale

Overview: In this approach, a base font size is selected (usually the size you will use for body copy). As a starting point, many will use browser defaults and start with 16px (or 1 rem). From there, font sizes are calculated based on a specific multiplier. There are lots of common ones: some based on the golden rule and others based on musical scales (fifths, fourths, thirds, and seconds).

Cons: If your eye starts twitching at the unpleasant sight of type sizes that contain multiple decimal points, this system may not be for you 😅. It's my least favorite, but a worthy approach to use as a jumping off point.

Tips: With the modular scale, some multipliers (for example, using the golden rule as shown below) will yield font sizes and line heights that are not whole numbers. How you deal with this is up to you: one option is to round to the nearest whole number. In Figma, if you have pixel-snapping turned on, the height of your text boxes (based on the line height) will get rounded to the nearest whole number. If you don't want this, make sure you disable pixel snapping.

Dev handoff: In production these nuances will be less of an issue, however, if all of your text box sizes in Figma don't fall on whole numbers, it could be a major nuisance for developers who are inspecting your designs (since they won't see whole numbers when measuring distances to and from text objects). My recommendation is to explore tools like modular scale or type scale and use the results as a starting point. These tools are great for quickly visualizing a range of sizes and can help you determine how legible they are at at various sizes.

Beware: You will find that as your multiplier increases, especially in excess of 1.4 or 1.5, large sizes will get get really big, often too big! (as shown below). Line heights calculated by the tools will follow suit, so you may choose to use a different ratio for display sizes and line heights separately from smaller font sizes.

Percentage based system

Overview: In this approach, type sizes are defined in pixels but line-heights are defined as percentages. This works on the same principal as modular scale, but is much easier to implement (especially if you keep font sizes and percentages to nice round numbers).

Pros: With this method, you don't need to explicitly set each line height (for every size) to different values. For example, you could set all your smaller styles to 150% and the actual line height will calculated as 150% of the specified font size.

Beware: While it may be tempting to keep things simple by using the same percentage value for all sizes (like using 150% x every font size, whether it's font size 12 or 100), when you move up to larger type sizes this can result in unattractive combinations. When the font size gets bigger, so do the spaces between the lines, and you wind up with issues like headlines spanning two lines (and feeling disconnected).

Tip: In this case, you may decide to have 2 (or even 3) different percentages to use between body sizes and headline sizes. The example below was modeled after Figma power user Jonathan Simcoe's percentage based approach which you can learn more about here. You'll see a shift in the line height value from 150% down to 110% as you get into the larger sizes that are used for headings and subheads.

I suggest you spend some time exploring these three different approaches. When you can quickly compare options side by side on the canvas in Figma, you'll get an idea of what works best. I also recommend you stress test different options in real-world screen layouts to solidify your approach. Once you land on a set of fonts and sizing, you can start creating your type styles in Figma, and subsequently publishing and sharing them out for your teammates to use.

Next we'll cover some suggestions for naming and organizing your text styles.