フォントの基礎

フォントとはWebサイト等に表示する文字の形式の事です。文字の大きさ・太さ・形などに特徴があり、中には絵にしかみえないようなフォントもあります。

フォントの分類と効果

CSSではフォントを「generic family」で大きく5種に区分しています。

フォント用語に「ひげ」とありますが、これは主に英文字の端に付く「飾り線」のことを指します。

ゴシック体系のひげ無しフォントです。

モニタで読みやすいフォントとされており、ウェブサイトに採用されることが多いです。

明朝体系のひげ付きフォントです。

印刷物で読みやすいフォントとされています。

固定幅フォントです。

文章体で読みやすいとされています。

装飾体や絵文字のフォントです。

女性や子どもが親しみを感じやすいフォントかもしれません。

手書き体風のフォントです。

砕けた印象を与えるので、サイトの敷居を下げたい時にいいかもしれません。

ウェブサイトのフォントは、CSSのfont-familyで指定します。小まめにフォントを変える事は基本的にしないので、HTML要素に指定するのが一般的です。

html{font-family:"フォント名";}

なおフォントを指定しない場合やクライアントPCに指定フォントがインストールされていない場合は、閲覧ブラウザの標準フォントで表示されます。

フォントを複数指定することも可能です。基本的に左端のフォントが適用されますが、クライアント側に左端のフォントがインストールされていない場合は一つ右のフォントが適用されます。

html{font-family:"フォント１","フォント２","フォント３";}

CSSではfont-familyの右端には一般フォントを指定する事を推奨しています。そうしておけば想定外のフォントで表示されることはほぼなくなる訳です。

特殊なフォントはクライアントにインストールされていないことが多く、通常のフォント指定では表示されない可能性が高いです。しかし「@font-face」を定義してサーバ上にフォントファイルを置いて閲覧時に展開すれば、特殊フォントでも問題なく使用できます。

この仕組みがウェブフォントです。

@font-face{
  font-family : "フォント名";
  src : url("フォントファイルのURL");
}

要素{font-family : "フォント名";}

ウェブフォントの使用に際しては注意事項があります。

まずウェブフォントを格納するサーバが必要になります。使用の度に負荷がかかるし参照先が変更されると使えなくなるので、自サーバにアップしておく必要があるでしょう。

また初回読み込みに若干時間がかかります。サーバ側はもちろんクライアント側の負荷にもなるので、必要分のフォントデータだけアップすると親切です。

フォントのライセンス次第ではウェブフォントとしては使用できないこともあるので、利用規約をよく読んでから採用しましょう。

ウェブフォントをインターネット上で公開しているサービスもあります。そのフォントを使う場合は自分でアップロードしなくてもいいので大分楽ですね。