Properties
Size
Our typography system includes a range of sizes from XS to XL, encompassing 3 to 5 different options within each category. Start with a smaller set and expand as your product grows, ensuring your typography scales seamlessly with your design.
Family
Performance optimization is key when selecting font families. Ideally, stick to a single font family for simplicity and efficiency. However, branding requirements might necessitate the use of multiple families. If so, try to limit yourself to two families and be mindful of the impact on performance.
Weight
When it comes to font weights, less is more. We recommend limiting your selection to two weights: regular and bold or semi-bold. This restriction not only simplifies your design but also contributes to a cleaner, more consistent look across your product.
Scaling
Incorporating the adaptive scaling mechanism outlined in our Scaling chapter ensures that your typography automatically adjusts to different viewports. This feature is particularly beneficial for maintaining proportionate and legible typography across various device sizes.
Keep in mind that larger fonts require additional, pragmatic rescaling to ensure optimal layout shift and visual impact.