Webフォントの最適化
「タイポグラフィー」は、優れたデザイン、ブランディング、読みやすさ、優れたユーザー体験にとって重要な要素です。
Webフォントを使うことで、これらすべての品質をさらに高めることができます。
Webフォントの最適化は、サイトのパフォーマンス対策では重要な要素です。
一部のフォントによってテキストの表示が妨げられることがありますが、Webフォントを使用しているからと言って必ずしも表示が遅れるというわけではなく、むしろ、最適化されたフォントを使用して、それらのフォントの読み込み方を適切に決めることで、逆に全体のページ サイズが減少してページの表示時間が向上します。
isotypeテーマでは、記事のh1タイトル部分のみ、日本語Webフォントを適用しています。
Google Noto Sansとは
Notoは、Googleによって開発されたオープンソースのフォントファミリーで、webフォントとしても使用できます。
https://googledevjp.blogspot.jp/2014/07/noto.html
Noto Sans Japaneseでは、
漢字、ひらがな、カタカナ含めた収録文字数6,934文字で、JIS X 0208をほぼ網羅し、フォントのウェイト(太さ)は、Thin 100, Light 300, DemiLight 350, Regular 400, Medium 500,
Bold 700, Black 900の7種を網羅しています。
Apache License 2.0で配布されており、利用者は、ライセンスのルールを守ることで、自由に商用利用、再配布、派生物の再ライセンスが可能です。
このライセンスのもと、isotypeテーマでは、軽量化のため、サブセット化(アスキー文字 + 非漢字文字 + 第1水準漢字を抜き出してフォントセットを作成)することにより、1ウェイト14～16MBあるデータを、約1/40のサイズの400KBまでデータサイズを縮小しています。
webフォントの形式のひとつである、woff (Web Open Font Format)形式は、一般的なモダンブラウザのほとんどで対応しています。
IE9～
Firefox 3.6～
Chrome 6～
Safari 5.1～
Opera 11.10～
iOS 5.0～
Android 4.4～
文字詰め(カーニング)
Windows Vista 日本語版のシステム用フォントとして開発された「メイリオ(Meiryo)」は、その名の通り、「明瞭」が語源となっており、可読性の高いフォントとされていますが、行間が広い、文字が横長であるなど、可読性が高くとも、あまり綺麗な文字組とは言えません。
Appleで過去採用されてきた日本語のシステムフォントであるヒラギノや、Appleの日本語サイトで使用されていたAXISフォント、
現在のAppleサイトで日本語Webフォントとして使用されているApple TPの美しさと比べると、その美学の違いは明確です。
isotypeテーマでは、h1タイトル部分において、非漢字(ひらがな、カタカナ、記号)を1文字単位で文字詰め設定をしています。
同じフォントサイズで、メイリオと、Google Noto Sansでの表記を対比してみます。
Google Noto Sansでは、細身のウェイトでも可読性が高いのが分かります。
フォントウェイト見本
Thin
人々はあなたの美徳によってあなたを罰し、あなたの過ちによってあなたを許す。
They punish you for all your virtues. They forgive you entirely – your mistakes.
Light
人々はあなたの美徳によってあなたを罰し、あなたの過ちによってあなたを許す。
They punish you for all your virtues. They forgive you entirely – your mistakes.
Demi-Light
人々はあなたの美徳によってあなたを罰し、あなたの過ちによってあなたを許す。
They punish you for all your virtues. They forgive you entirely – your mistakes.
Regular
人々はあなたの美徳によってあなたを罰し、あなたの過ちによってあなたを許す。
They punish you for all your virtues. They forgive you entirely – your mistakes.
Medium
人々はあなたの美徳によってあなたを罰し、あなたの過ちによってあなたを許す。
They punish you for all your virtues. They forgive you entirely – your mistakes.
Bold
人々はあなたの美徳によってあなたを罰し、あなたの過ちによってあなたを許す。
They punish you for all your virtues. They forgive you entirely – your mistakes.
Black
人々はあなたの美徳によってあなたを罰し、あなたの過ちによってあなたを許す。
They punish you for all your virtues. They forgive you entirely – your mistakes.
