[PLAN] Discuss using Inter font for the navigation

Source file seems smaller here
https://github.com/rsms/inter/tree/master/docs/font-files

Tested woff2 font here. Size 325Kb:

https://git.drupalcode.org/project/navigation/-/merge_requests/90/diffs#...

We can open MR for this i guess.
License seems OK:
https://github.com/rsms/inter/blob/master/LICENSE.txt

We haven't decided if we're moving forward with this yet: we need to discuss this on a design and copyright perspective first. So no code needed here yet until a decision is made. Thanks @finnsky!

#3032981: [meta] Accessibility guidelines for Claro → has the following reasoning for using system fonts:

The base font size used on the style guide is 16px. This style guide is designed to use system fonts which comes with various benefits, including improved performance and better support for various writing systems. Using system fonts will also make the UI feel like more familiar to the user since the look and feel will be closer to the users' environment.

What has changed so that we want to go back to using a non-system font?

tl;dr: If I recall it properly, when the decision for Claro was taken way before #3032981: [meta] Accessibility guidelines for Claro → , several points influenced the balance to choose the system font: dealing with all the copyright work (I can't find the issue but Olivero cleared the way here) and the support and availability for variable fonts wasn't good enough.

Nowadays, things are different:

• Since we dropped IE11 support, variable fonts are totally supported by modern browsers.
• A variable font will let us use different weights for the UI, which will let us prioritize UI texts giving us more flexibility.
• Controlling what we communicate has more priority than minimum impact of using a variable can have: not all system fonts look as nice as Mac's San Francisco. Controlling which tone the UI transmits or which perception the user has using the product UIs is important, and typography is one of the key design tools we have.

And specifically about Inter font: it has been designed for computer screens, with a tall x-height to aid in readability as one of its key features. While SF on Mac complies with this too, it can't be said from all system fonts.

Definitely we need specific font defined only for admin toolbar to prevent case when font from custom theme is overriding toolbar's font

Also i see we have 2 places where we are using semibold font currently - which has no effect at all right now since available weights of font are currently 400 and 700 only. Instead of 600 font visually we getting 700 now.

If we are going to use `Inter` font - i would say weight of source fonts can be around 200 kb, because we need only:
1. "normal" font-style and we don't need "italic" - at least right now i don't see any italic text in the toolbar
2. 400 and 700 font.

And one more note regarding using custom font - is that it would be better to standardize font across the platforms.
And also i agree with everything here #7 🌱 [PLAN] Discuss using Inter font for the navigation Fixed

Also we have font-display property https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display which can be defined inside of @font-face with value `swap`. By default fallback font will be used (in our case fallback fonts can be system fonts). Once Intet font is downloaded -> it becomes immediately applied. Then cached. 100% sure there is no performance affects

Since I was involved in exploring the design ideas for Drupal's new admin UI, I wanted to share some thoughts that led to the choice of Inter for the font. This background information will hopefully be helpful for others interested in these design choices.

When choosing a font for Drupal's admin interface, the following requirements and goals were top of mind:

Requirements:

• It should be servable as a web font (not a system font). System fonts create the possibility (if not likelihood) that the interface will not appear the same for all users. Users have varied operating systems, installed fonts, etc. We want the experience not to change depending on those things.
• It should have an open-source license. Like the font for Olivero, we want to be able to package the web font with Drupal.
• It should be versatile. Ideally, it should be a variable font that can function well as both a display face and a text face. It also needs to provide an assortment of weights to support the visual hierarchy needs of a complex interface.

Desires:

• It should feel modern. The initiative to redesign Drupal's admin interface aims to modernize the interface and improve the user experience. Since a great deal of Drupal's interface is text, it's essential for the typeface to feel modern to achieve this.
• It should feel friendly and approachable. We want the new version of Drupal's interface to appeal to developers and content editors alike.

Inter fits the bill quite nicely for what we were looking for. Some of the qualities that stood out to us include:

• Versatility: It was designed to optimize screen-based reading for a font that needed to function as both a display and text face. Rasmus Andersson (and a team at Figma) were looking to replace Roboto with a typeface that could work well as a display face while still being readable at small sizes.
• Legibility: Due in part to its tall x-height, Inter maintains good legibility even at quite small sizes. Drupal's interface can be information-dense, and our goal in the redesign has been to maintain that density while also providing a clear hierarchy. Achieving this requires a range of type sizes within the design.
• Flexibility: Inter provides a wide range of weights, essential for achieving visual hierarchy in information-dense interfaces. It also has tabular figures for its numbers and slashed zeros, which improves clarity when things like counts are provided alongside textual content within the interface.
• Warmth: Inter has a friendly, approachable feel due to its open, smooth, and rounded shapes. Its consistent geometry makes it easy to parse while maintaining a modern feel.

All of that said, it's important to acknowledge there are MANY fonts one could make a case for using. Ultimately, a choice has to be made for one among the many. The group of designers contributing to the process researched and explored various options and wound up choosing Inter over the other options explored.

@jponch thank you!

We discussed this with @lauriii and he mentioned the points made show that the decision to change the direction from using a system font has been made consciously taking all the requirements into account, so he's OK with it.

So let's move forward with this in 📌 Use Inter as the default font for the new admin Navigation Active .

Thanks everybody for the discussion!

Automatically closed - issue fixed for 2 weeks with no activity.