Type fundamentals
Text is the primary way of communicating within GitLab. A thoughtful use of semantics and visual hierarchy can provide consistency and clarity to aid in comprehension and action.
Typefaces
GitLab Sans, based on Inter, is used for most user interface (UI) elements, with system fonts used as a back-up. GitLab Mono, based on JetBrains Mono, is used for code-related elements, for example, code blocks, branch names, commit IDs, and pipeline IDs. The fonts are available to download in this package.
The decision to use custom typefaces supports a consistent core experience for users, regardless of their device. A finer control of font size, variable weight, and other attributes like disambiguation enable greater optimization of usability and polish.
The typefaces were chosen because:
- Tall x-height that improves legibility at small sizes and readability of mixed- and lower-case text.
- Features that include character disambiguation and OpenType Font Variations.
- Balanced and complementary pairing that supports the GitLab brand expression.
- Open source.
Sans serif font stack
font-family: 'GitLab Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans',
Ubuntu, Cantarell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';
Monospace font stack
font-family: 'GitLab Mono', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas',
'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;
Type scales
GitLab utilizes two type scales: dynamic and fixed.
- The dynamic scale is used for any UI text within GitLab. The 500–800 options rely on the viewport width to dynamically change size between the min and max.
- The fixed scale is used for Markdown (user generated content). Sizes match the min of the dynamic scale.
| Variable | Dynamic scale | Fixed scale | Use | |
|---|---|---|---|---|
| Min | Max | |||
$size-text-100 |
12px | 12px | 12px | Meta text, small labels |
$size-text-200 |
13px | 13px | 13px | Level 6 headings |
$size-text-300 |
14px | 14px | 14px | Level 5 headings, body text, input labels, help text |
$size-text-400 |
16px | 16px | 16px | Level 4 headings, large body text |
$size-text-500 |
18px | 20px | 18px | Level 3 headings |
$size-text-600 |
21px | 25px | 21px | Level 2 headings |
$size-text-700 |
24px | 30px | 24px | Level 1 headings, limited to one per page (see Semantics). |
$size-text-800 |
28px | 36px | 28px | A display option that can be applied to a level 1 heading to increase its prominence. This can be useful for a learning path or feature promotion. Limited to one per page. |
Note that in implementation the variables use rem values (relative units) instead of pixels (absolute units), so that text respects browser settings for size and scale.
Font weight
GitLab uses contrasting font weights to support visual hierarchy within the application. Generally, three weights are used by default: 400, 600, and 700.
| Value | Use |
|---|---|
| 400 | Body copy and data tables |
| 600 | Headings and specific UI elements, such as an input label |
| 700 | Inline with 400 for content of greater importance |
Text color
There are a number of text colors defined in GitLab. Color choice depends on the location and purpose of the text.
| Category | Variable | Example |
|---|---|---|
| Primary | $gray-900 |
Main titles and body |
| Secondary | $gray-500 |
Accompanying help text or menu subtitles |
| Tertiary | $gray-400 |
Input placeholder or disabled (inactive or non-operable) |
The tertiary text color ($gray-400) has a 3.52 contrast ratio on white, which falls short of the 4.5:1 ratio needed to pass WCAG 2.2 SC 1.4.3 Contrast (Minimum) (Level AA). Inactive components are not required to have sufficient contrast, but we try to get as close as possible while still visually differentiating active and inactive text. Refer to the Forms pattern details for more information about placeholder text.
Related
Last updated at: