今までデザインを優先する場合はテキストを画像化するのが一般的でしたが、iPhone6やiPad、最新のPCなど、高解像度のディスプレイではにじんでしまい残念なことになるので、見出しなどの文字もデバイスフォントを使用しはじめた人も多いのではないでしょうか？しかし「日本語WebFontは有料ばかり・・・」とか「結局Windowsはメイリオでしょ！」とか残念な現実もあります。今回はそんなデバイスフォントを少しでもきれいに見せる小技（主にCSS）をまとめてみました。
それでは早速行ってみましょう！その１ font-familyの指定をする
font-familyの指定をしていない場合、OSやブラウザごとに異なったフォントになってしまいます。もちろんどのブラウザでも同じフォントを表示させるにはWebfontの使用が一番ですが、それができない場合は、font-familyの指定を行います。Font-familyの指定は、先に記述したフォントが優先的に読み込まれます。なるべくデザイン意図に沿ったフォントを指定するように心がけましょう。ちなみに私は「ゴシック体」「明朝体」で下記のようなFont-familyをセットで指定しています。
ゴシック体のFont-Family
|
1 2 3 |
body{ font-family:"Lucida Grande","Lucida Sans Unicode","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック",Helvetica,Arial,Verdana,sans-serif; } |
明朝体のFont-Family
|
1 2 3 |
body{ font-family:Georgia,'HiraMinProN-W3',"ヒラギノ明朝 Pro W3","Hiragino Mincho Pro W3","Hiragino Mincho Pro","平成明朝","細明朝体","ＭＳ Ｐ明朝","MS P Mincho",serif; } |
その２ line-height を指定する
|
1 2 3 |
.example{ line-height:1.7;/*行間を調整する*/ } |
line-height の指定もちゃんと指定していないと見栄えが悪くなります。日本語の場合、英語より行間は広く取ったほうが見やすいので、line-heightの値は本文は1.5-1.8、見出しは1.2-1.5くらいが理想です。
line-height:1.8の場合これはダミーテキストです。それは、直接まあその安心者という事のところのしましなら。万その間が内約心ももっと、その立脚んないかもにしがおくべきにも反抗ありたらしいが、あまりにはしですなでです。女権をあったものは無論昨日へのらくらんだあり。
line-height:1.4の場合これはダミーテキストです。それは、直接まあその安心者という事のところのしましなら。万その間が内約心ももっと、その立脚んないかもにしがおくべきにも反抗ありたらしいが、あまりにはしですなでです。女権をあったものは無論昨日へのらくらんだあり。
その３ text-align:justify を指定する
|
1 2 3 |
.example{ text-align: justify;/*文字を均等配置する*/ } |
text-align:justify を指定するとテキストがBox内で均等配置となり、雑誌などの箱組のようにきれいに見せることができます。もともとはIEの独自機能だったものがCSS3で採用されたプロパティなのでIEでもばっちり効果を発揮します。
text-align: justify を指定した場合これはダミーテキストです。それは、直接まあその安心者という事のところのしましなら。万その間が内約心ももっと、その立脚んないかもにしがおくべきにも反抗ありたらしいが、あまりにはしですなでです。女権をあったものは無論昨日へのらくらんだあり。
text-align: justify を指定しない場合これはダミーテキストです。それは、直接まあその安心者という事のところのしましなら。万その間が内約心ももっと、その立脚んないかもにしがおくべきにも反抗ありたらしいが、あまりにはしですなでです。女権をあったものは無論昨日へのらくらんだあり。
その４ 英数字だけでもGoogle Fontにする
先ほど日本語WebFontは有料ばかりと書きましたが、英字は既にさまざまなフォントがGooglefontsに登録されています。こちらのブログでもおすすめのGoogle Web Fontsの紹介していますが英数字を変えるだけでもかなり印象が変わると思います。 CSSのfont-familyの指定では下記のようにまず始めにGooglefontが読み込まれるように指定します。
「Open Sans」を指定したFont-familyの例
|
1 2 3 |
.example{ font-family:"Open Sans",Arial,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック",Helvetica,Verdana,sans-serif; } |
その５ letter-spaning を指定する
文字と文字の間隔を調整することのできるCSSプロパティ「letter-spaning」を指定すると、PhotoshopやIllustratorのカーニング調整と近い間隔で文字感を調整することができます。一文字づつの調整は現実的ではありませんが全体の詰める／空けるを調整することができます。
|
1 2 3 |
.example{ letter-spaning:5px/*文字間を広げる*/ } |
その６ 日本語カーニングを制御してくれるJSを使用する
日本語デバイスフォントは基本的にベタ組みで “「 ” や “ 、” など詰まっていてほしい文字にも余白がついていて間延びした印象があります。 eszett-design.comさんが制作した、FLAutoKerning02.jsを使用するとそれらの余白を自動調整して、いい感じに詰めてくれます。
その７ font-familyに游書体(游明朝/游ゴシック)を指定する
2013年にリリースされたOS X MavericksとWindows 8.1には、游書体の游明朝体と游ゴシック体が標準インストールされています。
游書体はMacOS Xの標準書体であるヒラギノシリーズの制作・監修を担当した有限会社字游工房が制作した書体で、2010年に全ファミリーが完成しています。これまでにも游書体は、Windows Phone7.5の日本語のシステムフォントとして、iOSではiBooks3.0のアプリ専用フォントとしても利用されています。シェアとしてはまだまだですが、WindowsとMac両方に採用されたフォントということで今後はスタンダードになるかもしれません。こちらもFont-familyの先頭で優先的に読み込ませましょう。
游ゴシックを指定したFont-Family
|
1 2 3 |
body{ font-family:YuGothic,'游ゴシック',"Lucida Grande","Lucida Sans Unicode","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック",Helvetica,Arial,Verdana,sans-serif; } |
游明朝を指定したFont-Family
|
1 2 3 |
body{ font-family:YuMincho,'游明朝',Georgia,'HiraMinProN-W3',"ヒラギノ明朝 Pro W3","Hiragino Mincho Pro W3","Hiragino Mincho Pro","平成明朝","細明朝体","ＭＳ Ｐ明朝","MS P Mincho",serif; } |
その８ -webkit-font-smoothing: antialiased;を指定する（Chrome／Safari のみ）
|
1 2 3 |
.sample{ -webkit-font-smoothing: antialiased; } |
Webkit系のブラウザでは、デフォルトで文字にアンチエイリアス（文字の境界線を少しぼかして読みやすくする処理）がかかっています。-webkit-font-smoothing:antialiased の指定をするとそのアンチエイリアスが少しスリムに、すっきりした印象になります。
まとめ
いかがでしたでしょうか？
これからは見出しやタイトルを含めてデバイスフォントを使うことも増えてくると思います。ひとつひとつは細かい変化ですが、それぞれをきちんと指定することでより読みやすい文字にすることができます。ぜひお試しください！
