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

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

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

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

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

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

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

本のキャプチャ

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

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

Kindle版も、同時発売!

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

最近は縦書きのサイト、縦書き横書き混在のサイトも増えてきました。また、フォントも角ゴシックだけでなく、丸ゴシックや明朝体などを使用したサイトも増えており、これからますます需要が高まります。

誌面のキャプチャ

各デバイスごとのフォントサイズも気をつけたいですね。ブレイクポイントを定義して各デバイス用のフォントサイズを定義する実装方法やcalc()関数で定義する実装方法もあります。
参考: レスポンシブ対応のフォントサイズを指定するこれからのテクニック
参考: CSSのcalc()関数で、レスポンシブ対応のfont-sizeを可変にするスタイルシートを簡単に生成できる無料ツール

オンスクリーンタイポグラフィの目次

オンスクリーンタイポグラフィの目次

オンスクリーンタイポグラフィの目次

Webサイトやスマホアプリで使用するフォント、タイポグラフィに関する知見が深まる一冊です。今までは紙媒体をターゲットにしたものしかありませんでしたが、ここまで考察された書籍はかなり貴重だと思います。

本のキャプチャ

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

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

献本の御礼

最後に、献本いただいたビー・エヌ・エヌの担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

sponsors

top of page

©2021 coliss