System Font Stack Review about 30-seconds-of-css HOT 10 CLOSED

@mantleCurve check this article about using system-ui: https://infinnie.github.io/blog/2017/systemui.html

from 30-seconds-of-css.

In my opinion, system-ui should not be part of the font stack presented in the snippet. People might get in trouble using it and, if they actually need it, like @mantleCurve, they can always include it in their code. Snippets are supposed to be a starting point for common tasks, helping people get a project working. Everyone is encouraged to modify them to fit their specific needs and projects.

from 30-seconds-of-css.

Which IE? GitHub itself puts -apple-system first

from 30-seconds-of-css.

In general, -apple-system comes before BlinkMacSystemFont in most font stacks I have seen.

from 30-seconds-of-css.

In ubuntu, the font i set for UI is not working. Probably need to use system-ui

from 30-seconds-of-css.

@mantleCurve

Does this work?

-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"

from 30-seconds-of-css.

This one works
-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"

from 30-seconds-of-css.

That makes sense. But in my case i wanted the system-ui font. I have seen spectre.css use it. That's why suggested.

from 30-seconds-of-css.

The current font stack works quite well on most systems and, having done some research, it's quite versatile, so we're gonna stick with it for now. However, it most certainly cannot acommodate everyone's needs. Snippets are a starting point for common tasks and we encourage developers to tweak them and alter them to suit their needs.

from 30-seconds-of-css.

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for any follow-up tasks.

from 30-seconds-of-css.