Font stacks for Default styles (and UI) #4
Description
Since we agreed we need an book-oriented stylesheet, I’ll try to provide implementers with reliable font stacks making the most of pre-installed fonts.
For some languages, we may have to fill the gaps, and use libre/open source fonts like Noto Serif for instance. How to manage that is still unclear but I’d like to find a solution which is optimized i.e. not loading the whole 20mb font if there is a possibility to load only a subset (unicode range).
Fundamentals
UA defaults if no font-family is set usually are:
- Times New Roman
- Droid Sans/Roboto on Android
You could force Android using a serif font by declaring
font-family: “Times New Roman”;
But it will be resolved to Droid Serif.
For generic families (sans-serif, serif, monospace), you’ll usually get:
- Arial/Helvetica/Roboto for sans-serif;
- Times/Times New Roman/Droid Serif for serif;
- Courier/Courier New/Droid Mono for monospace.
Historically, anything monospace has had a font-size of 13.33px so you’d better be cautious about that. A margin of 1em will indeed be 13.33px for pre.
Finally, rendering engines fall back on a glyph basis. If a glyph is not available in the preferred font, it will check if it is in the second one, and so on and so forth, for each glyph.
UI
If you want a system font stack, it already exists.
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantrell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
This is a modernized version taking popular Linux distros and emoji into account.
Default
For latin, I’ll privilege fonts with good Open Type support. I’ll test them using one of my own “web apps.” What I can already say is that fonts OSs have been adding since 4–5 years tend to ship with OT features so we can leverage that.
For CJK/RTL, I’ll pick fonts with the widest set of glyphs available. Once again, we may have to fill the gaps so this is a more complex issue.