design with japanese characters 151104
TRANSCRIPT
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?
Kanji (Chinese Characters)
Hiragana
機械 友達 挨拶
きかい ともだち こんにちは
Katakana コンピュータ フレンド ハロー
Alphabet Computer, Friends, Hello
+
So Mixed !
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/
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
・ 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/
• 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