文字のデザイン(タイポグラフィ)

イメージイラスト_タイポ
文字をページ上に配置するための技法、つまり文字のデザインを「タイポグラフィ」といいます。
文字要素自体の置き方以外にも、書体の種類や選び方なども重要なポイントです。
WEBデザインでは技術的な制約から実現が難しい部分もありますが、デザイン要素の1つとしてはとても重要です。

「タイポグラフィー」に関する用語

書体(フォント)

共通のデザインで統合された一揃いの文字、数字、記号

  • フォントファミリー
    一つの書体から作られた様々なスタイルの書体グループ全体の事をフォントファミリーといいます。太さが違うものや幅が違うものなど、種類はフォントによって様々です。
  • カテゴリー
    セリフ体→しっぽが付いている文字
    サンセリフ体→しっぽがついていない文字
    スクリプト体→手描きの筆記体風文字
    装飾体(ディスプレイ体)→デザイン処理がされたような装飾文字

種類

文字サイズ

子供や高齢者が読者の場合は大きめにするなど、読者の年齢層を意識して大きさを決めます。

参考:[CSS]フォントのサイズ指定はpx? em? 既存の再検討とこれからのテクニック

ウェイト

文字の太さです。
Light、Regular、Bold、Heavy、などで表します。
フォントによって数は異なります。

行間

行と行の間隔です。Illustratorでは「行送り」となっています。
文章の長さや文字の大きさによって調節します。
狭いと読みにくくなることが多いです。

参考:Webにおいての理想的な行間とは?

字間

文字と文字の間隔です。
カーニング、トラッキング、詰めといった呼び方もあります。

行の長さ

1行が長すぎると読み進めるうちに次の行を探しづらくなり、かといって短すぎると改行が多くなり読みづらくなります。
通常はコラムを複数用意するなどして1行の幅を調節し読みやすくします。新聞は紙のサイズが大きいのでコラム数が沢山ありますね。

フォントのデータ形式

TrueType:汎用性が高く一般的に多く普及されている書体。
OpneType:装飾文字や旧字体など幅広い文字をサポートしていまする。
PostScript:印刷向けの高品質な書体。対応機器やソフトが必要になります。

参考:TrueType、PostScript、および OpenType フォントの違い
参考:TrueTypeとOpenTypeとは【フォントの違い】

「タイポグラフィー」のポイント

適切な書体を選択する

  • デザイン全体の雰囲気に合っているか
  • 読みやすいか。

コントラストを十分に取り入れる

  • 大きさ、太さ、色のコントラストをつける。
  • 中途半端に似ている複数の書体を使用しない。

その他

  • 特徴のある書体は1ページにつき1種類程度にする。
  • タイトルや見出しは本文より強調する。
  • 読みやすさを優先する。
  • 特殊効果は使い過ぎない(Photoshopのレイヤー効果など)。
  • 欧文には欧文用書体を使用する。
  • 日本語と欧文が混在する場合は、必要に応じて欧文のサイズを調節する。

よく使われる書体

日本語書体

  • モリサワ各種(新ゴ・リュウミン・中ゴシックBBB・ゴシックMB101)
  • ヒラギノ各種(ヒラギノ角ゴ・ヒラギノ明朝)
  • 小塚各種(小塚ゴシック・小塚明朝)

フォント_モリサワ
フォント_ヒラギノ
フォント_小塚

欧文書体

  • Helvetica
  • Futura
  • Garamond
  • Times New Roman

欧文

Webデザインにおけるフォントの扱い

HTMLを使ってテキストを表示する場合、ブラウザはOSにインストールされている書体しか使用できません。そのため、標準でインストールされているもの以外の書体を使用すると、ユーザーの環境によっては別の書体に変わってしまいます。
なのでOS標準の書体を使用するか、画像扱いにするなどの対処が必要になります。最近ではWEBフォントと呼ばれる、WEB上のフォントデータを使用してブラウザに表示するという技術が使用されるようになってきています。日本語環境ではまだ使いづらい部分もありますが、今後一般的になっていく可能性もあります。

参考:WEBフォントサイトまとめ9選!とりあえず一度使ってみませんか?

 

WEBデザイナー向けの記事も沢山あるので参考にしてみてください。

参考:Webデザイナーなら知っておきたいWebタイポグラフィの基本
参考:Webデザイナー(私)によるタイポグラフィーレイアウトの注意書き

 


参考書籍

さらに詳しく知りたい人はこちらの本を是非読んでみてください。


レイアウトのルール

  1. 近接
  2. 強調
  3. コントラスト
  4. 整列
  5. 反復

その他のデザイン要素

  1. 画像の使い方
  2. 文字のデザイン(タイポグラフィ)
  3. 色の使い方

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です