Pocket

スクリーンショット 2014-10-01 11.32.30
今までデザインを優先する場合はテキストを画像化するのが一般的でしたが、iPhone6やiPad、最新のPCなど、高解像度のディスプレイではにじんでしまい残念なことになるので、見出しなどの文字もデバイスフォントを使用しはじめた人も多いのではないでしょうか?しかし「日本語WebFontは有料ばかり・・・」とか「結局Windowsはメイリオでしょ!」とか残念な現実もあります。今回はそんなデバイスフォントを少しでもきれいに見せる小技(主にCSS)をまとめてみました。それでは早速行ってみましょう!

 

その1
font-familyの指定をする

font-familyの指定をしていない場合、OSやブラウザごとに異なったフォントになってしまいます。もちろんどのブラウザでも同じフォントを表示させるにはWebfontの使用が一番ですが、それができない場合は、font-familyの指定を行います。Font-familyの指定は、先に記述したフォントが優先的に読み込まれます。なるべくデザイン意図に沿ったフォントを指定するように心がけましょう。ちなみに私は「ゴシック体」「明朝体」で下記のようなFont-familyをセットで指定しています。

ゴシック体のFont-Family

明朝体のFont-Family

 
 

その2
line-height を指定する

line-height の指定もちゃんと指定していないと見栄えが悪くなります。日本語の場合、英語より行間は広く取ったほうが見やすいので、line-heightの値は本文は1.5-1.8、見出しは1.2-1.5くらいが理想です。

line-height:1.8の場合

これはダミーテキストです。それは、直接まあその安心者という事のところのしましなら。万その間が内約心ももっと、その立脚んないかもにしがおくべきにも反抗ありたらしいが、あまりにはしですなでです。女権をあったものは無論昨日へのらくらんだあり。

line-height:1.4の場合

これはダミーテキストです。それは、直接まあその安心者という事のところのしましなら。万その間が内約心ももっと、その立脚んないかもにしがおくべきにも反抗ありたらしいが、あまりにはしですなでです。女権をあったものは無論昨日へのらくらんだあり。

 
 

その3
text-align:justify を指定する

text-align:justify を指定するとテキストがBox内で均等配置となり、雑誌などの箱組のようにきれいに見せることができます。もともとはIEの独自機能だったものがCSS3で採用されたプロパティなのでIEでもばっちり効果を発揮します。

text-align: justify を指定した場合

これはダミーテキストです。それは、直接まあその安心者という事のところのしましなら。万その間が内約心ももっと、その立脚んないかもにしがおくべきにも反抗ありたらしいが、あまりにはしですなでです。女権をあったものは無論昨日へのらくらんだあり。

text-align: justify を指定しない場合

これはダミーテキストです。それは、直接まあその安心者という事のところのしましなら。万その間が内約心ももっと、その立脚んないかもにしがおくべきにも反抗ありたらしいが、あまりにはしですなでです。女権をあったものは無論昨日へのらくらんだあり。

 
 

その4
英数字だけでもGoogle Fontにする

先ほど日本語WebFontは有料ばかりと書きましたが、英字は既にさまざまなフォントがGooglefontsに登録されています。こちらのブログでもおすすめのGoogle Web Fontsの紹介していますが英数字を変えるだけでもかなり印象が変わると思います。
CSSのfont-familyの指定では下記のようにまず始めにGooglefontが読み込まれるように指定します。

「Open Sans」を指定したFont-familyの例

 
 

その5
letter-spaning を指定する

文字と文字の間隔を調整することのできるCSSプロパティ「letter-spaning」を指定すると、PhotoshopやIllustratorのカーニング調整と近い間隔で文字感を調整することができます。一文字づつの調整は現実的ではありませんが全体の詰める/空けるを調整することができます。

 
 

その6
日本語カーニングを制御してくれるJSを使用する

日本語デバイスフォントは基本的にベタ組みで “「 ” や “ 、” など詰まっていてほしい文字にも余白がついていて間延びした印象があります。 eszett-design.comさんが制作した、FLAutoKerning02.jsを使用するとそれらの余白を自動調整して、いい感じに詰めてくれます。

 
 

その7
font-familyに游書体(游明朝/游ゴシック)を指定する

2013年にリリースされたOS X MavericksとWindows 8.1には、游書体の游明朝体と游ゴシック体が標準インストールされています。
游書体はMacOS Xの標準書体であるヒラギノシリーズの制作・監修を担当した有限会社字游工房が制作した書体で、2010年に全ファミリーが完成しています。これまでにも游書体は、Windows Phone7.5の日本語のシステムフォントとして、iOSではiBooks3.0のアプリ専用フォントとしても利用されています。シェアとしてはまだまだですが、WindowsとMac両方に採用されたフォントということで今後はスタンダードになるかもしれません。こちらもFont-familyの先頭で優先的に読み込ませましょう。

游ゴシックを指定したFont-Family

游明朝を指定したFont-Family

 
 

その8
-webkit-font-smoothing: antialiased;を指定する(Chrome/Safari のみ)

Webkit系のブラウザでは、デフォルトで文字にアンチエイリアス(文字の境界線を少しぼかして読みやすくする処理)がかかっています。-webkit-font-smoothing:antialiased の指定をするとそのアンチエイリアスが少しスリムに、すっきりした印象になります。

 
 

まとめ

いかがでしたでしょうか?
これからは見出しやタイトルを含めてデバイスフォントを使うことも増えてくると思います。ひとつひとつは細かい変化ですが、それぞれをきちんと指定することでより読みやすい文字にすることができます。ぜひお試しください!

 

スタッフ募集のお知らせ

株式会社それからデザインでは現在、エンジニア・プログラマー、デザイナー、ディレクターを募集しています。自社サービスやクライアント企業のブランディングに関わるモノづくりの現場であなたの経験を活かしてみませんか?
ご興味のある方は、下記より募集要項をご覧ください。

生きるように働く人の仕事探しサイト「日本仕事百貨」に、当社のSE・プログラマー募集の記事が掲載されました。是非ご覧ください。