Webデザイナーのためのタイポグラフィと文字組版 by 鷹野 雅弘 [CSS Nite LP11]

CSS Nite LP11鷹野さんのセッション「Webデザイナーのためのタイポグラフィと文字組版」のメモ的まとめ。twitterも合わせてチェック!

画像フォント

ベタ組み
ツメ組み

和文フォント

基本的に正方形の仮想ボディ内に文字が配置されている。

オーソドックス(仮想ボディーに対して小さ目・文字間が大きく感じる)
モダンスタイル(仮想ボディーに対して大き目・文字間を感じない)

イラストレーターで文字詰め
 自動(フォントの情報から詰める)
 オプティカル(字面から詰める)
 その後、手動で詰める

MSPゴシックとMSP明朝だけ仮想ボディを持たないポロポーショナルフォント。

欧文フォント

プロポーショナル(文字ごとにサイズが違う)

欧文向け(ベースラインに余裕がある)
 line-height:1.2

和文向け(ベースラインに余裕がない)
 line-height:1.5 - 1.9

全角カッコ(文字の中央に配置)
半角カッコ(少し下にずれている)

→全角カッコで文字詰めして表現(ベースライン)

和文フォントの英数字が少し変(?)

和文フォントと異なる欧文フォントを英数字に使う
 混色 (欧文フォントのサイズを大きくしベースラインを下げる)

りょう(CS4-5では別途インストール)

合成フォント(IllustoratorとIn Desgin)

ひらがな、カタカナ、ヤクモノ(カッコなど)を変えるとイメージが変わる。

和文フォントの歴史

モリサワ 細明朝体(リュウミンL-KL)・中ゴシック体(中ゴシックBBB)
→基本7書体(ウェイト)
→ヒラギノ(Mac OS X)
→AXISフォント
→オールド(A1明朝、丸明オールド)

最近のフォントの特徴

角の処理(丸明オールド、こぶりなゴシック)遠目で見たときにすーと入る。
 墨だまり(A1明朝)
手書き
グランジ
ユニバーサル(読み易い)

文字詰めのコツ

ャュョ→文字サイズを小さく・太めのフォント


禁則処理・ヤクモノ処理(IllustoratorとIn Desginの設定)

デバイスフォント

1文字インデントは段落を区切る役目なので字下げを行わなくても余白で表現できる。

見出しと本文
→ウェイトを変更する
→文字サイズを変更する
→色を変更する

文字原稿はそのまま使わない

・固有名詞は正しく使う
・スペルチェックを忘れずに
・,(カンマ).(ピリオド)の後にはスペースを入れる
・「ひらく」ことを意識しよう(「事」、「物」、「時」、「出来る」などはひらがなで)
・敬語のレベル

フォント管理

・パッケージからライセンスへ
・フォントが増えるとソフトの立ち上げ・フォントの選択に時間がかかる
・Linotype fontExplorer X(基本は最小限のフォント・必要に応じてアクティベート)

まとめ

フォントの選択はデザインの一部
「詰め」や「組み」を意識しよう
文字原稿にも手をいれよう

スポンサードリンク

«UI向けビジュアルデザインの基礎 by 矢野 りん [CSS Nite LP11] | メイン | 人の特徴から見えてくる次のデザイン提案 by 長谷川 恭久 [CSS Nite LP11]»