どのようなフォント（書体）を選択するかはデザイン全体の印象を決める重要な要素になります。フォントの特徴などを理解し、情報のイメージだけでなく、わかりやすさや読み易さについても考慮したデザインに役に立つための基本知識を解説します。

文字（書体）の種類

書体は、和文（日本語）フォントと欧文（英語）フォントに分けることができます。それぞれの代表的な書体のタイプとして、和文では「明朝体」と「ゴシック体」、欧文では「セリフ体」と「サンセリフ体」があります。

和文（日本語）フォントの明朝体とゴシック体

和文（日本語）の書体の明朝体とゴシック体のについてみていきましょう。

明朝体

明朝体は、横線に比べて縦線が太くといったように線の太さに強弱がある書体です。横線の右端や曲り角の右肩に「ウロコ」と呼ばれる三角形の山や、「ハネ」「払い」などの装飾（飾り）があるのが特徴です。

読み疲れしにくく長文を読ませることに適しているといわれ、可読性が高い書体とされています。

ゴシック体

ゴシック体は基本的に横線と縦線の太さがほぼ一定で、ウロコがない書体です。端が角張っているものを「角ゴシック」、端が丸いものを「丸ゴシック」と言います。

太さが均一の上に、飾りがないシンプルな書体のため、ゴシック体は視認性が高い書体と言われています。

欧文（英語）フォントのセリフとサンセリフ

欧文の書体も、和文が明朝体とゴシック体に分かれるのと同じように「セリフ(serif)」と「サンセリフ(sans-serif)」に分けられます。

セリフ体(serif)

セリフとは、線の端や字体の曲がり角にある飾り（ウロコ）を示す言葉で、セリフのある書体がセリフ体になります。

和文フォントの明朝体と同様、縦横の線幅が異なりセリフがあるのが特徴になります。

また、明朝体と同様の理由で可読性に優れているといわれており、長文でも目が疲れにくいことから小説や新聞などの印刷物で多く採用されています。

サンセリフ体（sans-serif）

サンセリフ体は「セリフ」がないタイプの書体のことです。「sans-（サン）」とはフランス語で「無い」という意味で、「sans-serif」は「セリフがない」書体ということになります。

また、和文フォントのゴシック体と同様、縦横の線の太さもほぼ均等です。

和文のゴシック体のように視認性が高いといわれていて、小さな文字でも潰れずに読みやすいとされています。スクリーンの解像度が低い環境でも表示する必要であることから、WebデザインやモバイルアプリのUIなどで標準フォントとして設定されています。

font-familyプロパティの値として一番最後に指定する「総称フォント」にはこのセリフ体とサンセリフ体の名前が使われています。「serif」は欧文フォントのセリフ体、和文フォントの明朝体を、「sans-serif」は欧文フォントのサンセリフ体、和文フォントのゴシック体を表示します。

body {
    font-family: 'Arial', sans-serif;
}

同じ書体での文字の太さ（ウェイト）

フォントには同じ書体でも太さの違いがあり、これをウェイト（Weight）と呼びます。極細のものから極太のものまで何段階もの太さのバリエーションがある書体もあり、ウェイトは数値や名前で表現されます。CSSでフォントの太さを調整するプロパティにfont-weightプロパティがあり、値には数値やキーワードを指定することができます。

次の例はfont-weightプロパティで、文字の太さを太字（ボールド）に指定します。

p {
    font-weight: 700;
}

ウェイトを使い分けることで視覚的なコントラストをることができます。見出し・本文・キャプションなど役割に応じて太さを調整するとでデザインにメリハリが作ることができ、情報の階層構造を明確にすることにも役立ちます。また、同じフォントなのでデザインの統一感を保ちつつ変化を与えることができます

文字の傾き（イタリックとオブリーク）

斜めに傾いた文字は一般に「イタリック体」と呼ばれることが多いですが、厳密には「イタリック（Italic）」と「オブリーク（Oblique）」という2種類があります。

イタリック体

イタリック体とは、単に文字を斜めにしたものではなく、斜体専用に文字自体をデザインし直して美しく傾けた書体のことです。イタリックとは、「斜体」を表す言葉ではなくて、欧文書体の手書き文字をもとにしたスタイル、つまり「筆記体」を意味します。文字が斜めに傾いているのは、文字を手で書いたときの傾きをそのまま書体のデザイン反映しているからなのです。

イタリック体は、通常の直立体（ローマン体）の補助として、文章中で特定の語句を強調したり引用や専門用語を区別したりするために広く使われています。

オブリーク体

オブリーク体は、通常の直立体（ローマン体）を単純に斜めに傾けたもので、デザイン上の調整が加えられていないため、文字の形状自体は直立のまま単純に斜めになっています。そのため、字の形に微妙な歪みや違和感が生じてしまっている場合があります。

CSSで文字を傾けるプロパティとしてfont-styleプロパティがあります。font-styleプロパティの規定値は「normal」でこれが通常体（ローマン体）となります。文字を傾ける値として「italic」、「oblique」があります。

p {
    font-style: italic;
}

書体にイタリック体が存在しない場合、font-styleプロパティの値にitalicを指定してもobliqueとして表示されます。日本語フォントにはイタリック体はありませんので、すべてオブリーク体になります。

イタリック体が存在しないフォントで、強調のためなどに安易に斜体を選択しないようにしましょう。オブリーク体は元の形を無理に傾けているだけなので、不自然な形にゆがんだり、ジャギー（ギザギザ）が発生することがあり、結果、読み易さを損なう恐れもあります。