Skip to content

Instantly share code, notes, and snippets.

@tkrotoff

tkrotoff/font.md

Last active April 1, 2025 12:28
Show Gist options
  • Save tkrotoff/f7ccc6b8f2b5a925b57e5f298a371e97 to your computer and use it in GitHub Desktop.
Save tkrotoff/f7ccc6b8f2b5a925b57e5f298a371e97 to your computer and use it in GitHub Desktop.
Download ZIP
What font to use? Web or system font?
Raw
font.md

What font to use? Web or system font?

Context and Problem Statement

Operating systems don't have the same fonts installed

Default font for each OS

Fonts used by popular websites (body text) (as of 2024-02-01)

  • Microsoft: https://www.microsoft.com/en-us/windows/view-all-devices

    • font-family "Segoe UI", SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif
      • Same as Microsoft Windows
    • font-size 15px
    • font-weight 400
    • letter-spacing normal
    • line-height 20px
    • Rendered Fonts: Segoe UI
    • Font origin: Network resource

  • Apple: https://www.apple.com/shop/buy-mac/macbook-pro/16-inch-space-black-apple-m3-max-with-14-core-cpu-and-30-core-gpu-36gb-memory-1tb

    • font-family "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif
    • font-size 14px
    • font-weight 400
    • letter-spacing -0.224px
    • line-height 20.0003px (1.42859)
    • Rendered Fonts: SF Pro Text / SFProText-Regular
    • Font origin: Network resource

  • Google Search: https://www.google.com/search?q=Wikipedia

    • font-family arial, sans-serif
    • font-size 14px
    • font-weight 400
    • letter-spacing normal
    • line-height 22.12px (1.58)
    • Rendered Fonts: Arial
    • Font origin: Local file

  • Booking: https://www.booking.com/hotel/fr/de-crillon-paris.html

    • font-family "system-ui", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif
    • font-size 14px
    • font-weight 400
    • letter-spacing normal
    • line-height 20px
    • Rendered Fonts: .SF NS / .SFNS-Regular_wdth_opsz110000_GRAD_wght
    • Font origin: Local file

  • Amazon: https://www.amazon.com/dp/B09BWFX1L6/

    • font-family "Amazon Ember", Arial, sans-serif
    • font-size 14px
    • font-weight 400
    • letter-spacing normal
    • line-height 20px
    • Rendered Fonts: Amazon Ember / AmazonEmber-Regular
    • Font origin: Network resource

  • YouTube: https://www.youtube.com/watch?v=-Jpf7f5Fkzw

    • font-family Roboto, Arial, sans-serif
      • Same as Google Android (Google owns YouTube since October 2006)
    • font-size 14px
    • font-weight 400
    • letter-spacing normal
    • line-height 20px (2rem)
    • Rendered Fonts: Roboto / Roboto-Regular
    • Font origin: Network resource

  • Wikipedia: https://en.wikipedia.org/wiki/Wikipedia:Vector_2022

    • font-family sans-serif
    • font-size 14px (--font-size-medium: 0.875rem)
    • font-weight 400
    • letter-spacing normal
    • line-height 22px (line-height-medium: 1.5714285)
    • Rendered Fonts: Helvetica
    • Font origin: Local file

  • Facebook: https://www.facebook.com/RedBull/

    • font-family system-ui, -apple-system, "system-ui", ".SFNSText-Regular", sans-serif
    • font-size 15px
    • font-weight 400
    • letter-spacing normal
    • line-height 19.9995px (1.3333)
    • Rendered Fonts: .SF NS / .SFNS-Regular_wdth_opsz110000_GRAD_wght
    • Font origin: Local file

  • Twitter: https://twitter.com/Wikipedia/status/1888944671579078978

    • font-family TwitterChirp, -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif
    • font-size 17px
    • font-weight 400
    • letter-spacing normal
    • line-height 24px
    • Family name: "" / Font
    • Font origin: Network resource

  • Reddit: https://www.reddit.com/r/interestingasfuck/comments/t4cdik/in_1996_ukraine_handed_over_nuclear_weapons_to/

    • font-family -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif
    • font-size 14px
    • font-weight 400
    • letter-spacing normal
    • line-height 20px (1.25rem)
    • Rendered Fonts: .SF NS / .SFNS-Regular_wdth_opsz110000_GRAD_wght
    • Font origin: Local file

  • AliExpress: https://www.aliexpress.com/item/3256805040830226.html

    • font-family "Open Sans", Roboto, Arial, Helvetica, sans-serif, SimSun
    • font-size 15px
    • font-weight 400
    • letter-spacing normal
    • line-height normal
    • Rendered Fonts: Open Sans / OpenSans-Regular
    • Font origin: Network resource

  • Netflix: https://www.netflix.com/

    • font-family "Netflix Sans", "Helvetica Neue", "Segoe UI", Roboto, Ubuntu, sans-serif
    • font-size 16px
    • font-weight 400
    • letter-spacing normal
    • line-height normal
    • Rendered Fonts: Helvetica Neue / HelveticaNeue
    • Font origin: Local file

  • eBay: https://www.ebay.com/b/Jordan-11-Retro-Mid-Gratitude-Defining-Moments/15709/bn_7121721161

    • font-family "Market Sans", Arial, sans-serif
    • font-size 14px
    • font-weight 400
    • letter-spacing normal
    • line-height 20.02px (1.43)
    • Rendered Fonts: "" / Font
    • Font origin: Network resource

  • Quora: https://www.quora.com/What-are-the-default-fonts-of-Android

    • font-family -apple-system, system-ui, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif
    • font-size 15px
    • font-weight 400
    • letter-spacing normal
    • line-height 21px (1.4)
    • Rendered Fonts: .SF NS / .SFNS-Regular_wdth_opsz110000_GRAD_wght
    • Font origin: Local file

  • Stack Overflow: https://stackoverflow.com/q/65557819

    • font-family -apple-system, "system-ui", "Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif
    • font-size 15px
    • font-weight 400
    • letter-spacing normal
    • line-height 22.5px (1.5)
    • Rendered Fonts: .SF NS / .SFNS-Regular_wdth_opsz110000_GRAD_wght
    • Font origin: Local file

  • Nike: https://www.nike.com/t/dunk-low-retro-mens-shoes-76KnBL/DV0831-107

  • GitHub: nodejs/node#53725

    • font-family -apple-system, "system-ui", "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"
    • font-size 14px
    • font-weight 400
    • letter-spacing normal
    • line-height 21px (1.5)
    • Rendered Fonts: .SF NS / .SFNS-Regular_wdth_opsz110000_GRAD_wght
    • Font origin: Local file

  • Atlassian Jira

    • font-family -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
    • font-size 14px
    • font-weight 400
    • letter-spacing -0.07px (-0.005em)
    • line-height 23.996px (1.714)
    • Rendered Fonts: .SF NS / .SFNS-Regular_wdth_opsz110000_GRAD_wght
    • Font origin: Local file

  • Atlassian Confluence

    • font-family -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
    • font-size 16px
    • font-weight 400
    • letter-spacing -0.08px (-0.005em)
    • line-height 27.424px (1.714)
    • Rendered Fonts: .SF NS / .SFNS-Regular_wdth_opsz110000_GRAD_wght
    • Font origin: Local file

Fonts used by CSS and React libraries (body text) (as of 2024-02-01)

Considered Options

Web font (aka custom/brand font)

Pros:

  • Brand identity (see paragraph below)
  • Same font on all devices
    • Not full consistency: how the font is displayed still differs depending on the OS, device and browser
    • Does it matter to the user that the font is identical on their 22" Windows at work and their 6.1" iPhone at home?

Cons:

  • More engineering work, more expensive
  • More difficult to enforce
    • The more you customize (font-weight, letter-spacing...), harder to strive for the same values across all company's websites and apps
    • Leads to higher probability of variations that leads to inconsistency
  • Lower integration with the device and the other apps (Windows uses Segoe UI, Apple uses San Francisco, Android uses Roboto)
  • FOUT ("flash of unstyled text") + layout shift (on first run only thx to caching if properly designed): a system font is used first then the web font once loaded, this is specially visible on slow network/devices
  • Slower (on first run only thx to caching if properly designed): one more resource to load, parse, interpret, render
    • Inter woff2 is 47 kB
  • If using Google Fonts: relying on an external service
  • Potential rendering bugs
  • Support for non-latin languages: Inter supports latin, greek and cyrillic characters; what about others?

System (native) font

Pros:

  • Less engineering work, cheaper
  • Easier to enforce and thus better guarantee of fewer variations which leads to higher consistency across all company's websites and apps
    • Simple/standard rules are easier to understand and apply
    • Rules with less engineering work are easier to enforce (and with higher chances to be implemented properly)
  • No FOUT ("flash of unstyled text") and layout shift, no FOIT ("flash of invisible text")
  • Fastest
  • No rendering bugs
  • Better integration with the device and other apps (Windows uses Segoe UI, Apple uses San Francisco, Android uses Roboto)
  • System fonts are the best: familiarity, rendering, accessibility, readability, integration, perf... it cannot be better

Cons:

  • Inconsistency between devices
    • The font won't be identical on a 22" Windows at work and a 6.1" iPhone at home
  • Brand identity (see paragraph below)

Decision Drivers

Bugs and inconsistencies

https://news.ycombinator.com/item?id=23341979

Users are viewing your site on devices with totally different screen sizes, different resolutions, on different platforms, with displays of varying brightnesses, glare, viewing angles, color spaces, and in environments of varying levels of lighting. Given these constraints, it's not possible to get a consistent look-and-feel. So don't waste resources trying. You'll create more problems than you'll solve.

Nobody tests their web fonts as thoroughly as the default fonts have been tested on their respective platforms and devices. Web fonts can have odd platform-specific bugs with kerning, hinting, and subpixel rendering. I've had web fonts render without hinting on Edge, but look fine on Chrome & IE on the same system. How does one even begin to write automated tests that detect issues like that? Using the default fonts guarantees you'll never have to worry about such bugs.

The system's installed fonts are guaranteed to work. They improve performance. They prevent re-flows. And they're what the user is accustomed to.

If by "consistent" you mean "looks like garbage on some platforms", then yes, it's possible: https://medium.com/@ValidScience/two-mysterious-web-font-bugs-that-no-one-seems-to-be-talking-about-861022e7fe69

Web font bugs show up in the weirdest places. Unless you're constantly vigilant and manually test across all the platforms you want to support, some users will see crappy fonts. Hardly anybody goes looking for these bugs, so the bad fonts can be shipped in production for years without anybody at the company noticing. This is what has happened at Apple, Wired, and Medium.

Not that consistency is worth striving for. There's not much consistent about what you can show on both a 6" 4K OLED and a 15" 1366x768 TFT LCD. Certain fonts will look great on the former and be borderline-unreadable on the latter.

Bugs with system fonts are more likely to be reported and fixed, example: https://bugzilla.mozilla.org/show_bug.cgi?id=1851033

image image

Readability & accessibility

https://news.ycombinator.com/item?id=18789695

On macOS and iOS specifically, the system font (San Francisco) has had a great deal of time and effort poured into readability — so much that rather than being a singular font, it's a massive family of fonts or metafont with countless variants for various DPIs and use cases. For example, the "San Francisco" used for headings (h1, h2, etc) uses wider glyphs and more relaxed kerning, as is appropriate for headings and the "San Francisco" used for small text uses a variant that has its geometry tweaked to be more legible. It's a free readability boost that all happens automatically when you use system-ui or -apple-system in your font stack. By using a custom font, you forfeit all of that.

The Readability Group – Don't believe the type @ Axe Con 2021:

Best performers (incomplete list):

  • San Francisco Pro: 0.69
  • Segoe UI: 0.65
  • Verdana: 0.64
  • Roboto: 0.62
  • Calibri: 0.58
  • Helvetica: 0.54
  • Ubuntu: 0.51
  • Roboto Slab: 0.49
  • Times New Roman: 0.44
  • Comic Sans MS: 0.22

Performance

The company I work at simply made an A/B test between a Google font and similar looking system fonts (can't remember which ones, though). All in all, the results proved that the system fonts performed better in regards of conversion rate, and it wasn't just the performance increase, as that one was pretty minor.

Wikipedia Typography refresh: https://www.mediawiki.org/wiki/Typography_refresh#What_about_using_webfonts?

Webfonts involve having a user's browser download a font we provide, which causes additional resources to load and would have a negative impact on site performance (i.e. how fast pages load). This is particularly true for older browsers. In the future we may explore using webfonts, but for now this update provides greater readability and consistency while not degrading page load times.

What is the gain of improving an app speed? https://www.deloitte.com/ie/en/services/consulting/research/milliseconds-make-millions.html

Deloitte found that a 0.1s speed improvement gives:

  • Retail conversions +8.4%, average order value +9.2%
  • Travel conversions +10.1%, average order value +1.9%
  • Luxury brand page views per session +8.6%
  • Lead generation information pages bounce rate +8.3%

Differences between sans-serif fonts

The Inter font is described as:

a typeface carefully crafted & designed for a wide range of applications, from detailed user interfaces to marketing & signage [...] one of the world's most used typefaces with applications ranging from computer interfaces, advertising & airports, to NASA instrumentation & medical equipment

Inter font was created by Figma in 2019: https://www.figma.com/blog/the-birth-of-inter/, https://news.ycombinator.com/item?id=20646017

Inter is one of the best font currently available: https://mattwestcott.org/blog/an-ode-to-the-inter-typeface. This article also states:

Inter started as a fork of Google's Roboto system font

The best comparison is to Apple's San Francisco (known as SF Pro). To my eye, they are almost indistinguishable. [...] The only problem was Apple that didn't release it with an open license — thus the need for Inter.

Why is Inter currently popular?

Classic bias: designers use Figma which uses Inter. Before 2019, Roboto was Figma's font and thus popular.

Principle of least astonishment

A component of a system should behave in a way that most users will expect it to behave, and therefore not astonish or surprise users. The following is a corollary of the principle: "If a necessary feature has a high astonishment factor, it may be necessary to redesign the feature."

Jakob's law

Users spend most of their time on other apps, so users prefer your app to behave like the others.

Brand identity

Some logos are famous because of their specific font (Coca-Cola, Braun, Prada, Disney, New Man, Kellogg's, Moulinex, Sega, IBM, Lego, Star Wars, Unilever...). These special fonts are limited to the logo and not used on the company website where they use more readable "regular" sans-serif fonts instead.

(FYI The current trend for logos is to simplify them and use regular sans-serif fonts to be more versatile: https://www.velvetshark.com/why-do-brands-change-their-logos-and-look-like-everyone-else)

Famous example is The New Yorker: they have a very specific font (NY Irvin aka New Yorker Type font) for the logo and titles but not for body (they use Adobe Caslon which is very similar to other serif fonts like Garamond or Baskerville).

Dilemma:

  • Pay for a font specific to your brand, like using the Coca-Cola logo font everywhere, but then the text is difficult to read
  • Or use a generic font: Noto, Open Sans, Inter, Montserrat, Geist, Garamond, Baskerville... like everyone, but then you don't convey any branding

Instead, for a strong brand, an important aspect is consistency: https://medium.com/tectonic/how-i-learned-to-stop-worrying-about-logos-and-love-the-brand-system-5b8b6fc7ff78

Decision Outcome

Using a generic sans-serif and popular font (visually very close to system fonts) does not contribute to a specific visual identity, instead the system font gives better results:

  • less engineering, cheaper
  • easier to apply/enforce within the company
    • best guarantee of consistency
  • less bugs
  • better performance
  • respects Jakob's law
  • system fonts are the best: familiarity, rendering, accessibility, readability, integration, perf... it cannot be better

Web fonts were great when computers didn't have good fonts installed. Nowadays with modern browsers and OS you can use top of the art fonts from the system instead of loading a web font.

Suggestion for CSS values, Tailwind has good defaults:

General idea:

  1. Create rules
    1. Aim for simple rules with least astonishment and the minimum of engineering work
  2. Enforce the rules across all company's websites and apps: consistency (easier to achieve by following 1.1)
  3. Keep the rules for a long period in order to build a strong brand (mark + visual language + consistency = strong brand)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment