iTranslated by AI
Is system-ui Better Avoided? The Process Behind My 2026 font-family Best Practices for Websites
Introduction
Hello, this is Neo. I have been researching the font-family settings to use on websites for many years, and I have documented my findings in the past on my main site, Neo's World.
I recently bought a new main machine and installed the Chrome browser on a fresh copy of Windows 11. I noticed that some sites were applying "Noto Sans JP," while others were applying "Yu Gothic UI." I confirmed that "Noto Sans JP" was set as the default font in my browser settings, but I wondered: why do some sites use "Yu Gothic UI," which is such a thin and hard-to-read font? This question led me to investigate the best practices for font-family specifications once again.
In the article I posted on note, I only included the CSS code with a "just copy and paste this!" attitude and provided almost no explanation for the rationale or logic. Here, however, I would like to share the process that led me to conclude that these font-family settings are the best, in hopes that you will be able to customize them as needed.
system-ui results in Yu Gothic UI on Windows, which is hard to read
The generic font family system-ui, which has been supported progressively since around 2015, uses the "OS system font." With the default settings of each OS, you can expect the following to be applied:
- Windows 8, 8.1, 10, 11: "Segoe UI" → "Yu Gothic UI" → "Segoe UI Emoji"
- Mac and iPhone: "San Francisco (SF Pro)" → "Hiragino Sans" → "Apple Color Emoji"
- Android: "Roboto" → "Noto Sans CJK JP" → "Noto Color Emoji"
- Linux: "Ubuntu" → "Noto Sans CJK JP" → "Noto Color Emoji" (varies by distribution)
Since "Yu Gothic UI" is not included on Windows 7, it seems "Meiryo UI" is applied. However, both are "UI fonts," which are vertically elongated and difficult to read in long texts.
Since they can use the OS system font as-is, they are often used in CSS frameworks where it's easy to create a native app-like feel or where multi-language support (beyond just English/Japanese) needs to be considered.
In addition to system-ui, there seem to be other generic names that reference OS system fonts, such as ui-sans-serif, ui-serif, ui-monospace, and ui-rounded. These generic font names are somewhat like system-ui.
Because Yu Gothic UI is difficult to read, I personally do not think using system-ui is a good idea.
Why I didn't notice "Yu Gothic UI being applied" until recently
When I bought a new PC, I noticed that "Yu Gothic UI" was being applied in some cases. The reason for this was that I had been changing the system font using free software.
- Winaero Tweaker
- Windows10 フォントが汚いので一発変更! (Instant fix for ugly Windows 10 fonts!)
- Meiryo UI も大っきらい!! (I hate Meiryo UI too!!)
I used these free tools to change my system font to Meiryo. By the way, I ended up changing it to Meiryo on my new machine as well. That is why, even when system-ui is specified on my PC, "Meiryo" is applied.
Also, regarding my browser's default font, I have configured it in detail using an extension called "Advanced Font Settings." Additionally, since text on Windows tends to appear blurry, I use "Stylus" to overwrite @font-face for Yu Gothic or apply specifications like -webkit-text-stroke-width: .5px; to make the overall text appear bolder.
It is important to keep in mind that "there are people who customize their system or browser fonts" and "there are people who manually install external fonts." I often see discussions about how "it doesn't look very clean when Hiragino fonts are applied in a Windows environment," so you need to adjust how specifically you define font names depending on what you want to express on your site.
-apple-system and BlinkMacSystemFont have become unnecessary with system-ui
Incidentally, before system-ui, the specifications -apple-system and BlinkMacSystemFont were popular for Mac.
-
-apple-system: Specification for Safari -
BlinkMacSystemFont: Specification for Chrome
In older versions of Safari (around Mac v10.11 and iOS v9–10), there was a specification bug where special values like -apple-system were ignored unless written at the beginning of the font-family property, but that is no longer the case.
Both specifications apply "San Francisco (specifically SF Pro for English)" followed by "Hiragino Sans (for Japanese)," acting the same way as what we now call system-ui. In short, these are two specifications that are no longer needed. Let's unify them under system-ui.
Recent Windows 10 and 11 use Noto Sans JP for sans-serif
So, what happens if we use the original generic font family, which uses the "default font set within the browser" rather than the "OS system font"? That would be sans-serif or serif.
Around the 2024 update, "Noto Sans JP" began to be pre-installed on Windows 10 and 11, and it seems that Chromium-based browsers have adopted it as the default. Previously, I believe "Meiryo" or "Yu Gothic" were the defaults. However, English text often still defaults to Arial (equivalent to Helvetica), so it doesn't seem like Noto Sans JP is used universally across the board.
In other words, the fallback for sans-serif is applied in the following order:
- Windows 10 & 11: "Arial" -> "Noto Sans JP" -> "Segoe UI Emoji"
- Mac & iPhone: "San Francisco (SF Pro)" -> "Hiragino Sans" -> "Apple Color Emoji"
- Android: "Ubuntu" -> "Noto Sans CJK JP" -> "Noto Color Emoji"
- Linux: "Ubuntu" -> "Noto Sans CJK JP" -> "Noto Color Emoji" (differs by distribution)
For those who don't mind having different fonts for English and Japanese, we have reached an era where specifying just sans-serif is enough to make the site look clean.
Revisiting the differences between Noto Sans JP, Noto Sans CJK JP, and Noto Sans Japanese
Here, it's easy to get confused because there are multiple names for Noto Sans fonts. There are three main types, so let's review the differences:
- Noto Sans JP: A web-oriented font, pre-installed on Windows 10/11.
- Noto Sans CJK JP: A font installed on the OS; it is often pre-installed on Android and Linux, and I manually install it on Windows and Mac by downloading it from Google Fonts.
- Noto Sans Japanese: No longer exists; an early version from Google Fonts. It is the old name for what is now "Noto Sans JP." It doesn't seem to have ever been pre-installed.
Noto Sans JP is more lightweight and designed for the web, but be careful because writing only font-family: "Noto Sans CJK JP"; will not trigger it if the font is not recognized.
The Google-produced Noto Sans CJK JP is essentially the same as Adobe's "Source Han Sans" (源ノ角ゴシック), so I don't think there's a specific need to write out the specification for Adobe's version. Usually, Noto Sans is already installed, and one would simply add Source Han Sans as an additional installation.
Evolution of Mac system fonts
Regarding Mac system fonts, since version 10.11 El Capitan, San Francisco and Hiragino Sans have been included and adopted as standard. Nowadays, if you specify them using generic font families, the first option is selected. The second combination is the default for older OS versions.
- San Francisco (SFPro) -> Hiragino Sans
- Helvetica Neue -> Hiragino Kaku Gothic ProN
Since there seems to be a glitch where the Hiragino Sans part is rendered slightly smaller when San Francisco is applied, those who are concerned may want to explicitly specify "Hiragino Sans" first.
How much do we need to worry about past OS and browser versions?
Official support for Windows 10 is ending in 2025, and macOS v12 Monterey support ended (in principle) in 2024. When considering the range of OSs to support with font-family specifications, focusing only on fairly recent ones seems sufficient to cover the vast majority of market share.
Regarding browsers, support for IE11 ended in 2022. By that time, Chrome and Edge had already shifted to the Chromium-based (Blink engine) architecture, which holds approximately 80% market share. Other well-known browsers like Firefox and Safari each hold around 5%. Since browsers from 2020 onward basically follow an "auto-update" path, it is safe to assume that browsers from the last 4 to 5 years are already up-to-date.
Given this situation, it seems:
- Specifying
-apple-systemandBlinkMacSystemFontfor Mac ->system-uiorsans-serifis sufficient. - Specifying Helvetica Neue or Hiragino Kaku Gothic ProN for Mac -> Unnecessary unless you specifically want to use those fonts, as they are for older OSs.
- Specifying Meiryo or Yu Gothic for Windows -> Better to specify
sans-serifand let it fallback to "Noto Sans JP" for a cleaner look. - Android and Linux -> "Noto Sans CJK JP" is widely installed, so
system-uiorsans-serifis enough; it's difficult to accommodate older versions due to too much variation.
If you were to specify as many as possible, in what order?
If you intend to fine-tune the appearance across various OSs and browsers, it is a good idea to consider the order of font-family declarations in the following sequence:
- Always put specifications for Mac and iPhone at the beginning.
- Next, put specifications for Windows.
- Put specifications for Android and Linux further down.
- Place generic font families at the end as a fallback.
The reason is that OSs other than Mac tend to proactively pre-install Noto Sans-style fonts. By placing Apple-style font specifications first, we prioritize them even for those (the minority) who have manually installed Noto Sans fonts on their Macs.
Since Windows has "Noto Sans JP" and Android/Linux have "Noto Sans CJK JP" (similar but distinct fonts), I have also considered that Windows has a high pre-installation rate for "Noto Sans JP." By writing it earlier, even for those (the minority) like myself who have manually pre-installed "Noto Sans CJK JP" on Windows, the web-optimized and pre-installed "Noto Sans JP" is given priority.
Those are the OS-specific considerations. Among them, there are several fonts pre-installed on the OS that could be specified, but there are broadly two schools of thought on which to prioritize:
- Those who want English fonts for English text and Japanese fonts for Japanese text to ensure each character looks beautiful.
- Those who want to use Japanese fonts globally to avoid the mixing of English fonts.
Personally, I belong to the latter group that prefers to unify with just Japanese fonts. The reason is that mixing fonts can sometimes cause misalignment in line-height.
It is true that English fonts like San Francisco, Segoe UI, Arial, Roboto, and Ubuntu look beautiful, so one might want to use them proactively. However, these fonts do not contain Japanese characters, so when Japanese appears, Hiragino Sans, Yu Gothic UI, etc., get mixed in. This can lead to extra whitespace at the bottom of the characters even with line-height: 1, causing the line height to shift between "English-only lines" and "lines with mixed English and Japanese." I personally dislike this, so I have stopped actively using English-specific fonts recently.
Reviewing the "3 Copy-Pasteable Options" Developed Above
Based on the considerations above, I created the "3 copy-pasteable font-family options" that I posted on note. Let's review them.
For those who want to actively use system-ui: Aiming for a native app feel
html {
font-family: system-ui, sans-serif;
}
Since about 10 years have passed since system-ui appeared, I think there are almost no browsers that don't recognize it, but I have specified sans-serif as a fallback just in case.
As mentioned above, Yu Gothic UI is likely to be applied on Windows, so I personally do not recommend this.
For those who want to avoid mixed English fonts
html {
font-family: "Hiragino Sans", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
}
This lists Japanese fonts likely to be pre-installed on recent Mac, Windows, Android, and Linux systems, followed by sans-serif as a fallback. I do not use system-ui because it is difficult to read on Windows due to Yu Gothic UI being applied.
Also, since the font weight of Windows' "Yu Gothic" is subtle and prone to appearing blurry, those who want to avoid Yu Gothic specifically might want to add Meiryo.
/* Thoroughly avoid Yu Gothic, which tends to look blurry on Windows */
html {
font-family: "Hiragino Sans", "Noto Sans JP", Meiryo, "Noto Sans CJK JP", sans-serif;
}
If you really want to use "Hiragino Kaku Gothic ProN," which was installed on Macs from a while ago, instead of "Hiragino Sans" installed on recent Macs, you can add it and list it with priority as appropriate. Since Hiragino preferences seem strong, write the ones you "want to prioritize" first. By the way, although font names can be specified in English or Japanese, it seems that specifying them in English only is sufficient recently.
/* This might also work */
html {
font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, "Noto Sans CJK JP", sans-serif;
}
For those who don't mind mixed English fonts
Finally, the simplest one.
html {
font-family: sans-serif;
}
By using generic font families, the aim is to apply fonts in the following order:
- Mac/iPhone: "San Francisco" -> "Hiragino Sans"
- Windows 10/11: "Segoe UI" -> "Noto Sans JP" (not "Yu Gothic UI")
- Android: "Roboto" -> "Noto Sans CJK JP"
- Linux: "Ubuntu" -> "Noto Sans CJK JP" (varies by distribution)
Summary: A list of fonts I think are actually usable
Finally, I have summarized what I have written so far. You can copy-paste this and remove or reorder lines as appropriate.
html {
font-family:
/* English fonts: If you want to unify with Japanese fonts, you can delete this entire zone ---------- */
"Helvetica Neue", /* For Mac/iPhone - "San Francisco" doesn't work if specified directly; it's only adopted when system-ui, -apple-system, or BlinkMacSystemFont are chosen, but controlling Japanese fonts is difficult, so give up on it */
Helvetica, /* Alias for Arial on older Macs and Windows */
Arial, /* Clearly specified for Windows */
Roboto, /* For Android */
Ubuntu, /* For Linux (check and add others if you are concerned about other distributions) */
/* Japanese fonts ---------- */
"Hiragino Sans", /* For the latest Mac/iPhone - fallback to the next if not present */
"Hiragino Kaku Gothic ProN", /* For Mac/iPhone backward compatibility */
"Noto Sans JP", /* For the latest Windows */
"Noto Sans CJK JP", /* For Android/Linux - can be stable because some people manually install CJK JP on Windows too, giving priority to the Noto Sans family */
Meiryo, /* For backward compatibility on Windows Vista/7 - I don't select "Yu Gothic" because it tends to set a thin weight */
/* Final fallback ---------- */
sans-serif, /* I don't select system-ui because Yu Gothic UI is applied on Windows and it's hard to read */
/* Emoji font specification */
"Apple Color Emoji", /* For Mac/iPhone */
"Segoe UI Emoji", /* For Windows */
"Segoe UI Symbol", /* Fallback for older Windows */
"Noto Color Emoji"; /* For Android/Linux */
}
Regarding emoji fonts, although "Noto Color Emoji" can be installed on Windows from Google Fonts, specifying it in CSS does not seem to make it effective. There are scattered reports of people failing in attempts to spoof it as Segoe UI Emoji by rewriting the registry. Therefore, I think it is most stable to give up here and write "Segoe UI Emoji priority" as is.
If you want to mix in Yu Gothic (Windows) or YuGothic (Mac), I recommend writing an @font-face for Windows to ensure the Medium weight, rather than the thin Regular, is applied.
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"), local("YuGothic-Medium"); }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Bold") , local("YuGothic-Bold") ; font-weight: bold; }
html {
font-family:
/* Japanese fonts ---------- */
"Hiragino Sans",
"Hiragino Kaku Gothic ProN",
YuGothic, /* "Yu Gothic" specification for Mac/iPhone */
"Noto Sans JP",
"Noto Sans CJK JP",
"Yu Gothic", /* "Yu Gothic" specification for Windows */
Meiryo,
/* Final fallback ---------- */
sans-serif;
}
Conclusion
I miss the 2010s, when I struggled while checking fonts across various environments. I think we are now in an era where we can apply beautiful fonts much more simply.
How was this first collaboration project with note? I have tried to come up with ways to deliver useful content to two platforms that likely have different audiences.
Thank you for reading until the end. If you liked it, I would be happy if you could support me with badges or similar.
Discussion