Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
DoronBrayer opened this issue Apr 3, 2017 · 24 comments

Comments

@DoronBrayer
Copy link

@DoronBrayer DoronBrayer commented Apr 3, 2017

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

@kevinvanrijn
Copy link

@kevinvanrijn kevinvanrijn commented Apr 3, 2017

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
Copy link

@russmaxdesign russmaxdesign commented Apr 3, 2017

This is opinionated. See this thread #664

@DoronBrayer
Copy link
Author

@DoronBrayer DoronBrayer commented Apr 3, 2017

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
Copy link

@miquelfire miquelfire commented Apr 3, 2017

What browser is using ANY of these fonts by default?

@DoronBrayer
Copy link
Author

@DoronBrayer DoronBrayer commented Apr 3, 2017

Read:
Font stack in 2017

@thierryk
Copy link

@thierryk thierryk commented Apr 3, 2017

@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
Copy link
Author

@DoronBrayer DoronBrayer commented Apr 4, 2017

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
Copy link
Contributor

@jonathantneal jonathantneal commented Apr 11, 2017

@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
Copy link

@bardiharborow bardiharborow commented May 14, 2017

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
Copy link

@mvasilkov mvasilkov commented Oct 15, 2017

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.

@uaoleg
Copy link

@uaoleg uaoleg commented Mar 9, 2020

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
Copy link

@ShikiSuen ShikiSuen commented May 8, 2020

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
Copy link

@Michaelsy Michaelsy commented May 8, 2020

@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
Copy link

@ShikiSuen ShikiSuen commented May 8, 2020

@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
Copy link

@ShikiSuen ShikiSuen commented May 8, 2020

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
Copy link

@Michaelsy Michaelsy commented May 8, 2020

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
Copy link

@Michaelsy Michaelsy commented May 8, 2020

@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
Copy link

@ShikiSuen ShikiSuen commented May 8, 2020

@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.

@tedw
Copy link

@tedw tedw commented Jan 29, 2021

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
Copy link

@Michaelsy Michaelsy commented Jan 30, 2021

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
Copy link

@tedw tedw commented Jan 30, 2021

@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 👍

@webia1
Copy link

@webia1 webia1 commented Mar 26, 2021

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
Copy link

@ShikiSuen ShikiSuen commented Mar 27, 2021

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
Copy link

@chrislachance chrislachance commented Jun 18, 2021

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.

marella added a commit to marella/modernize that referenced this issue Jun 22, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet