Default font stack

Here’s the default font list used at Hugo until recently:

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

In the snippet above, $font-name is Sass variable representing our brand typeface. Everything that follows is part of the fallback stack designed to use the best system UI font available. This approach was popularized by Medium and Github.

Article on Smashing Magazine helped me define the final list I settled on.

Then I came across a bit of information that led me to check browser support on system-ui. Quoting Chris:

The system-ui value is the new standard to access system fonts, while -apple-system is non-standardized syntax that works on Firefox.

Support for system-ui is finally good enough to replace our big system stack. Today, our default stack looks like this:

body {
    font-family:
        $font-name,
        system-ui,
        -apple-system,
        sans-serif;
}

Note: this change was possible since Hugo is made only for users in the USA. If you target a wider audience, you would be better waiting it out a bit longer.