Webサイトやスマホアプリで使用する日本語フォント、タイポグラフィに関する知識が身につくデザインの解説書

Post on:2021年2月26日

sponsors

ここまで詳しく解説された書籍はかなり貴重ですね！
パソコンやスマホのスクリーンで読みやすい文字組みとフォント、画像と文字の配置方法、Webフォントの効果的な使い方、アクセシビリティなど、オンスクリーンにおけるタイポグラフィを徹底的に学べるデザイン書を紹介します。

Webにおけるフォント、グリッドの使い方、スクリーンで読みやすいCSSの定義、Webフォントの最新状況など、デザイン的なタイポグラフィの知識だけでなく、レイアウトやWebフォントの実装テクニックも詳しく解説された良書です。

昨日、オンラインのイベントをやっていたので、目にした人も多いと思います。

フォントやタイポグラフィといえば紙媒体をターゲットにしたものでしたが、本書はWebサイトやスマホアプリのスクリーンに特化されたデザイン書です。

タイポグラフィやフォントが大好物なデザイナーにはもちろん、CSSによるフォントの定義やWebフォントを実装するコーダー、コンテンツでの文字表現やWebフォントの事例などはディレクターにも役立つアイデアが満載です。

オンスクリーンタイポグラフィ
事例と論説から考えるウェブの文字表現
ISBN 978-4-8025-1207-7
[Amazonでみる]
[楽天でみる]

著:: 伊藤庄平、佐藤好彦、守友彩子、桝田草一、カワセタケヒロ、ハマダナヲミ、きむみんよん、関口浩之、生明義秀
出版社:: ビー・エヌ・エヌ
発売日:: 2021/2/17

Kindle版も、同時発売！

オンスクリーンタイポグラフィ Kindle版

そんな紙面をキャプチャで少しだけ紹介します。

本書は8章構成で、9名の執筆者がそれぞれのテーマで論説をまとめ、文字の扱い方が特徴的なWebサイトやスマホアプリの事例も豊富に掲載されています。デスクトップ・タブレット・スマホでの表示も掲載されており、使用フォント、font-sizeとline-height、デバイスごとの行長文字数などの技術的な情報も記されています。

Webサイトやスマホアプリの見本帳として、文字がデザインでどのように活かされているのかを見るだけでも、かなり楽しめます。

もちろん、スクリーンにおけるタイポグラフィの知識も充実しています。現在の状況がていねいに解説されており、その中でよりよい文字をどのように実装すればよいかが分かります。

スクリーンにおけるタイポグラフィは、アクセシビリティが非常に重要です。デバイスやブラウザごとに異なる環境で最適なfont-sizeとline-height、font-familyの選び方や指定方法、視認性と可読性を確保しながらどのようにデザインすべきかが分かります。

最近では、UDフォントも増えてきました。また、多言語サイトを構築する際には多言語に対応するフォントを選ぶ必要があります。そういった情報も最新のものが詳しく解説されています。

実装面でもいろいろなテクニックが紹介されています。
画像化された文字を一切使用しない、和文と欧文で異なるフォントを採用する、画像にWebフォントをのせる、見出しと本文のフォントの使い分け、縦組みやルビ表示、疑似ボールドを使用しない太字など。

スマホなどの小さいスクリーンとデスクトップ用の大きなスクリーンでは、読みやすさが異なるフォントがあります。一見、スクリーン向きでなさそうなフォントでも実は意外と視認性に優れているフォントなども紹介されています。

Webフォントを提供しているサービスもかなり増えてきました。日本語フォントだと容量が、、、と敬遠してた人にはサブセット対応のサービスをお勧めします。サブセットは使用する文字だけのフォントファイルを提供するもので、例えば「筑紫Aオールド明朝 Pr6 R」約2万3000文字だと13MBですが、銀河鉄道の夜1-4章の全文だけにすると約200KBだけになります。