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

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

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

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

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

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

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

Fontの選び方について
  1. 標準フォント
  2. 見やすいフォント
  3. 有名サイトのフォント
関連リンク

標準フォント

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

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

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

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

 

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

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

 

見やすいフォント

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

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

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

メイリオACB abc 123 あいう
ヒラギノ角ゴ Pro W3ACB abc 123 あいう
MS PゴシックACB abc 123 あいう
OsakaACB abc 123 あいう
VerdanaACB abc 123 あいう
ArialACB abc 123 あいう

 

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

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

 

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

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

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

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

有名サイトのフォント

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

Apple
font-family: "Lucida Grande", "Lucida Sans Unicode", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "MS Pゴシック", Helvetica, Arial, Verdana, sans-serif
Google
font-family: arial,sans-serif
Facebook
font-family: "lucida grande",tahoma,verdana,arial,"hiragino kaku gothic pro",meiryo,"ms pgothic",sans-serif
Twitter
font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic Pro",Meiryo,"MS PGothic",sans-serif

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

divider

Trackback URL

http://webnonotes.com/design/%e8%a6%8b%e3%82%84%e3%81%99%e3%81%84%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%81%a8%e3%81%af%e3%83%bb%e3%83%bb%e3%83%bb/trackback/

Comments

  • […] 用フォントについては、こちらのサイトを参考にさせて頂きました。  Web’Notes  見やすいフォントとは・・・フォント以外にも、web のデザイン関連の記事がわかりやすく記載されて […]

  • コメントを残す

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

    次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>