Typography
God is in the kerning
Wanda design system doesn't use custom fonts, instead it relies on the system fonts because we put performance and reactiveness ahead aesthetic. System fonts are made by awesome people around the world and they aim to solve all the issues across languages and readability, by using them our users don't have to wait until the font is downloaded and rendered.
Typefaces
System fonts grant an immersive experience with our digital products. This means the typeface changes based on the operating system, so the user will have the perception of using a native system application.
Type scale
In general, text elements and typography play a very important role, and represent one of the main ways of conveying information from one point to another. For this reason, typographic aspects should never be underestimated, no matter which is context. In Wanda design system, we have tried to balance the impact of text components with other interface elements.
The type scale is a combination of 11 sizes that are supported by the type system. It contains re-usable categories of text, with an intended application and meaning for each.
Headings
Headings follow a scale based on a 1.333 factor (Perfect Fourth) starting from the basic unit of 18px (1rem, 1em, 112.5%).
100px — 5.61rem
Display Title
75 px — 4.209rem
Level 1 Heading
56.83px — 3.157rem
Level 2 Heading
42.63px — 2.369rem
Level 3 Heading
31.98px — 1.777rem
Level 4 Heading
23.99px — 1.333rem
Level 5 Heading
18.00px — 1rem
Level 6 Heading
Content
Wanda's typography system provides five different sizes for text content. While we suggest to use text sized at least 16px for accessibility concern, sometimes you have to use a smaller text but you should avoid such situations as much as possible.
28px — 1.55rem
Aenean tempor sem sed lorem ultricies lacinia. Sed sit amet tortor nibh.
22px — 1.22rem
Aenean tempor sem sed lorem ultricies lacinia. Sed sit amet tortor nibh.
18px — 1rem
Aenean tempor sem sed lorem ultricies lacinia. Sed sit amet tortor nibh.
16px — 0.88rem
Aenean tempor sem sed lorem ultricies lacinia. Sed sit amet tortor nibh.
14px — 0.77rem
Aenean tempor sem sed lorem ultricies lacinia. Sed sit amet tortor nibh.
Responsive typography
The whole typography system of Wanda is built on top of a respnsive typography size which improve the readability and adapt the text size on smaller devices.
On smaller screens both titles and text content are resized dynamically based on the viewport size by using the following scheme. Each number refers to a specific size of the text.
| Mobile | Desktop |
|---|---|
| 14 | 16 |
| 16 | 18 |
| 18 | 22 |
| 22 | 28 |
Text elements sized 18 on desktop becomes 16 on mobile, and so on. Text elements sized 14 on desktop, are the same size even on mobile to ensure a minimum readability.
Resources
Check the resource page to download all the Wonderflow's assets.