e-performance 公式ブログ

意外と知らない!「明朝体」と「ゴシック体」の基本

このエントリーをはてなブックマークに追加

2015年最初の投稿は、Webサイトを制作する上で重要な要素の一つであるフォントについて投稿してみたいと思います。

Webフォントが公開され、手軽に様々な種類のフォントを利用できるようになりました。便利になる一方で、どのフォントを選んだら良いのか悩んだりはしませんか。一度初心に戻り、フォントの基本である「明朝体」と「ゴシック体」について調べてみました。

スタイルシートで定義するフォントの種類

スタイルシートでフォントを定義する場合、具体的な名前で指定する「フォントファミリー名」と、フォントファミリー名で指定したフォントが使えない場合の最終選択肢として「総称ファミリー名」を指定するのが一般的です。これは、ホームページやWebサイトは紙媒体と違って、パソコンやスマホなどユーザーが閲覧する環境により表示されるフォントが微妙に異なるためです。

フォント
ファミリー名
概要総称ファミリー名
serif 日本語の明朝系に相当するフォント MS P明朝,Georga,Garamond,Times New Roman,ヒラギノ明朝 Pro W6
sans-serif 日本語のゴシック系に相当するフォント MS Pゴシック,Arial,Verdana,Helvetica,ヒラギノ角ゴ Pro W6
cursive 日本語の筆記体・草書体系に相当するフォント caflisch script,ex pont
fantasy 装飾がメインとなっているフォント critter,studz
monospace 等幅のフォント MS ゴシック,Courier,Courier New
フォントファミリー名
フォントを具体的な名前で指定します。ただし、指定しても閲覧しているパソコンにそのフォントがなければ、望み通りのフォントを表示することができません。
総称ファミリー名
OSに標準で搭載されているフォントのこと。総称ファミリーを指定しておけば、ブラウザが「どのフォントを表示していいかわからない」ということがなくなります。

日本語の代表的なフォント「明朝体」と「ゴシック体」について

上記の表より、Web上では日本語のフォントは「明朝体(serif)」と「ゴシック体(sans-serif)」に分類されそうです。それぞれ、どういった特徴があり、どういう場面で使用するのが適しているのかを整理してみました。

明朝体(serif)

明朝体は、筆で書かれたような「はね」や「はらい」があり、横線の右端に「うろこ」と呼ばれる三角の飾りがある書体です。また、横線が細く、縦線が太い特徴があります。

読みやすい書体で、長い日本語の文章を表示するのに向いています。そのため、主に広告・書籍で使用されることが多く、電子書籍リーダでも明朝体で表示されるのをよく目にします。

ウェブブラウザ上では明朝体の装飾がギザギザに表示されて可読性を損ねるため、利用されることは少ないですが、伝統的・高級感といった印象を与えるのでメインビジュアルやナビゲーションなど一部に利用するのは効果的です。


特徴 横線に対して縦線が太い。
「はね」や「はらい」、「ウロコ」がある。
与えるイメージ 穏やか、伝統的、高級感、保守的、
芸術的、繊細、女性的 など
効果 横線が細いため画数の多い漢字を見やすく表現できる。
長い日本語の文章を表示するのに向いている。

ゴシック体(sans-serif)

ゴシック体は、横線と縦線の太さがほぼ同じで、ウロコが(ほどんど)ない書体です。装飾的な要素はなく、端が角張っているものを角ゴシック、逆に端の丸いものが丸ゴシックと呼ばれます。

ホームページやウェブサイト、ブログ上ではゴシック体を用いるのが一般的です。ゴシック体は力強い書体のため、タイトルや見出しに表示するのにも向いています。ただ、文字が小さかったり、画数が多かったりするとゴシック体は読みにくいものになるので注意が必要です。


特徴 横線と縦線の太さがほぼ同じで、ウロコが(ほどんど)ない。
装飾的な要素がない。
与えるイメージ 新鮮、合理的、モダン、飾り気がない、インパクト、
押出し感、機械的、男性的 など
効果 線の太さが均一なため画数の少ない文字をハッキリ表現できる。
タイトルや見出しに向いている。

今回は「明朝体」、「ゴシック体」の基本的な特徴を記載しましたが、他にも文字の太さや大きさによっても印象・読みやすさは異なるため、用途も変わってきます。加えて、英文にはアルファベットのフォントが存在します。そのあたりについては、また別の機会に書かせていただきます。