Blogs›GitLab›Typeface System and UI Consistency

Typeface System and UI Consistency

posts

2021–2023

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 of improving product icons by changing the stroke weight from 2-pixel to 1.5-pixel, leading to better fidelity, balance with text, improved legibility for visually impaired users, better performance in dark UIs, and increased production efficiency through Figma's boolean unions and reusable components.

2023

Get to know the new GitLab typefaces

1/17/2023

This post introduces the adoption of GitLab Sans (Inter) and JetBrains Mono as the new default typefaces for the GitLab UI. It details the rationale behind the change, focusing on brand continuity, improved user experience through enhanced readability and consistency, and the benefits of using dedicated UI typefaces over system fonts. Specific technical considerations include enabling disambiguation features in Inter for better character distinction, similar x-heights between the two typefaces for consistent text styling, and the performance implications of distributing custom fonts. The post also outlines future work on type scales and heading structures.

2021

Hey icons, lighten up

12/17/2021

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