Font family and font size
Set the typeface and size for text layers in the typography inspector.
Font family
Font family is the typeface applied to a text layer (e.g., Inter, Roboto, Playfair Display). Within a family, you can select a specific weight (Regular, Medium, Bold, etc.) and style (Normal, Italic).
Setting the font family
- Select a text layer.
- In the right inspector, open the Typography section.
- Click the Font family field and type to search for a font.
- Select a font from the dropdown results.
- Choose the weight from the weight field next to the family name.
To apply to a specific range of characters, enter text edit mode first and select the characters before changing the font.
Font size
Font size controls how large the text renders, measured in pixels (px).
Setting the font size
- Select a text layer or a character range in text edit mode.
- In the Typography section, find the Size field.
- Type a new value or use the scrubber.
Common size ranges
| Use case | Typical size range |
|---|---|
| Body / paragraph text | 14–18 px |
| UI labels and captions | 11–13 px |
| Section headings | 20–32 px |
| Page titles / hero text | 40–80 px |
Tips
- Limit typeface choices to 1–2 font families per design for visual coherence. Use weights (Bold, Regular, Light) within a single family rather than switching to a second family.
- If a font is listed but renders incorrectly or is substituted, check Missing fonts.
- Font sizes used consistently across the design are best managed as font tokens.