Optimizing English-based WordPress Theme for Japanese Blog

Last weekend, I switched the themes of my 2 blogs (this one and another one written in Japanese) to a customized version of the Fictive theme. I tried not to change too many things aside from the color scheme, so it’s easier to maintain the CSS.

However, I did make some essential modifications to optimize font properties for my Japanese blog. I’ll share what I did, and the reasons behind it.

Please note these are just examples based on my personal preferences, rather than absolute rules that all Japanese designers follow. That said, I think the changes I made are working great for my choice of theme, and can be used as a pretty solid set of basic rules when customizing other themes.

Font Size

Very large Japanese fonts can look too overwhelming even for a main heading. Also, very small monospace fonts are usually hard to read with Japanese fonts.

• h1, .entry-title (from 46px to 28px)
• h2 (from 26px to 24px)
• blockquote (from 20px to 16px)
• pre (from 0.9375em to 1em)
• code, kbd, tt, var (from 0.875 to 0.9em)

Font Family

Serif fonts usually look out-of-place in Japanese blogs, even heading text. I replaced references to Georgia and sans-serif with Japanese fonts, followed by Helvetica and serif.

• body (added "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック" after web font)
• h1 - h6 (removed Georgia, Times, serif and added Japanese fonts)

See also:

css – Japanese standard web fonts – Stack Overflow

Font Weight

Lighter-than-normal font-weight is nice and fancy with English-only body text, but it looks uneven when mixed with Japanese fonts that don’t have a lighter weight variation.

• body, .site-description (from 300 to 400)
• dt (from 400 to 600)
• blockquote (from bold to normal)

Font Style

It’s common in English text to use italics for elements such as em, blockquote, and cite. However, Japanese fonts become harder to read if italics are applied.

I added extra styling of background-color to em and i, so they can be distinguished from normal text.

• dfn, cite, em, i, address, blockquote (changed font-style: italics to normal)
• em, i (added background-color: #e7e5e1)

See also:

Italics in Japanese – Localizing Japan

---

You can see my final CSS file here. I hope this is useful for bloggers who are trying to make sure their site looks good with Japanese writing.

If you are interested in another example of child theme optimized for Japanese text, check out my friend @nukaga‘s adaptation of Twenty Thirteen, nu2013.