【Design】タイポグラフィの基本

✓タイポグラフィって何?

✓何をするの?

タイポグラフィとは、印刷用の書体(タイプフェイス)を使ったデザインや印刷物のことを指すが、特に文字のデザインに対して使われることが多いです。

主に文字も大きさ、字間を調整、レイアウトなどを行います。

タイポグラフィ

タイポグラフィは、印刷用の書体(タイプフェイス)を使ったデザインや印刷物のことを指すしますが、特に文字のデザインに対して使われることが一般的になっています。

そもそも文字は計算し設計されているものですが、、字体によって文字と文字の隙間(字間)が空きすぎて見えたり、傾いて見えたり、あるいはきれいに並んで見えない場合もあります。

例えば、左の図の直線をどっちにつながって見えるでしょうか?

 

正解は下の線につながっていますが、上につながって見えた方も多いのではないでしょうか。

文字の「X」の場合では、まっすぐ設計されている文字ですが、下が狭く感じ詰まって見えることもあります。

 

文字のバランスや読みやすさ、見やすさを整えていくために、文字も大きさや形、字間を調整していく必要があるのです。

《和文タイポグラフィ》

和文は、「仮想ボディ」と呼ばれる正方形の中に字面(字の面積)が設計されています。

正方形であるからこそ和文は横組み縦組みに対応できる文字になっています。字面は書体によって大きさの割合に違いがあるりますが、だいたいは漢字が大きく仮名は小さい設計になっています。

*欧文ベースラインは文字サイズの下から120/1000の位置に欧文文字が設定されるベースラインが設定されています。

和文文字の大きさの単位

文字サイズを表記するさいは「ポイント(pt)」あるいは「級(Q)」が使われます。

「ポイント」は1ポイント=1/72インチ=0.3528mmに定められています。

 

「級(級数:Q)」は写真植字(写真植字機を用いて文字などを印画紙やフィルムに印字して、写真製版用の版下などを作ること)で、

使われる文字の大きさの単位で1Q=02.5mm(4分の1mm)となり計算しやすい数値になっています。

 

ポイントや級であっても仮想ボディ1個分の幅を「全角」として扱われます。

その半分を「半角」になりますがDTP(Desk Top Publishing(デスクトップパブリッシングの略で、

日本語で「机上出版」「卓上出版」を指しパソコンで印刷物のデータを作成すること)での2バイト文字(漢字や仮名)を「全角」、1バイト文字(欧文や数字など)を「半角」と慣用的に使われています。

和文での「半角」サイズはない。この「全角」を基準として文字の幅を表す方法もある。

 

文字を組む際、文字と文字の間隔を調整していく字送りを行います。

隣り合う仮想ボディの隙間を字間(文字間)といい、その仮想ボディのセンターライン間までが字送りの幅になります。

 

隣り合う文字サイズが同じなら「字送り」=「文字サイズ+字間」です。

 

隣り合う文字サイズが違う場合の字送りの幅は、「字送り」=「(文字サイズA÷2)」+「(文字サイズB÷2)」+「字間」になります。

 

通常は仮想ボディと隣の仮想ボディの字間は空いていなくピッタリとくっついています。

このような文字の組み方を「ベタ組」といわれます。その他に字間を調整する文字の組み方には「空け組」「詰め組」があります。

 

字間の空きが0の場合「べた組」。

 

字間を空けて文字を組んだ場合「空け組」。

 

字間をマイナス値で詰めた場合「詰め組」。

 

トラッキング/カーニング

字面によって大きさの割合が違い、一般的には漢字が大きく仮名は小さく設計されています。

仮想ボディと地面の差分があるためベタ組では字間が空いて見えたり、傾いて見えたり不均等が目立ってしまことがあります。

そのため字間を調整する方法で「トラッキング」と「カーニング」などを行い調整します。

トラッキング

「トラッキング」は複数の字間を一律の数値で空けたり詰めたりする方法で字送りは均等になる。

 

 

カーニング

「カーニング」は隣り合った文字の字間をそれぞれ手動で調整する方法です。

 

 

Illustrator、Photoshop、InDesignなどにはこのような「トラッキング」「カーニング」を行う機能が備わっている。

Illustratorの場合「文字」パネルの赤枠部分で「トラッキング」「カーニング」が行える。

 

 

行間と行送り

行間は文字列と文字列の空きのことで、行送りは行と行の上端同士(仮想ボディの天(縦組みは右端))下端同士(仮想ボディの地)、センターライン同士あるいは欧文ベースライン同士の距離のことです。

大きさの異なる文字が混在している場合は、もっとも大きな文字の天地を基準に調整します。同様にそれぞれのアプリケーションに設定する機能が備わっています。

 

 

文字の変形

文字のデザインにおいて、文字の形(文字サイズの高さや幅)を長くしたり(長体)、平らにしたり(平体)、斜めに傾けた「斜体」にしたりすることもあります。

これらを総称して「変形」と呼びます。

和文は仮想ボディの正方形で設計されている文字なので縦組みに対応していますが、「斜体」は文字を傾けただけで傾斜書体として設計されてはいません。

欧文は「斜体」とは別に「イタリック体」として傾斜書体として設計されている文字があります。

 

 

《欧文書体タイポグラフィ》

欧文は和文の正方形の仮想ボディのような設計ではなく、文字の各部の高さを5つのラインで揃える方法で設計されています。

「ベースライン(Base line)」を基準に、

「アセンダライン(Ascender line)」「キャプライン(Capital line」「ミーンライン(Mean line)」「ディセンダライン(Descender line)」

があり、これらのラインに沿って設計することでベースラインが揃い自然で読みやすくなっています。

下図の点線~点線までが文字サイズ(ボディサイズ)で、それぞれのラインまでの間隔を、

「アセンダ(Ascender)」「キャップハイト(Capital Height)」「エックスハイト(X-Height)」「ディセンダ(Descender)になり、

字幅を「セット(Set)」と呼ばれます。

 

 

エックスハイトは比較的古い時代の書体では小さく、新しい時代の書体は大きく設計されています。

和文と欧文を混ぜて組む「和欧混植」には、この数値が大きい方が適しているとされる。

 

英文は文字によって幅が違うため和文のような正方形を基準にした「全角」「半角」といった概念がありません。

その代わり「em(エム)」という基準値があります。

大文字のMがもっとも幅が広いのでこの1文字分を「em」となり、いわゆる全角に相当します。

その半分の幅になる小文字のeが「en(エン)」となり和文の半角にあたるものになります。

 

小文字をa~zまで並べた長さを「a-z length(レングス)」といい、書体の幅広、幅狭の目安になっています。書体によってこの長さは違ってきます。

 

《欧文書体と和文書体の組み合わせ》

和文と欧文が混在を「和欧混植」といいます。

和文書体と欧文書体は文字設計の仕組みが異なっているので違和感のないように調整する必要があります。

欧文書体と和文書体を組み合わせる場合は以下のことを心掛けましょう。

・和文にはできる限り和文書体を欧文部分にはできる限り欧文書体を使う

・欧文と和文の書体にはできる限り差異のない書体で合わせる

・ベースラインは揃える

・文字サイズは違和感のないように欧文と和文を調整する

・欧文、和文それぞれに字詰めを行い調整する

字体が持つイメージ

「カタチ」「色」が持つイメージのように字体(文字間や行間も含め)にも一般的なイメージがあるのでテーマ、コンセプト、シーンに合った書体を選ぶ必要があります。

・「カタチ」が持つイメージの解説(平面デザインにおける構成要素「点」「線」「面」を学ぶ

・「色が持つイメージの解説(色が持つ心理効果やイメージ

ゴシックで太め、元気で力強い挨拶に感じる。

 

元気いっぱいな子供のイメージがある。

 

文字間もあり落ち着いた、かしこまった印象がある。

 

まじめで、すこし堅いイメージでもある。

 

明朝体/セリフ体可読性が高い
「優しい」「伝統的」「女性的」「高価な」「鋭さ」など
ゴシック体(角・丸)
サンセリフ体
可視性が高い
「強い」「カジュアル」「現代的」「重厚」など
楷書体
スクリプト体
手書き風
「古風な」「優しい」「上品な」「かしこまった」など
ディスプレイ系装飾風文字
「安い」「大衆的」「若い」「漫画、アニメ風」など

 

文字のウェイト(太さ)やセリフの有無によって与えるイメージが変わってきます。

「セリフ」がなくなっていくにつれモダンな新しい印象があり、ウェイトが重くなるほど男性的で軽くスクリプト体になると女性的な印象になります。

紙面の構成方法

ポスターやフライヤー、バナーなど、伝えたい情報に合わせて一目で伝えられるようにする必要があります。

そのためには情報を構造化して構成要素を分類します。

情報の分類

文字情報は以下のように分類できます。

一番重要な「タイトル」

次にイメージを伝える「キャッチコピー」

内容をわかりやすくまとめた「リード」

内容の詳細を記載した「ボディーコピー」

主催者や出演者の「クレジット」「ロゴ」

細部の説明を含んだ「キャプション」

 

文字以外の情報(図や写真、イラスト)は、

インパクトのある「メインビジュアル」

メインビジュアルを補佐する「サブビジュアル」

地図などの「説明用ビジュアル」

 

一概に、分類したすべての要素を使用するわけではありません。

どのような媒体で何を伝えるかによって分類した情報や要素をレイアウトしていきましょう。

要素とレイアウト

情報を分類したら、レイアウトをしていきます。

まずは、タイトルとメインビジュアルの要素でイメージが決定していくので、この二つの要素を組み合わせを決めていきます。

一般的には、メインビジュアルとタイトルを一番大きく扱い、そのほかの要素は重要度に合わせて大小(ジャンプ率)をつけてます。

レイアウト例は「レイアウトの基本要素/揃え方やジャンプ率とレイアウトパターン」で説明しています。

まとめ

「タイポグラフィの基本」では、和文文字や欧文文字の見え方や「文字」に対して調整方法や構成方法、自体が持つイメージの解説でした。

色々と小難しい説明もありましたが、まずは基本の「トラッキング」「カーニング」「行間」を使って文字の並びを調整できるようにしていきましょう。

 

 

【AdobeCC基礎マスター講座】

Adobe Creative Cloud(学生・教職員個人向けライセンスプログラム)を間36,346円(税込39,980円)で同時に全3ヶ月(動画閲覧 1ヶ月+課題作成 2ヶ月)基礎がしっかり学べるお得なパッケージプランです。

最新情報をチェックしよう!
>            チュートリアル動画はもう見ましたか?

            チュートリアル動画はもう見ましたか?

                  ご視聴と感想をお待ちしております。チャンネル登録・高評価もお願いします。