Font Order for Clarity

[crhallberg]

I wonder if it would be useful to order the fonts in a consistent way, perhaps by operating system market share.

For example, Android is the most common OS, so put Android-targeting fonts first. I think this would make it clear which fonts are most-likely to be used when styling with a particular stack. I don't think it'll have any meaningful performance impacts.

Happy to do a PR if I can help! Just a thought. Love the project very much!

[danklammer]

This is a great idea in theory, but there are issues as the order matters for priority and how android names their fonts.

Android uses a lot of generic aliases for the very limited fonts that are available. If we were to use these first the it would default to fonts that are less than ideal for everyone else (since it comes first).

For example, if we were to format the stack use by popularity first for the Transitional stack:
font-family: serif, 'Sitka Text', Charter, Cambria, 'Bitstream Charter';
(Android, Windows 10, MacOS/iOS, Windows 7, Linux)

While Android would be correct, all other OSs would likely render Times New Roman.

Another miss by sorting by popularity is that users that installed the better font is missing out. Charter is the best font (subjectively) in this stack—it's free and could be manually installed by a user.

[crhallberg]

Understood! Subjectivity is a perfectly valid way to sort these! In case this comes up in the future, I would recommend that generics like "serif" be at the end for the exact reason you said - almost anything is better than Times New Roman.

[brycewray]

One note about Charter (not Bitstream Charter): at least as of this writing, the version currently supplied with macOS has oddly wide letter-spacing with the   character so, if one regularly uses that character manually to prevent unfortunate line breaks, using Charter might not be advisable.

[danklammer]

@brycewray Wow — that is really unfortunate and odd. Thank you for calling this out. I just tested and can verify. I hate to throw this option away knowing it's such a great typeface otherwise. I will definitely add to the README, and decide if is a dealbreaker.

Less than ideal, but a fix is to use two narrow non-breaking space instead of the one non-breaking space:
https://codepen.io/danklammer/pen/VwqbNPx?editors=1100

[tomdai]

Firefox on macOS renders two narrow non-breaking spaces wider than a normal space.

Found another workaround though: wrapping the space ( ) with zero width spaces (​).