なぜfont-familyを指定しないのか

ほかのWordpressサイトさんを参考に日々カスタマイズしています。
いつも有難うございます。
偉大な先輩方のお陰で、試行錯誤しながらもなんとかやっていけてます。

ですが諸先輩の皆様、日本人を相手にするならfont-familyはせめてsans-serifに書き換えましょう。
sans-serif
つまりゴシック体です。このBlogの2バイト文字、ひらがなや漢字の部分です。
Wordpressの海外産テーマの多くはserifが指定されています。
serif
こちらは明朝体。このBlogの1バイト文字、数字やアルファベットの部分です。
カスタマイズした際に色んな見え方を確かめたくて、キモチワルイけどあえて混在させてます。
以前日本語の場合で書きましたが、このテーマもserif体だったので、元のserif体の後にヒラギノやメイリオ、そしてスマホ用フォントを追記して指定しています。
このBlogをPCのIE9、GoogleChrome、Sleipnirで見ていれば、数字はGeorgia、ほかはメイリオかヒラギノかゴシック体で表示されているハズです。(数字がHelvetica Neueで表示される方もいるかも)
フォント
webで明朝体って読みにくくないですか?
メイリオとヒラギノで表示させませんか?
Operaで見てるから変わらないとか言わずにちゃんと指定しませんか?
読みやすいフォントはユーザビリティにも繋がります。
ぜひfont-familyをゴシック体で指定しましょう。
個人的にはすべて明朝体のサイトは読みづらくて行きたくないです。

このBlogは前述の通りわざと混在させてますし、中には1バイト文字は明朝体がいい!というこだわりの方がいらっしゃるのも事実。
見出しやタイトルだけ明朝体にして差別化を図っている方も沢山いらっしゃいます。
なのですべてゴシック体で統一しろとは言いません。
せめて本文の2バイト文字くらいはゴシック体にしましょうよ。
せっかくWindowsにメイリオが入ったのに使わないなんて勿体無い!!
font-familyの指定なんて簡単です。
style.cssのfont:(もしくはfont-family: )のGeorgia,sans-serifなどと指定している場所を
“ヒラギノ 角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”, “メイリオ”, “Meiryo” “モリサワ新ゴR”, “Droid Sans”, HiraKakuProN-W3, Arial, “MS Pゴシック” sans-serif;
に書き換えるだけです。
ね、簡単でしょ?

ちなみに”モリサワ新ゴR”, “Droid Sans”, HiraKakuProN-W3,はスマホ用のフォントです。
スマホ用フォントが別に指定されている場合は、そこも書き換える必要があります。
Arialは英数のみのフォントですが、WinとMac両方に入っているゴシック体フォントなので入れています。
“MS Pゴシック”はメイリオを持ってないWinユーザー向けです。(このBlogでは記述していません)
フォントの表示は先に記述した順に適応されます。
この場合ヒラギノが最優先で、閲覧者のPCのフォントにヒラギノがない場合はメイリオが、メイリオもない場合はモリサワが、指定したフォントがすべてなければただのゴシック体が表示されます。
私の場合、MS製品(オフィス)を持っていてもMacユーザーはヒラギノで読みたいだろうと思ってヒラギノを最初に記述してますが
このサイトはメイリオなんだよ!
という方はメイリオが先でもいいと思います。

Firefoxユーザーで指定したけど変わらない!
という方はツール→オプション→コンテンツ→フォントと配色の右にある詳細設定で、自分の好きなフォントに変えましょう。
Firefox設定
上記はあくまでサンプルですので、色々試して好みのフォントで表示させましょう。
Operaは…知りません。頑張ってCSSを作ってください。

これからはwebフォントを使うサイトも増えてくると思います。
webフォントはちょっと難しそう…と思っている人でも、CSSが判ればある程度表示させるフォントを指定できます。
読みやすさのためにも、是非ゴシック体のフォントを指定しましょう。

スポンサードリンク
Pocket
LINEで送る

Bookmark the permalink.

コメントを残す

メールアドレスが公開されることはありません。

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

  • スポンサードリンク