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","MS Pゴシック" 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.

Font weight comparison

  • 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.

Font style comparison

  • 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.

WordPress.com in Japanese

WordPress’ free hosted service “WordPress.com” is now available in Japanese interface.

WordPress.com in Japanese

When I started translating strings on translate.wordpress.com a while ago, I thought it’s a pretty cool system to get people involved in translation. It was only recently that I was able to spend more time at it – but once I got going, I did 1000’s in a few days, i was pretty busy!

After the number of translated strings reached above Italian (which already has localized interface), I contacted the support team. The process of actually getting the Japanese site up was pretty quick and smooth – pretty impressive.

Once you are logged in, you can chose your blog’s language through Options » Languages menu. Make sure to pick the one that matches with the language you use to write your blog entries.

This is only a first step for promoting WordPress.com to Japanese users. But it’s also a pretty big step toward getting people more interested in both WordPress.org/WordPress.com. The team & community’s effort toward intarnationalization/localiazation is one of the biggest reasons why I keep using their product. Good job and thank you to all who made this happen!

WordPress Standard Guidebook

WordPress標準ガイドブック

You may have heard already, but a new book on WordPress just came out in Japan. I wrote it with a help of WordPress Japan.

WordPress Standard Guidebook

  • Author: Naoko McCracken & WordPress Japan
  • Price: 2,980 yen + tax (approx. $35)
  • 344 pages (with CD-ROM)
  • ISBN4-8399-2169-5
  • Publisher: Mainichi Communications

The book talks about things like getting started with WordPress, setting up a local environment for development, customizing and creating a theme, and installing and making the best use of plugins.

I’d like to thank these theme & plugin authors for letting me include their work in my book. The book explains how to set up these theme/plugins, and includes required files in the CD-ROM.
Continue reading “WordPress Standard Guidebook”