まるで印刷物?!文字の見た目が美しいサイトを構築しよう!

CSSでカーニングをしてみよう

HTMLで文章を打ち込み、CSSでデザインを整えて…完成!となっても、「すこし野暮ったいな」と思う時もあるでしょう。その野暮ったさの原因は「文字」にあるのかもしれません。
印刷物の場合、文字の間隔の調整やオリジナルのフォントを用意して、全体バランスを美しく整えることができます。しかし、Webにはどうしてもフォントに限界があります。だからといって、すべての文字を画像化するのはユーザーにとってもSEOにとっても良いとは言えません。今回は、文字をテキストで表しながら、オシャレに表示させるポイントを紹介します。
まず、ひとつ目のポイントはCSSの「letter-spacing」をつかって文字詰め(カーニング)を行うことです。すべての文章のカーニングは手間が多くかかりますが、フォントが大きくなる見出しやキャッチフレーズだけでも、カーニングを行えば一気に綺麗になりますよ。

ウェブフォントを利用してみよう

CSS3の登場によりぐっと身近になった「ウェブフォント」は、文字の綺麗なホームページ作成の強い味方です。これまで、ホームページで使えるフォントといえばメイリオやヒラギノ角ゴと数種類に限られていましたが、ウェブフォントの機能を使えば、自分で用意したフォントをホームページ上のテキストで使用することができるのです!使い方も簡単で、@font-faceで任意のフォントを指定するだけで、従来のfont-familyに追加で記述することが可能となります。
ただし、注意しなければならないのが「著作権・ライセンス」です。印刷用に契約したフォントをウェブフォントとして使う前に、それがライセンス違反に当てはまらないか注意しましょう。
現在では、著作権フリーのウェブフォントも徐々に公開されるようになってきました。特にアルファベットではたくさんのフリーウェブフォントが公開されているため、お気に入りのフォントを探してみましょう。