08
文字(フォント)の種類、大きさ、単位、行間について
【作成日】 2021/08/17 16:53 【更新日】
文字(フォント)の種類について
基本形は以下のスタイルで進めます。
フォントの種類を指定コピーしました
font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
Window のメイリオを変えたい、明朝体を使いたい、どうしてもウェブフォントを使いたい場合は、その都度考えます。また、Windows での閲覧時はメイリオが設定されるので、Mac でビジュアルデザインを作成した場合見た目は随分変わるので、確認しておく必要があるかもしれない。
文字詰めについて
文字詰めしたい場合は下記のように font-feature-settings を指定します。
文字詰めコピーしました
font-feature-settings: "palt" 1;
上記の font-family の指定だとメイリオだけ文字詰めはできない。Mac や iOS, Android(一部を除く)では文字詰めできます。palt で句読点が詰まって読みづらいときは、別の指定である pwid (プロポーショナル字形に置き換える指定)や pkna (仮名や仮名関連の字形セットをプロポーショナル字形に置き換える指定)という値を使うなどを検討します。また、メイリオでも文字詰めしたい、字間が詰まりすぎているときは letter-spacing で調整することも検討します(しかし、letter-spacing はあまりいい感じにはならない)。
文字の大きさについて
文字の大きさについては、html タグに基本サイズ(16px)を指定し、その他は rem で指定します。
文字の大きさコピーしました
html { font-size: 16px; } body { font-size: 1rem; }
基本サイズ(16px)を指定した場合 px と rem を表にしたものが以下の表です。
rem | px | css |
---|---|---|
0.625 rem | 10 px | css |
0.6875 rem | 11 px | css |
0.75 rem | 12 px | css |
0.8125 rem | 13 px | css |
0.875 rem | 14 px | css |
0.9375 rem | 15 px | css |
1.0 rem | 16 px | css |
1.0625 rem | 17 px | css |
1.125 rem | 18 px | css |
1.1875 rem | 19 px | css |
1.25 rem | 20 px | css |
1.3125 rem | 21 px | css |
1.375 rem | 22 px | css |
1.4375 rem | 23 px | css |
1.5 rem | 24 px | css |
1.5625 rem | 25 px | css |
1.625 rem | 26 px | css |
1.6875 rem | 27 px | css |
1.75 rem | 28 px | css |
1.8125 rem | 29 px | css |
1.875 rem | 30 px | css |
1.9375 rem | 31 px | css |
2 rem | 32 px | css |
2.0625 rem | 33 px | css |
2.125 rem | 34 px | css |
2.1875 rem | 35 px | css |
2.25 rem | 36 px | css |
2.3125 rem | 37 px | css |
2.375 rem | 38 px | css |
2.4375 rem | 39 px | css |
2.5 rem | 40 px | css |
2.5625 rem | 41 px | css |
2.625 rem | 42 px | css |
2.6875 rem | 43 px | css |
2.75 rem | 44 px | css |
2.8125 rem | 45 px | css |
2.875 rem | 46 px | css |
2.9375 rem | 47 px | css |
3 rem | 48 px | css |
3.0625 rem | 49 px | css |
3.125 rem | 50 px | css |
3.1875 rem | 51 px | css |
3.25 rem | 52 px | css |
3.3125 rem | 53 px | css |
3.375 rem | 54 px | css |
3.4375 rem | 55 px | css |
3.5 rem | 56 px | css |
3.5625 rem | 57 px | css |
3.625 rem | 58 px | css |
3.6875 rem | 59 px | css |
3.75 rem | 60 px | css |
3.8125 rem | 61 px | css |
3.875 rem | 62 px | css |
3.9375 rem | 63 px | css |
4 rem | 64 px | css |
行間について
まず、body に line-height: 1; を設定します。
行間コピーしました
body { line-height: 1; }
そして、見出し、本文など個別に行間を設定します。
line-height の値は 1.0 〜 2.0 くらいまでに収めるといいかもしれない。