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, but it should be kept up-to-date by developers in case operating systems change their default font definitions.

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

To take MacOS as an example. -apple-system targets San Francisco (SF Pro), and it targets Helvetica Neue and Lucida Grande on older versions of MacOS X. It properly selects between San Francisco Text and San Francisco Display depending on the text’s size. This saves us lots of work, keeps extensions looking native to the user's computer, and is above else performant as extensions don't have to load any additional resources – the fonts are already available on user's computer.

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 Sketch. We have to use a font, precisely defined, otherwise we cannot really work.

As the tool of choice for design is Sketch (paired with Abstract), this locks us to MacOS. As we are locked to 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.

Additionally, we need to use some colour when designing. There's no such thing as theming in Sketch, we need to use precise colours. And as is the case with font family definition, that's the case with colour as well – the end goal is for the extensions to pick up whatever theme the user has selected, therefore fonts colours should be defined as variables so they can properly display in each theme. 

  • No labels