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

見出し右端の記号は?

 
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 など

ウェブフォントを指定する方法

サーバー上にあるフォントをダウンロードして表示させる仕組み

利点はウェブ作成者が用意したフォントで表示されます。
短所は、日本語フォントは文字数が多くサイズが大きい事です。通信が遅い環境ではウェブフォントで表示されるまで時間がかかります。スマホの場合は通信パケット料金も気になります。
それでも、今はGooleが日本語のウェブフォントをCDN*3で提供してくれています。光回線なら短所は気になりません。スマホも5Gパケット量無制限が当たり前になれば実用的かもしれません。
また、コンテンツのBrotli圧縮に対応しているウェブサーバーが増え始めましたので日本語ウェブフォントを試してみるのも良いかと思われます。

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

GoogleのWebフォントから必要な文字のフォントだけをダウンロード

特定の文字だけを強調表示させたい時に便利です。
特定文字フォントだけのダウンロードですので応答時間を気にする必要がない。

実例:「前橋市 さくらが咲く風景

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Potta+One&display=swap&text=前橋市さくらが咲く風景">
<p style="font-family: 'Potta One', cursive;">前橋市さくらが咲く風景</p>

GoogleのWebフォントからフォントを選ぶ

https://fonts.google.com/

Webフォントで充足できない凝ったタイポグラフィ表現の場合

この場合は、その表現したい部分をIllastratorなどで文字を配置&アウトライン化したSVGを作成しています。このSVGをイメージとしてウェブページ上に表示する事にしています。
imgタグのalt属性に文字情報を記述しておくことで、コピー&ペーストで文字情報が取得できますので、テキストであることの利便性は落ちません。

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

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