Typography
Primary typeface
GitLab Sans is the default typeface for all GitLab materials. It is free for download and features a tall x-height to aid in readability. Although it comes in an array of weights, we primarily use Bold and Regular to preserve simplicity.
GitLab Sans usage
In general, the following guidelines apply to all text:
- Keep the font size consistent within each block of copy.
- Left-align all copy. Never force-justify, center-align, or right-align, unless the written language dictates otherwise.
- Default to sentence case, and refrain from using all-caps.
- Keep text solid-filled, with the exception of motion graphics.
- Default to white or Charcoal for copy; refer to the color guidelines for exceptions.
- If GitLab Sans is not available (such as Google applications), use Inter instead.
Refer to the guidelines illustrated below to add hierarchy to your messaging:
- Headlines use GitLab Sans Bold with 105% leading and -45 tracking (-4.5% in Figma).
- Subheaders and intro/outro paragraphs use GitLab Sans Regular with 110% leading, -20 tracking (-2% in Figma), and optical kerning.
- Body copy uses GitLab Sans Regular with 135% leading, 0 tracking, and auto kerning.
- Call-to-actions and buttons use GitLab Sans SemiBold.
Secondary typeface
GitLab Mono is used sparingly alongside GitLab Sans. This font is visually reminiscent of code and can be used to provide more depth to the typography of any asset. It is best used for secondary elements such as labels, code snippets, callouts, select taglines, and numerical statistics.
GitLab Mono usage
Refer to the guidelines below when working with GitLab Mono:
- Only use Regular weight to preserve simplicity and maintain visual similarities with code.
- With the exception of code blocks and/or product UI representations, GitLab Mono should not be used for large bodies of text.
- GitLab Mono should not be used within a larger body of text set in GitLab Sans.
Type repetitions
Type repetitions are a stylistic expression of GitLab’s commitment to iteration. It is reserved for moments of emphasis and adding visual interest.
Construction
Follow these guidelines to properly achieve the type repetitions effect:
- Type out a single word in GitLab Sans Bold.
- Create a copy of the text and remove the bottom 1/4 of the text from the baseline.
- Take this newly redacted type and repeat it 2-4 times above the original text.
- Ensure that the vertical spacing between each repetition equals 3/4 of the bottom portion that was removed.
- Keep the font weight and color the same throughout, although opacity changes can be applied to the repetitions.
Last updated at: