search

jensimmons / cssremedy

Start your project with a remedy for the technical debt of CSS.
Mozilla Public License 2.0
2.19k stars 113 forks source link

Better font-family defaults? #43

Open eallenOP opened 5 years ago

eallenOP commented 5 years ago

I know this is low-hanging fruit, but I'm procrastiworking. So, basically this necolas/normalize.css#665. Normalize stuck with sans-serif, but others (e.g. Reboot, modern-normalize) go with system UI fonts.

There are plenty of examples of authoritative sites using a system UI stack (the words you're reading now: case-in-point). The idea is not new, obviously.

So stick with Times/TNR, go with sans-serif, or this?

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

(Reboot still has html { font-family: sans-serif; } as well as the above) Or something else?

Sora2455 commented 5 years ago

Don't forget to put system-ui at the front of the stack.

adamwathan commented 5 years ago

Based on my research it's a bad idea to included system-ui in the font stack right now:

https://infinnie.github.io/blog/2017/systemui.html

Sora2455 commented 5 years ago

...aw, man. Ruined by OS bugs, of all things.

Why doesn't the bug affect -apple-system, BlinkMacSystemFont? Shouldn't they match the same font as system-ui when understood?

eallenOP commented 5 years ago

Yeah, there are definitely some things to watch out for in this approach.

I borrowed the stack above from Reboot but removed some emoji stuff from the end. There are other ways to approach it as well.

tigt commented 5 years ago

@Sora2455 It looks like the bug is exclusive to Windows, so the MacOS keywords of -apple-system and BlinkMacSystemFont don’t apply on that OS.

jensimmons commented 5 years ago

Two things: 1) I don't really think it's appropriate to use system-ui fonts for this. The point of that CSS name is for designers to be able to make part of their web site (or app) look like part of the OS. And that's not what most content on most sites is doing. If we were attempting to create a default generic typography style, I'd rather pick some beautiful fonts like Avenir, and use them.

2) I don't think we are aiming to create a beautiful default typography style. Right now, the web defaults to Times in Firefox (Mac) and Chromium (Mac), Lato in Safari (Mac).... which is not pretty. But 98% of websites are going to define their own font stack. They are going to setup their own font-family sets... build out the typography with their cascade... and it can be quite frustrating and annoying to have yet another declaration in the cascade that just has to be overridden. It can actually be a bit confusing — "why did they include this? Is it better? Should I keep it? Is there something about how they setup font-families that I should copy?

I was leaning towards us doing nothing regarding font-families. That way there's nothing to replace or override.

Alternatively, we could provide a separate stylesheet that has options for pretty fonts. Even define a few options — a serif stack, a sans-serif stack. And build them 100% from fonts pre-installed on user's operating systems. Offer them as something to consider — much like the reminders. But I don't want to use system-ui fonts for that.

mirisuzanne commented 5 years ago

I agree. Repurposing this thread to discuss default fonts generally. I was also leaning towards no: but then I'm not actually sure where the line is between UA "remedies" and pretty starter styles. UA styles are there to generate readable typography – and we're here to improve those defaults? Anyway, if there is a line, our existing line-height "reminder" is sitting right on it. :)