フォントの基礎知識

グラフィックデザインやWebデザインといったビジネスで扱うデザインの役割は「どのようにして情報を伝えるか」ということあり文字はそのなかでも最も重要なものです。

数多いフォントの中から適材適所でフォントを使い分けることはデザインをする側にとっては腕の見せ所でありもっとも神経を使うところです。

実際にはそれを制作する目的やクライアントの希望するイメージによってどれがより伝わるかという観点で選択することになります。

最終決定は一案であり、他のフォントを選んでいれば結果がどうなっていたかという答え合わせをすることはできません。

デザインに対するひとりひとりの捉え方は異なるものであり、多数の方がこういう印象を受けるであろうという推測のもとに一つのフォントを選ぶことになります。

number書体とフォント

書体

一貫した特徴あるいは字形に基づいて分類される文字群を書体といいます。

フォント

パソコンなどに搭載されているデザインに統一がある文字群をフォントといいます。

書体とフォントの関係

各書体には数多くのフォントが属することになります。例えば、明朝体にはMS明朝、ヒラギノ明朝、游明朝体、リュウミンなど、ゴシック体には、MSゴシック、小塚ゴシック、メイリオ、源ノ角ゴシックなどがあります。

読みやすさを決める3要素

文字や文章の読みやすさは「視認性」「可読性」「判読性」という3つの要素からなります。「視認性」は文字の見やすさ、「可読性」は文章の読みやすさ、「判読性」は文章のわかりやすさをいいます。

わかりにくいので具体的に言い直すと「視認性」はパッと瞬間的に見てわかりやすいかどうか、「可読性」は文章として理解する上で読みやすいかどうか、「判読性」は読み誤りにくさ(誤読率が低い)ことをいいます。

number書体の種類

書体は大きく和文書体と欧文書体に分けられます。和文書体の中にはに欧文書体対応する書体があります。しかし、欧文書体で和文書体に対応する書体はありません。

そのため、基本的には日本語は和文書体、アルファベットは欧文書体から選択することになります。

和文書体

和文書体は正方形の中に収まるようにデザインされています。この正方形をどのように並べるかが文字組の基本的な考え方となります。

また和文書体の構成要素や仮名の構成要素の名称(たてせん・よこせん・はね・はらい等)も把握しておくとなおよいです。

明朝体

横線の右端(とめ)や曲がり角の右肩にうろこがあるのが特徴。

横線に対して縦線が太くなり、はね・はらいはさらに太くなる。

ゴシック体

文字の太さがほぼ均一な書体で、明朝体のようなうろこがないのが特徴。

毛筆体

毛筆で書いた文字を再現した書体で、行書体・毛筆体・隷書体などの名称が付されている。

デザイン書体

手描き風の書体、ポップ書体、デジタル書体など特徴的で装飾的な書体。

欧文書体

欧文書体が和文書体と異なる点は個々の文字ごとに独自の文字幅でデザインされていることです。

また欧文書体には和文書体と異なりラインシステムがあります。アセンダライン、ミーンライン、ベースライン、ディセンダラインなどのラインに沿って文字がデザインされています。各ラインにそろえることにより見た目に美しく文字が並ぶようになります。

セリフ体

文字の端にヒゲ(セリフ)がある書体。

セリフの形状や大きさは書体によって異なる。

サンセリフ体

セリフがない書体で文字の太さはほぼ均一。

和文書体のゴシック体に相当する。

スクリプト体

筆記体のような書体や手書き風の書体。

書体によっては視認性・可読性が低くなるためタイトルや見出しでは使用が難しい。

フォントファミリー

線幅・字幅・角度の違うフォントの集合をフォントファミリー(Font Family)といいます。フォントによってバリエーションの数や表記方法は異なります。

特に線の太さを「ウェイト(weight)」といいます。フォントを太字にすると和文フォントの場合は横幅が変化しませんが、欧文フォントの場合は横幅が広くなります。

フォントファミリーをうまく使い分けることによって表現の幅が広がりよりよいデザインを作ることができます。

フォントファミリーの例
線幅 L(ライト) 細い
M(ミディアム)
B(ボールド) 太い
EB(エクストラ ボールド) 特太
UB(ウルトラ ボールド) 極太
字幅 [無表記] 等幅
P 欧文の文字幅が可変
K 欧文やかな、一部の記号類の文字幅が可変
角度 [無表記] ローマン(正体)
Italic イタリック体(筆記体)
Oblique オブリーク(斜体)

ヒラギノ角ゴシックのようにOpenTypeではウェイトを、W0~W9で表示するなどウェイト表記には様々な方法があります。

Webではウェイトを数字100~900で指定することができます。400がRegular、500がMedium、600がSemi Bold、700がBoldといった具合に指定できますが、ユーザーの環境によってブラウザ上でキチンと9段階で表示されるとは限りません。

オブリークは文字の形をそのまま斜めに傾けただけで歪みが出る可能性があります。

number基本的な書体の使い分け

「和文(日本語)」の基本は明朝体とゴシック体

グラフィックやWebデザイン、ビジネス上の資料作成に使われる主な和文書体は明朝体とゴシック体です。

明朝体は横線に対して縦線が太く線の末端にとめやはらいウロコのある書体で、ゴシック体は横線と縦線の太さがほぼ同じでウロコがない書体です。

明朝体は「可読性」が高く長文でも目が疲れない書体です。一方でゴシック体は明朝体よりも「視認性」が高くハッキリと見えよく目立つ書体です。

そのため、文章を読ませるための資料には明朝体、プレゼン用のスライドやポスターやフライヤーのタイトルなど見せる資料にはゴシック体が向いています

「欧文(ローマ字)」の基本はセリフ体とサンセリフ体

グラフィックやWebデザイン、ビジネス上の資料作成に使われる主な欧文書体はセリフ体とサンセリフ体です。

セリフ体は明朝体と同様縦と横の線の太さが均一でなく、セリフと呼ばれる装飾が各線の末端についている書体です。

サンセリフ体はゴシック体と同様、縦線と横線の太さが同じでセリフのない書体です。

セリフ体は「可読性」が高く、サンセリフ体は「視認性」の高い書体です。

そのため、長文を含む読ませる資料にはセリフ体プレゼン用のスライドなどの見せる資料にはサンセリフ体が向いています。

numberフォントの選び方

書体の特徴がわかったところで、基本的なフォントの選択方法についてこれだけはおさえておきたい内容です。

個性的な書体は避ける

デザイン書体や毛筆体など個性的な書体は特別な理由がない限り避けるようにしましょう。

堅苦しくしたくないからポップやカジュアルなデザイン書体にする、古風な雰囲気や和風を強調したいから毛筆体にする、という話はよく聞きます。だれもが一度は考えることでしょう。

しかし、これらの書体は先に出てきた「読みやすさを決める3要素」のスコアが低く、意図せず読み手にストレスを与えてしまい最悪読んでもらえないことにもなりかねません。

そのため、相当の理由がない限りポップ書体や毛筆体を使うことは避けましょう。

もちろんポスターやフライヤーなどではこれらの書体を効果的に使うことができるケースもありますが、ビジネス用途で通常使用するケースは少ないです。

読ませる文章かor見せる文章かで使い分ける

読ませる文章

基本は明朝体とセリフ体

レジュメやレポート、企画書・報告書などの資料はもちろん、パンフレットやカタログでも数行から数十行に及ぶ長い文章になる場合は明朝体が向いています。

ゴシック体のように太い書体で長い文章を連ねると紙面が黒々してしまい「可読性」が下がります。

なお欧文書体の場合も和文書体と全く同じで、文字数が多い場合にはサンセリフ体よりもセリフ体が適しています。

太い文字を避け、細い文字を選ぶ

同じ書体であっても線の太さは様々で太さによって「可読性」は大きく変わります。一般的には細いほど「可読性」が高くなります。

そのため、ゴシック体やサンセリフ体であっても細いフォントであれば読ませる文章にも使用することができます。

逆に細いウェイトのないMSゴシックやARIALなどはそもそも太いフォントであるため読ませる文章には不向きです。

同様の理由で明朝体やセリフ体であっても太いフォントは「可読性」を低下させてしまいます。

読ませる文章には太い文字を避け、細い文字を選ぶことが大切です。

見せる文章

基本はゴシック体とサンセリフ体

プレゼンに使用するスライドの文章やポスター・チラシのタイトルなどは要点だけを端的に説明するものです。

したがって、「読ませる」というよりはむしろ「見せる」意味合いが強くなります。

このような見せる文章ではパッとみてわかることが必要な要素となり「視認性」の高いゴシック体やサンセリフ体を使うことになります。

プレゼン資料(スライド)、タイトルや小見出しにはゴシック体が適しています。

例外的にデザイン書体やスクリプト体

ポスター・フライヤーのタイトルやアイキャッチなどにはあえて個性的なデザイン書体を使うケースもあります。

また背景の装飾としてスクリプト体をちりばめるようなケースもあります。この場合は文字は情報としてではなくデザインとして使用しています。

numberその他

フォントの互換性と埋め込み・アウトライン

フォントの互換性

パソコンにインストールされていないフォントは原則として表示することができません。

特殊なフォントを使ったファイルを他人のパソコンで開くと勝手に別のフォントに置換されてせっかく綺麗に作った資料のレイアウトが崩れてしまいます。

他人のパソコンを使ってプレゼンをおこなう場合は事前にプレゼンで使用するパソコンの情報を入手して対策をしておく必要があります。

WindowsとMacでは元からインストールされているファントが違うため双方で互換性のあるフォントを使用するか別にフォントを指定しましょう。

埋め込み・アウトライン

フリーフォントや普及していないフォントをどうしても使用したい場合は、PDF化するかアウトライン化しておきましょう。

PDF化しておけばファイルの中に使用したフォントののデータが埋め込まれるので相手のパソコンのフォント環境に関係なく指定したフォントが表示されます。

また、文字をパスデータに変換できるソフトを使用している場合はアウトライン化しておくことでフォントの環境に影響を受けなくなります。

Webでのフォント指定

印刷物では選んだ書体がそのまま印刷されますが、Webでは閲覧するデバイスによってデフォルトで適用されるフォントが異なるためデバイスによって見え方の差異が生じます。

そのため、デバイス間の表示に差異が出ないように適用するフォントの順位を指定してデバイスごとの差異がなるべく生じにくいようにするのがこれまでの対応でした。

しかし、最近ではデバイスによって表示内容が左右されないWebフォントが実用可能なレベルで普及してきました。 ただし、レイアウトが崩れることがあるため小見出しだけWebフォントを使用するなど限定的な使い方が中心となっており全面的な使用はまだ難しい状況です。