Typography
The default font for Clarity Design System is Metropolis
Type styles
Heading and paragraph classes have been replaced with names according to their common usage. These include names such as Headline, Title, Body, and Caption. Usage guidelines assist in determining which is appropriate for most common design requirements.
| Style Name (in Figma) | Example | Suggested use |
|---|---|---|
Display | 40px Medium |
|
Headline | 32px Medium |
|
Title | 24px Medium |
|
Section | 20px Medium |
|
Subsection | 16px Medium |
|
Message | 16px Regular | Larger running text, often for brief messages in application pages |
|
|
|
|
|
|
Caption-LG-11 | 11px Regular | Labels, Form inputs - Helper messages |
Caption-SM-10 | 10px Medium | Text inside badges |
Line heights and vertical rhythm
Clarity uses a 4 px grid and a 24 px baseline for vertical rhythm to create visually harmonious layouts. With the exception of Display and Headline, Clarity type styles include variable line heights: standard, compact and expanded. All line heights are divisible by 4. The variable line heights add versatility to the type system.
Standard line height maintains adequate spacing for the type to retain vertical rhythm and ease of reading. Use standard line height when the text is a stand alone unit such as an inline message or description. The compact line height is appropriate for use within containers. This allows increased information density when space is tight. Users often prefer such information density, and given the structure created by the container, the type is often easier to read as it establishes its own visual unit within. Clarity components can employ compact type or may be customized to do so whenever appropriate.
Applications will often have landing pages and other screens with a marketing or informational function. Such screens often exhibit a lot of negative space, have different design sensibilities and consequently require different strategies for handling typography. When designing a screen in this style, where type is both the structure and the content, it is essential that vertical rhythm is strong and effective because there is often no other device to give unity to the page. The expanded line heights are useful in establishing vertical rhythm in such designs.
Select type classes paying careful attention to their line height. The large classes (Display, Headline, Title) will most often be used in single lines. If a larger size is carrying text that wraps to several lines, this may be a sign that a smaller size is needed. Each of the larger typographic elements should sit solidly upon the baseline grid.
Information hierarchy
The primary purpose in having a variety of type sizes and weights is to assist designers in achieving effective information hierarchy. By selecting the most appropriate sizes and weights across a screen, the user is aided in easily scanning the content and finding what they are looking for. Here are a few example layouts to assist the process.
