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

Refer to the guidelines below when working with GitLab Sans:

  • Different sizes and weights can be used to establish layout hierarchy.
  • 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.
  • 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.
  • If GitLab Sans is not available (such as Google applications), use Inter instead.
Typography samples
GitLab Sans typography samples

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.

Type repetitions mockup
Type repetitions mockup

Construction

Follow these guidelines to properly achieve the type repetitions effect:

  1. Type out a single word in GitLab Sans Bold.
  2. Create a copy of the text and remove the bottom 1/4 of the text from the baseline.
  3. Take this newly redacted type and repeat it 2-4 times above the original text.
  4. Ensure that the vertical spacing between each repetition equals 3/4 of the bottom portion that was removed.
  5. Keep the font weight and color the same throughout, although opacity changes can be applied to the repetitions.
Type repetitions
Type repetition settings

Last updated at: