Webサイトやスマホアプリで使用する日本語フォント、タイポグラフィに関する知識が身につくデザインの解説書
Post on:2021年2月26日
sponsors
ここまで詳しく解説された書籍はかなり貴重ですね！
パソコンやスマホのスクリーンで読みやすい文字組みとフォント、画像と文字の配置方法、Webフォントの効果的な使い方、アクセシビリティなど、オンスクリーンにおけるタイポグラフィを徹底的に学べるデザイン書を紹介します。
Webにおけるフォント、グリッドの使い方、スクリーンで読みやすいCSSの定義、Webフォントの最新状況など、デザイン的なタイポグラフィの知識だけでなく、レイアウトやWebフォントの実装テクニックも詳しく解説された良書です。
昨日、オンラインのイベントをやっていたので、目にした人も多いと思います。
フォントやタイポグラフィといえば紙媒体をターゲットにしたものでしたが、本書はWebサイトやスマホアプリのスクリーンに特化されたデザイン書です。
タイポグラフィやフォントが大好物なデザイナーにはもちろん、CSSによるフォントの定義やWebフォントを実装するコーダー、コンテンツでの文字表現やWebフォントの事例などはディレクターにも役立つアイデアが満載です。
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だけになります。
最近は縦書きのサイト、縦書き横書き混在のサイトも増えてきました。また、フォントも角ゴシックだけでなく、丸ゴシックや明朝体などを使用したサイトも増えており、これからますます需要が高まります。
各デバイスごとのフォントサイズも気をつけたいですね。ブレイクポイントを定義して各デバイス用のフォントサイズを定義する実装方法やcalc()関数で定義する実装方法もあります。
参考: レスポンシブ対応のフォントサイズを指定するこれからのテクニック
参考: CSSのcalc()関数で、レスポンシブ対応のfont-sizeを可変にするスタイルシートを簡単に生成できる無料ツール
オンスクリーンタイポグラフィの目次
オンスクリーンタイポグラフィの目次
Webサイトやスマホアプリで使用するフォント、タイポグラフィに関する知見が深まる一冊です。今までは紙媒体をターゲットにしたものしかありませんでしたが、ここまで考察された書籍はかなり貴重だと思います。
献本の御礼
最後に、献本いただいたビー・エヌ・エヌの担当者さまに御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors
