Use Segoe UI Variable for Windows 11

[SFM61319]

Please use Segoe UI Variable (Small variant for tiny text, Text variant for normal text, Display variant for large text) and Segoe Fluent Icons, as the default Sans-Serif font and the icon font - for icons used in Visual Studio Code - respectively, in Visual Studio Code (at least on Windows 11, and maybe Windows 10).

• Fonts (Official)
• Fluent System Icons

Thank you.

[miguelsolorio]

Because VS Code is cross-platform, meaning we support Windows/Mac/Linux/Web, we can't use a single font and rely on the system fonts. In addition to that, we have our own icon system, codicons, that is based off of the Fluent icons. We also have a product icon theme, Fluent Icons, if you are interested in that.

I'll close this issue as as-designed for the reasons above. Thanks for the suggestions!

[sbatten]

@misolori we do this today for Windows, would it make sense to prepend the variable font? https://github.com/microsoft/vscode/blob/757517485b8ea54b71d9181f2a8def7c60eeb80d/src/vs/base/browser/ui/contextview/contextview.ts#L398-L402

[miguelsolorio]

@sbatten we could try it out in a build, but my concern is having a font-weight clash since we don't normally define these per-font. Do you want to try this out?

[SFM61319]

Because VS Code is cross-platform, meaning we support Windows/Mac/Linux/Web, we can't use a single font and rely on the system fonts. In addition to that, we have our own icon system, codicons, that is based off of the Fluent icons. We also have a product icon theme, Fluent Icons, if you are interested in that.

I'll close this issue as as-designed for the reasons above. Thanks for the suggestions!

@misolori Ah, I'm aware of the Fluent Icons extension (and I use and love it!), but I felt the newer icons would be better built directly into VS Code - and not as an extension - as that would make it more consistent with Windows 11 (since UI consistency was kept in mind while designing the OS). And as for Segoe UI Variable, making it Windows-only (as @sbatten suggested!) would be great too.

Also, I believe codicons looks more like Segoe MDL2 Assets (mostly due to the sharp corners and the general look of the icons) than Segoe Fluent Icons (the newer, beautiful icon font by Microsoft). Could the codicons SVGs be updated with Fluent System Icon's SVGs (preferable)? Or with the Fluent Icons SVGs? This can make it usable on all platforms, though we could make this Windows-only as well. (I'm not the best at this subject but this shouldn't be a problem as the current icons are already from a Microsoft icon font, and we just have to replace the older icon font with the newer one; or we can "merge"/use the existing assets linked above (like Fluent System Icon), right?)

Thanks for taking the time to reply!

[miguelsolorio]

@SFM61319 I could see a future where codicons naturally evolve to be more like Fluent, but it won't ever be replaced given the specific use cases that we have and the missing icons needed.

I'll leave it up to SteVen to decide if we should adopt the variable font on Windows.

[fitojb]

Specifying the variable fonts in the fallback list for systems that have it would be a great example of the benefits of progressive enhancement, and would have no negative impact on other systems, because of CSS’ behavior.

[esonnino]

Investigating supporting Segoe UI Variable Small/Text/Display Small is being used on sub 13px text. Text is being used on 13px-20px text Display is being used on 20px and up

Here's a small prototype to compare both in the Extensions view:

Prototype

Image references Using Segoe UI

Using Segoe UI Variable

cc @daviddossett