WordCamp Tokyo 2014 Design Team’s Showcase Site on GitHub

WordCamp Tokyo 2014 had a very creative and local-friendly website, custom Wapuu logo, and various swags and branding materials — thanks to the awesome design team.

Today, they launched a GitHub Pages site showcasing their creations all in one location.

WordCamp Tokyo 2014 GitHub Repositry List

Wordcam Tokyo 2014 Design Team's Github Repos

In the past years, these kinds of design data used to just sit somewhere in a shared folder of the project management web service we used to organize the event. We then had to dig around and give the right permission to the right people, as members of the design team change from year to year.

They still need to add some resources and tweak it a little, but it’s a great step forward in making it easy to share their work!

Props to Yutaro, Yasushi, and Mayuko for making this happen.

And here are some photos of the event:

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!