Search

Reinhart Previano K.

Do you love to Ctrl-K, Ctrl-/, or / ? Now you can do three of them (>_ )!

No results so far...

Contact Information

• (Updated )

The serif system font stack that we’re using right now.

Reinhart Previano Koentjoro's profile picture

Reinhart Previano Koentjoro (@reinhart)

Published on Uncategorized Logs of the SYSTEM

Share Copy Link Print PDF Embed Share to Email Share to SMS Yahoo! Share to Yahoo! Mail Mastodon Share to Mastodon Share to KakaoStory Messenger Share to Messenger Pocket Share to Pocket Flipboard Share to Flipboard Pinterest Share to Pinterest Reddit Share to Reddit Y Combinator Share to Hacker News Odnoklassniki Share to Odnoklassniki Blogger Share to Blogger Pleroma Share to Pleroma Share to Friendica Share to KakaoTalk 1Artboard 1 copy 2 Share to Snapchat Xing Share to Xing Share to Misskey LINE Share to LINE Evernote Share to Evernote WhatsApp Share to WhatsApp LiveJournal Share to Livejournal Diaspora Share to Diaspora Share to Gmail Threads Share to Threads Threema Share to Threema Share to X Tumblr Share to Tumblr Buffer Share to Buffer LinkedIn Share to LinkedIn Mail.Ru Share to mail.ru VK Share to VKontakte Trello Share to Trello Facebook Share to Facebook Bluesky Share to Bluesky Skype Share to Skype Hatena Bookmark Share to Hatena Bookmark! Share via MastodonShare Telegram Share to Telegram WordPress Share to WordPress.com

Embed

This website supports oEmbed. To quickly use oEmbed, just copy this site's link to your oEmbed-supported apps and websites like WordPress.

Alternatively, copy and paste the HTML code below to embed this post in your website.

($_ )! We have made this thing responsive, but recommend at least 512x512 pixels for best results.
<iframe src="https://reinhart1010.id/blog/2023/10/01/the-serif-system-font-stack-that-were-using-right-now?embed" height="512" width="512" style="border:none;"><a href="{{ $canonical }}">https://reinhart1010.id/blog/2023/10/01/the-serif-system-font-stack-that-were-using-right-now</a></iframe>
Preview

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:

A visual comparison between Constantia, Charter, Libertinus Serif, DejaVu Serif, Roboto Serif, Noto Serif, and Times New Roman.

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.

Share Copy Link Print PDF Embed Share to Email Share to SMS Yahoo! Share to Yahoo! Mail Mastodon Share to Mastodon Share to KakaoStory Messenger Share to Messenger Pocket Share to Pocket Flipboard Share to Flipboard Pinterest Share to Pinterest Reddit Share to Reddit Y Combinator Share to Hacker News Odnoklassniki Share to Odnoklassniki Blogger Share to Blogger Pleroma Share to Pleroma Share to Friendica Share to KakaoTalk 1Artboard 1 copy 2 Share to Snapchat Xing Share to Xing Share to Misskey LINE Share to LINE Evernote Share to Evernote WhatsApp Share to WhatsApp LiveJournal Share to Livejournal Diaspora Share to Diaspora Share to Gmail Threads Share to Threads Threema Share to Threema Share to X Tumblr Share to Tumblr Buffer Share to Buffer LinkedIn Share to LinkedIn Mail.Ru Share to mail.ru VK Share to VKontakte Trello Share to Trello Facebook Share to Facebook Bluesky Share to Bluesky Skype Share to Skype Hatena Bookmark Share to Hatena Bookmark! Share via MastodonShare Telegram Share to Telegram WordPress Share to WordPress.com

Embed

This website supports oEmbed. To quickly use oEmbed, just copy this site's link to your oEmbed-supported apps and websites like WordPress.

Alternatively, copy and paste the HTML code below to embed this post in your website.

($_ )! We have made this thing responsive, but recommend at least 512x512 pixels for best results.
<iframe src="https://reinhart1010.id/blog/2023/10/01/the-serif-system-font-stack-that-were-using-right-now?embed" height="512" width="512" style="border:none;"><a href="{{ $canonical }}">https://reinhart1010.id/blog/2023/10/01/the-serif-system-font-stack-that-were-using-right-now</a></iframe>
Preview

Reinhart Previano Koentjoro
Reinhart Previano Koentjoro
Citra Manggala Dirgantara
Citra Manggala Dirgantara

A Reinhart company

Products

Company