セリフ体・サンセリフ体とは?フォントの特徴と使い分けを初心者向けに解説

セリフ体・サンセリフ体の基本

まずは、セリフ体とサンセリフ体がそれぞれどんな形の書体なのかを押さえましょう。

見分けるポイントは、文字の線の端にある小さな飾りです。

セリフ体とは

セリフ体とは、文字の線の端に「セリフ」と呼ばれる小さな飾りがついた書体です。

飾りといってもリボンのような派手な装飾ではなく、線の書き始めや書き終わりについている「ヒゲ」や「小さな突起」のような部分のことです。
古代ローマの石碑に刻まれた文字にも見られ、筆で下書きしたときの名残とも、石を彫るときに線の端を整えた跡とも言われています(成り立ちには諸説あります)。

多くのセリフ体は、線の太さに強弱があり、手で書いた文字のような温かみやクラシックな雰囲気を持っています。

古代ローマの文字がルーツとされることから「ローマン体」とも呼ばれ、15世紀の活版印刷の時代から使われてきた長い歴史を持つ書体です(セリフ体とサンセリフ体の違いは?(アドビ))。なお、イタリック(傾いた書体)に対して、まっすぐ立った標準の文字を「ローマン体」と呼ぶこともあります(書体のバリエーションとは参照)。

代表的な書体には、Garamond(ガラモン)、Times New Roman(タイムズ・ニュー・ローマン)、Georgia(ジョージア)などがあります。

※見本の書体は、お使いの端末に入っているフォントで表示されます

左のセリフ体の「H」や「i」を見ると、縦線の上下の端に横向きの小さな飾りがついているのが分かります。

サンセリフ体とは

サンセリフ体とは、セリフ(飾り)を持たない、線の太さがほぼ均一な書体です。

「サン(sans)」はフランス語で「〜がない」という意味で、「セリフがない書体」という名前になっています(欧文書体の選び方(富士フイルムビジネスイノベーション))。

上の見本の右側のように、形がシンプルでくっきりしているため、すっきりとした現代的な印象になります。

代表的な書体には、Helvetica(ヘルベチカ)、Arial(アリアル)、Futura(フーツラ)などがあります。
読み方は人によって揺れがあり、Arialは「エリアル」、Futuraは「フューチュラ」と呼ばれることもあります。

セリフ体とサンセリフ体の違いを一覧で比べる

2つの違いを表にまとめると、次のようになります。

比べるポイント	セリフ体	サンセリフ体
線の端	セリフ(飾り)がある	セリフがない
線の太さ	強弱があるものが多い	ほぼ均一
与える印象	クラシック・上品・伝統的・フォーマル	シンプル・現代的・力強い・カジュアル
得意なこと	長い文章をじっくり読ませる(特に印刷物)	短い言葉をパッと見せる、小さな画面表示
よく使われる場所	書籍や新聞の本文、高級ブランドのロゴ	アプリやWebの画面、案内サイン、見出し
和文書体でいうと	明朝体に近い	ゴシック体に近い

表の最後の行のように、セリフ体は和文の明朝体、サンセリフ体はゴシック体に近い関係にあります。

明朝体とセリフ体は、どちらも線の太さに強弱があり、線の端に飾り(明朝体は「ウロコ」、セリフ体は「セリフ」)があるため、上品で伝統的な印象になりやすい書体です。
ゴシック体とサンセリフ体は、どちらも線の太さがほぼ均一で飾りがないため、すっきりとした現代的な印象になりやすい書体です(明朝体とゴシック体の違いは明朝体とゴシック体の違いとはで解説しています)。

CSSの仕様をまとめたMDNでも、総称ファミリー(書体のおおまかな分類を表すキーワード)のserifの例に明朝体、sans-serifの例にゴシック体が挙げられています(MDN「font-family」)。

セリフ体・サンセリフ体の使い分け

形の違いが分かったところで、実際のデザインでどう使い分ければよいかを見ていきましょう。

「印象」「読みやすさ」「Webでの指定方法」「和文との組み合わせ」の順に解説します。

伝えたい印象で選ぶ

セリフ体とサンセリフ体のどちらを選ぶかは、まず「どんな印象を伝えたいか」で決めるのが基本です。

同じ言葉でも、書体が変わるだけでブランドやサービスの印象が大きく変わるためです。

下の見本では、同じ英語のコピーを2つの書体で並べています。

左のセリフ体は伝統のある老舗のような落ち着いた雰囲気、右のサンセリフ体はモダンで気軽な雰囲気になっています。

伝統・高級感・上品さを伝えたいならセリフ体、親しみやすさ・分かりやすさ・新しさを伝えたいならサンセリフ体が目安です(書体ごとの印象は書体による印象の違いで一覧にしています)。

読みやすさで選ぶ:サイズと表示環境がポイント

読みやすさの面では、昔から「長い文章はセリフ体、画面の文字はサンセリフ体」と言われてきました。

セリフ体は印刷物の本文で長く使われてきた一方、かつての解像度の低い画面では、細い線やセリフがきれいに表示できず、つぶれて読みにくくなっていたためです。

ただし、現在の高精細な画面ではセリフ体もきれいに表示できるようになり、ユーザビリティの専門機関であるニールセン・ノーマン・グループは、セリフ体とサンセリフ体のどちらかが読みやすいとする研究結果は決定的ではない、としています(Serif vs. Sans-Serif Fonts for HD Screens(英語))。

つまり、「セリフ体だから読みにくい」「サンセリフ体だから読みやすい」と一律に決まるわけではありません(文字の読みやすさの考え方は視認性・可読性・判読性の違いで解説しています)。

実際の読みやすさは、書体の分類よりも、文字サイズ・線の細さ・行間などの影響が大きくなります(行間の考え方は行間と行長の記事で解説しています)。

迷ったときは、ボタンや注釈などの小さな文字には形のシンプルなサンセリフ体を使い、セリフ体は線が細すぎないものを、ある程度大きなサイズで使うと安心です。
セリフ体は細い線や小さな飾りが特徴なので、文字を小さくしすぎると、細い線がかすれたり、飾りどうしがくっついて文字がつぶれて見えたりしやすいためです。

Webで指定するときの基本(CSS)

ここはWebサイトを自分で作る人向けの内容です。
デザインツールだけを使う人は、「最後に保険として分類名を書く」という考え方だけ知っておけば十分です。

Webサイトの文字のフォントは、CSS(Webページの見た目を指定する言語)のfont-familyという項目(プロパティ)で指定します。

このとき、使いたいフォント名を並べた最後に、serif(セリフ体)やsans-serif(サンセリフ体)のような大まかな分類名を書いておくのが基本です。
この分類名を「総称ファミリー」といいます。

指定したフォントが閲覧者のパソコンやスマートフォンに入っていなかったときの保険として、ブラウザーが同じ分類の代わりのフォントで表示してくれるためです。

閲覧者の端末に入っていないフォントを表示させたいときは、Webフォントという仕組みを使います(Webフォントとは?)。

次のコードは、見出しにセリフ体、本文にサンセリフ体を指定する例です。

h1 {
  font-family: Georgia, "Times New Roman", serif;
}
body {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

最後のserifやsans-serifが総称ファミリーで、MDNでは「フォントファミリー名リストの最終選択肢である必要があります」と説明されています(MDN「font-family」)。

コードの中で、一部のフォント名だけが引用符(")で囲まれているのにも理由があります。

• Georgia、Arialのような1語のフォント名:そのまま書いて問題ありません。
• “Times New Roman”のようにスペースを含むフォント名:どこからどこまでが1つの名前かをはっきりさせるため、引用符で囲むことが推奨されています。
• serif、sans-serifなどの総称ファミリー:CSSで決められた特別なキーワードなので、引用符で囲まずに書きます。
  囲んでしまうと、分類名ではなく「serif」という名前のフォントを探す指定として扱われ、保険として働かなくなります。

和文書体との組み合わせ方

日本語のデザインで英字を組み合わせる場合は、和文書体と欧文書体の雰囲気をそろえることが大切です。

基本は、明朝体にはセリフ体、ゴシック体にはサンセリフ体を合わせることです。

下の見本で、組み合わせによる見え方の違いを比べてみましょう。

左と中央は、和文と英字の雰囲気がそろっていて自然に読めます。

右は、太いゴシック体の中に細いセリフ体の英字が入っているため、英字だけが浮いて見えてしまっています。

組み合わせるときは、書体の系統に加えて、ウェイト(文字の太さ)をそろえることも意識しましょう。

Webページで英数字だけを欧文フォントにするCSSの書き方は、日本語Webフォントとは?で解説しています。

実践のポイント

セリフ体とサンセリフ体を使うときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 線の細いセリフ体を、ボタンや注釈などの小さな文字に使ってしまうことがあります。
  小さいサイズではセリフや細い線がつぶれたりかすれたりして、読みにくくなる場合があります。
  小さな文字には、形のシンプルなサンセリフ体を選ぶと安心です。
• 欧文書体だけを見て雰囲気で選び、組み合わせる和文書体との相性を確認しないことがあります。
  英字単体ではおしゃれに見えても、日本語の中に入れると浮いてしまうことがあるため、必ず和文と並べて確認しましょう。
• CSSで書体を指定するときに、最後の総称ファミリー(serifやsans-serif)を書き忘れることがあります。
  指定したフォントが端末にない場合に、意図しない書体で表示されてしまう原因になります。

よくある質問

• Q. Webサイトの本文にセリフ体を使ってもいい?
  A. 使っても問題ありません。
  現在の高精細な画面ではセリフ体もきれいに表示されるため、線が細すぎない書体を選び、文字サイズと行間に余裕を持たせれば、読みやすい本文になります。
  ただし、日本語のサイトでは本文の大部分が和文書体になるため、まずは和文書体を決め、それに合う欧文書体を選ぶのが現実的です(和文書体の種類は和文書体の基本とはで解説しています)。
• Q. 初心者が最初に覚えるなら、どの書体がいい?
  A. セリフ体ならGeorgiaやTimes New Roman、サンセリフ体ならArialのように、WindowsやMacに標準で入っている定番の書体から見比べるのがおすすめです。
  定番の書体で形の違いが分かるようになると、ほかの書体を見たときにも分類を判断しやすくなります。
  書体名を覚えるより先に、街の看板やカフェのメニューの英字を見たときに「これはサンセリフ体(ゴシック系)だな」「これはセリフ体(明朝系)だな」と心の中で分類してみるのも、手軽で効果的な練習です。
• Q. セリフの形にも種類はある?
  A. あります。
  たとえば、板のように太く四角いセリフを持つ「スラブセリフ」は、力強く素朴な印象を与える書体として、セリフ体の中でも区別されることがあります。
  まずはセリフの「ある・なし」を見分けられるようになることを優先しましょう。

まとめ

セリフ体は線の端に飾りがあり、クラシックで上品な印象を与える書体、サンセリフ体は飾りがなく線の太さが均一で、シンプルで現代的な印象を与える書体です。

どちらが読みやすいかは書体の分類だけでは決まらないため、伝えたい印象で選んだうえで、文字サイズや表示環境、組み合わせる和文書体との相性を確認することが大切です。

まずは身の回りのロゴや商品パッケージの英字を見て、線の端に飾り(セリフ)があるかないかを見分けることから始めてみてください。