What is the best CSS font-family to choose when styling Japanese websites?

With the use of web fonts, such as Google Fonts, they are becoming the standard. Do we use Google Fonts in the same way when creating Japanese websites? Do Japanese fonts include alphabets?

We believe it is important to understand the best practices for CSS settings for the Japanese language.

Basic Knowledge of the Japanese Language

First, let’s unpack the Japanese language.

How Japanese is Written

The Japanese language is complex and has five ways to display it: hiragana, katakana, kanji, alphabets, and numbers. These systems are not used independently but are mixed together.

For example, in the phrase “Web design company in Tokyo,” “Tokyo” is written in kanji, “niaru” in hiragana, “Web” in the alphabet, and “design” in katakana.

What a complex language!

Number of Japanese Characters and English Letters

Number of English Letters

As you know, the alphabet has only 26 characters.

The number of letters in a typeface, including lowercase and uppercase letters and symbols, is about 100, and 256 when other Latin letters and symbols are added.

Number of Japanese Characters

The number of characters in Japanese can be larger than you might expect.

Hiragana and katakana each have 46 characters, So far, this is not that many compared to English.

The problem, however, is the kanji. There are about 60,000 kanji characters! Of these, the Japanese font installed on PCs has about 6,300 kanji characters, which is a very large number.

In total, there are about 6,500 characters in hiragana, katakana, kanji, alphabets, and numbers.

The capacity of a Single Character

Have you ever been aware of the capacity of a font? If you are creating a website using only European fonts, you probably do not.

Unit for Expressing the Capacity of a Character: “byte”

There are two types of fonts: single-byte font and double-byte font.

Please note that the capacity per character is also a very important factor when considering Japanese fonts. This is because Japanese is a collection of about 6,300 characters in a PC, so if the capacity per character is large, the impact will be significant.

Web Pages and Japanese Fonts

Next, let’s look at Japanese web fonts.

Japanese Web Fonts

Japanese web fonts also exist.

Google, a famous web font service, also provides Japanese web fonts.

Adobe Fonts also offers Japanese web fonts, which can be easily used by Creative Cloud members.

Size Comparison of Popular Japanese / English Web Fonts

Let’s compare the sizes of Japanese and English fonts using Google Fonts’s web fonts, the font service mentioned above.

I compared them with Roboto and Noto Sans Japanese, which are Google’s leading fonts.

(Perhaps I should have compared them with Noto Sans, but I chose Roboto for the English Web font because Noto Sans for European languages is a global font collection and supports languages other than English.)

The capacity of Roboto English Web Fonts

Roboto→336KB

（Total of Regular 400 and Bold 700）

The capacity of Noto Sans Japanese Web Fonts

Noto Sans Japanese→9.2MB

（Total of Regular 400 and Bold 700）

Comparing Roboto and Noto Sans Japanese, the difference is 27 times larger.

Japanese fonts are heavy because of the large number of characters and the large size of each character.

In this case, we downloaded only two font-weights, Regular and Bold, but in reality, more variations would be needed, and the weight would be much higher.

Google recommends that files other than fonts be kept to 1,600 KiB (about 1.6MB) per page*, so installing Japanese web fonts would greatly exceed the recommended capacity.

*Refer to：https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight/

Are Web Fonts Legal for Japanese Websites?

The weight of Japanese fonts has a fatal effect on page rendering.

Although there are some Japanese websites that use Japanese web fonts, I do not recommend them.

As someone who works for a digital marketing company, I am aware of the impact of page loading speed on SEO.

Due to the large size and weight of the font, the moment the page is opened, it will either be replaced by another font or be blank and will score low in the Cumulative Layout Shift (CLS) of Core Web Vitals.

Alternatives to Web Fonts

So how can we specify Japanese fonts without using Web fonts?

The Standard Way for Japanese Fonts

The answer is simple: use the same method as before Web fonts became mainstream.

Specify a font that comes standard on the device.

Making the system font for a particular operating system the default will improve performance because the browser does not need to download font files and will use the fonts it already has.

Cautions for Japanese System Fonts

However, this requires caution. Each of the major devices, including Mac, iPhone, and Windows, has different Japanese system fonts.

Even if you specify a font when creating a web page, if the person viewing the web page does not have that font on their computer, it will not be displayed in the font you specified.

Are there any fonts that come standard on all platforms?

Japanese OS Share (Browsing Environment)

So far, we have learned that the best way to specify Japanese fonts is to choose system fonts rather than Web fonts.

Next, let’s check the OS share in Japan to consider what kind of system font would be best.

What kind of OS do people in Japan use to browse websites?

Let’s take a look at each device platform.

Desktop

Source: StatCounter Global Stats – OS Market Share

Windows is by far the most popular OS, with OS X in third place.

I was surprised to see OS X’s share so low!

Mobile

Next, let’s check the operating systems of mobile devices.

Source: StatCounter Global Stats – OS Market Share

Here, iOS is No. 1, and although Android has a decent share, it is less than half of the market.

Windows should be prioritized for desktops, while iOS should be prioritized for mobile devices.

Express brand character with English fonts

Can’t you express your brand’s personality if you use system fonts? No, that is not true.

You can use web fonts only for English fonts.

Mixing Web Fonts and System Fonts

Simply specify that only alphanumeric characters should use web fonts and Japanese parts should use system fonts.

The specific description is explained in the next section.

Select a web font that matches your corporate image.

How to Specify Font-Family for a Japanese Website

Rule 1: Specify font-family for each OS.

Rule 2: Put English fonts first.

Common error: Only Japanese fonts work.

Multiple font-family names can be specified. If more than one is specified, priority is given to the font written before it.

Since Japanese fonts also contain alphabetic characters, if the Japanese font name is specified before the Latin font name, the Latin font will not be applied.

The Japanese font name should always be specified before the Japanese font name.

Compatibility of Japanese Font and English Font

When mixing two different fonts, consider the compatibility of the fonts.

The following images show examples of good and bad compatibility. Even if the same font-weight is specified, they may have different thicknesses, so be careful.

Author’s Recommended CSS Font Settings

The following is a combination of Japanese and English fonts that are balanced with the standard Google font “Roboto,” which is recommended for business sites.

Roboto

Here is an example of using 400 Roboto for text and 700 for headlines and other bold text.

font-family:'Roboto','Hiragino Sans','Meiryo','Hiragino Kaku Gothic ProN',sans-serif;

Desktop: Windows10

Desktop: Mac OS Monterey

Mobile: iOS16

Mobile: Android9

Summary

Use standard OS fonts instead of web fonts for Japanese. Instead, use web fonts for the English part to express the identity of the brand.

Make sure to specify the font-family in the correct order. Need help choosing a Japanese font? Contact us.