即日対応可能!スグ依頼できる 基本料金0円のコーディング代行サービス「コーディングラボ」

スタッフブログ

お見積り依頼

ユーザーの視認性・可読性・判読性を意識した英文フォント選びのコツとは?

Webサイトの文字情報を見ていると、日本語だけで構成されている文章はほとんどありません。固有名詞や専門用語などには英文が用いられるもの。ユーザーにとっての読みやすさを考えるなら、最適な英文フォントを指定し、視認性・可読性・判読性をアップさせたいところですね。

今回は、英文フォントの基礎的な解説からフォント指定の方法などについて見ていきましょう。

セリフ体フォントとサンセリフ体フォント

英文フォントは一般的に、セリフ(serif)とサンセリフ(sans-serif)にわけられます。和文フォントの「明朝体」と「ゴシック体」のような区分です。

日本語でもWebサイトのデザインやテイストに応じて、明朝体とゴシック体を使い分けますが、英文フォントでも同様に、セリフ体フォントとサンセリフ体フォントを使い分けます。

強弱やメリハリを持つセリフ体フォント

serifとは文字の先端にある小さな装飾のこと。ヒゲやウロコのような装飾が施された英文フォントです。serifを持つフォントをセリフ体フォントと呼びます。

和文フォントの明朝体と同じように、縦線・横線の幅が異なっているのが特徴。線の太さに強弱やメリハリがあるため、安定した雰囲気を演出できます。

Times New RomanやCenturyなどが代表的なセルフ体フォント。これらのフォントは、Windows PCにプリインストールされています。

親しみやすくカジュアルなサンセリフ体フォント

sans-serifはserifとは異なり、文字の先端に装飾がありません。また、縦線・横線の太さがほぼ均等にデザインされているのが、serifとは異なるポイントです。ちなみに、sans-serifはフランス語で「セリフがない」という意味を表します。

先端の装飾は文字を識別するためには不要との考えから、sans-serifの線は字形だけを示しています。そのため、気取った印象のない雰囲気を演出することができます。

HelveticaやArialがsans-serifの代表的なフォントです。

CSSでのフォント指定の方法

Webサイトの制作時には、CSSで複数のフォントを指定するのが一般的です。なぜなら、デバイスやOSによってインストールされているフォントが異なるためです。もちろん、Macにしかインストールされていないフォントを指定しても、Windows PCではそのフォントを再現できません。

p { font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif; }

といったように複数のフォントを指定します。

CSSでのフォント指定の仕様として、前に書かれたフォントが優先的に適用されます。そのため、英字用の「英文フォント」と英語+日本語用の「日本語フォント」を指定する場合は、英文フォントを前に並べて記述しましょう。 そうすることで、アルファベットには英文フォントが、日本語の文字には日本語フォントが使用されます。

フォントファミリーとは?

CSSでフォントを指定する際に記述するfont-family。太字の書体や斜体の表示も含め、フォントのひとまとまりをフォントファミリーと呼びます。

閲覧環境によっては斜体が表示されないケースもあるものの、太字や斜体の効果を指定した際に意図した表示がされるのは、フォントがフォントファミリーの要素を持ち合わせているからです。

目的に応じて最適なフォント指定をする

フォント選びのコツは、読み手の「視認性・可読性・判読性」を意識して選ぶのがポイントです。事務的な文書を開示するWebサイトとデザインを重視したWebサイトでは、最適なフォントは異なるもの。常にユーザーの「視認性・可読性・判読性」を意識してフォントを選ぶようにしましょう。

一般的に視認性が高いとされているサンセリフ体フォントは、プレゼン資料などの用途に向いています。また、テキスト量の多いレポートや企画書では、セリフ体フォントを用いることで可読性が高まるとされています。また、代表的な英文フォントも、それぞれに最適な用途を持っています。

視認性・可読性・判読性ともに高く、汎用的に見せたい場合は、Helveticaが向いています。また、英国紙「Times」が開発したTimes New Romanは、論文や新聞などのテキストに格調高い雰囲気を演出してくれます。

古い洋書をイメージさせるフォントとしては、Georgiaが用いられます。また、Garamondも同様、西欧の古典文学作品をイメージさせる格調の高さを持っています。

モニタで表示された際に高い視認性・可読性・判読性を発揮するのが、Segoe UI。Windows 7以降のOSに標準でインストールされている英文フォントです。

FuturaはMac OSに標準でインストールされている英文フォント。幾何学的でオシャレさを演出するフォントとされています。

Webサイトの持つ目的ごとに、ユーザーにとっての最適なフォントは異なります。それぞれの特性を理解して、フォントを選ぶようにしましょう。

利用環境に依存するフォントの使用に注意

フォントはユーザーの利用環境に依存します。制作者が意図したフォントが、必ずしもユーザーのデバイスで意図通り表示されているとは限りません。そういった点から、無計画にたくさんのフォントを指定するのは表示上のトラブルのもと。多くのデバイスで意図通りに表示させたいときは、汎用的なフォントの指定に留めるようにしましょう。