Web’Notes

見やすいフォントとは・・・

Ed Fella / A Commercial Art Alphabet: Not A Font, image 2 By: karen horton

「フォントはデザインの一部である。」という話を前に聞いた覚えがあります。

実際にフォントによってページの見栄えが悪くなったりしますのでデザインの一つとしても重要な要素です。

今回は、サイトを作る上で重要なフォント選びについてまとめて見ました。

フォント選びに重要ことは、見やすいフォントを選ぶのは当然ですが、フォントが使用できるかどうかが最も重要です。

そのため、「標準フォント」を使用する必要があります。

1. 標準フォント
2. 見やすいフォント
3. 有名サイトのフォント

• Webで文章を書くときに最初にやっておくCSSの設定
• 読みやすい行間と文字サイズ

標準フォント

標準フォントとは、OSにデフォルトでインストールされているフォントのことです。

WindowsやMacで元々入っているフォントが違うため、Windowsで見れてMacで見れないフォントなどが多くあります。

そのため、フォントを指定するには、このように複数のフォントを指定することが一般的です。

html,body
{
font-family:"ヒラギノ角ゴ Pro W3","メイリオ",sans-serif;
}

この場合は、「“ヒラギノ角ゴ Pro W3″」がインストールされていなければ、「“メイリオ”」を使用し、それも無ければゴシック系のインストールされているフォントを使用することになります。

※「sans-serif」は総称フォントと呼ばれるフォントで「ゴシック体」「明朝体」などフォントの大まかな区分を指定することができます。

見やすいフォント

見やすいフォントとは、実際には人それぞれ違いはあるでしょうが、一般的にはシンプルで癖のないフォントを使用することが可読性を高める要因の一つになります。

シンプルで癖のないフォントとしてはこのようなものがあります。

(同じ見た目のフォントがある場合は、どちらかのフォントがインストールされていません。)

上のフォントを使って見やすいフォント指定を考えた結果こうなりました。

html,body
{
font-family:"ヒラギノ角ゴ Pro W3",メイリオ,Osaka,Arial,Verdana
,"ＭＳ Ｐゴシック",sans-serif;
}

まずMac標準の「ヒラギノ角ゴ Pro W3」を先頭にして、その後Windows標準の「メイリオ」を指定しています。

これで、Macユーザならば「ヒラギノ角ゴ Pro W3」で表示され、Windowsユーザなら「メイリオ」で表示されます。

後は、気に入った順に並べてみました。

フォントは個人で好き嫌いがあると思いますので、ぜひ気に入ったフォントを見つけオリジナルのフォント指定を作ってみてください。

有名サイトのフォント

参考までに、有名なサイトではどのようなフォントを使用しているのか調べてみました。

font-family: "Lucida Grande", "Lucida Sans Unicode", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana, sans-serif

font-family: arial,sans-serif

font-family: "lucida grande",tahoma,verdana,arial,"hiragino kaku gothic pro",meiryo,"ms pgothic",sans-serif

font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic Pro",Meiryo,"MS PGothic",sans-serif

調べてみた感じだと、ゴシック系フォントということ以外は特に統一感はないようです。

Design Design, font, Web, デザイン, 見やすいフォント