Page tree
Skip to end of metadata
Go to start of metadata

System stack

The very first thing to understand regarding typography is that the end goal for running extension is to use system stack as font family definition. Our extensions should adapt to various environments: Windows, Mac, Linux, and versions of those – older and newer installations. These different environments have different default system fonts, and users are used to seeing those fonts all around their systems already. As said in General Guidelines, we should follow local design systems and understand we are embedded two levels deep. This is why we are not using any specific font definition, rather, cascading stack which will hit whatever is the default for any particular users' system.

The stack looks like this:

font-family: var(--vscode-font-family);

And this will let VS Code decide which font is applicable for each of the users' systems. For example, on MacOS that variable will resolve as:

-apple-system, "system-ui", sans-serif

Design tools & SF Pro

Although the end goal is to use system stack, unfortunately, design tools we use need to have a specific font definition in order for designers to be able to work. There is no such thing as cascading sheet, or generic font definition in Figma. We have to use a font, precisely defined, otherwise we cannot really work.

As we are designing and testing designs on MacOS, at the moment of starting the project Apple SF Pro was native font, therefore we chose that font to use while designing.

However, developers should keep in mind that this is simply because we have to choose a font to work with. In reality, that precise font family should be ignored, and CSS system stack should be used for developing apps.

  • No labels