Typography
Typography is at the core of our interface. With it, we create clear hierarchies that guide users through our products. Text sizes, styles, and layouts were selected to balance UI content and foster familiarity.
Working with type
Make it scannable
Users don’t read they scan. Keep related text aligned and closer together to create visual groupings.
Create visual hierarchy
Pair font weight, size, and color together to create hierarchy. Use a lighter color or font-size to de-emphasize secondary content.
Designing with type
When designing with type, we can use a combination of font size, weight, color, and space to ensure a strong hierarchy and scannability of a page. By understanding the fundamentals, you’ll be able to better apply type to the UI.
Baseline alignment
The baseline is the imaginary line that letters rest on. Align text horizontally to the baseline for a simple clean look.
There are situations where it makes sense to have multiple text sizes on a single line to establish hierarchy of elements. Aligning to the text’s baseline instead of center gives a more harmonious look.
Do
Align text to the baseline for a more harmonious look.
Don‘t
Text that is center aligned may be more difficult to scan.Color
Color can be used to add contrast and reinforce the hierarchy between text. View available colors on our text page.
For example, one way to distinguish between a title and a subtitle is to apply text-gray-1000 to the title, and text-gray-500 to the subtitle. Using a lighter color for secondary information provides contrast between the text and helps reinforce hierarchy even when the text is the same size and weight.
Do
Add color contrast to reinforce the hierarchy.
Don‘t
Information hierarchy is more difficult to detect when titles and descriptions use the same weight, size, and color.Spacing
We can help users navigate the UI by grouping related information together. One way to do this is to use space to create relationships between elements on a page.
Do
Use space to create relationships between elements.
Don‘t
Ambiguous spacing can cause confusion and make it hard to understand the content.Font family
To achieve high legibility Certara DS uses:
- Inter as its primary font family
- Inconsolata regular is used to display code like <div class=“d-flex”>…</div>
Font weight
Use font weights to emphasize or differentiate content hierarchy.
- 300 — Light
- 100% — Regular
- 500 — Regular strong
- 600 — Semibold
- 700 — Bold
Font size
All font sizes have a ratio of 1.125, known as the major second scale. Each size is multiplied or divided by 1.125 from the previous size, starting with the base size, and rounded to a multiple of 2.
| Name | REM | PX | Line height |
|---|---|---|---|
Heading 1 | 1.75 | 28 | 1.2 |
Heading 2 | 1.5 | 24 | 1.3 |
Heading 3 | 1.25 | 20 | 1.3 |
Heading 4 | 1.125 | 18 | 1.3 |
Heading 5 | 1 | 16 | 1.5 |
Heading 6 | 0.875 | 14 | 1.5 |
Subheader | 0.75 | 12 | 1.5 |
Body large | 1.125 | 18 | 1.5 |
Base body | .875 | 14 | 1.5 |
Caption | .75 | 12 | 1.5 |
Small | .6875 | 11 | 1.5 |
Font stack
We use sans serif fonts for most of our type in-product, the exception being when you want to display code then you should defer to monospace fonts.
The font stack contains a number of similar typefaces to support a series of fallbacks for circumstances when Inter cannot be loaded on a user’s device.
Sans-serif
font-family: Inter, Roboto, Helvetica, sans-serif;Monospaced
font-family: Inconsolata, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;