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.

Gallery

Maine, December 2014

It’s been a while since I posted a monthly roundup of photos on this blog. I just came back from our first overseas family trip to Maine with my husband and newborn daughter, and here are some snapshots from that time.

I wasn’t sure if taking a 4-month old baby on a long trip would be a good idea, but I’m glad we decided to go. She handled long flights very well, and she seems to have grown up quite a bit in the past 10 days. She rolled over for the first time, can hold a toy and move it to her mouth, and smiles to people (flight attendants loved that!). I’m amazed by this little girl’s ability to adapt to a new environment.

I hope our 2015 will be filled with joy and pleasant surprises like this trip.

Happy new year!

20140518-165831-61111252.jpg