『Webフォント実践ガイド Google Fontsではじめる 美しく機能的なタイポグラフィ』を読みました。

たまたま、Googleレコメンドに "Webフォント実践ガイド Google Fontsではじめる 美しく機能的なタイポグラフィ" の本へのリンクが流れてきました。
Webフォントの記事って、あまり見かけなかったのでAmazonでポチりました。
読んだ感想について簡単にまとめたいと思います。

リンク

出版社である技術評論社のリンクを以下に載せておきます。

Webフォント実践ガイド Google Fontsではじめる 美しく機能的なタイポグラフィ | 技術評論社

フォントの可能性を最大限に引き出すための実践的なガイドブック。 「フォント選びに自信がない」「ウェブサイトやアプリの表示が遅い」あるいは「最新のタイポグラフィ技術に追いつけていない」と感じていませんか？ ウェブサイトやアプリにおいてフォントの選択と最適化は、ユーザー体験の向上や表示速度の改善に直結するため、ウェブデザイナー、フロントエンドエンジニア、ビジュアルデザイナー、マーケター、アプリ制作者など、デジタルコンテンツ制作に携わるすべての人にとって避けて通れない重要な課題です。 本書は文字とフォントの基礎から、書体選び、そして美しく読みやすい文字組みとテキストレイアウトの具体的な手法までを解説します。さらに、Google Fontsを例に最先端のフォントテクノロジー、そしてコミュニケーションを深める絵文字の奥深い世界と、その最適化に至るまで、単なる知識に留まらず、現場で即座に活かせる実践的なノウハウと、一歩先を行く応用テクニックを網羅しています。 日本語のタイポグラフィとウェブフォントの知識を体系的に整理し、プロジェクトで正しく、そして最大限に効果を発揮できるようになることを目指します。 「文字の深い知識を習得したい」「クリエイティブに対し論理的な根拠に基づいた的確なフィードバックをしたい」「最新のウェブタイポグラフィ技術を効率的に学びたい」といった方に最適！

gihyo.jp

セリフとサンセリフ

セリフは、文字の線にあるひげっぽい装飾のことです。
サンセリフのサンは、フランス語で「〜のない」のという意味なので、サンセリフはセリフのない文字となります。

よく CSSのfont-familyで serif や sans-serif と書いていたのですが、これはセリフ体のフォントやサンセリフ体のフォントを指していたのですね。
ブラウザに内蔵されているセリフ体やサンセリフ体を出すという指示だと理解しました。
以下の記事によれば、

2026年に最適なfont-familyの書き方 - ICS MEDIA

ウェブサイトのフォントは何を指定すればよいのでしょうか。CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。font-familyの組み合わせを紹介している記事は多々あります。

ics.media

2025年4月、Windows Updateにより「Noto Sans JP」がWindows 11に標準搭載されました。いまではChrome・Edgeのsans-serifには「Noto Sans JP」が割り当てられています。

Windows 11 の sans-serif に Noto Sans JP が割り当てられたようです。
どこかで話題になっていたのは知っていたのですが、よくわかっていませんでした...。

font-family で関連すると system-ui というOSのUIフォントを使うとのことです。
Mac だと San Francisco というそうです。

フォントの字体や字間

以下のレタースペーシングの本でも似た話が多かったです。

『レタースペーシング タイポグラフィにおける文字間調整の考え方』を読みました。

書店の本棚を眺めていると、「レタースペーシング タイポグラフィにおける文字間調整の考え方」というタイトルが目に留まりました。興味を引かれ、手に取って購入しました。読み終えたので、その感想をまとめます。

silverbirder.github.io

フォントの文字の形を表す絵のことを字体（グリフ）と呼ぶそうです。
フォントの種類によって字体は違っていて、それぞれコンセプトに沿ったデザインがされています。

欧文の場合、ベースラインと呼ばれる小文字のxの下線を基準として文字が並べられます。
和文の場合、四角形の仮想的な領域を確保して、文字が並べられます。
そのため、欧文と和文を混ぜた文章を表示すると、上下がガタガタしてしまったり、左右のスペース差が揃わなかったりします。
和文フォントに欧文フォントが入っている（従属欧文）であれば、その辺りの最適化はなされています。

よく、ブログ記事を書いていると英語の単語を書くときは、間に半角スペースを入れるような校正を受けたことがあるのですが、
これは 英語の日本語の字間のスペースを調整していた意図 があったようです。

また、日本語には 「ふところ」と呼ばれる正方形の内側の空間を指す言葉あり、これが狭いと引き締まった印象、逆に広いと おおらかな印象になります。
ほかに、「重心」と呼ばれる文字のバランスの中心線があり、それが高いと品格を生み、低いと安定感があるそうです。

No Tofu

文字を表示する際に、その文字に対応するフォントがない場合、四角形の豆腐が表示されます。
この豆腐をなくす（No Tofu）、全ての言語で文字化けを防ぐために、Googleが開発したオープンソースのフォントファミリーのプロジェクトを Noto と呼ぶそうです。
そのうち、中国語（Chinese）、日本語（Japanese）、韓国語（Korean）を集めた、Noto Sans CJK が Adobe と共同開発して生まれたようです。
Noto Sans Japanese なのか Noto Sans JP なのか経緯は知りませんが、 Notoプロジェクトの日本語フォントファミリーの Noto Sans JP と理解しました。

CJKってどこかで見た覚えがあるなと思ったら、CSSの word-break プロパティでした。

• normal
  • 既定の改行規則を使用します。
• break-all
  • CJK (中国語、台湾語、日本語、韓国語) 以外のテキストにおいて、単語中などでの文字の改行に関する禁則処理を解除し、どの文字の間でも改行するようにします。
• keep-all
  • CJK テキストの改行を許可しません。 CJK 以外のテキストについては normal と同じ挙動となります。

禁則処理について、Wikiによると

禁則処理 - Wikipedia

ja.wikipedia.org

禁則処理（きんそくしょり）とは、漢字文化圏の文書作成・組版における禁止事項、または、それらを回避するために字詰めや文の長さを調整したりすること。 例えば、句読点（。、）や閉じ括弧（」』)】など）と言った約物は、当該文章の行頭に位置させてはならない。

小学校の国語の授業で学んだような？気がします。（多分）
break-all はCJK以外の単語中の禁則処理がなくなる、ということだったのですね。
日本語のWebサイトで、指定箇所へ改行したいという小技で、<wbr>とword-break: keep-all; を使っていましたが、日本語テキストの改行を許可しないという意味だったのですね。そこで、wbrで改行位置を示すという感じなのですね。

異体字

異体字 とは、文字の意味や読みは同じだけど字体が違う字のことを言います。 よく、斎藤さんの"斎"という字がそれです。
フォントの仕組みの観点から言うと、異体字といってもパターンがいくつかあるようです。
もう一度、本を読まないと説明できないぐらいです...。

これ、多言語対応をする際のフォントというのがなんだか大変そうな印象です。
表示したい字体を表示するための創意工夫というのが、まだハッキリよくわかりません。
ちなみに、PCの言語設定が英語でHTMLの言語未指定の場合、日本語は中国語のフォントがフォールバックされるようです。（？）
HTMLの言語設定は大事ですね...。

バーティカルリズム

この単語は、以前より知っていました。
テキストの行や、行間の高さなど 高さの大きさを一定の倍数で整えることで、
縦のリズムが生まれて、視覚的に統一感がとれよみやすくなる、というデザインです。

私のブログページ https://silverbirder.github.io/blog/ の罫線付きノートデザインは まさにこれです。
1行の高さを罫線として表現し、この罫線の上に文字が乗るように調整しています。

終わりに

Web フォントについて体系的にまとまっているので、知らないことや知っていることが整理されました。
凸凹とした山が綺麗に整った感じです。
良い本でした！

P.S

付録に budoux の紹介がありました。
OG画像のタイトルに、budouxを使わせてもらっています。
そのbudouxを作った人が、この本の著者の方だったんですね、すごい...!