用途に応じてフォントの総称指定
用途に応じてフォントの総称で
デザイナーさんがカンプで具体的なフォントを指定していない場合は、難しく考えずに用途に応じてフォントの総称*1で指定するだけで良いと考えています。
- 小さな文字でも読みやすいのがセリフ無し(ゴシック体)の「sans-serif」です。
- セリフ有り(明朝体)の「serif」を使う場合は、小さな文字がパソコン*2では綺麗に見えませんので要注意です。
- プロポーショナルではなく等巾フォントで表示させたい場合は「monospace」です。
-
筆記体と装飾フォントは総称で指定してもブラウザが対応していません。
font-familyで指定しても、すべてのデバイスに入っているかとなると絶望的です。
その場合はウェブフォントを利用することになります。
-
フォントの総称フォントの分類適用されるフォント
-
sans-serifゴシック体Arial，メイリオ，ヒラギノ角ゴシック など
-
serif明朝体Times，MS P明朝，ヒラギノ明朝 など
-
system-uiOSの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フォントからフォントを選ぶ
Webフォントで充足できない凝ったタイポグラフィ表現の場合
この場合は、その表現したい部分をIllastratorなどで文字を配置＆アウトライン化したSVGを作成しています。このSVGをイメージとしてウェブページ上に表示する事にしています。
imgタグのalt属性に文字情報を記述しておくことで、コピー＆ペーストで文字情報が取得できますので、テキストであることの利便性は落ちません。
ウェブフォントのサイズを小さくして提供する方法
ウェブページの中で使われている文字だけのフォント文字だけでフォントのサブセットを作成して、ダウンロードして表示させる仕組みがあります。
この手法なら作成者が用意したフォントで閲覧してもらう事ができます。フォントのサブセットも小さくさっていますので通信量をあまり気にならなくなる場合もあります。
欠点はコンテンツが動的に変わるサイトには適用できないことです。テキストコンテンツが固定化出来るようなサイトのみ有効な方法です。