System Font Stack

• Stacks

  5 596 9.5 Less

  Stack Overflow’s Design System (by StackExchange)

  

[1]: https://github.com/StackExchange/Stacks/pull/642/files

[2]: https://meta.stackexchange.com/questions/364048/we-are-switc...

• spark-joy

  37 9,213 6.8 JavaScript

  ✨😂 2000+ ways to add design flair, user delight, and whimsy to your product.

I collect these things for fun and one of my big discoveries is that there's no "standard" system font stacks - here are my list of system font stacks and their sources: https://github.com/sw-yx/spark-joy/blob/master/README.md#fon...

some of them even come with annotations as to why they make the choices they make.

Github's font stack is

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

VS Code:

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif

probably more "native" on mobile:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif;

apparently all modern browsers have this new shortcut that make it as simple as:

font-family: ‘system-ui’, sans-serif;

https://chromestatus.com/feature/5640395337760768

• InfluxDB

  www.influxdata.com featured

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

• fontsource

  40 4,587 9.1 TypeScript

  Self-host Open Source fonts in neatly bundled NPM packages.

  

One such set of packages I've used is Fontsource. Has all the Google fonts plusany more.

https://fontsource.org/

• inter

  115 16,996 9.0 Python

  The Inter font family

System font stacks are great what I’d like more are similar “magic” values to system-ui that provide reasonably metrics-matched local fonts. The biggest reason I use system font stacks is not as much to look native as it is to try to have similar text metrics across platforms without the overhead and quirks brought by webfonts.

The system font does bring some advantages though, like on macOS/iOS where that font is San Francisco, it’s designed specifically to look good and read well on screen. Under WebKit you even get hand-tweaked letterforms, metrics, and kerning for different combos of size, weight, and context (title, subtitle, body, etc).

Something that would be really cool is if all browsers did what Apple is doing with San Francisco by shipping with a FOSS screen-oriented font like Inter UI[0].

[0]: https://rsms.me/inter/

Suggest a related project