Background Decoration Top Left

書評「オンスクリーン タイポグラフィ 事例と論説から考えるウェブの文字表現」

October 12th, 2023

フロントエンド開発者にとってテキストのスタイリングは日常茶飯事である一方で、「良いテキストのデザインとは何か」について教えてくれる教材は多くない。 自分も正直どのようなCSSを書くのがデザイン的に見栄えがするのか、複数のデバイス間で一貫性のある見た目になるのか、 という点についてのベストプラクティスがわからず、趣味で作るWebサービスではやっつけで済ませることが多かった。
テキストのスタイリングやタイポグラフィに関する知識が無くてもWebサービスを作ることは可能だが、やっぱり見た目がしょっぱくなる。 これらの知識を学べる何か良い本が無いか、と本屋をさまよっていたら偶然「オンスクリーンタイポグラフィ」という本を見つけて購入した。
オンスクリーン タイポグラフィ 事例と論説から考えるウェブの文字表現 | 伊藤庄平, 佐藤好彦, 守友彩子, 桝田草一, カワセタケヒロ, ハマダナヲミ, きむみんよん, 関口浩之, 生明義秀 |本 | 通販 | Amazon
www.amazon.co.jp
Arrow
link
複数の章から構成されているが、どの章も解説+多数の事例の紹介という形式でさくっと読める。 最初はWebにおけるTypographyやfontの一般論から始まり、紙面との違い、アクセシビリティについて、WebFontについて、など様々な観点からベストプラクティスを紹介する形式になっている。
抽象的な良いデザインとは、のような議論は殆ど無い。 ユーザーに読みやすいコンテンツを提供するために、どのようなフォントの設定をするべきか、どうCSSを書くべきか、のような具体に近い話が多く開発者よりの人間でも非常に読みやすい。 それに加えて事例がふんだんに使われているので説得力もある。
個人的にはアクセシビリティの章がお気に入りだ。万人に対する読みやすさへの執念を感じる。 事例集としてデザインの参考にもなるので一冊買って読んでおくと将来困ったときに役に立ちそうだ。

実践

折角ベストプラクティスを学んだのでこのブログに反映してみた。主な変更点としては以下の通り。
  • 行長を短く。
  • font-familyの変更。
  • 文章のレイアウトの単位をremベースに変更。
  • hyphensプロパティやカーニング関連のプロパティを指定。
まだ行長が50文字を超えているせいか読みにくいところがあるが、そこそこ読みやすくなった気がする。

Share this page!

  • X Logo
  • Bluesky Logo
  • Hatena Logo

Next

Arrow

Ryeを試してみた

Previous

Arrow

AWS Solution Architect Professionalに合格した