Design with Japanese Characters

Some tips when you use Japanese characters in web designing.

Transcript

1. Design with Japanese Characters 4th November 2015 | Sho Kuwabara
2. Agenda ・ 1. What is Japanese Characters ? ・ 2. Types of Japanese Fonts ・ 3. Basic Design Theory of Japanese fonts ・ 4. Japanese Webfonts
3. What’s Japanese Characters?
4. What’s Japanese Characters? Kanji (Chinese Characters) Hiragana 機械 友達 挨拶 きかい ともだち こんにちは Katakana コンピュータ フレンド ハロー Alphabet Computer, Friends, Hello + So Mixed !
5. Types of Japanese Fonts
6. Japanese Fonts Serif Sans-Serif Mincho Gothic
7. 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  
8. 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/
9. Basic Design Theory of Japanese Fonts
10. Only translating is not good ex) Skype.com
11. Only translating is not good ex) Skype.com
12. You can adjust with CSS Before After
13. Japanese Characters looks big ↑ same font-size but japanese characters looks much bigger (1) font-size
14. 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
15. letter-spacing: normal; Don’t make it minus. (3) letter-spacing Sometimes we set wide number like: 0.05em 〜 0.2em
16. Japanese Webfonts
17. ・　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
18. ・ 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/
19. Summary
20. •  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
21. Cám ơn! ありがとうございました