【コーディング】たったひとつの指定で印象がガラリと変わるフォントの話
初めてのお客様のホームページ公開が近づいてきました。
納品前チェックを行なっているところですが、フォントについて勉強不足だったので書き留めておこうと思います。
「ホームページの納品前チェック」って、
・ブラウザ、OS環境での動作確認
・不要なコード削除
・画像の整理（圧縮や不要な画像削除）
・title、descriptionの確認
など他にもやることがたくさんあるのですが、今回は「OS環境」でのチェックにて判明したお話です。
OSの罠
わたしは普段、iMacを使って仕事をしています。WEBデザイナーさんならば、macbook / iMac / iPad / iPhone などApple製品を使っている方多いのではないでしょうか。私もその一人ですが、納品チェックにあたって Windows / Android で自分が作ったホームページを見てみました。
一目見た感想は・・・
ダサい。
お客様に見せられない。
なんとかしなければ・・・！
このままでは納品できないと思いました。幸いお客様は、iPhoneユーザだったと、打ち合わせで一緒にホームページを確認する時も私のiPadだったためWindowsやAndroidで開いたことはありませんでした。
それにしても、原因は何なのか、ダサい印象はどこからくるのでしょうか？
こんなとき頼りになるのが、ガジェット系旦那です。
（彼についてはまたの機会にご紹介しますね。ほんとに頼りになるんです。）
ガジェット系旦那によると、ダサい原因は、
”フォントだよ〜”
とのことで、よくよく見てみてわかったのは、
Windowsでは、文字が細い
これだけで、ホームページが目も当てられないくらいダサくなっていました。そこで、フォントについて調べ直し、指定を改めました。
ホームページに指定するフォントには２種類あります。
１．標準フォント
OSにもともと備わっているフォント
２．webフォント
OSに備わっていないフォント
webフォントを指定することで、ユーザーごとのOSの標準フォントにはないフォントを表示させることが可能なのですが、webフォントはWeb上の文字を読み込むため、多用すると読み込み速度が遅くなるというデメリットがあります。なので、本文は標準フォント、タイトルや強調箇所はwebフォントを使い分けます。今回の問題は「標準フォント」の指定です。
ある指定方法を変えるだけで、劇的に変わりました！！
before
body {
font-family: 游ゴシック, YuGothic, "ヒラギノ角ゴ Pro W3",sans-serif;
font-weight: 300;
}after
body {
font-family: 游ゴシック, YuGothic, "ヒラギノ角ゴ Pro W3",sans-serif;
font-weight: 500;
}見やすさのために省略しているのですが、ポイントは
font-weight です。游ゴシックはwindowsにもmacにも存在するフォントですが、Windows環境では文字が細くかすれて見える場合があります。そこでfont-weight:500;を指定することで、かすれることなく見えるようになりました。これだけでオッケーです。
今回参考にした記事
おまけ
今回、装飾で明朝体を使いました。Android環境では、明朝体は標準フォントとして持っていないようで、表示させたければwebフォントを指定しないといけないことが判明しました。
私は、本文で明朝体は使わないようにしようと決意しました。どうしてもという場合は・・・その時調べようかな（^^）