タイトルや見出しに向く、見やすいフォントの選び方
フォントには用途に合わせてさまざまな種類があります。
雑誌や書籍のように長文に向くものもあれば、パッと見のインパクトを重視したディスプレイ用の書体、あらゆる人にも見やすい、読みやすい、見間違えにくいことを重視したUD書体など、実に多種多様なものが用意されています。
ここではタイトルや見出しに向く、視認性の高いフォントの選び方、考え方について紹介します。
目次
読みやすいフォントとは？
読ませる文章に向くフォント、つまり読みやすいフォントとはどのようなフォントなのでしょうか。
日本語は一般的に、漢字とかなを中心に「、」「。」などの約物を組み合わせて文章を作ります。このとき、漢字はおもに意味を伝える役割を担い、かなはそれを補うかたちで構成されると考えられており、漢字とかなの間に適度なメリハリをつけることが、読みやすさを考えるひとつのポイントになります。
細いフォントの例
太いフォントの例
明朝体、ゴシック体、丸ゴシック体のように、本文でも使えるタイプの太いフォントでも十分、タイトルや見出しに使えますが、より人目を引く、キャッチーなかたちの見出し用デザインフォントも多くリリースされています。
太い、文字の大きい、インパクトのあるフォント
タイトルや見出しだからといっても、太ければよい、文字が大きければよいというわけではありません。
見出し用として作られているフォントの多くは、太くても見やすい、読みやすいデザインになっていますが、重要なのはその使用するサイズです。線を太くすればするほど、必然的に文字をその文字と認識するために必要な文字内の空間は狭くなってきます。
このため、見出し・タイトルだからといって小さいサイズでやみくもに太いフォントを使ってしまうと、かえって見にくくなるということが起こりかねません。デザインするものの物理的なサイズに応じて、最適な太さのフォントを使うことが大切です。
レイアウトサイズによって適切な太さを選ぶことが重要です
細いフォントを大きくレイアウトした例
一方、大きなサイズで文字を配置できる場合には、大きさゆえに目の引きやすいとも言えるので、あえて細めのフォントですっきりと仕上げるということも可能になります。
レイアウトや周りの要素とのバランスの中で、最も読みやすい太さとかたちを探っていくことがデザインでは重要です。
見やすさ、伝わりやすさはフォント＋デザインで決まる
太いフォント、文字の大きいフォントの多くは見出し用に設計されていますが、こうしたフォントを使えば必ずしも人目を引く、見やすい文字になるとは限らないのは前述の通りです。見やすさ、伝わりやすさは適切なフォントの選択とデザインのバランスによって決定されます。
たとえば、込み入った絵柄の写真の上に文字を置く場合には太いフォントの方が読みやすいと言えますし、余白が十分に取れている場合には細いフォントでも見やすさは十分に保たれます。
地とのコントラストが十分な場合、細いフォントでも十分読みやすさは保たれます
地に絵柄や写真がある場合は、太いフォントを使ったほうが読みやすくなります
文字と文字の間隔（字間）、行と行の間隔（行間）の取りかたによっても印象は変わります。
字間・行間を詰めて、見出し・タイトルの文字にカタマリ感を出すと、それだけで見出しと認識しやすい文字の強さが生まれますし、あえて字間を広くとることで見出し・タイトルスペースを大きく取り、見出しとして認識できるようにするという手法もあります。
太いフォントをそのままレイアウトしたもの
字間を調整してカタマリ感を出したもの
次項目からは、フォントの文字を配置しただけではなく、ちょっとした加工、デザイン処理によって、より見やすい、伝わりやすい見出し・タイトルに変えていく手法について紹介していきます。
文字を見やすくする加工例［1］フチ文字
見出し・タイトル向けの加工としてよく知られているのが文字の周りに線をつけるフチ文字加工です。フチは一重だけでなく、二重、三重に重ねてつけることもあります。
フォントの文字そのままの状態
二重にフチをつけたもの
フチ文字加工は一重であれば、AdobeIllustrator・AdobeInDesignともに文字に線を設定し、 線を輪郭の外側に設定するだけで作ることができます。
二重、三重のフチ文字にする場合には、太い線幅の文字を重ねるか、Illustratorの「アピアランス」を活用し、ひとつのテキストオブジェクトに対して、線を重ねていくことで簡単に作れるようになっています。
文字を見やすくする加工例［2］ドロップシャドウ
文字に影をつける「ドロップシャドウ」も、見出し・タイトル向けによく使われる加工です。
ドロップシャドウをつけた文字は、文字自体に立体感が生まれ、その他のデザイン要素に比べて、ひとつ上のレイヤーにあるように見えるようになります。これによって、文字が他の要素に対して手前に見えるようになり、結果として目を引くという効果が生まれます。
フォントの文字そのままの状態
ドロップシャドウをつけたもの
ドロップシャドウは、Illustratorでは「効果」メニューの「スタイライズ」から、InDesignでは「オブジェクト」メニューの「効果」（または「効果」パネル）から簡単に設定することができます。
文字を見やすくする加工例［3］光彩
ドロップシャドウに似た効果ですが、同じようにタイトル等に使われる加工が「光彩」です。
ドロップシャドウがオブジェクトに光を当て、その影をつけるような加工に対し、「光彩」はオブジェクトそのものが光を放っているような効果を持たせるものです。「光彩（外側）」、「光彩（内側）」の2種類があり、それぞれオブジェクトの外側に向かって光を放つか、内側に向かって放つかが決まります。
光彩、特に光彩（外側）がよく使われるシチュエーションは、背景が複雑な写真やイラスト、テクスチャの場合です。文字に対して光彩（外側）を適用することで、文字の輪郭がクリアになり、よりその文字が認識しやすくなるという効果があります。
フォントの文字そのままの状態
光彩（外側）を設定したもの
光彩は、ドロップシャドウ同様、Illustratorでは「効果」メニューの「スタイライズ」から、InDesignでは「オブジェクト」メニューの「効果」（または「効果」パネル）から設定します。
関連記事
無料のフリーフォントで広がるデザイン
製作者が無償で提供して自由に使うことのできるフリーフォントには多彩なデザインのフォントがラインナップされています。上手に使いこなせば、より一層デザインの幅を広げることができます。
Adobe Fontsのおすすめフォント - デザインイメージに合わせた選び方
デザインをする際には、かわいいデザインにしたい、おしゃれなデザインに仕上げたいと言ったイメージや伝える目的にあったフォントを選択し、レイアウトをしていくことが大切です。ここではデザインイメージに合わせたフォントの選び方や、Adobe Fontsのおすすめフォントをご紹介します。
ビジネスで最適なフォントの選び方
仕事の文書でフォントを選ぶ時、なんとなく好き嫌いで選んではいないでしょうか？実はフォントには、ひとつひとつ目的やデザインの意図が込められています。ここではビジネスシーンで使えるフォントの選び方について基本的なフォントの分類を交えて紹介していきます。