文字はデザインの中の重要な要素だということは、デザイナーならだれもが知っている。では、Webサイトにおける文字表現は一体どこまで可能なのだろうか? web creatorsの読者に行ったフォントやタイポグラフィに関するアンケート調査の結果とともに、Webで実現できるタイポグラフィの手法やフォントの知識の基礎から応用までを解説していく。
※本特集の作成に関しましては、2009年8月に実施いたしました読者の皆様へのアンケート結果をもとに構成しております。アンケートにご協力いただきました皆様に厚く御礼申し上げます。
| Introduction |
Webタイポグラフィの現状と問題点 |
| Chapter 1 |
Webタイポグラフィはここまでできる！ |
| Chapter 2 | 最低限知っておきたいWebタイポグラフィの基礎知識 |
| >>> 2-1 Webデザイナーが知っておきたいフォントの知識 |
|
| >>> 2-2 Webページの文字ツメ・アキの調整 |
|
| >>> 2-3 異なるフォント同士を組み合わせる |
|
| >>> 2-4 リズムを生む余白の使い方 |
| Chapter 3 |
Webタイポグラフィ実践テクニックとアイデア |
| >>> 01 本文の行間を指定する |
|
| >>> 02 OSにない特殊なフォントを画像化する |
|
| >>> 03 異なる文字サイズや書体を混在させ、メリハリをつける |
|
| >>> 04 思い切って文字間を広げ洗練された雰囲気を出す |
|
| >>> 05 細字と太字の組み合わせで印象をコントロールする |
|
| >>> 06 文字やボタン画像に合わせ細かい余白調整をする |
|
| >>> 07 見出しをheading要素でデザインする |
|
| >>> 08 大きい文字に対して行間・字間を調整する |
|
| >>> 09 テキストブロックの形状を長方形以外の形にする |
|
| >>> 10 見出しの文字間隔を最適化する |
|
| >>> 11 OSを考慮しfont-familyを順番に指定する |
|
| >>> 12 行の高さを考慮してmargin、paddingを設定する |
|
| >>> 13 迫力のある立体文字を並べる |
|
| >>> 14 タイポグラフィを大文字／小文字で構成する |
|
| >>> 15 グローバルメニューを右寄せにする |
|
| >>> 16 OS間を考慮して明朝体を指定する |
|
| >>> 17 テキストの行ぞろえを均等割付けにする |
|
| >>> 18 縦組みのテキストをデザインに取り入れる |
|
| >>> 19 ドロップシャドウや文字の端を切らずに並べる |
|
| >>> 20 アンチエイリアスの微調整で印象を変える |
|
| >>> 21 ドロップキャップで細かな調整を行う |
|
| >>> 22 適切な改行を行い可読性を高める |
|
| >>> 23 テキストの縦書きと横書きを組み合わせる |
|
| >>> 24 テキストを4段組みでレイアウトする |
本記事は『web creators』2009 vol.96からの転載です。本特集全記事は誌面で読むことができます。
