Web制作を行う全ての方へ

今さら聞けない?有名なフォント12種類の紹介とフォントの基礎知識について

新年明けましておめでとうございます。今年も色々と挑戦する年にしたいのですが、一先ずブログをしっかり書くというのをベースにがんばります。
早いもので、このブログも気がついたら3年が過ぎ4年目に突入していました。立ちあげ当初は辞めないことを目標にしていましたが、続けることが大事だなと今でも思っています。皆様本年もよろしくお願いします。

今回は自分がよく使っているフォントをまとめました。他にも使っているフォントはもちろんあるんですが、基本的なフォントやWebベースで使えるフォントあたりを紹介しています。

  1. 1.フォントリスト
  2. 2.フォントの基本
  3. 3.考察

フォントリスト

欧文フォント

  1. 1.Arial
  2. 2.GEORGIA
  3. 3.Myriad
  4. 4.Verdana
  5. 5.TimesNewRoman

和文フォント

  1. 6.AXIS
  2. 7.ヒラギノ角ゴ・明朝
  3. 8.MS Pゴシック・明朝
  4. 9.見出ゴMB31
  5. 10.見出ミンMA31
  6. 11.メイリオ
  7. 12.リュウミン

Arial

Arial
読み:アリアル、エアリアル、エィリアルなど

有名なフォントHelveticaと造作が似ており、代用書体として企画開発されたと考えられているフォントです。Helveticaとの違いはHelveticaは垂直に設計されていることに対し、Arialは斜めに設計されています。Webサイトを制作しているとWindows、Macの環境を意識する必要があり両方にインストールされていると言う理由からArialは昔から利用していました。

Arial

上記はthe ragbagにて紹介されていたArialとHelveticaの違いを表記した記事からの抜粋です。文字の幅はHelveticaと同一に作られていますが、このように字体そのものは微妙に異なっています。

GEORGIA

GEORGIA
読み:ジョージア

Gのセリフが特徴的な欧文フォントです。このフォントもWindows、Mac両方にインストールされていて重宝しているフォントです。スクリーン上でつぶれにくい設計になっていたり、数字の書体がオールドスタイルなため本文との調和性がとりやすいなど細かな部分まで考えて作られたフォントです。

Myriad

Myriad
読み:ミリアド

Frutigerを模倣したフォントの1つです。サンセリフ体でありgyの文字が少しカーブがかっているのが特徴で可愛らしく上品な印象を与えてくれます。アップルやアドビシステムズ(現在アドビはAdobeCleanが利用されて居るとのことです。※コメント欄yuki様より)がコーポレートフォントに採用していることもあり目にする事が多いフォントの1つでもあります。

以前はそれ程使ってなかったんですが、#LOVEFONTでMaka-veli.comさんが紹介されたのを見て気に入り頻繁に使うようになりました。

Verdana

Verdana
読み:ヴァーダナ

マイクロソフトがコンピュータ用ディスプレイ上で視認性向上の為に開発したサンセリフ体のフォントです。このフォントもWindows、Mac両方のOSにインストールされている扱いやすいフォントの1つです。FrutigerやVardanaはヒューマニスティック・サンセリフ体と呼ばれる旧来のローマン体の骨格を残した人間味のあるサンセリフ体で、視認性のよさスリムさ安定感を備えています。

今回この記事を書くにあたって読み方を調べていた所ヴァーダナベルダナと2つの説があり、僕は前者と思っていたのですがツイッターで色々意見をもらった所完全に2つにわかれてしまいました。

ですが、Verdanaの語源が「緑豊かな」「青々とした」を意味する「verdant(発音:ヴァーダント)」ということがありヴァーダナという読み方が正しいのではないか?と判断しました。

Verdana:wikipedia

TimesNewRoman

TimesNewRoman
読み:タイムズ・ニュー・ロマン

以前#LOVEFONTの記事僕が好きなフォント「新聞で有名な欧文フォント TimesNewRoman」でも紹介しましたが、このフォントは新聞用書体なので英語文献等でよく目にします。これとは別にTimes(Macでは標準インストール)というフォントもありますがS5のセリフが異なること、イタリックのzが異なっているといった違いがあります。

AXIS

axis
読み:アクシス

アクシスより発刊されているデザイン情報誌AXISで利用されているフォント。元々この雑誌専用に作られたフォントなので文章に利用しても非常に読みやすい上、雑誌がバイリンガル化していることもあり和文欧文のフォントが展開されていて非常に重宝するフォントです。Appleやポーラ、ソフトバンクなどと言った有名企業で採用された事で一気に知名度が上がったフォントです。
AXIS Font

ヒラギノ角ゴ・明朝

ヒラギノ角ゴ・明朝
読み:ヒラギノカクゴ・ミンチョウ

ヒラギノ角ゴは可読性と存在感を両立させたフォントで、見出しから本文まで幅広く使える欧文和文フォントです。同様にヒラギノ明朝も非常に美しいフォントでシャープさと筆記体をマッチさせた情感豊かなフォントになっています。Macには標準でインストールされていますが、Windowsには入っていませんので、フォントを購入する必要があるのですが、ジャストシステムから発売されている一太郎2012 承 プレミアムを購入して同梱されているものを使うといった方法もあります。(ただしこちらは個人で楽しむ場合で、サイトの制作といった使い方に関してはライセンスをお調べ頂く必要があります。)

一太郎に同梱されているものは6タイプですが、フォントとして存在するウェイトは全部で9種類あり、見出しやブロックごとの強弱をつけるにあたり細かな調節ができるのも大きな特徴です。

MS Pゴシック・明朝

MS Pゴシック・明朝

読み:エムエスピーゴシック・ミンチョウ
MSゴシック・MS明朝の字間を調節したプロポーショナルフォントです。Windows95から搭載されているフォントで、この業界に入る以前から個人的に使い続けているフォントです。同様にMS Pゴシックも長く利用してきていますが、Webデザインでは殆ど使うことがなく、エディタやOfficeシリーズで利用していることが多いです。

見出ゴMB31

見出ゴMB31
読み:ミダシゴエムビーサンジュウイチ

伝統的かつ落ち着きのある見出し用ゴシックです。大きく見せる見出しや、長くなりがちなキャッチコピーでもゆったりと意味を伝えることが出来るこのフォントは非常に使い勝手がよく、見出しでよく利用しています。モリサワのフォントで今だとモリサワパスポートに収録されていますね。SelectPackでチョイス出来るフォントでもあるので、とにかく少量で安く手に入れたい!という時にも選べるのでオススメです。

見出ミンMA31

見出ミンMA31
読み:ミダシミンエムエーサンジュウイチ

重圧的な印象に伝統さを感じる見出し用明朝体です。漢字の書体は重たく感じますが、かなはやや細く可読性の高さを引き出した書体となっています。こちらも上記の見出ゴMB31同様モリサワパスポートに収録されている事と、SelectPackでチョイス出来るフォントになっています。

メイリオ

メイリオ
読み:メイリオ

Windws Vista移行で標準搭載された可読性の高いフォントです。ベースはVerdanaからのリデザインであり、和文においてはVerdanaを基調にデザインされました。このフォントの登場でWindowsでも読みやすいフォントが利用できるようになり、Windowsユーザーの僕は非常に嬉しいです。

リュウミン

リュウミン
読み:リュウミン

中学の美術の時間でやったレタリングの木彫りを思い出すリュウミンフォント。絶妙なバランスをもった明朝体のフォントで非常に親しみのある書体です。見出し、本文組まで幅広く活用できるリュウミンはDTPの基本書体ともされ、幅広く利用されています。

収録は見出ゴMB31、見出ミンMA31と同じくモリサワパスポートもしくはSelectPackでのチョイス出来るフォントになっています。

フォントの紹介は一先ずこれぐらいです。まだまだ紹介したいフォントはありますが挙げだすときりがないので、今後の記事で他のフォントも紹介していきたいと思います。普段何気なく選んで利用しているフォントだったりもしますが、こうやってどういう特徴を持っているのかを調べたり知っておくことは凄く楽しく後々役に立ちます。世界には非常に多くのフォントがあり、それぞれが色々な思いや経緯から生まれていると考えると非常に感慨深いですね。

フォントの基本

フォントのタイプを大きく分けると4つ。和文の明朝体ゴシック体。欧文のセリフサンセリフになります。。セリフとは書体の角に現れるウロコの事で、これがあるものをセリフ、無いものをサン(無い)セリフと呼びます。

フォントの基本4タイプ

明朝体の特徴

見た目が美しく和を感じさせるのに最適な書体です。細い書体で本文に使われることが多く、太い明朝体は可読性が落ちてしまいます。一方で書体が細いため視認性が若干弱く、プロジェクター等で大勢に見せる場合などでは見づらくなる場合があります。その時はゴシック体を選んだほうが視認性は上がります。

ゴシック体の特徴

見出しやキャッチコピーなど、視認性を求める場合に活用しやすいのがゴシック体です。相手に明確に意味を伝えるのに最適な書体になります。

明朝とゴシック

セリフ体の特徴

和文の明朝と同じく、長い文章ならセリフ体を選択した方が可読性は高いです。

サンセリフ体の特徴

和文のゴシックと同じく、見出しやキャッチコピーに向いています。長文には向いておらず、太い長文になると可読性が下がります。

セリフとサンセリフ

文字の太さ

本文で長い文章に使う場合は書体の持つ太さに注意を払う必要があります。

太いと文字の面積が太くなってしまい可読性が下がってしまいます。目立たせるために文字を太くする場合は見出しやキャッチコピーにのみ適用し、本文ではウェイトを下げたままのほうが見やすくなります。

文字の太さ

プロポーショナルフォント・モノスペースフォント

上記のMS Pゴシック・明朝の説明でMSゴシック・明朝とMS Pゴシック・明朝の違いはプロポーショナルフォントになっていると述べましたが、プロポーショナルとはiwのような文字で幅のサイズがが異なっていて、単に並べただけでも読みやすいようになっているものを指し、反対に全ての文字の幅が等倍になっているものをモノスペースフォントと言います。

プロポーショナルとの比較

考察

Windowsをメインで使っていると、Macはやはりフォントに恵まれているなと思います。HelveticaやFutura、Osaka、ヒラギノなどがMacには標準で入っていますので、それらを手にすることが出来るというだけでもデザイナーにとって大きなメリットだと最近特に感じています。ただ、Webの仕事を中心にしているので、MacとWin両方に標準でインストールされているフォントを扱うことが殆どなので、現状としてはこのままで仕事には困っていません。それでも次どのPCを買うか?となればやはりMacが欲しい!って胸を張って言えます。

ちなみに、Windows8とMac(Mountain Lion)において標準でインストールされているものを確認するには下記サイトが参考になります。他のバージョンもしっかり収録されていてかなり重宝します。

追記

2013年1月17日
ヒラギノフォントの項目にて、「ジャストシステムから発売されている一太郎2012 承 プレミアム」について触れ、コメントでライセンスの事がありましたので、ジャストシステム様に直接問い合わせた所、下記内容を頂きました。

“「一太郎2012 承 プレミアム」、「一太郎2012 承 スーパープレミアム」に搭載のヒラギノフォントは、
他社アプリケーション上でもご利用頂くことが可能です。

また、弊社製品に搭載のヒラギノフォントの使用許諾において、以下にご案内の内容から、
サイト制作やパンフレットの制作などの商用利用を許諾しております。

縦書きベストマッチフォント6書体、ヒラギノフォントの使用範囲について
・当社製品に搭載のフォントで文書を作成して印刷し、その印刷物を不特定に配布する(有償、無償を問わず)。
・制作又は放送したデジタルコンテンツの、販売、頒布をすること”

Ad



Comments

yuki

Myriad はもう Adobe のコーポレートフォントではありません。現在は AdobeClean というフォントです。

YAT

yuki様> そうだったのですね、失礼いたしました。本文記事の方、打ち消し線にて訂正させて頂きました。正しい情報ご教授頂きありがとうございます。

is178

いつも拝読させて頂いております。 今回の記事で「ゴシック体の特徴」の部分が気になったのですが、これは明朝体とゴシック体の比較というよりは、ウェイトR(の明朝体)とウェイトBくらい(のゴシック体)の比較になってしまっていないでしょうか? ウェイトさえ同じであれば、特別ゴシック体の方が太いという事も無いかと思うので、「ゴシック体の特徴」というより「太字の使いどころ」の紹介というような印象を受けました。

YAT

is178様> いつもありがとうございます。 ゴシックの部分で知識が混同した形になっていたので、改めて分担し、元々のゴシックの特徴と太字の使いどころに分けて掲載することにいたしました。 おっしゃるとおり元々あげていた画像のゴシックのウェイト設定が誤っており、その画像をもとに記事を書いてしまったので、そちらも作り直しいたしました。 ご指摘のほどありがとうございます。

hoge

> 一太郎2012 承 プレミアムを購入して同梱されているものを使う これってライセンスの関係上,どうなんですかね。

YAT

hoge様> > 一太郎2012 承 プレミアムを購入して同梱されているものを使う >>これってライセンスの関係上,どうなんですかね。 言葉足らずでしたね。ヒラギノを楽しむ上では一太郎に入ってもらうのもひとつの手段なのですが、ライセンスについてはお調べ頂く必要があります。 個人で楽しむ領域を超える件に関しては当然必要な事になってきますね。

algorism

どうも、はてブからやってきました。 視覚的に整理されていて、とても参考になります。 ところで、一太郎のヒラギノについては、ライセンスは次のようになっています。 http://support.justsystems.com/faq/1032/app/servlet/qadoc?QID=051418 ある意味で、普通に使えるというところでしょうか…

YAT

algorism様> ありがとうございます。そう言っていただけるとブログの執筆の励みになります^^ ライセンスに関してですが使用可能な例を見る限り、制作又は放送したデジタルコンテンツの、販売、頒布をすることといった事が書かれているため問題無さそうに思えますね。ただ、これが一太郎を利用してでの事なのか、そうでないのかという記載が無いのが気になりました。

TomOne

一太郎2012の売り文句が、(モリサワの時と違って) 他のアプリケーションからも使えるという事だったので、 ジャストシステム以外のアプリでもOKだと思います。

YAT

TomOne 様> 一太郎に関するコメントありがとうございます。 そうなのですね、僕も昨日から色々調べているのですがこれと明示できるものが見つけられておらず、頂いた情報はありがたく思います。 ジャストシステム以外のソフトウェアでも使えるとなると、ユーザーとしてはかなり有難いものになりますね^^

やまだたろう

世の中にはいろんなフォントがあって キレイです。・・・ つい中吊り広告 などで見とれてしまう事もあります。 自分も仕事で綺麗なフォントを使おうと 思うんですが・・・ 学会によっては、使うフォントまで指定 してくる学会もあって、、、 プレゼンの場では、派手にフォント使っちゃって 失敗するんですけどね。

YAT

やまだたろう様> 中吊り広告とかつい見てしまいますよね。電車に乗る楽しみの一つになっています^^ フォントは色々とと成約もあったりしますね。 意図する見せ方とかけ離れたものになる可能性もあったりで、そういうのにシビアなところは中々自由は聞きづらい事多そうです。 でもその成約の中で面白いものを作り出せたときは、それはまた一つの楽しみでもあるとは思います。 何事も楽しみを見つけて挑んでいきたいですね^^

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です