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

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

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

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

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

フォントファミリー名／概要／総称ファミリー名

serif／日本語の明朝系に相当するフォント／ＭＳＰ明朝,Georga,Garamond,Times New Roman,ヒラギノ明朝 Pro W6

sans-serif／日本語のゴシック系に相当するフォント／ＭＳＰゴシック,Arial,Verdana,Helvetica,ヒラギノ角ゴ Pro W6

cursive／日本語の筆記体・草書体系に相当するフォント／caflisch script,ex pont

fantasy／装飾がメインとなっているフォント／critter,studz

monospace／等幅のフォント／ＭＳゴシック,Courier,Courier New

フォントファミリー名

フォントを具体的な名前で指定します。ただし、指定しても閲覧しているパソコンにそのフォントがなければ、望み通りのフォントを表示することができません。

総称ファミリー名

OSに標準で搭載されているフォントのこと。総称ファミリーを指定しておけば、ブラウザが「どのフォントを表示していいかわからない」ということがなくなります。

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

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

明朝体（serif）

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

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

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

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

ゴシック体（sans-serif）

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

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

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

今回は「明朝体」、「ゴシック体」の基本的な特徴を記載しましたが、他にも文字の太さや大きさによっても印象・読みやすさは異なるため、用途も変わってきます。加えて、英文にはアルファベットのフォントが存在します。効果的に使い分けたいですね。