iTranslated by AI
Adding CSS to Prevent Misalignment as Noto Fonts Become the Default for Chrome/Edge on Windows
2025-04-11 Update: It seems the rollout of this change has begun for the production version of Windows (non-preview version).
TL;DR
If you want to respect the upcoming default Noto Sans, use text-box: trim-both ex alphabetic to remove half-leading and align the vertical position.
Alternatively, explicitly specify font-family: Meiryo to prevent it from being displayed in Noto Sans.
Native inclusion of Noto fonts in Windows
Current Release Preview versions of Windows now include Noto fonts as standard.
[Noto Fonts] This update enhances text quality and customer experience in web browsing for Chinese, Japanese, and Korean languages by introducing the Noto font family. This provides modern, comprehensive font support for these languages.
In addition, starting from Chrome 128 (already released), if Noto Sans JP or Noto Serif JP is installed on a Windows device, Noto fonts are used by default instead of Meiryo. The same applies to Edge.
This led me to wonder: when this Windows 11 Release Preview content hits the production channel, will web pages without font-family specifications use Noto fonts in a Windows + Chrome (Edge) environment...?
Upon checking, I found that was indeed the case.
The fonts that appear to have been added are both Noto Sans JP and Noto Serif JP, in 7 weights, and they are not the variable versions.
While it is generally a welcome change that Noto fonts becoming the default in Windows + Chrome (Edge) environments will reduce the difference in font feel across platforms and make Japanese font weight variations easier to use, there is a slight catch.
The display of Android + Noto is not the same as Windows + Noto. This is primarily due to the vertical positioning of the characters.
Display Confirmation
I'll try creating some content for display confirmation.
To make the differences easier to see, I used a text containing "タ" (with and without the middle stroke protruding) and "愛" (love), which is often used for font display, resulting in a mysterious sentence.
When Noto fonts are not installed
In current Windows versions where Noto fonts are not installed, the display at 150% zoom looks like this.
Everything ends up as the same Meiryo font.
When Noto fonts are installed
The display when Noto fonts are installed looks like this at 150% zoom.
Misaligned!
This is a problem!!
Other environments
Even when displaying Noto Sans on Android or Hiragino on iOS, if you align an SVG of the same size as the text, the characters might look slightly higher, but there isn't such a significant difference.
This is the display on Android (since Meiryo is obviously not installed, both are Noto Sans).
Although it's the same Chrome + Noto Sans combination, the display position is completely different. While it might be hard to notice the difference in paragraphs, the vertical misalignment becomes noticeable when you place an SVG next to a link or button, like GO >.
Additionally, if you have adjusted the text slightly downward to center it vertically with an SVG, the characters in a Windows + Noto Sans environment will end up appearing quite far down.
How to Resolve
This issue where Noto Sans shifts slightly downward has been known for some time and is apparently caused by differences in half-leading.
Fortunately, starting with Chrome 133, it is possible to remove half-leading using CSS.
Here is the result after removing it with text-box: trim-both ex alphabetic.
Even though the fonts are different, the display positions are now almost the same. By fine-tuning the vertical position after this, it should display consistently across most environments.
CSS text-box
The text-box property still has limited availability, with no support in Firefox and support starting from Safari 18.2. However, since this fix addresses the new Windows + Chrome (Edge) environment, it should be fine to use.
Bonus
Since the default font is changing, visual regression tests on pages without a Meiryo specification will likely fail due to text differences.
Adjusting the display with text-box can be tedious, so if you want an easy solution, it might be better to specify Meiryo in the font-family.
Discussion