TechPrufer
Get started
GitLab
GitLab logoGitLab · Feature trail

Typeface System and UI Consistency

2 posts · Dec 2021 – Jan 2023

What this trail covers

GitLab has introduced new default typefaces, GitLab Sans (Inter) and JetBrains Mono, to enhance UI consistency, readability, and brand continuity. This change aims to improve user experience by providing more control over typography, reducing inconsistencies across platforms and browsers, and enabling finer tuning of visual weight and hierarchy. The new typefaces are open source and packaged for easier consumption across GitLab properties and design tooling. This post details the specific iteration on type scales and updating design resources in Figma.

All GitLab trails
  1. Get to know the new GitLab typefacesThis post details the introduction of GitLab Sans (Inter) and JetBrains Mono as the new default typefaces. It explains the rationale behind the change, focusing on brand continuity, UI consistency, and content enhancement. Key technical aspects include enabling disambiguation features in Inter for character distinction, addressing system font limitations (like varied x-heights and widths), and the benefits of using open-source, UI-designed fonts for better control over typography, readability at smaller sizes, and reduced CSS bloat. The post also mentions packaging the fonts for easier consumption and leveraging them in design tooling.
  2. Hey icons, lighten upThis post details a specific iteration of improving product icons by changing the stroke weight from 2-pixel to 1.5-pixel. This change was driven by the need for icons to be more balanced with other UI elements, better align with the brand, be more future-proof, work well in both light and dark UI, and better convey abstract concepts. The 1.5-pixel stroke weight was chosen to improve fidelity, balance visual weight with system fonts, enhance legibility for users with visual impairments, offset the bleeding effect in dark UIs, and address concerns about display resolution. The post also highlights efficiency gains in asset creation using Figma and reusable icon components.