TakahiroNakamori

TakahiroNakamori

中森崇博(ナカモリタカヒロ)

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 font-size: 0.625rem; コピーしました
0.6875 rem 11 px css font-size: 0.6875rem; コピーしました
0.75 rem 12 px css font-size: 0.75rem; コピーしました
0.8125 rem 13 px css font-size: 0.8125rem; コピーしました
0.875 rem 14 px css font-size: 0.875rem; コピーしました
0.9375 rem 15 px css font-size: 0.9375rem; コピーしました
1.0 rem 16 px css font-size: 1.0rem; コピーしました
1.0625 rem 17 px css font-size: 1.0625rem; コピーしました
1.125 rem 18 px css font-size: 1.125rem; コピーしました
1.1875 rem 19 px css font-size: 1.1875rem; コピーしました
1.25 rem 20 px css font-size: 1.25rem; コピーしました
1.3125 rem 21 px css font-size: 1.3125rem; コピーしました
1.375 rem 22 px css font-size: 1.375rem; コピーしました
1.4375 rem 23 px css font-size: 1.4375rem; コピーしました
1.5 rem 24 px css font-size: 1.5rem; コピーしました
1.5625 rem 25 px css font-size: 1.5625rem; コピーしました
1.625 rem 26 px css font-size: 1.625rem; コピーしました
1.6875 rem 27 px css font-size: 1.6875rem; コピーしました
1.75 rem 28 px css font-size: 1.75rem; コピーしました
1.8125 rem 29 px css font-size: 1.8125rem; コピーしました
1.875 rem 30 px css font-size: 1.875rem; コピーしました
1.9375 rem 31 px css font-size: 1.9375rem; コピーしました
2 rem 32 px css font-size: 2rem; コピーしました
2.0625 rem 33 px css font-size: 2.0625rem; コピーしました
2.125 rem 34 px css font-size: 2.125rem; コピーしました
2.1875 rem 35 px css font-size: 2.1875rem; コピーしました
2.25 rem 36 px css font-size: 2.25rem; コピーしました
2.3125 rem 37 px css font-size: 2.3125rem; コピーしました
2.375 rem 38 px css font-size: 2.375rem; コピーしました
2.4375 rem 39 px css font-size: 2.4375rem; コピーしました
2.5 rem 40 px css font-size: 2.5rem; コピーしました
2.5625 rem 41 px css font-size: 2.5625rem; コピーしました
2.625 rem 42 px css font-size: 2.625rem; コピーしました
2.6875 rem 43 px css font-size: 2.6875rem; コピーしました
2.75 rem 44 px css font-size: 2.75rem; コピーしました
2.8125 rem 45 px css font-size: 2.8125rem; コピーしました
2.875 rem 46 px css font-size: 2.875rem; コピーしました
2.9375 rem 47 px css font-size: 2.9375rem; コピーしました
3 rem 48 px css font-size: 3rem; コピーしました
3.0625 rem 49 px css font-size: 3.0625rem; コピーしました
3.125 rem 50 px css font-size: 3.125rem; コピーしました
3.1875 rem 51 px css font-size: 3.1875rem; コピーしました
3.25 rem 52 px css font-size: 3.25rem; コピーしました
3.3125 rem 53 px css font-size: 3.3125rem; コピーしました
3.375 rem 54 px css font-size: 3.375rem; コピーしました
3.4375 rem 55 px css font-size: 3.4375rem; コピーしました
3.5 rem 56 px css font-size: 3.5rem; コピーしました
3.5625 rem 57 px css font-size: 3.5625rem; コピーしました
3.625 rem 58 px css font-size: 3.625rem; コピーしました
3.6875 rem 59 px css font-size: 3.6875rem; コピーしました
3.75 rem 60 px css font-size: 3.75rem; コピーしました
3.8125 rem 61 px css font-size: 3.8125rem; コピーしました
3.875 rem 62 px css font-size: 3.875rem; コピーしました
3.9375 rem 63 px css font-size: 3.9375rem; コピーしました
4 rem 64 px css font-size: 4rem; コピーしました

行間について

まず、body に line-height: 1; を設定します。

行間コピーしました
body {
  line-height: 1;
}

そして、見出し、本文など個別に行間を設定します。

line-height の値は 1.0 〜 2.0 くらいまでに収めるといいかもしれない。