Typography
Clear and well-considered typography is at the basis of high quality user interfaces. Our aim is to design highly legible screens, that are easy to scan and read.
Segoe
The design system uses the Segoe UI variant across the entire product. Segoe UI is designed for digital screens, to maintain optimal legibility across sizes and pixel densities and offers a clean, light, and open aesthetic.
Font stack
When Segoe UI is not available, the CSS font stack should fall back to the system’s default sans serif font, translating into:
- Mac OS X (El Capitan+): San Francisco
- Mac OS X (Yosemite): Helvetica Neue
- Mac Os X (Mavericks): Lucida Grande
- Windows (Vista+): Segoe UI
- Windows (XP): Tahoma
- Ubuntu: Ubuntu
- Android (4.0+): Roboto
- Android (1.5–3.2.6): Droid Sans
Read more at CSS Tricks
Type ramp
The type ramp is based on the semantic usage of each style available. It includes a small set of styles that can be used in a variety of combinations to provide a clear hierarchy without overwhelming the screen with too many different font sizes and weights.
There are 4 title styles, 4 body styles (each size in semibold and regular weights), and 2 monospaced styles available in the system.
Do: Use existing styles to define hierarchy between text blocks with different meaning and importance.
Don’t: Create new styles, or variations of existing styles.
The line height of each style is embedded in the Figma component and in the code component.
Bold
The styles exist in regular (400) or semibold weight (600). We don’t use Segoe UI’s bold weight as it looks too heavy on the screen.
Do: Use semibold (600) for emphasis.
Don’t: Overuse semibold, or use bold for emphasis.
Color
There are 3 neutral type colors available on light and dark themes, plus an accent color available on light theme.
Margins
The design system is unopinionated about margins around text blocks. These should be defined according to each specific case, using the existing spacing scale.
Line length
The ideal line length (also known as measure) for Latin characters is between 50–60 characters (1 and 2), including spaces, and never more than 75 characters (3).
In cases where there is no continuous reading, long line lengths are not an issue (example, (1) in the header area).
Do: Constrain the width of a parent container to provide a comfortable line length, when needed.
Alignment
Generally, we recommend that visual elements and columns of type be left-aligned (1). In most instances, this flush-left and ragged-right approach provides consistent anchoring of the content and a uniform layout.
Capitalization
Titles and headings should be sentence case, following Microsoft Style Guide. The style guide includes several examples of where it’s appropriate to capitalize words (for example people and product names).
Clipping text
Do: Use ellipsis to clip long text strings that would otherwise wrap or overflow their parent container (1).
Where possible, be mindful of clipped lists of text strings that start with the same words/characters, as clipping makes it hard to distinguish between each item on the list. Avoiding this may not be possible for user-generated content.