文字が決まればデザインも決まる！ 達人に訊く書体のこだわり

文字のあるところにフォントあり。デザインやことばの印象は、フォントや文字の選び方と組み方で決まります。エディトリアルや広告などさまざまなフィールドの第一線で活躍されているグラフィックデザイナーに、文字と書体の扱い方をじっくりと取材しました。またフォントメーカー等、フォントや環境を提供する側のお話もあわせて収録しているので、より理解を深めることができます。書体選びのコツからオリジナル文字のデザインまで、実例作品を通じ、タイポグラフィがすーっと理解できる1冊です。

フォントのお話をうかがった19組

◎ブランディングとフォント

日本デザインセンター｜色部義昭 、canaria、ライツデザイン｜中市 哲、DODO DESIGN｜堂々 穣、MIMIGURI｜今市達也、TBSテレビ デザインセンター｜團野慎太郎、タイププロジェクト｜鈴木 功

◎ブックデザインとフォント

川名 潤、nipponia｜山田和寛、tento｜漆原悠一、戸田デザイン研究室｜戸田 靖、BALCOLONY.｜太田規介 / 三井恵介、AYOND｜佐々木 俊、cozfish｜祖父江 慎

◎雑誌、Webデザインとフォント

ビーワークス｜佐伯麻衣 / 嶽野甲子郎、ma-hgra｜田中清賀、primary inc.,｜山田幸廣 / 神永愛子 / 東妻詩織、モリサワ｜小田秀幸 / 原野佳純、SBテクノロジー｜関口浩之（掲載順）

世界はフォントに満ち溢れている！

書体知識をゼロから学べる、

欧文フォント擬人化マンガ登場!!

ここは小さなデザイン事務所。

ある日とつぜんデザイナーが失踪し、

代わりにロゴデザインを引き受ける羽目になった営業担当の丸栖（まるす）。

書体知識ゼロのまま悩む彼女のもとに現れたのは……。

日用品やあの有名企業のロゴなど、身近なところにいる欧文フォント。

もしそんな彼らと喋ることができたら……

本書では、4コママンガやコラムでそれぞれの書体の成り立ちや特徴を紹介。

気軽に楽しみながら、多数の欧文フォントを学ぶことができます。

新進気鋭のマンガ家・芦谷國一さんの手がける、

ちょっと不思議な欧文フォント入門コミック、待望の書籍化!!

監修：山本政幸（岐阜大学准教授）

※各書体の擬人化は、著者が個人的に思い描いたイメージをもとに制作しています。

　各書体製作会社および版権元とは、一切関係ございません。

※本作品は、2016年に刊行された芦谷國一氏の同人誌『書体研究サークル』をもとに、

　あらたに新作マンガとして描き下ろされたものです。

効果的に文字を配列するためには、どのフォントを選び、どのように組めばいいのか？和文から欧文まで各分野の第一人者を執筆陣に迎え、タイポグラフィの背景や考え方を理解するための基礎をまとめた決定版。

パソコンやスマートフォンなどで文字がどのように表示されているのか、スクリーン（画面）上のタイポグラフィを考えるための書籍です。9 名の執筆者がそれぞれのテーマで論説をまとめ、文字の扱い方が特徴的なWebサイトの事例約80 例を紹介。オンスクリーンで読みやすい本文組みやフォント、印刷物とWebの本文組みの違い、アクセシビリティ、文字組みやWebフォントの技術的変遷など、それぞれの観点からオンスクリーンのタイポグラフィについて論じています。これからますます重要になるオンスクリーンでの文字の見せ方について理解を深めるための一冊です（本書は、2018 年10 月にBNNより発売された書籍『【新版】UI GRAPHICS』のシリーズ書籍として制作されています）。

Web Typography 1：Webの本文組み

01 _ オンスクリーンタイポグラフィの本文 | 文・伊藤庄平

事例：長体と配色が際立つデザインメディアならではのタイポグラフィ　ほか

Web Typography 2：紙の組版とWebの組版

02 _ Webで紙のようなレイアウトを実装するには | 文・佐藤好彦

事例：縦書きの魅力を活かした優美なサイト　ほか

Web Typography 3：グリッドと本文組み

03 _ オンスクリーンタイポグラフィの夜は明けたか | 文・守友彩子

事例：写真と文字の配置が美しく、読みやすいサイト　ほか

Accessibility：アクセシビリティ

04 _ Webアクセシビリティとタイポグラフィ［前半］ | 文・桝田草一

05 _ Webアクセシビリティとタイポグラフィ［後半］ | 文・カワセタケヒロ

事例：視認性、可読性に優れたサイトの好例　ほか

Web Font 1：デジタルプロダクトの文字

06 _ プロダクトのアイデンティティを表現する文字 | 文・ハマダナヲミ

事例：小さな画面を彩る様々な文字表現　ほか

Web Font 2：オンスクリーンで読みやすい文字

07 _「 読みやすさ」の不思議 | 文・きむみんよん

事例：フォントにもユニバーサルデザインを　ほか

Historical Changes 1：Webフォントの変遷

08 _ 日本語Webフォントの過去、現在、未来 | 文・関口浩之

日本語Webフォントサービス一覧

導入事例に見る日本語Webフォントの活用トレンド

事例：縦書き、横書きレイアウトを、さりげなく上品で美しく　ほか

Historical Changes 2：Webタイポグラフィの変遷

09 _ Webタイポグラフィの変遷と現代的常識 | 文・生明義秀

事例：印象的なアイソメトリックのアニメーション　ほか

鎌倉で文字にこだわるデザイン会社が教えるタイポグラフィの実践書。フォントの選択やレイアウト、文字組みがしっくりこない、何から勉強すればよいのか迷っている方に向けてわかりやすく解説します。

大正時代のタイポグラフィ名著の復刻本。デザイナー、イラストレーター、フォント好きのためのデザイン資料集です。デザイン書、実用書、商用POPのコーナーに！

デザイナーも　エンジニアも、すべては読み手の体験向上のために！ 審美的視点・実装技術的視点でウェブタイポグラフィを網羅的に解説した決定版

これまでウェブタイポグラフィの書籍で、これだけまとまった内容を読める本はなかったのではないでしょうか。

欧文フォントや欧文組版を審美的視点から解説した書籍、HTMLやCSSの書籍において実装技術的視点から解説した書籍はあれど、どちらも網羅的に解説した決定版書籍が待たれていたのではないでしょうか。

本書は、その審美的視点／実装技術的視点のどちらも併せ持ち網羅的な解説書として、デザイナーはもちろん、エンジニアの皆さんにもウェブを含むオンスクリーンメディアで文字を扱う際に必要となる知識や実践について、細かく解説しています。

1章：文字を読みやすくする

1-1さまざまな読み方

1-2すばらしきem

1-3パラグラフをデザインする：行の長さ

1-4パラグラフをデザインする：テキストサイズ

1-5パラグラフをデザインする：行間

1-6文字揃え、行揃え、ハイフネーション

1-7レスポンシブなパラグラフ

2章：タイポグラフィのディテール

2-1記号、符号、アクセント

2-2合字と略語

2-3階層とスケール

2-4意味とセマンティクス

2-5数字とテーブル

2-6トラッキングとカーニング

2-7見出しとインパクト

2-8バーティカルなリズムを適用する

2-9配置と構成

3章：フォントの選択と使用

3-1フォントが画面にレンダリングされる仕組み

3-2実践的および実用的考慮事項

3-3書体を知る、書体を見る

3-4本文書体の決定

3-5ディスプレイテキストの書体を選ぶ

3-6機能的テキストの書体を選ぶ

3-7書体を組み合わせる

3-8ウェブフォントを使用する

3-9ライブラリを構築する

デザイナー、アートディレクターが知っておくべきタイポグラフィの基礎知識を、多数の具体例とともに丁寧に解説！第一線で活躍するプロが、あらゆる場面で愛用している文字（＝情報）を美しく見せるための珠玉のテクニックを徹底詳解。タイポグラフィの根幹を支える、９つの基本レイアウトパターンと１０種類の演出スタイルで、思いどおりのグラフィックを作り出す。