フォントファミリーは簡素でいい

見出し右端の記号は?

Web Page
Booskanium's Tips.
忘れっぽい落書き人のメモ
用途に応じてフォントの総称指定

難しく考えずに、用途に応じてフォントの総称*1で指定するだけで良いと考えています。

  • 小さな文字でも読みやすいのがセリフ無し(ゴシック体)の「sans-serif」です。
  • セリフ有り(明朝体)の「serif」を使う場合は、小さな文字がパソコン*2では綺麗に見えませんので要注意です。
  • プロポーショナルではなく等巾フォントで表示させたい場合は「monospace」です。
  • 筆記体と装飾フォントは総称で指定してもブラウザが対応していません。
    ですので使いたい場合はfont-familyで指定する必用があります。かつ指定したフォントがすべてのデバイスに入っているかとなると絶望的です。
    そこでウェブフォントを利用することになります。
フォントの総称 フォントの分類 適用されるフォント
sans-serif ゴシック体 Arial,メイリオ,ヒラギノ角ゴシック など
serif 明朝体 Times,MS P明朝,ヒラギノ明朝 など
system-ui OSのUIフォント San Francisco,Yu Gotdic UI,Meiryo,ヒラギノ角ゴシック など
monospace 等幅フォント MSゴシック,MS明朝,Osaka-Mono など
cursive 筆記体 Comic Sans MS,Script など
fantasy 装飾フォント alba,Chick など
ウェブフォントを指定する方法

サーバー上にあるフォントをダウンロードして表示させる仕組みです。
利点はウェブ作成者が用意したフォントで表示されます。
短所は、日本語フォントは文字数が多くサイズが大きい事です。通信が遅い環境ではウェブフォントで表示されるまで時間がかかります。スマホの場合は通信パケット料金も気になります。
それでも、今はGggoleが日本語のウェブフォントをCDN*3で提供してくれています。光回線なら短所は気になりません。スマホも5Gパケット量無制限が当たり前になれば実用的かもしれません。

Google日本語フォント
https://googlefonts.github.io/japanese/

ウェブフォントのサイズを小さくして提供する方法

ウェブページの中で使われている文字だけのフォント文字だけでフォントのサブセットを作成して、ダウンロードして表示させる仕組みがあります。
この手法なら作成者が用意したフォントで閲覧してもらう事ができます。フォントのサブセットも小さくさっていますので通信量をあまり気にならなくなる場合もあります。
欠点はコンテンツが動的に変わるサイトには適用できないことです。コンテンツがある程度固定化出来るようなサイトのみ有効な方法です。