フォントまわりのcss。快適で心地よい、読ませるwebページとは。

2019.06.05

#css #WEBサイト改善メモ #デザインメモ

本のようにサラサラっと気持ちよく読んでもらえるページとは？を、コーダー目線で考えたときにまず思いつくのが、フォントに関するcssです。

よく見る綺麗なフォントいろいろ

游書体、NOTOSANS。
サイズ、太さ、色など同じ条件でメイリオやヒラギノと並べてみました。

だいぶ雰囲気が変わります。

游書体やNOTOSANS、IEで見ると文字の下になぞの余白が。
ボタンなどではこんな風に。あらら・・目立つ・・。

IEで余白を調整する方法もありますが、ボタン部分（.button）だけは、別のフォントを指定するという方法。CSSハック登場。

/*IE11*/
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .button {
font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
  }
}

すべての文字を他のフォントに変えてしまうとこのフォントを使う意味がないというか本末転倒な気がするし、他のブラウザではきちんと表示されているにも関わらずすべての余白を調整するのも大変です。
ボタンだけフォントを変える方が後から見てもわかりやすい気がします。
ベストプラクティスは一体・・

APPLEのシステムフォント「San Francisco」

APPLEのシステムフォント「San Francisco」は、APPLEWATCHのような小さな画面でもつぶれずに、ガジガジせず綺麗。

body {
  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
}

「-apple-system」は英書体のフォント。「BlinkMacSystemFont」はWebKit（レンダリングエンジン）用フォント。いずれも「San Francisco」が指定されます。
上の記述では、先の2つが適用されないケースでApple用の英字フォント「Helvetica Neue（ヘルベチカ・ノイエ）」が。「sans-serif」はなんとなく入れました。

SFフォントについて、勉強になった記事。
San Francisco フォントを探る

フォントひとつで印象が変わります。
でも、フォントはコロコロと変えるものではなく長ーくお付き合いするものとして、最初にしっかりと考えたいところ。