A sequel of our awesome sans-serif font stack. And just for reference for CSS devs out there,

font-family: ui-serif, "Aptos Serif", Constantia, "Publico Text", Charter, "STIX Two Text", "Libertinus Serif", "Linux Libertine O", "Linux Libertine G", "Linux Libertine", "DejaVu Serif Condensed", "Bitstream Vera Serif Condensed", "Roboto Serif", "Noto Serif", "Times New Roman", serif;

And for display/headline,

font-family: ui-serif, "Aptos Serif", Constantia, "Publico Headline", Charter, "STIX Two Text", "Libertinus Serif", "Linux Libertine O", "Linux Libertine G", "Linux Libertine", "DejaVu Serif Condensed", "Bitstream Vera Serif Condensed", "Roboto Serif", "Noto Serif", "Times New Roman", serif;

Finding a perfect serif system font stack is difficult. Again, this time is serif, like Times New Roman and so.

Websites have traditionally uses Times New Roman as their default font, even though Arial has been long preferred for displaying text on document screens. The tradition to use Times New Roman continues until today, where modern web browsers uses it as the default fallback font.

But this trend started to change when Apple finally introduces ui-serif to let web developers use New York serif font on their websites, just like San Francisco for sans-serif. Note that this special font alias only works for WebKit-based browsers (e.g. Safari), so it’s doesn’t work for other browsers.

When New York becomes the system font for Apple platforms, and Noto Serif for Android, what is the serif system font for Linux and Windows? Unfortunately, neither platforms agree other than Times New Roman as well as free, open-source alternatives (Liberation Serif, Linux Libertine, Tinos, etc.).

So, what’s the serif system font for Windows?

To settle this down, let’s solve this for Windows first. While Times New Roman might still the de-facto serif system font, especially as part of the Microsoft Core Fonts for the Web, Microsoft had actually introduced more and more fonts as part of their then-new ClearType Font Collection, including Calibri and Cambria, the default font for Microsoft Office for more than a decade.

These fonts have been there since Windows 7, so you don’t have to worry about the support even though their users do not have Office installed at all.

But the limitations of these fonts became clear and clearer each day: only regular and bold weights are offered, no other font weights such as “thin” are available. But these serif fonts, Cambria and Constantia, are some of the good ones that we can also use on websites.

At the end of the day, we choose Constantia over Cambria mainly due to aesthetic reasons. Constantia’s aesthetics match to those fonts that we decided to choose for iOS and macOS with minimal noticeable differences. And to anticipate the Next Big Thing on Office, we’re adding Aptos Serif to the list while waiting fot the font to be released in the next version of Office 365.

Oh wait, didn’t we tell you the fallback serif fonts for macOS and Apple platforms for browsers that don’t support New York?

Replacing Georgia and New York for iOS, iPadOS, and macOS.

Georgia (the serif font) has become another de-facto serif font for web developers targeting both Windows and macOS. Georgia is available on both of them, and has been used in sites including Wikipedia. But we slightly disliked the font’s aesthetics, so we decided to replace with Charter and Publico as they look even similar to New York.

Charter is available on macOS 10.13 High Sierra and later, while Publico is available on macOS 10.15 Catalina and later. Both fonts are also available on iOS (and iPadOS) versions 12 and 14, respectively. So, to wrap things up,

1. Are you using Safari or WebKit in macOS 10.15, iPadOS 13, or iOS 13 or later? If yes, the font stack prefers New York.
2. Or else, are you using macOS 10.15, iPadOS 13, or iOS 13 or later? If yes, the font stack prefers Publico Text and Publico Headline.
3. Or else, are you using macOS 10.13 or iOS 11 or later? If yes, the font stack prefers Charter.
4. Or else, the font stack will attempt to search for your intalled fonts, or Times New Roman as a last resort.

So, what’s the system serif font in Linux?

Just like the case of sans-serif fonts, Linux desktop environments prefers different fonts for use. elementary OS prefers Tinos, the open-source alternative to Times New Roman. Others prefer to stick to Noto Serif to accompany Noto Sans as used in KDE and Linux Mint. Older Linux distros prefers DejaVu Serif or Bitstream Vera Serif, though there are plans by major distros to switch to Noto Serif.

At the meantime, there are at least 2 (two) serif fonts that do strongly represent Linux, the operating system and the community. First is of course, Linux Libertine, and another is the good-old DejaVu Serif. Unfortunately, there are alreadg several versions of Linux Libertine due to OFL (the font’s free license) restrictions, so we are adding Linux Libertine G (commonly installed in LibreOffice), Linux Libertine O, and the modern Libertinus Serif into the list.

The results?

An earlier draft of the font stack, as teased on social media, produced some great results:

The future of the system font stack is amazing!

After the release and inclusion of HarmonyOS Sans and Roboto Flex to our sans-serif font stack, we decided to note new trends into our digital garden. Feel free to check out here for our current, up-to-date reference of these system font stacks. We also hope that new generic CSS font names (system-ui, ui-sans-serif, ui-serif, ui-monospace) would respect users’ respecitve font of choice especially in Windows and Linux, but we still doubt web browsers to do that for privacy or fingerprinting reasons.

And for embedded systems like PlayStation, Tizen, and webOS, we are planning to add fallback webfonts to our sites, so serif fonts can be rendered as we expected other platforms would do.