font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif #665

DoronBrayer · 2017-04-03T08:22:16Z

It's time to add:
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif

This solution is harmless and very useful.
It is used by GitHub, Wordpress, Bootstrap, Medium, Ghost, etc.

The main reason for using "system" fonts is performance. Fonts are typically one of the largest/heaviest resources loaded on a website. If we can use a font already available on the user’s machine, we can completely eliminate the need to fetch this resource, making load times noticeably faster.
The beauty of system fonts is that it matches what the current OS uses, so it can be a comfortable look.

-apple-system targets San Francisco in Safari (on Mac OS X and iOS), and it targets Neue Helvetica and Lucida Grande on older versions of Mac OS X. It properly selects between San Francisco Text and San Francisco Display depending on the text’s size.
system-ui represents the default UI font on a given platform.
BlinkMacSystemFont is the equivalent for Chrome on Mac OS X.
Segoe UI targets Windows and Windows Phone.
Roboto targets Android and newer Chrome OS. It is deliberately listed after Segoe UI so that if you’re an Android developer on Windows and have Roboto installed, Segoe UI will be used instead.

The bottom line: It's truly the ultimate solution for any website/webapp in any OS.

More info

The text was updated successfully, but these errors were encountered:

kevinvanrijn · 2017-04-03T08:30:08Z

Didn't normalize.css just get rid of opinionated defaults? I don't see how this would be less opinionated then the old font-family: sans-serif; rule.

russmaxdesign · 2017-04-03T08:38:03Z

This is opinionated. See this thread #664

DoronBrayer · 2017-04-03T09:48:12Z

Using system fonts is not "opinionated".
System fonts are just system fonts.
If you insist, use:
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto [Removing the "Helvetica Neue",Arial,sans-serif part]
This is normalization, not reset.
Again- this solution is used by GitHub, Wordpress, Bootstrap, Medium, Ghost, etc.

miquelfire · 2017-04-03T13:01:15Z

What browser is using ANY of these fonts by default?

DoronBrayer · 2017-04-03T15:49:23Z

Read:
Font stack in 2017

thierryk · 2017-04-03T16:40:07Z

@DoronBrayer that does not answer @miquelfire's question:

What browser is using ANY of these fonts by default?

Normalize relates to default styling and—as far as I know—browsers do not use system fonts out-of-the-box.

DoronBrayer · 2017-04-04T06:04:17Z

If 99% of the websites uses sans-serif as default, why go with the other 1%?! - Go with the majority, go with the 99%!
In addition - sans-serif is used by any framework out there, and there's a reason for that.
Not setting a font-family (in body or html) is so 2007.
It's time to move on, really.

jonathantneal · 2017-04-11T13:11:12Z

@DoronBrayer, I get what you are saying, but what you are describing is less the use case for bugs and common browser inconsistencies and more the use case for common developer expectations and preferences, like box-sizing: border-box, etc..

At least one project needs to hold the fort so to speak so that there may be a reliable base for your own projects, or bootstrap, or sanitize.css, etc.

bardiharborow · 2017-05-14T09:28:07Z

Noting for further reference, that we've had to back out system-ui over at Bootstrap due to a number of issues with faulty Chinese fonts on Windows.

mvasilkov · 2017-10-15T19:28:58Z

Since this feature isn't going to be added here, a shameless plug: https://github.com/mvasilkov/systematize
It's basically normalize.css with some improvements to typography, coming from this repo's pull requests mostly. WIP.

as mentioned here: necolas/normalize.css#665

uaoleg · 2020-03-09T21:57:02Z

BlinkMacSystemFont is causing issue while printing on Chrome for Mac
https://bugs.chromium.org/p/chromium/issues/detail?id=1018581

UPD it's fixed in Chrome 81

ShikiSuen · 2020-05-08T08:10:33Z

Please do not use "system-ui".

On Windows (i forgot in FireFox or Edge Chromium, but it must be at least one of them), it makes the browser unable to choose correct CJK fallback font, regardless the language code written in the HTML tag.

Please only use "-apple-system, BlinkMacSystemFont," in this case. For Windows font fallback, simply use "Segoe UI" or "Calibri" (depending on the taste of bigger size or smaller size).

Michaelsy · 2020-05-08T10:28:38Z

@ShikiSuen
Did I get it right? Your plea is only relevant if there are Chinese, Japanese or Korean (or similar?) characters on the webpage?

Or in other words: When exactly is this a problem?

ShikiSuen · 2020-05-08T13:35:38Z

@Michaelsy If you think this is not a problem to you but you are not part of the team for this repo, then please shut up. Your hostility to East-Asian language users smells.

Ideograph glyph standards vary among Mainland PRC, HK, Taiwan, Korea, Japan. In Japan there are even two variants (industrial and educational variants). There are lots of political correctness matters regarding these standards. Not to mention that on Windows the default system UI fonts for CJK languages are having different amount of supported glyphs. Suppose that a Simplified Chinese webpage on Windows get fallbacked to a JIS standard font, one will see something similar to a mix-typed paragraph in two different fonts, a typographic disaster.

Read through the book ISBN 978-0596514471 written by a retired US marine, if you have further curiosities.

ShikiSuen · 2020-05-08T13:39:10Z

The reason I wrote my initial complaints above in this thread is to concern that some ideas in the font fallback sequence provided in the beginning post (of this thread) may trigger issues to CJK users.

(Swear comments removed because they are not useful anymore.)

Michaelsy · 2020-05-08T14:06:31Z

If you think this is not a problem to you ...

I apologise for the fact that I seem to have formulated my question in such a misleading way.

No, I don't think that is not a problem. Rather, I want to understand the problem so that I can take the right action if necessary.

Michaelsy · 2020-05-08T14:41:31Z

@ShikiSuen My question more concrete: I write websites exclusively in English and German (with German umlauts like ä Ä ü Ü and for example the "ß")

Can it lead to display errors on Asian screens if I refer to "system-ui"?

ShikiSuen · 2020-05-08T14:44:55Z

@ShikiSuen My question more concrete: I write websites exclusively in English and German (with German umlauts like ä Ä ü Ü and for example the "ß")

Can it lead to display errors on Asian screens if I refer to "system-ui"?

Back to your personal case: as long as no one puts East-Asian language contents on your website, no problem to you (personally).

Your case closed.

P.S.: I repeated the same issue with FireFox on macOS. If this really is a FireFox issue then I think I have to ticket it to their bugzilla.

necolas/normalize.css#665 (comment)

tedw · 2021-01-29T14:44:19Z

What about adding color emoji support as well?
https://www.client9.com/css-color-emoji-stack/

FWIW GitHub adds "Apple Color Emoji", "Segoe UI Emoji" to the end of their font stack 😄

Michaelsy · 2021-01-30T18:59:06Z

What about adding color emoji support as well?

IMHO not a good idea because it misses the point of normalize.css. It makes no sense to include all the possible features that anyone might want. Normalize.css is not a universal stylesheet for all possible purposes. It is a universal stylesheet to accommodate differences between browsers.

- Michael Sy.

tedw · 2021-01-30T20:19:41Z

@Michaelsy I agree with you, which is why I think normalizing emoji display is a good idea if normalize.css is going to include a default font stack. Not sure the font stack is necessary, though.

Anyway, just wanted to add a comment about it in the hopes it helps others in the future 👍

nxpatterns · 2021-03-26T19:48:05Z

Today like that, isn't it?

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

ShikiSuen · 2021-03-27T03:09:41Z

Today like that, isn't it?

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

Please put the sans-serif at the final stack.

chrislachance · 2021-06-18T17:43:19Z

System font as a default is clearly a localization issue. It's also an accessibility one.

For example, a user with dyslexia may choose "Open Dyslexic" or "Lexend" as their default sans-serif font for legibility. The system font stack would block this.

See necolas/normalize.css#665

necolas/normalize.css#665

dangelion · 2022-03-18T16:26:46Z

BlinkMacSystemFont is causing issue while printing on Chrome for Mac https://bugs.chromium.org/p/chromium/issues/detail?id=1018581

UPD it's fixed in Chrome 81

This font BlinkMacSystemFont wastes me near 2 days, yes 2 days. It was the causes for a jerky/slow/unusable resizing in Chrome Dev Simulator. Destroy it, if possible.

Like the comment says: List explained in pydoctheme.css. This also removed a number of other fonts. This reverts commit f3cf32a.

jeffatoptics · 2022-05-03T04:57:45Z

put "Segoe UI Emoji" before "Segoe UI Symbol". otherwise, chrome/edge in windows will only display the emoji in white/black color.

tedw · 2022-05-03T14:34:50Z

FWIW here’s the current CSS I’m using to normalize emojis:

// Custom emoji font-family to standardize appearance across platforms
// https://www.client9.com/css-color-emoji-stack/
// https://nolanlawson.com/2022/04/08/the-struggle-of-using-native-emoji-on-the-web/
@font-face {
  font-family: "color-emoji";
  src: local("Apple Color Emoji"),
       local("Twemoji Mozilla"),
       local("Segoe UI Emoji"),
       local("Segoe UI Symbol"),
       local("Noto Color Emoji"),
       local("EmojiOne Color"),
       local("Android Emoji");
}

Then you can append color-emoji to the end of your font stack:

body {
  font-family: system-ui, Segoe UI, sans-serif, color-emoji;
}

HNazmul-IV · 2023-07-30T12:43:56Z

But My question is How a font become heaviest , largest, painful resource for a website ? ?

See more info in necolas/normalize.css#665

See more info in: - necolas/normalize.css#665 (comment) - necolas/normalize.css#665 (comment)

ticoeteco23gb · 2024-07-26T00:11:24Z

But My question is How a font become heaviest , largest, painful resource for a website ? ?

There are many glyphs in a font for each character, those glyphs are basically vector graphics united together. A typeface has multiple styles of glyphs... Yeah, it depends on how complex the font is.

jonathantneal closed this as completed Apr 11, 2017

jonnystening mentioned this issue Jun 8, 2018

Body font implementation WestpacCXTeam/GUI-source#419

Open

chriddyp mentioned this issue Jul 10, 2018

Improved Tabs component plotly/dash-core-components#213

Merged

kedarv mentioned this issue Jul 15, 2018

Specify a fallback font for Helvetica for <p> BoilerMake/frontend#84

Closed

allancole mentioned this issue Nov 19, 2018

WordPress Coding Standards for SCSS files WordPress/twentynineteen#635

Closed

lubber-de mentioned this issue Jan 15, 2019

Offline fonts fomantic/Fomantic-UI#367

Closed

eallenOP mentioned this issue May 9, 2019

Better font-family defaults? jensimmons/cssremedy#43

Open

asabaylus mentioned this issue Jun 9, 2019

Set sensible default font-family asabaylus/react-command-palette#93

Merged

pptang added a commit to pptang/creativemashimashi that referenced this issue Aug 5, 2019

fix: add suggested font-family

967cf0c

as mentioned here: necolas/normalize.css#665

VadimEv mentioned this issue Apr 6, 2020

Converge helpdocs navbar with the main site languageconvo/helpdocs#7

Merged

niksy mentioned this issue May 8, 2020

System font stack niksy/rationalize.css#31

Open

michaeltaranto mentioned this issue Aug 13, 2020

Question: System fonts? seek-oss/capsize#23

Closed

richsuca added a commit to richsuca/website that referenced this issue Aug 23, 2020

Default to System fonts instead of Tahoma

fa5f9ca

necolas/normalize.css#665 (comment)

limonte mentioned this issue Nov 29, 2020

Rework reply buttons FlowCrypt/flowcrypt-browser#3200

Merged

voborl00 mentioned this issue May 4, 2021

Sanitizer wrongly quotes generic-named font-family CSS values OWASP/java-html-sanitizer#229

Open

marella added a commit to marella/modernize that referenced this issue Jun 22, 2021

css(typography): use system fonts

ee5dcf7

See necolas/normalize.css#665

svenson95 pushed a commit to svenson95/fachentwickler-app that referenced this issue Sep 19, 2021

Updated font - using preferably system-fonts to improve perfomance

159680f

necolas/normalize.css#665

floam referenced this issue in fish-shell/fish-shell Mar 26, 2022

Revert "fish_config: use system-ui/sans serif for non-shell/code text"

ff6a12e

Like the comment says: List explained in pydoctheme.css. This also removed a number of other fonts. This reverts commit f3cf32a.

krassowski mentioned this issue Dec 9, 2022

Title bar on Linux does not use a system font jupyterlab/jupyterlab-desktop#539

Open

esummers1 mentioned this issue Mar 13, 2023

Use Apple system fonts if available esummers1/eddie-summers-com#15

Merged

tedw mentioned this issue Mar 16, 2023

emoji generic font-family system-fonts/modern-font-stacks#7

Closed

jimmywarting mentioned this issue May 16, 2023

Set color-scheme by default emmetio/emmet#710

Open

konojunya mentioned this issue Jun 17, 2023

SF Pro Displayの強制をやめる konojunya/0xjj.dev#20

Closed

Jeyffrey mentioned this issue Nov 17, 2023

[FEATURE] Remise à jour des typographies des titres (PIX-9969) 1024pix/pix-ui#497

Merged

hugocf added a commit to hugocf/ferreira.cc that referenced this issue Mar 26, 2024

PaperMod: Fix problematic emoji rendering in Chrome

6fecf3a

See more info in necolas/normalize.css#665

hugocf added a commit to hugocf/ferreira.cc that referenced this issue Mar 26, 2024

PaperMod: Standardise emoji appearance across platforms

4786b3c

See more info in: - necolas/normalize.css#665 (comment) - necolas/normalize.css#665 (comment)

kLiHz mentioned this issue May 2, 2024

Simplified / Traditional Chinese on deno.land/x/ denoland/website_feedback#62

Open

samshara mentioned this issue May 10, 2024

Add Tooltip IFRCGo/alert-hub-web-app#118

Merged

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif #665

font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif #665

DoronBrayer commented Apr 3, 2017

kevinvanrijn commented Apr 3, 2017

russmaxdesign commented Apr 3, 2017

DoronBrayer commented Apr 3, 2017

miquelfire commented Apr 3, 2017

DoronBrayer commented Apr 3, 2017

thierryk commented Apr 3, 2017

DoronBrayer commented Apr 4, 2017 •

edited

Loading

jonathantneal commented Apr 11, 2017

bardiharborow commented May 14, 2017

mvasilkov commented Oct 15, 2017

uaoleg commented Mar 9, 2020 •

edited

Loading

ShikiSuen commented May 8, 2020 •

edited

Loading

Michaelsy commented May 8, 2020

ShikiSuen commented May 8, 2020

ShikiSuen commented May 8, 2020 •

edited

Loading

Michaelsy commented May 8, 2020

Michaelsy commented May 8, 2020

ShikiSuen commented May 8, 2020

tedw commented Jan 29, 2021

Michaelsy commented Jan 30, 2021

tedw commented Jan 30, 2021

nxpatterns commented Mar 26, 2021 •

edited

Loading

ShikiSuen commented Mar 27, 2021

chrislachance commented Jun 18, 2021

dangelion commented Mar 18, 2022

jeffatoptics commented May 3, 2022

tedw commented May 3, 2022 •

edited

Loading

HNazmul-IV commented Jul 30, 2023

ticoeteco23gb commented Jul 26, 2024

font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif #665

font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif #665

Comments

DoronBrayer commented Apr 3, 2017

kevinvanrijn commented Apr 3, 2017

russmaxdesign commented Apr 3, 2017

DoronBrayer commented Apr 3, 2017

miquelfire commented Apr 3, 2017

DoronBrayer commented Apr 3, 2017

thierryk commented Apr 3, 2017

DoronBrayer commented Apr 4, 2017 • edited Loading

jonathantneal commented Apr 11, 2017

bardiharborow commented May 14, 2017

mvasilkov commented Oct 15, 2017

uaoleg commented Mar 9, 2020 • edited Loading

ShikiSuen commented May 8, 2020 • edited Loading

Michaelsy commented May 8, 2020

ShikiSuen commented May 8, 2020

ShikiSuen commented May 8, 2020 • edited Loading

Michaelsy commented May 8, 2020

Michaelsy commented May 8, 2020

ShikiSuen commented May 8, 2020

tedw commented Jan 29, 2021

Michaelsy commented Jan 30, 2021

tedw commented Jan 30, 2021

nxpatterns commented Mar 26, 2021 • edited Loading

ShikiSuen commented Mar 27, 2021

chrislachance commented Jun 18, 2021

dangelion commented Mar 18, 2022

jeffatoptics commented May 3, 2022

tedw commented May 3, 2022 • edited Loading

HNazmul-IV commented Jul 30, 2023

ticoeteco23gb commented Jul 26, 2024

DoronBrayer commented Apr 4, 2017 •

edited

Loading

uaoleg commented Mar 9, 2020 •

edited

Loading

ShikiSuen commented May 8, 2020 •

edited

Loading

ShikiSuen commented May 8, 2020 •

edited

Loading

nxpatterns commented Mar 26, 2021 •

edited

Loading

tedw commented May 3, 2022 •

edited

Loading