How to Use Typography Scale in Figma for Consistent Design

In Figma, use a typography scale by defining a set of font sizes that increase consistently, usually by a fixed ratio. Create text styles for each size and apply them to your text layers to keep your design balanced and easy to read.

Syntax

A typography scale in Figma involves these steps:

• Define base font size: Start with a base size like 16px.
• Choose a scale ratio: Common ratios are 1.25, 1.333, or 1.5.
• Calculate sizes: Multiply the base size by the ratio repeatedly to get larger sizes.
• Create text styles: Save each size as a named text style in Figma.
• Apply styles: Use these text styles consistently in your design.

text

Base size = 16px
Scale ratio = 1.25
Sizes = [16, 20, 25, 31, 39, 49, 61] // each size = previous size * 1.25 rounded

Example

This example shows how to create a simple typography scale in Figma and apply text styles:

text

1. Set base font size to 16px.
2. Choose scale ratio 1.25.
3. Calculate sizes: 16, 20, 25, 31, 39.
4. In Figma, create text styles named "Body Small" (16px), "Body" (20px), "Heading" (25px), "Title" (31px), "Display" (39px).
5. Apply these styles to text layers in your design for consistent sizing.

Output

Text styles created:
- Body Small: 16px
- Body: 20px
- Heading: 25px
- Title: 31px
- Display: 39px
Applied styles maintain consistent typography scale.

Common Pitfalls

Common mistakes when using typography scales in Figma include:

• Not using consistent text styles, leading to uneven font sizes.
• Choosing an irregular scale ratio that makes sizes hard to read or inconsistent.
• Manually resizing text instead of applying text styles, which breaks consistency.
• Ignoring line height and letter spacing adjustments for each size.

text

Wrong way:
- Manually setting font sizes like 17px, 23px, 29px without a pattern.
Right way:
- Use a fixed ratio like 1.25 to calculate sizes: 16px, 20px, 25px, etc.
- Create and apply text styles for these sizes.

Quick Reference

Step	Description	Example
1	Set base font size	16px
2	Choose scale ratio	1.25 or 1.333
3	Calculate sizes	16, 20, 25, 31, 39
4	Create text styles	"Body Small", "Body", "Heading", "Title"
5	Apply styles consistently	Use styles on all text layers

Key Takeaways

Start with a base font size and multiply by a fixed ratio to create your scale.

Create named text styles in Figma for each size to ensure consistency.

Always apply text styles instead of manually resizing text layers.

Choose a scale ratio that keeps font sizes readable and balanced.

Adjust line height and spacing for each text style to improve legibility.