System fonts are cool again - video

Play "System fonts are cool again" on YouTube.

TRANSCRIPT

In the last video I showed how we got fluid typography for the show's website through Utopia.fyi's wonderful (copy and paste) tool. It gives us these variables we can assign to our type elements. Carrying on with the theme of typography I want to talk about fonts.

As this is an agile project where the aim is to get something out and iterate as we go (in this case in line with the shows content) we are starting with system fonts.

System fonts are having a bit of a comeback at the moment so It seemed like a good time to talk about why that is and why it might matter more in the near future and also mention another great online tool.

Free online tool for web safe fonts

Firstly, VS code offers a drop-down menu of web safe font stacks when you type font family. That's good, but if you want more information and choice it is worth checking out the Modern Font Stack site..

If you hover over any collection you will see an information icon which when clicked will take you to GitHub. Here you will see a visual representation of the sytem fonts and will be able to see the font weights avialable.

The Pros and Cons of web safe fonts

Let's start with the more obvious pros:

Less obvious upsides for using system fonts:

The cons are obvious:

Much of the time and depending on the type of site we will need a non-system font, but certainly many web agencies are now sugesting (at least for the body copy) the client look to websafe fonts first.

Recently saw this thought provoking quote from MASSIMO VIGNELLI from when the NYC SCHOOL OF VISUAL ARTS made him the recipient of its 1991 Masters Series Award:

"In the new computer age, the proliferation of typefaces and type manipulations represents a new level of visual pollution threatening our culture. Out of thousands of typefaces, all we need are a few basic ones, and trash the rest."

The fonts he talked about are not websafe, but this was in 1991 before most new fonts for device were created.