Typography
Learn how to use our Canva Sans font family, and how to use it in your app.
Our typefaces
Typography forms a large part of the look and feel of our product. We use two different typefaces for our product: Canva Sans Display and Canva Sans.
The basics
Our typeface family flexes from accessible to playful, from buttons to billboards. Canva Sans Display is our headline font, full of playfulness and humanity.
| Variations | |
|---|---|
| Size | Micro, Small, Medium, Large, and Extra large |
| Weight | Regular, Medium, and Bold |
Titles and headings
Use Canva Sans Display for titles and headings. On small viewports, larger text sizes are also reduced.
| Name | Size |
|---|---|
| Title Micro | 12px |
| Title Small | 18px |
| Title Medium | 20px |
| Title Large | 24px |
Body and paragraph text
Use Canva Sans for body text; text sizes remain the same for all viewports.
| Name | Size |
|---|---|
| Body Micro | 10px |
| Body Small | 12px |
| Body Medium | 14px |
| Body Large | 16px |
Best practices
Do
- Use
colorTypographyTertiaryto make text more subtle. - Use
colorTypographyQuaternaryfor placeholder text. - Default to Body Medium for text and Title Medium for headings.
- Pair like-sized title and body text sizes.
Don't
- Don't underline text for emphasis or anything other than links. Consider using bold or a larger font size instead.
- Use inconsistent spacing for similar components (e.g. do keep spacing between the labels and their components consistently 4px).
