意識した英文フォント選びのコツとは?Webサイトの文字情報を見ていると、日本語だけで構成されている文章はほとんどありません。固有名詞や専門用語などには英文が用いられるもの。アップさせたいところですね。今回は、英文フォントの基礎的な解説からフォント指定の方法などについて見ていきましょう。セリフ体フォントとサンセリフ体フォント英文フォントは一般的に、セリフ(serif)とサンセリフ(sans-serif)にわけられます。和文フォントの「明朝体」と「ゴシック体」のような区分です。日本語でもWebサイトのデザインやテイストに応じて、明朝体とゴシック体を使い分けますが、英文フォントでも同様に、セリフ体フォントとサンセリフ体フォントを使い分けます。強弱やメリハリを持つセリフ体フォントserifとは文字の先端にある小さな装飾のこと。ヒゲやウロコのような装飾が施された英文フォントです。serifを持つフォントをセリフ体フォントと呼びます。和文フォントの明朝体と同じように、縦線・横線の幅が異なっているのが特徴。線の太さに強弱やメリハリがあるため、安定した雰囲気を演出できます。RomanやCenturyなどが代表的なセルフ体フォント。PCにプリインストールされています。親しみやすくカジュアルなサンセリフ体フォントsans-serifはserifとは異なり、文字の先端に装飾がありません。縦線・横線の太さがほぼ均等にデザインされているのが、serifとは異なるポイントです。ちなみに、sans-serifはフランス語で「セリフがない」という意味を表します。先端の装飾は文字を識別するためには不要との考えから、sans-serifの線は字形だけを示しています。そのため、気取った印象のない雰囲気を演出することができます。HelveticaやArialがsans-serifの代表的なフォントです。CSSでのフォント指定の方法Webサイトの制作時には、CSSで複数のフォントを指定するのが一般的です。デバイスやOSによってインストールされているフォントが異なるためです。PCではそのフォントを再現できません。}といったように複数のフォントを指定します。CSSでのフォント指定の仕様として、前に書かれたフォントが優先的に適用されます。そのため、英字用の「英文フォント」と英語+日本語用の「日本語フォント」を指定する場合は、英文フォントを前に並べて記述しましょう。することで、アルファベットには英文フォントが、日本語の文字には日本語フォントが使用されます。フォントファミリーとは?CSSでフォントを指定する際に記述するfont-family。太字の書体や斜体の表示も含め、フォントのひとまとまりをフォントファミリーと呼びます。閲覧環境によっては斜体が表示されないケースもあるものの、太字や斜体の効果を指定した際に意図した表示がされるのは、フォントがフォントファミリーの要素を持ち合わせているからです。意識して選ぶのがポイントです。事務的な文書を開示するWebサイトとデザインを重視したWebサイトでは、最適なフォントは異なるもの。意識してフォントを選ぶようにしましょう。一般的に視認性が高いとされているサンセリフ体フォントは、プレゼン資料などの用途に向いています。テキスト量の多いレポートや企画書では、セリフ体フォントを用いることで可読性が高まるとされています。ともに高く、汎用的に見せたい場合は、Helveticaが向いています。Romanは、論文や新聞などのテキストに格調高い雰囲気を演出してくれます。古い洋書をイメージさせるフォントとしては、Georgiaが用いられます。Garamondも同様、西欧の古典文学作品をイメージさせる格調の高さを持っています。7以降のOSに標準でインストールされている英文フォントです。OSに標準でインストールされている英文フォント。幾何学的でオシャレさを演出するフォントとされています。Webサイトの持つ目的ごとに、ユーザーにとっての最適なフォントは異なります。それぞれの特性を理解して、フォントを選ぶようにしましょう。利用環境に依存するフォントの使用に注意フォントはユーザーの利用環境に依存します。制作者が意図したフォントが、必ずしもユーザーのデバイスで意図通り表示されているとは限りません。いった点から、無計画にたくさんのフォントを指定するのは表示上のトラブルのもと。多くのデバイスで意図通りに表示させたいときは、汎用的なフォントの指定に留めるようにしましょう。