5.09 タイポグラフィ

POINT
■フォントの代表例はゴシック体と明朝体で、Webサイトではゴシック体を利用するのが一般的です。
■文字コードは通常、UTF-8を利用します。Webページの文字コード指定は、文字化けの防止につながります。
■タイポグラフィに関する設定はCSSで行いますが、複雑なデザインは画像化した上でWebページに埋め込むことが多くなっています。

【ゴシック体と明朝体】
フォントの代表例はゴシック体と明朝体の2種類です。ゴシック体は、ほぼ一定の太さの線で文字を表現する特徴があり、見出しなどの短いテキストに用いるのが一般的です。一方、明朝体は「ハネ」「トメ」に装飾のあるフォントで、本文などに利用する場合が多いようです。ゴシック体にはWindowsの「MS Pゴシック」や「メイリオ」、Mac OS Xの「ヒラギノ角ゴ」など、明朝体には「MS P明朝」「ヒラギノ明朝」などがあります。
Webサイト制作では、どのようなテキスト情報にもゴシック体を選択することが多いものです。一部のOSやブラウザ環境ではテキストにアンチエイリアス処理がなされていないため、特に明朝体は輪郭のジャギーが目立ち、ページ全体の質感が下がってしまうこと、小さいテキストは線の太いゴシック体の方が可読性が高いことなどが理由です。
ユーザーのOS環境に含まれないフォントは表現されない(他のフォントに代用される)ため、特定のデバイス向けのWebサイト以外は、一般的なフォントの利用に留めておくのが普通です。なお、イラストや写真と文字を組み合わせた複雑なビジュアルや、特殊なフォントを利用する場合は、Webページにテキストとして直接含めずに画像化することが多いものです。

【Webフォント】
ユーザーのOS環境に依存せず、サーバーからフォントを提供する「Webフォント」という仕組みが広く利用されつつあり、すでに多くのWebブラウザがサポートしています。ただし、特に日本語フォントはライセンスやデータサイズの問題があるため、慎重に検討したうえで利用する必要があります。現在では、フリーやオープンソースのフォントが多数公開されているほか、Google Font Directoryなどを利用したWebフォント指定が可能です。

webフォントの例

webフォントの例(Google Fonts)

※Webフォントのデメリット
●日本語対応のWebフォントが少ない
●ブラウザによって若干の差異が生じる
●日本語Webフォントは、ファイルサイズが大きく、読み込みに時間がかかる

【文字コード】
文字コード(文字コードセット)とは、文字や記号1つ1つに割り当てられた識別記号を一定の基準によってまとめたものであり、コンピューターでの文字の利用に不可欠なものです。Webページについては、通常はWebブラウザが文字コードを自動判別しますが、制作者側で指定しておくのが安全です。指定していない場合、いわゆる「文字化け」が発生し、テキストが適切に表示されない恐れがあります。
日本語環境で利用する文字コードには、UTF-8、Shift_JIS、EUC-JPなどがあります。UTF-8は多言語対応を想定したUnicodeに基づく文字コードで、現在最も標準的であると考えられます。ただし、システムやプログラムの仕様上、UTF-8以外の文字コードでのデータ受け渡しが必要な場合もあります。

【タイポグラフィに関する設定】
フォントの種類やサイズ、文字間、行間などタイポグラフィに関する設定はCSSで行います。ただし、複雑で不規則なデザインの実現は難しいため、手の込んだ文字表現は画像化した上でWebページに埋め込むことが多い。画像には適切な代替えテキストを指定するなど、アクセシビリティに配慮することが大切です。

コメントは受け付けていません。