今回も最近のＷｅｂでの動向を踏まえた技術的なお話しをしていきます。
今回はフォントの話です。何も指定しない場合、フォントは通常表示される環境によって変わります。Windows、Macはもちろん、Android、iOSでも表示されるフォントが異なることがあります。特にAndroid はメーカーによって準備しているフォントが異なり、そのフォントでしか表示できないので統一するのはとても難しいです。
Windows8.1、MacOS10.9以降では、游ゴシック、游明朝がインストールされるようになったので、WindowsとMacでの表示を合わせることは可能になりました。しかし、フォントの太さが異なるなど細部にはまだ問題が残っています。もちろん、これより前のＯＳでは表示されません。
いろいろなことがあり、、font-familyというサイトに表示するフォントを指定するCSS設定には多くのフォントを表示を優先したい順に並べておくしかありません。これも好みでいろいろなパターンがあり、お勧めというのが難しいというのが現状です。
フォントは文字の表情です。つまり、サイトのデザイン的な大事な要素です。そのため、どうしてもインパクトを与えたい場合は画像化して表示し、ALT属性に文字を記載することでデザインと検索性を両立させることが一般的です。
この状態を一変させるのがＷｅｂフォントです。先ほどまでの話に出てくる端末にあるフォント、いわゆるデバイスフォントに対して、Ｗｅｂフォントはインターネット上にフォントの情報があり、それを呼び出すことで表示することができます。Ｗｅｂフォントを利用するにはCSS3を利用する必要がありますが、今はどの端末でもブラウザが最新であれば問題ありません。
メリットとして端末に入っているフォントに依存しません。結果として、どの端末でも同じフォントで表現されるのです。画像でわざわざ作る必要もそのためにALT属性を設定する必要もなく、自分の希望のフォントで表示することが可能になるのです。
しかし、デメリットもあります。フォントのデータを読み込む必要があるため、表示速度が遅くなることです。特に日本語フォントは英数字フォントに比べて、文字種類が多いために取り込むまでの時間がさらにかかります。もう一つはインパクトのあるＷｅｂフォントは有料であったり、無料でも商用で使うことができない場合があるなど利用に注意が必要なことです。
とはいえ、前回もお話ししたように端末の性能、ネットワーク環境はどんどん向上しています。また、フォントを提供する側も高速化を行っていますので以前ほど表示速度が遅くなることはなくなりました。また、Google Fontsのように無料で商用利用可能なＷｅｂフォントが提供されるようになっており、利用しているサイトは増えています。
先ほどフォントの太さの問題を少ししましたがこれを解決するためのバリアブルフォントです。これは一つのフォント情報で幅と太さを複数持たせることができます。同じ書体で太目と細目、広い幅と狭い幅のフォントを別々に用意する必要がありません。
Apple、Google、Microsoft、Adobeが2016年９月に発表して、最近ようやくFirefoxでサポートされ、いよいよこれからといった感じですが、より表情豊かな文字でＷｅｂサイトが表現できるようになります。
最後にＳＶＧフォントです。これはScalable Vector Graphicsと呼ばれるベクターデータで表現される画像方式で表示されるフォントです。SVGはJPEGやPNGのように拡大するとざらざらとした感じにはならず、どんなサイズでもきれいに表示することができます。その機能を利用したフォントです。表現力は抜群ですが、きちんと表示できる環境は少ないようです。
いずれにしても、文字表現が統一的にしかも表現豊かにできるようになるのはとてもいいことです。みなさんのサイトでもぜひご検討ください。