タイポグラフィについて

Webフォント

従来のWebページでは、テキストデータは閲覧側のPCに入っているフォントでのみ表示が可能でした。自然、WindowsやMacに標準で搭載されているフォントしか指定できず、和文フォントに関しては明朝とゴシックが1種類程度で、ほとんど選択の余地はありませんでした。ちょっと変わった見出しを組みたくなったら、画像にせざるを得なかったのです。<img>タグのalt属性に一応テキストは書き込めますが、SEO的に不利になるのは否めません(※CSSでテキストと画像を置き換える方法はありますが、それもねぇ)し、書き換えなどのメンテナンス的にも良くありません。欧文にしても本文サイズで可読性のあるものは限られており、Web業界ではフォントに関してはほとんど無視されてきました。

F
M
Google Web FontsのTangerine。テキストとして選択できる事をご確認下さい

そういった不満を解消するため、『Webフォント』という技術が開発されました。サーバ側にフォントを置いて、閲覧側のPCに指定したフォントがなくても、様々な書体を使えるようにしたのです。これにより、文字を画像にしなくても凝った書体を使えるようになりました。欧文書体が主で、和文はメーカーがあまり積極的でない、フォントデータが巨大になるなどの理由があってあまりサービスがありませんでしたが、最近は色々出てきました。

このページでもWebフォントを使用しており、本文は(Windowsでは)メイリオですが、半角英数字はGoogle Web FontsのRoboto、ロゴにはCoda Captionを使用しています。

font-feature-settings

余談ですが、CSS3にはfont-feature-settingsというものが追加されています。OpenTypeの機能をブラウザでも有効にするためのもので、合字(ligature)やカーニング、異体字切り替えなどが可能になります。W3Cの公式サイトを見ると、他にも色々できるようです。2014年4月現在、IE10以上およびモダンブラウザではベンダープレフィックスにて対応しています。

Orange
この書体は Orange — 欧文フォント買うなら MyFonts

Top