Design with Japanese Characters

4th November 2015 | Sho Kuwabara

Agenda

・ 1. What is Japanese Characters ?

・ 2. Types of Japanese Fonts

・ 3. Basic Design Theory of Japanese fonts

・ 4. Japanese Webfonts

What’s Japanese Characters?

What’s Japanese Characters?

Kanji (Chinese Characters)

Hiragana

機械 友達 挨拶

きかい ともだち こんにちは

Katakana コンピュータ フレンド ハロー

Alphabet Computer, Friends, Hello

+

So Mixed !

Types of Japanese Fonts

Japanese Fonts

Serif Sans-Serif

Mincho Gothic

Mincho Gothic

・  give  Feeling  of            polite,  dian0ness,  narra0ve,  modest…  ・  more  for  copy  0tle,  lead  sentense,  story.  ・  less  readability  when  small  ・  not  used  in  computer  UI,        used  in  webpages  recently  (less  than  gothic)  

・  give  Feeling  of          newtral,  simple,  strong,  pop…  ・  more  for  long  paragpraphs.  ・  readable  when  small  ・  used  in  computer  UI,  applica0on,        and  many  webpages  

Mincho and Gothic fonts gives different impressions.

Let’s see some example!

Mincho http://okinahours.com/ http://www.tokozenji.or.jp/ https://goo.gl/lQTnzT https://www.blwisdom.com

Gothic http://sign.jp/ https://www.muji.com/jp/mujihut/ http://www.muji.com/jp/compactlife/

Basic Design Theory of Japanese Fonts

Only translating is not good

ex) Skype.com

Only translating is not good

ex) Skype.com

You can adjust with CSS

Before After

Japanese Characters looks big

↑ same font-size but japanese characters looks much bigger

(1) font-size

Long text line-height: 1.7; (1.4〜2.0)

title line-height: 1.4; (1.3〜1.4)

caption line-height: 1.4; (1.2〜1.0)

(2) line-height

letter-spacing: normal; Don’t make it minus.

(3) letter-spacing

Sometimes we set wide number like: 0.05em 〜 0.2em

Japanese Webfonts

・　It was difficult to use a webfont for Japanese Website

・　But now there are many Japanese webfonts.

・　Using webfonts, we can do more expressions!

Japanese Webfonts

・ Morisawa TypeSquare　http://typesquare.com

・ Adobe Typekit　https://typekit.com/fonts

・ Google Noto Fonts　https://www.google.com/get/noto/

・ Yu Gothic / Yu Mincho　http://www.jiyu-kobo.co.jp/　

・ AXIS Fonts　http://www.axisfont.com/

Japanese Webfonts Services

cf. 60 websites which use Japanese Webfonts http://www.4696.co.jp/blog/9/

Summary

•  Japanese Language is a bit complicated, and has many things to consider when designing with it.

•  But there are basic rules for Japanese Characters

and some are simple.

•  If you understand these, it’s a big advantage when you are in projects which uses Japanese Characters!

Summary

Cám ơn! ありがとうございました