/ coding

Japanese fonts and website design

I’m pondering Japanese fonts with respect to web typography, and realized that I have two issues which I’m running into:

  • Whether to add font variation within a Japanese website
  • Choosing Japanese fonts for the web

Below are some questions and findings I’ve uncovered while looking into this.

Thanks to JS Mayrand for taking some time to discuss this with me and for showing me some cool typography stuff in Illustrator.


Finding the equivalent of Roman alphabet font styles for Japanese fonts

I’m going to approach this backwards and start with English fonts first. Just bear with me because if you are reading this, you might be in a similar position. If you don’t know much about Japanese fonts (like me) this might be an easier way in.

So maybe you choose a collection of fonts like this for a site you are designing:

  • A cursive script font for main titles
  • A sans serif font for article titles and navigation
  • A serif font for body text

That would be fine enough for an English site, so where should we go from here? What are the equivalent fonts in Japanese?

The Mac comes with a small number of Japanese fonts (ten on my machine) that either contain the word “Gothic” (ゴシック) or the word “Mincho” (明朝) in their titles. Comparing the two, it seems that Gothic Japanese fonts are sans serif, and Mincho fonts are serif. The only other Japanese font on my Mac is called “Osaka”, and it is sans serif.

So what about a Japanese script font? I don’t have one on my Mac. Though Japanese script fonts do exist somewhere out there, looking for them is a bit outside of the scope of this post.

Do Japanese websites even mix font styles the way sites do in English?

Generally they don’t.

So this is where we get into trouble beginning from the English perspective. That’s probably obvious, but it was a helpful exercise in digging into the differences between Japanese fonts.

On a Japanese website, it’s unlikely that you would see, say, one font for article titles paired with another font for body text.

Let’s look at some examples.

Yahoo Japan

From their stylesheet:

font-family: “メイリオ”, “Hiragino Kaku Gothic Pro”, Meiryo, “ヒラギノ角ゴ Pro W3”, “MS PGothic”, “MS UI Gothic”, Helvetica, Arial, sans-serif;

This renders on my Mac in Safari as “Hiragino Kaku Gothic Pro” for everything on the front page: titles, navs, article excerpts, footer, etc.

Asahi Shimbun

The Asahi Shimbun doesn’t even seem to set a font in their stylesheets. The font that is rendered on my Mac in Safari (by default, I suppose?) is “Hiragino Mincho ProN” for all text on the front page.

Mixi

From their stylesheet:

font-family: ’Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’, メイリオ, sans-serif;

This renders on my Mac in Safari as “Hiragino Kaku Gothic ProN” for everything on the page.

Ameba

From their stylesheet:

font-family: メイリオ, Meiryo, ‘MS Pゴシック’, Arial, Helvetica, sans-serif;

This renders on my Mac in Safari as “Arial” for everything on the page, except for the footer, which is:

font-family: ’ヒラギノ角ゴ Pro W3’, ‘Hiragino Kaku Gothic Pro’, メイリオ, Meiryo, Osaka, ‘MS Pゴシック’, ‘MS PGothic’, sans-serif;

… which renders as “Hiragino Kaku Gothic Pro” for me.


So Ameba was the only site out of a handful that I checked (including Nico Nico and Amazon Japan) that used more than one font on the front page.

Generally, any variations in font were not handled by text, but instead were rendered within static images. This is especially true for fonts that wouldn’t exist on user’s system.

Putting text into static images must make it really hard to update a site. You’d have to remake the image every time you wanted to update what it says.

So why do it?

Japanese web fonts

For an English site, if you want variety in your fonts and control over which fonts are most likely to be rendered, you would probably reach for a web font.

Akky on StackOverflow says Japanese web fonts are not practical due to large download sizes. If you think about the sheer number of characters required to make a Japanese font (thousands and thousands), it makes sense that the file size would be much bigger than an English font file.

So it seems that relying on fonts installed on the user’s system is the best way to go. In the examples I showed you earlier, all sites were using fonts that are found on any Mac or Windows machine.

When making a website for users who might only have eleven Japanese fonts (like me), relying on system fonts for website design means that we are limited to serif and sans serif fonts.

That is, of course, unless we want to force a large web font file download on our users. Let’s not.


Believe it or not, I’m not done yakking about this yet. But my fingers need a break so I’m stopping here for now.

It’s entirely possible that I’m missing something here. If you know what that something is, please do get in touch.