「Webサイト制作のワークショップ」のメモです。
デバイスによって表示されるフォントは異なる。ゴシック系や明朝系という指定をするのが基本。ある程度デバイス共通フォントもでてきたが、ウエイトも含めるとまだ完全ではない。Webサイトでのテキストは、あくまでも情報であり、デザイナーの意図した見え方に固定できるものではなく、改行位置も異なる。グラフィックデザインのようにデザインの一部として扱う場合はテキストを画像にする。
enjoy!
フォントサイズのサンプル
テキストサイズは、本文で14/16/18px。行間は1.5em〜1.8emをひとつの基準とする。ユーザー側でテキストサイズを変更できるように、px ではなく em/rem で指定する。
- px（ピクセル）｜絶対指定｜固定サイズ
- em（エム）｜相対指定｜親要素を基準として計算したサイズ
- rem（ルートエム）｜相対指定｜常にroot（html）を基準として計算したサイズ
html {
font-size: 62.5%;
}
ブラウザのデフォルトサイズ 16px を 62.5％ に縮小することで 10px となる。 root（html）のサイズを 10px にすることで、フォントサイズを直感的に指定できるようになる。
- 1.8rem｜18px｜本文として決して大きすぎるとはないサイズ
- 1.6rem｜16px｜ブラウザのデフォルトサイズ
- 1.4rem｜14px｜サブ扱いの短いテキストとして使えるサイズ
- 1.2rem｜12px｜日本語のテキストサイズとしては厳しい。欧文はCopyright表記などに使えるサイズ。
- 1rem｜10px｜読むテキストとしては厳しいサイズ
スクリーンによってピクセル密度が違うので、同じ 18px でも実寸は違う。制作側のPC環境でデザインが固定されるのではなく、テキストは常に可変されるものであることを認識しておく。テキストサイズが変われば、その親要素のボックスサイズも変更されるので、デザインレイアウト自体も常に変わっていく。
魔法のテキストカラー
たとえばWebサイトのロゴがブラックの場合、テキストカラーもブラックに統一した方がトーンマナーを統一できる。そういった場合をのぞいて、テキストカラーがブラック「color: #000」では少し重いので、「color: #555」を指定する。白背景とのコントラストが弱まって印象が少し軽くなる。
日本語のWebフォント
Webフォントという、サーバーからフォントデータ自体を読み込んでしまう方法もある。そうすればどのデバイスでも同じフォントで表示される。
欧文はデータ量が少ないが、日本語は漢字などを含めると数万文字以上のデータ量を必要とする。スマホで10MBのWebフォントのデータを読み込むのは、Webサイトの表示時間の足かせとなる。
多くのWebサイトで同じWebフォントが使われるようになれば、Webフォントのデータはローカルにキャッシュされるので、再度読み込む必要がなくなる。他のWebサイトでキャッシュされたフォントデータを自サイトでも利用できるということ。
フォントに限らず、ライブラリデータは CDN（コンテンツ・デリバリー・ネットワーク）を使って読み込むのがベター。
Google と Adobe の共同フォント。1ウエイト10MBほど
Noto Sans CJK JP
欧文のWebフォント
欧文のWebフォントは比較的充実している。Adobe の「Typekit」や Google の「Google Fonts」がベター。
すべてのデバイスで使えるバリアブルフォント
現在、Adobe、Apple、Google、Microsoft が共同でバリアブルフォントを開発中。文字の骨組みから自由に肉付けを行って、さまざまなウエイトを作れるというもの。
Webセーフカラー
スクリーンによって色温度やカラープロファイルが違う。個体差もある。Windows/Mac で色味が変わらないとされていた216色のWebセーフカラーは、8bit（256色）時代のこと。16bit（65,536色）以上の環境では、セーフカラーは関係ない。CMYKと同じように、パステルカラーやペールトーンは色転びしやすい傾向がある。
テキスト色や装飾の意味
ブルーのテキストや、アンダーラインがついたテキストはリンクを意味する。グレーはグレーアウト（クリックできない箇所）の意味。
