フォントサイズ、余白の指定方法について

Question

コーディング・フロントエンドの仕事をされている方に質問があり投稿しました。

フォントサイズの指定方法

・px、remなど、何で指定していますか？

調べていると、remであればユーザーがブラウザのデザインで文字の大きさを変更しても対応できるようだったので、
基本的に下記のようにremで指定しました。
文字を大にするとレイアウトがどうしても崩れてしまう所は、px指定にしました。
このようにpxとremが混在するのは問題ないのでしょうか？

余白などの指定についても、文字の大きさで影響がある高さなどはremで指定したのですが、
余白が可変する必要がない所はpxで指定しました。
問題ないでしょうか？
人によって違うようですが、皆さまはどうされていますか。

html {
  font-size: 62.5%;
}
body {
  font-size: 1.6rem;
}
.class-name {
 font-size: 2rem;
}

webフォントの読み込み

Googleフォント等のwebフォントを使用する場合、CDNを使用されていますか？
ダウンロードして使用されていますか？
CDNは表示速度が遅くなってしまうので使わない方がいいのでしょうか？
（jsもCDNを使用していました）

補足情報

仕事での使用です。

Answer 1

CDNは表示速度が遅くなってしまうので使わない方がいいのでしょうか？

むしろ、（ロゴタイプなど使う文字が決まっていて固定的にサブセット化できるのでなければ）WebフォントこそCDNを使うべきです。

Googleから日本語対応のNoto Fontsのような大きなフォントを参照しようとすると、フォントがいくつかに分割されて、必要なものから順にダウンロードが走ることで、ロード時間を軽減するような処理が組まれています。同様のことを全部1本になった通常のフォントファイルから再現するのは大変です。

Comments

[f_e_beginner]

ありがとうございます！このままwebフォントを使用しようと思います。

Answer 2

個人的には、フォントサイズはclamp()を使って、下限と上限を設けたvw単位で指定するのが好きです。
vw単位には1行に何文字入るのかを制御しやすい（＝レイアウトが崩れにくい）というメリットがありますが、そのまま使ってしまうと判読が難しいぐらい小さくなってしまったり、デザイン性を壊すぐらい大きくなってしまうことがあります。
clamp()を使って下限と上限を設けることで、このデメリットを消すことができます。なにより、メディアクエリを使わなくていいのが好きです。

clamp() - CSS: カスケーディングスタイルシート | MDN

Comments

[f_e_beginner]

自動で可変してくれるので、自然なサイズになって良いですね。
今回はデザインでブラウザ幅でフォントサイズが決まっているので、デザインも自分でする場合はぜひ利用したいと思います。