5 ms·

If you're looking for a UI font that's non-specific to your design (ie. you're not designing a poster) then I recommend the following: font-family: -apple-syst

If you're looking for a UI font that's non-specific to your design (ie. you're not designing a poster) then I recommend the following: font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; Everything else is less user friendly. This loads instantly, looks perfect on the user's screen, and is guaranteed to look exactly as it's supposed to.

kitsunesoba 8y ago
Agreed. Few designs benefit enough from a custom font to justify the downsides of not using the standard system font. As an aside, we will soon be able to use system-ui in place of a manually constructed font stack: https://caniuse.com/#feat=font-family-system-ui https://caniuse.com/#feat=font-family-system-ui
- kolinko 8y ago
  What are the downsides, load time aside?
  - kitsunesoba 8y ago
    Besides just the load time, there’s the “pop” effect of the text not being visible until the font loads (or slightly better but still not great, the page shifting around as default fonts get subbed out for your custom font with different metrics). 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.
    - Veedrac 8y ago
      The pop effect can be tamed with, for example, font-display: optional;, which allows the first page load to use the fallback fonts.
saagarjha 8y ago
Might want to throw a “system-ui” in there too, from CSS 4. This works for me in Safari sand Chrome.
- alwillis 8y ago
  Yes, system-ui is how the system font is specified in modern browsers: https://www.w3.org/TR/css-fonts-4/#valdef-font-family-system-ui https://www.w3.org/TR/css-fonts-4/#valdef-font-family-system...
  - dbbk 8y ago
    I wonder why they didn't just change the browser default? Seems odd that it's still Times New Roman.
dochtman 8y ago
Firefox bug for this: https://bugzilla.mozilla.org/show_bug.cgi?id=1226042 https://bugzilla.mozilla.org/show_bug.cgi?id=1226042
sbr464 8y ago
This one includes a few more devices: font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
- diegoperini 8y ago
  What about Noto?
hawski 8y ago
Can't one just use font:menu?
deltron3030 8y ago
>Everything else is less user friendly. Not really. By using a font like Inter UI you create the same experience for everybody, regardless of the platform. Segoe UI, Ubuntu, Cantarell (Windows, Ubuntu, Gnome/Fedora) are within a different typographic category than San Francisco or Roboto, they're not even similar enough to each other. By using the system font stack you're basically fragmenting the user experience and look and feel. Inter is a substitute for well crafted neo grotesque fonts loved by designers, like San Francisco (which itself is a better fitting alternative to Helvetica), it's of a similar quality.
rf15 8y ago
I'm sorry but have you considered that there are people who don't actually own a Mac? As I see it, this is very centric to a specific system and therefore does not offer the best user experience for everyone.
- iptq 8y ago
  Arial (and Segoe UI now) should be readily available to windows users, and sans-serif should cover the rest I think.
  - rf15 8y ago
    fair, I mixed that up.
tqkxzugoaupvwqr 8y ago
Isn’t sans-serif a catchall which means the emoji fonts will never be used?
- electroly 8y ago
  The list has two purposes: fallback in case a particular font doesn't exist on the client, and fallback in case a particular glyph doesn't exist in the font. When you use emoji that aren't in the sans-serif font, it'll fall back to the listed emoji fonts for that individual glyph.

kitsunesoba 8y ago

Agreed. Few designs benefit enough from a custom font to justify the downsides of not using the standard system font. As an aside, we will soon be able to use system-ui in place of a manually constructed font stack: https://caniuse.com/#feat=font-family-system-ui https://caniuse.com/#feat=font-family-system-ui

kolinko 8y ago
What are the downsides, load time aside?
- kitsunesoba 8y ago
  Besides just the load time, there’s the “pop” effect of the text not being visible until the font loads (or slightly better but still not great, the page shifting around as default fonts get subbed out for your custom font with different metrics). 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.
  - Veedrac 8y ago
    The pop effect can be tamed with, for example, font-display: optional;, which allows the first page load to use the fallback fonts.

saagarjha 8y ago

Might want to throw a “system-ui” in there too, from CSS 4. This works for me in Safari sand Chrome.

alwillis 8y ago
Yes, system-ui is how the system font is specified in modern browsers: https://www.w3.org/TR/css-fonts-4/#valdef-font-family-system-ui https://www.w3.org/TR/css-fonts-4/#valdef-font-family-system...
- dbbk 8y ago
  I wonder why they didn't just change the browser default? Seems odd that it's still Times New Roman.

dochtman 8y ago

Firefox bug for this: https://bugzilla.mozilla.org/show_bug.cgi?id=1226042 https://bugzilla.mozilla.org/show_bug.cgi?id=1226042

sbr464 8y ago

This one includes a few more devices: font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif

diegoperini 8y ago
What about Noto?

hawski 8y ago

Can't one just use font:menu?

deltron3030 8y ago

>Everything else is less user friendly. Not really. By using a font like Inter UI you create the same experience for everybody, regardless of the platform. Segoe UI, Ubuntu, Cantarell (Windows, Ubuntu, Gnome/Fedora) are within a different typographic category than San Francisco or Roboto, they're not even similar enough to each other. By using the system font stack you're basically fragmenting the user experience and look and feel. Inter is a substitute for well crafted neo grotesque fonts loved by designers, like San Francisco (which itself is a better fitting alternative to Helvetica), it's of a similar quality.

rf15 8y ago

I'm sorry but have you considered that there are people who don't actually own a Mac? As I see it, this is very centric to a specific system and therefore does not offer the best user experience for everyone.

iptq 8y ago
Arial (and Segoe UI now) should be readily available to windows users, and sans-serif should cover the rest I think.
- rf15 8y ago
  fair, I mixed that up.

tqkxzugoaupvwqr 8y ago

Isn’t sans-serif a catchall which means the emoji fonts will never be used?

electroly 8y ago
The list has two purposes: fallback in case a particular font doesn't exist on the client, and fallback in case a particular glyph doesn't exist in the font. When you use emoji that aren't in the sans-serif font, it'll fall back to the listed emoji fonts for that individual glyph.