## Purpose Explore options regarding typography: - Switching to [Inter](https://rsms.me/inter/download/) and [JetBrains Mono](https://download.jetbrains.com/fonts/JetBrainsMono-2.242.zip) instead of relying on system fonts - Make use of variable fonts - Tweaking/improving/streamlining our type scales - Product integration plan/roadmap - UI and design tooling consistency ## Considerations ### Inter and JetBrains Mono vs. system fonts - Inter and JetBrains are both open source and include [variable font](https://fonts.google.com/knowledge/introducing_type/introducing_variable_fonts) features that aren't available for system fonts. This allows nuanced fine tuning for optical weights under different circumstances and use cases. For example, a slightly lighter weight could be used in a dark UI to counter ghosting and light bleed instead of using `-webkit-font-smoothing`. - Inter and JetBrains Mono both include font features for disambiguation (1Il test) and stylistic alternates, like a slash-zero that help distinguish characters in documentation, code, and critical text strings. - System fonts vary a great deal, but can also render differently from browser to browser on the same system. Being more prescriptive will help with consistency for users, but also allow us to further refine and optimize the UI. - JetBrains Mono could be set as the default in the VS Code web editor (can still be changed with a preference), making all monospaced text in GitLab consistent by default. - The [GitLab marketing site](https://about.gitlab.com/) uses Inter, and other properties, like the Handbook, will likely follow suit. From this effort we could set type standards and a single source of truth across all GitLab properties (marketing, docs, handbook, product, etc.). ### Performance - Loading additional font resources would result in an initial extra payload. However, we'd likely be able to update SCSS in many places which could help offset the extra load. - [`font-display: swap;`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display) and [`<link rel="preload">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload) could be used to help reduce initial load time. ### Language support - Inter and JetBrains Mono both have extensive language support, see https://rsms.me/inter/#languages and https://www.jetbrains.com/lp/mono/. - The font stack would still rely on system fonts as fallback so that unsupported characters can be replaced. ### Licensing - Inter and JetBrains Mono are both available under the SIL Open Font License 1.1. See https://www.jetbrains.com/lp/mono/#license and https://github.com/rsms/inter/blob/master/LICENSE.txt so they can be packaged and shipped. - One reason that Inter was chosen for the brand refresh was because it was open source. Leveraging these fonts aligns with our perspective on open source. ### Design - Inter was created for UI, whereas many system fonts weren't. In GitLab's condensed UI, the characteristics of Inter, like tall x-height and disambiguation help increase legibility. From the [website](https://rsms.me/inter/#languages): - >Inter is a typeface carefully crafted & designed for computer screens. - >Inter features a tall x-height to aid in readability of mixed-case and lower-case text. Several OpenType features are provided as well, like contextual alternates that adjusts punctuation depending on the shape of surrounding glyphs, slashed zero for when you need to disambiguate "0" from "o", tabular numbers, etc. - Likewise, JetBrains Mono was created for screens and improving the developer experience. From the website: - >Increased letter height for better reading experience. - >Characters remain standard in width, but the height of the lowercase is maximized. This approach keeps code lines to the length that developers expect, and it helps improve rendering since each letter occupies more pixels. - >JetBrains Mono’s typeface forms are simple and free from unnecessary details. Rendered in small sizes, the text looks crisper. The easier the forms, the faster the eye perceives them and the less effort the brain needs to process them. - Figma ships with the variable version of Inter and it's the default typeface. This makes it easier for design to be consistent out of the gate and there's no barrier for community design contributions to leverage GitLab assets and styles. - In the current [Pajamas UI Kit](https://www.figma.com/files/project/3802635), files leverage Helvetica Neue, which has some baseline issues, isn't available for free on all operating systems, and doesn't align with recent system fonts, like Apple's San Francisco. Leveraging a typeface that's readily available for all designers while matching the UI in production increases time to design, increases design consistency, and decreases visual regression. - Inter will have display capabilities coming soon, which would benefit headings ([details](https://github.com/rsms/inter/releases/tag/v4.0-beta1)). ### Type scales - Current type scales rely on spacing from one system font, but the result can vary depending on which system font is displayed. This makes spacing, optical sizing, and hierarchy more difficult to manage consistently. - Although not directly related to changing fonts, the variable font features could make it much easier to make adjustments for different use cases instead of the need for the three different type scales that exist today. See [this example](https://codepen.io/saschaeggi/pen/LYdaOPX) of how scale factors can be used. --- **Live examples using Inter or JetBrains Mono:** - [Linear (website + app)](https://linear.app/) (Inter) - [Refactoring UI](https://www.refactoringui.com/) (Inter) - [Tailwind UI (website + UI examples)](https://tailwindui.com/) (Inter) - [Raycast (website + app)](https://www.raycast.com/) (Inter, JetBrains Mono) - [CleanShot X (website + app)](https://cleanshot.com/) (Inter) - [Figma (app)](https://www.figma.com/) (Inter)