2025年8月8日に『Webフォント実践ガイド Google Fontsではじめる 美しく機能的なタイポグラフィ』を上梓された飯塚修平さん。UXエンジニアとしてさまざまなWebサイトの開発に携わり、特にアジア地域向けのWebサイトの制作に従事していた期間が長く、日本語および英語に限らず、韓国語、中国語、タイ語などさまざまな言語でのWeb制作を経験されています。

この記事では、飯塚さんに本書執筆の背景、そしてWebフォントの現在地と可能性についてお話を伺いました。

なぜWebフォントの本なのか

—⁠—飯塚さんは、ふだんはUXエンジニアとして活動していらっしゃいますよね。各国のサイトにかかわるなかで、業務とフォントの関係について考えることはありましたか？

多言語でのWeb制作というと、テキストをそれぞれの言語の翻訳に差し替えるだけと思われがちですが、実際にはそれだけではうまくいかないことが多々あります。言語ごとに微妙な特徴があって、それがもともとのデザインと干渉してしまうことがままあるんです。本書でも和欧混植（日本語と英語が混じった文章を組むこと）の難しさや言語によって変化する異体字の問題を取り上げましたが、Webサイトのコンテンツの大半を占めるテキストを各言語で違和感なく読ませるには知識と技術が必要です。こういった問題に取り組んできた経験は私にとってWebタイポグラフィの奥深さを知る良いきっかけとなり、それから文字とフォントの世界に惹き込まれていきました。

そんな折、Webフォントについて本を執筆するご提案をいただき、「⁠今までの経験とそこから得られた知識をまとめるいい機会かもしれない」と思い快諾しました。パソコンやスマートフォンで簡単にデジタルコンテンツが作れる今の時代、誰もがクリエイターです。そしてそこに文字がある限り、フォントの選択は万人に関わる課題だと考えています。そんなフォントにまつわる悩みを解決したり、文字に対する理解度を深める一助になればと思い筆を取りました。

—⁠—いわゆる「デザイン」のフォント本とは異なる内容ですよね。 執筆にあたって大変だった点は？

Webと文字にまつわる知識は広範にわたるため、これらを解説するための骨格となる構成を考えるのに苦心しました。文字コードや符号化文字集合などコンピューター・サイエンスの初歩的なトピックもあれば、書体やタイポグラフィなどデザインの側面やWebパフォーマンスにまつわるソフトウェア・エンジニアリングの側面、さらにはレイアウトのアルゴリズムには機械学習・AIの技術も関わってきます。本書ではさまざまな角度からWebフォントとその周辺を眺められるよう工夫しました。

Webフォントのいま

—⁠—Webフォントには現在どんな動きがありますか？

WebフォントおよびWebタイポグラフィの世界は今まさに進化を遂げている最中です。Google Fontsには日々新たな書体が追加されており、私たちの書体のパレットを豊かにしてくれています。この原稿を書く少し前にはTikTokが動画キャプション向けにデザインされたTikTok SansをGoogle Fontsでリリースし、話題になりました。これからも世の中の流行や最新のテクノロジーを取り入れたユニークでクリエイティブなフォントがどんどん追加されていくことでしょう。

フォントテクノロジーのなかでも特にいま注目されているのがバリアブルフォントです。バリアブルフォントは書体のウェイトや太さといったパラメータを自由にコントロールすることを可能にします。繊細な組版上の調整を可能にするだけでなく、文字が自在に変化する新たな視覚表現をも生み出せます。Googleが今年発表したデザインシステムであるMaterial 3 Expressiveでも、タップに反応して文字が大きくなる強調表示のアニメーションやアイコンの塗りつぶしによるステータスの表現などでバリアブルフォントの技術が活用されていることが見て取れます。これからもバリアブルフォントはよりリッチで直感的なユーザー体験を提供するために活用されていくでしょう。

Webプラットフォームも着実に進化を遂げており、テキスト関連の新たなCSSプロパティが生まれています。本書でもword-break: auto-phraseやtext-autospaceなどを取り上げましたが、Webで本格的な組版を実現するための技術が整いはじめています。我々が毎日のように目にするWebの世界が、より美しく機能的なタイポグラフィで彩られようとしています。

Webフォントがもたらすもの

—⁠—フォントというと、紙に印刷するプロダクトや広告といったデザインのイメージがありました。もちろん現在もその用途で使用されることも多いですが、Webフォント以前以後で、技術革新があるのでしょうか？

Webフォントが普及する前は、自分の思い通りに書体を使おうとすると文字を画像に埋め込んで使うのが一般的でした。フォントを配信するのに十分なインターネット環境が整備されてきたこと、WOFF2に代表されるフォント圧縮技術が普及したことなどが、Webフォントの普及を後押ししてきたと言えます。

Webフォントを配信してユーザーに届けられるようになったことで、さまざまなことが可能になりました。ひとつはよりアクセシブルな情報提供です。文字は画像にしてしまうと、その代替テキストを介さなければ文字コンテンツにアクセスできなくなってしまいますが、Webフォントならば、文字のセマンティクスを保ったままスクリーンリーダーに情報を提供できます。また、ユーザーが入力したテキスト、つまり動的なコンテンツに対しても思い通りの書体を使うことができるようになります。SNSの普及をはじめWebでの情報の双方向性が増しているいま、これも重要な性質と言えるでしょう。

—⁠—使用するときの落とし穴も？

ただし、Webフォントを活用する際には、常にWebパフォーマンスの問題がつきまといます。Webフォントによって著しくコンテンツの読み込みが遅くなったり、文字が読めない状態が続いたりするようでは本末転倒です。インターネット環境の品質にかかわらず最低限のユーザー体験を提供できるようブラウザの挙動を理解して適切に設計する必要があります。このあたりのテクニックについても本書で取り上げました。

このように、Webフォントの活用は書体の魅力を引き出すデザインの視点と、ユーザビリティを高めるエンジニアリングの視点の両方が必要になります。そのため、デザイナーとエンジニアがその垣根を超えて協働することが、Webフォントの真価を最大限に引き出すことにつながると考えています。本書の内容がチームのデザイナーとエンジニアの対話を促すきっかけとなれば幸いです。

まとめに代えて

—⁠—デザイナーやエンジニアの橋渡しとなるようにも考えられて執筆された本書、フォントの基礎知識から文字組み、絵文字の技術への言及もあり、フォント入門者から技術者まで幅広い読者を想定した内容となっています。ぜひ、ひと言お願いします！

Google Fontsの活用方法からタイポグラフィへのAIの応用まで、文字にまつわるさまざまなトピックを押さえた一冊になっていると思います。読んだ後に少しでも、身の回りにある文字に対する解像度が上がる体験が提供できれば望外の喜びです。文字に少しでも興味がある、Webタイポグラフィについて詳しく知りたい、といった方はぜひ本書を手に取ってみてください。