4日目：webデザインの本を読む - DTPデザイナー、知識ゼロでWebデザイナーを目指す

書体とは

・一番いいことは読み手に「書体」を意識されないこと

書体に意識が行かずに内容・印象が上手に伝わることが良いデザイン。
＞「印象」が正確に伝わるの、大事。
書体がしっくり来ない時は印象が違うってことなんだね。

ウェブページのほとんどは「文字」

Web 書体選びのポイント！
・ナビゲーション：視認性
・見出し：協調性
・本文：可読性

日本語の斜体は、ウェブページではブラウザ上で斜体で表示する。
＞引用とかに使う

Webサイトの一行あたりに適した文字数
35〜40文字
＞とはいえ今は本文幅は可変のものがほとんどだよね

ブログなどの書体サイズ
＞
ブラウザだと 16〜18px程度
スマホで 14〜18px
一番小さくて12px

行間
＞紙よりちょいひろめか。
Line-Heightというらしいが、はて？dtpでつかったことないや

一文字づつのカーニング
＞CSSのletter-spacingでできる！
両はし揃えとかも、CSSでやる
Open type fontの一部では文字間隔の設定も可能。

・糸井重里のほぼ日は文字組みこだわってるらしいよ・・・

文字のアンチエイリアス
＞ Macのみ対応。winのもじがガビガビなのはモニターのさだけじゃなかったのね。

もじコード
・今は「UTF-8」選んどけば問題ないよ！！
今のウェブのスタンダードはこれ。
国際基準でもあるしHTML5でもUTF-8を推奨している。

HTMLファイル保存時
＞HTMLファイル上でもじコードを指定＆保存形式も同じにエンコードしないと
文字化けするよ

ブラウザ
＞ブラウザもまたエンコード指定がある。
文字化けはブラウザのエンコード指定が異なるときに起きる。

オープンタイプフォントの機能「プロポーショナルメトリクス」
＞カーニング、旧字体、分数、合字など。
DTPデザイナーには地味に嬉しい機能

適切なfont family の選び方
＞ブラウザごとの差異を理解する

・標準フォントが全部ゴシックだと思ったら大間違い。
古いSafariなんかは明朝だったりするよ。
＞Font family はCSSで先に書いた順から適用される。
CSSで「游ゴシック体＞でなければサンセリフで」という風に指定すれば
ブラウザごとに印象が超変わるのは避けれる。なるほど

＞CSSではフォント名は日本語、英語どちらでも指定する。
ブラウザごとに読み取れるのが英語だけだったり、日本語もいけたりバラバラの為

ヒラギノは色々あるから指定を間違えないように
だるいね。ProNとかね。

「游ゴシック」のMacとwinでは太さが違う
＞太さもCSSで表示しないと印象が変わってしまう

WEBフォント
＞サーバ上からフォントを呼び出して表示することでパソコンにないフォントも
表示できる！すごい！けど、
サイトが重くなるし、継続的に費用が発生しちゃうし、全然良いことない。
＞これはさすがにクソすぎワロタ・・・

とはいえ、wordpress上だとadobe type kitが一部使えるとか、だんだん広がってきてはいる。。
＞「サブセット化」して、文字の重い問題を解決できるらしい
※使っている書体だけ読み込む的な。

Webフォントを配布しているサービス、イッパイある。
Google fontsはただだからオススメ
日本語だと源ノ角ゴシック。