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.
Our typeface family flexes from accessible to playful, from buttons to billboards. Canva Sans and Canva Sans Display are our headline fonts, full of playfulness and humanity.
The best way to use typography in your app is through our pre-built
Title components, available in the App UI Kit.
Text components are intended for use in body content and
Title components are intended for headings and subheadings — they use semantic HTML tags (p, h1 … h6, etc) accordingly, and come in a variety of sizes:
Title variations of the same size are designed to pair well.
|Size||xsmall, small, medium, large, xlarge|
|Weight||regular, medium, bold|
Titles and headings
Use Canva Sans Display (
Title) for titles and headings: the typeface is bolder and more distinctive.
Body and paragraph text
Use Canva Sans (
Text) for body text.
- Opt for
Titlecomponents over custom typography elements.
- Use typography-specific functional colors. For example,
colorTypographyTertiaryto make text more subtle and
colorTypographyQuaternaryfor placeholder text.
- Pair like-sized title and body text sizes.
- Underline text for emphasis (except in links). Consider using bold or a larger font size instead.
- Use inconsistent spacing for similar components (for example, keep spacing between the labels and their components consistently 4px).
- Set colors directly. Use the prop in
Titlecomponents from the App UI Kit.