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.


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 500800 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.

Last updated at: