Web制作におけるフォント・文字についての基本のまとめ8Webサイトを構築するにあたって、フォントの選択は非常に重要な要素になります。例えば、サイトの本文に使用するフォントはそのサイト全体のデザインなどのような見た目にも影響しますし、コンテンツの読みやすさなどのユーザビリティーにも非常に大きく影響を及ぼします。また、ロゴに使用するフォントは、そのブランドや会社のイメージにも深い影響を及ぼします。Webデザインをする上でフォントの選択は非常に重要な要素となっていますが、今回はそんなフォントについて少しまとめてみました。

Webデザインにおけるフォントについて

  1. 欧文フォントのセリフとサンセリフ
  2. 和文フォントの明朝体とゴシック体
  3. プロポーショナルフォントと等幅フォント
  4. 文字コードについて
  5. フォントファミリーについて
  6. カーニングとトラッキングと行間について
  7. Webサイトにおけるフォントファミリーの指定
  8. CSS3のWebフォントについて

1.欧文フォントのセリフとサンセリフ

欧文フォントは、和文フォントと違って文字の種類が圧倒的に少なくて済むので、フォントの作成の手間も和文フォントと比べてもはるかに楽な為、フォントの種類も多種に及びます。欧文フォントの種類を大きく分けるとセリフサンセリフの2種類に分けられます。

欧文フォントのセリフとサンセリフ

文字の端っこに飾りがついているのがセリフ、ついていないのがサンセリフといいます。文字の端っこについている飾り自体をセリフと呼びます。

印刷媒体では読みやすいという理由でセリフが使われる事が多いようですが、Webなどのスクリーンで表示する際には潰れて見にくくなる事も多いため、こちらではサンセリフが選ばれる事が多いようです。

ただ、近年はディスプレイの解像度も非常に高くなってきていて、文字も滑らかに表示できるようになってきた為、セリフ系のフォントが使われる事も多くなってきているようです。

2.和文フォントの明朝体とゴシック体

和文フォントは、漢字なども表現しなくてはならない為、文字の種類も多くフォントの種類も限られてきてしまいます。欧文フォントは2バイト(=8ビット256文字)の範囲内で表現できてしまうのに対し、和文フォントは2バイト(=16ビット65536文字)必要です。さて、そんな和文フォントの代表的な2種類の書体が、明朝体とゴシック体です。

和文フォントの明朝体とゴシック体

明朝体は、横の線が細く縦の線が太く表現され、文字の端にウロコという飾りがつきます。ゴシック体は、線の太さに違いが少ないものが多いのが特徴です。

明朝体は、繊細で格式ある印象を与える事が多く、ゴシック体は力強さや安定感などを与え、見る人の目を引き付けやすい書体と言えると思います。

尚、Webサイトのコンテンツ上で使われるのは、圧倒的にゴシック体が多いようです。日本語の漢字などは画数が多い字も多数あり、明朝体だと線が細い為にスクリーン上では文字が潰れやすく、可読性が下がったり見た目も美しくなくなる事が多いからだと思います。

3.プロポーショナルフォントと等幅フォント

この2つを一言で説明すると、文字ごとに文字幅が違うのをプロポーショナルフォント、文字幅が全て同じなのを等幅フォントと呼びます。プロポーショナルフォントは、フォント名にPとつく事が多いです。まずは、下の文字を見て下さい。

プロポーショナルフォントと等幅フォント

上段は、プロポーショナルフォントのMS Pゴシック体です。
下段は、等幅フォントのMS ゴシック体です。
文字の幅が違うと思います。

元々、日本語は全て同じ文字幅で表現されていました。しかし、コンピューターの進化と共にその見た目の美しさや見やすさを重視するようになり、プロポーショナルフォントが使われるようになってきたようです。

4.文字コードについて

文字コードは非常に重要です。特に、複数のOSやソフトなどでデータを共有する際には文字化けの原因になったりもするので、制作者は文字コードに関しては常に意識するものだと思います。日本語で使用される文字コードは主に4つあります。

まずは、WindowsやMacintoshなどで標準とされてきたShift-JISがあります。次に、JISで規定されたJIS、UNIX系のシステムにおいての日本語の標準的な文字コードとして使用されてきたEUC、世界中の多くの文字を扱う事ができるUnicode(UTF-8等)があります。

現在は、さまざまな環境で多言語対応を考えてUnicodeが使われる事が多くなってきています。私も、クライアントの指定がない限りは、Web制作には全てUnicodeを採用しています。

5.フォントファミリーについて

フォントには、文字の基本デザインは同じでも、太字バージョンや細字バージョン、イタリック調の斜め文字のバージョンなど、その太さや角度などに違いのあるバージョンがいくつか用意されている場合があり、これらをまとめてフォントファミリーと言います。

フォントファミリー


6.カーニングとトラッキングと行間について

私たちは、Webサイトのコンテンツやロゴ等の見た目を美しくしたり読みやすくしたりする為に、フォントに対してさまざまな調整をします。主に、カーニング、トラッキング、そして行間の間隔の調整には常に気を配ります。

まず、アルファベットや数字などは文字の横幅を一定にすると文字の間隔が不揃いになり見た目が不自然になる事も多い為、こういった場合は特定の文字と文字の間にカーニングの処理を行います。これをすることにより、不自然な文字間隔を調整する事ができ、見た目も美しくなります。欧文フォントにおいて、この処理は欠かせない調整項目になると思います。

カーニング処理

また、特定の文字だけでなく、コンテンツの全体の文字間の調整をする際には、トラッキングの処理を行います。

トラッキング処理

そして、コンテンツ全体を見やすくし、見ている人にストレスを与えないようにテキストの行間の間隔も調整します。

Webサイトのコンテンツにおいては、何の処理もせずにデフォルトの状態で文字を打ち込むと、行間が詰まり過ぎて読みにくくなる事が多いと思います。そんな時、行間の調整は欠かせない調整項目になると思います。

Webサイトの場合は、CSSで設定する事になりますが、絶対値で指定するよりも相対値で指定する事が多いと思います。個人的には、行間の指定は1.5em~2emあたりが美しくなるような気がします

行間の処理

7.Webサイトにおけるフォントファミリーの指定

Webサイトのコンテンツを制作する際に、CSSでフォントファミリーの指定をすると思います。ここで選ぶフォントは、できるだけたくさんの環境でインストールされていて、かつ読みやすくてきれいなフォントがいいのかなと思います。

まぁ、そうなると本当にフォントの種類が限られてきてしまうと思います。私自身、毎日たくさんのWebサイトに目を通したりしていますが、使っているフォントはやはりだいたい同じ傾向にあると言えるでしょう。最近は、Windows 系はメイリオ、MS P ゴシック、Mac 系はヒラギノ角ゴ Pro W3、Osaka などが多いようです。

CSSでのフォントファミリーの指定は、複数のフォントを指定するのが普通です。ちなみに、順番は優先度の高い順に書きます。

ちなみに、自分は

//CSS
body {
font-family :"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"MS Pゴシック","MS PGothic",sans-serif;
}

のように指定します。

フォントの指定

Windowsではメイリオ、Macではヒラギノでコンテンツを表示するように書いています。個人的にはMacに標準で搭載されているヒラギノが一番キレイなフォントで好きなのですが、これを先頭に書いてしまうとちょっとした不都合が起きてしまいます。

ヒラギノは人気のフォントなのでクリエーター等はWindowsに入れている人もいると思います。一般の人で入れている人がいるとしたらよっぽどコアな人かもしれませんが・・・

しかし、Windowsで表示されるヒラギノは美しくないのが正直なところです。Windowsはメイリオで表示させる方が美しいと思うので、Windowsにヒラギノを入れている人にもメイリオで表示されるように、あえてメイリオを先頭に書いています。このあたりは、制作者によって考え方がまちまちで好みの問題もあるかと思いますが、私はこのように指定してます。ご参考までに。

8.CSS3のWebフォントについて

CSS3で使用できるWebフォントは、閲覧者に指定のフォントファイルをダウンロードさせてコンテンツを閲覧してもらう事になるので、閲覧者の環境に依存することなく、同じフォントでコンテンツを表示させる事が可能です。

但し、和文フォントは欧文フォントと違って文字数が多くファイルサイズが大きくなるので、使いどころは難しいかもしれません。ここでは、簡単に使い方だけ触れておこうかと思います。

最初に、利用できるフォント形式についてです。

Webフォントで利用できる主なフォント形式

次に、Webフォントの使い方です。
まず、下記のように、@font-faceでフォントのURLを指定します。

@font-face {
font-family: "フォント名" ;
src: url("../font/"フォント名.eot?") format("eot"),
url("../font/"フォント名.woff") format("woff"),
url("../font/"フォント名.ttf") format("truetype") ;
}

上記において、同じフォントの形式を3つ指定します。

.eot形式のものは、IE8以下用です。IE8以下では.eot形式しか対応していないので、この形式を指定しますが、ここだけフォントのURLを指定している箇所の拡張子の後ろに ? をつけるのは、IEは ? 以降を読み込まない為、このファイルだけを読み込ませる事ができます。

2番目に.woff形式を指定してるのは、ファイルサイズが軽いためです。これにも対応していないブラウザでは、3番目の.ttf形式を読ませるようにしてあげます。これで、あらゆるブラウザ(IE6も含む)でのWebフォントが有効になります

あとは、フォントを指定したいセレクタでフォント名を指定するだけです。

//フォントを指定したいセレクタに通常通りフォントを指定
p {
font-family: "フォント名" ;
}

これで、OKです。

Webフォントについては、近いうちにWebフォントのみのまとめの記事を書きたいと思ってます。