Font stacks
The only font files we need to load are Sofia Pro in 400 and 600. We use system and default fonts as fallbacks in the stack.
Sans-serif: "Sofia Pro", system-ui, -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir", "Segoe UI", "Helvetica Neue", "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif;
Monospace: "Menlo", "Monaco", "Consolas", "Lucida Console", monospace;
Heading
Body
Caption
Overline
Monospace
Misc
Body 1 (use sparingly)
Body 1 uses a 16px / 1 rem sizing with a 24px line-height. It is not as commonly used in the product and is slowly being phased out with the body 2 variation that uses a 14px / .875 REM sizing and a 20px line-height.
Tnum
Tabular numerals (Tnum for short), also known as monospaced or table numbers, are a font feature where each numeral has the same width. This uniformity is crucial in certain design contexts for several reasons:
-
When to Use:
Data-Intensive Contexts: Tabular numerals are ideal in tables, spreadsheets, and any layout involving columns of numbers. This ensures that numbers line up vertically, making the data easier to read and compare
Financial Statements: In financial documents where precision and clarity are essential, tabular numerals help maintain a clean, organized appearance
Timetables and Schedules: For displaying times or dates, where alignment is key for quick comprehension
UI with dynamic data: interface involving dynamic data can use tabular numerals to maintain the layout's consistency as numbers change
-
Why to Use:
Clarity and Readability: Ensures that numbers are easily readable and comparisons between rows or columns are straightforward
Aesthetic Consistency: Provides a uniform look, which is often crucial in professional or formal documents
Functional Accuracy: In UI/UX design, they prevent shifting or resizing of elements due to variable-width numbers, ensuring a stable and predictable layout
-
Design Considerations:
Context Suitability: While beneficial in certain scenarios, tabular numerals might not be necessary or visually appealing in more narrative or text-heavy designs.
Balance with Other Features: Consider how tabular numerals work with other font features (like kerning, ligatures) in your overall design.
When dealing with data representation or UI elements involving numbers, the application of tabular numerals can significantly enhance both the functionality and aesthetics of your design. It's a small detail that can greatly improve the user experience and the effectiveness of the information presented.
Misc
Body 2 - special
Due to Figma constraints, there are some special Body 2 configurations that have to be created using individual styles
Button