誰かに見てもらうための、簡単なデザイン

感覚ではなく面積で見る、タイポグラフィ・文字詰めの簡単なコツ

2014年最初の記事です。あけましておめでとうございます!といってももうだいぶ経ってしまいましたが…(;´∀`)。
毎年年賀状は、その年の干支と女の子を絡めた絵で作ると決めており、学生時代から大体そんな感じでやっているのですが、今年は何だかタイポグラフィな年賀状を作りたくなったので、この記事を思いつきました。
いや、今年の年賀状も例年通り、馬と女の子の絵を描いて、すでに出し終わっちゃってるんですが。
まぁでもいいよねタイポグラフィ!ということで、手遅れですがアハッピーニューイヤーとか書いてみたり。
そして、タイポグラフィで重要な「カーニング(文字詰め)」の簡単な考え方を書きたいと思います。

37_newyear_kerning_02

そもそもタイポグラフィとは?

私もそんなに詳しくないのですが、Wikipediaによると
「タイポグラフィは、活字(あるいは一定の文字の形状を複製し反復使用して印刷するための媒体)を用い、それを適切に配列することで、印刷物における文字の体裁を整える技芸である。」
とあります。まぁつまり文字を適切に配置することってことですね。

カーニングとは?

これもまた Wikipediaからですが、
「主に欧文の組版において、プロポーショナルフォントの文字同士の間隔(アキ)を調整する技法のこと。カーニングを行わない場合は文字の間に不自然な空白を招いてしまう一方、適切にカーニングが施されたフォントでは字面間の空白の面積はほぼ均等になる。」
とあります。
カーニングは、日本では文字詰めと言われます。欧文ということは主にアルファベットを並べた時に使うのかなぁと思いますが、日本語でも使う場面はあります。特に 、(てん)やら。(まる)やらは必要になる場面が多いような。
プロポーショナルフォントというのは、文字によって幅が異なるフォント(可変幅フォント)のことです。分かりやすい例だとiとwとか。明らかに幅が違いますよね。文字を打った時、そんな幅の違いを文字間の調整もなしにそのままに出すのがプロポーショナルフォント、対して幅がみんな均一に揃っているフォントがモノスペースフォント(等幅フォント)というそうです。
しかし Wikipedia上にも書いてありますが、カーニングは特定の文字の組み合わせに対して文字間を調節することだいう… 多分WとAとか、IとIとか、そのまま並べると文字間が不自然になってしまうもののみに使う言葉…という定義もあるそうで。

まぁ、つまり、まとめると、タイポグラフィにはカーニングが必要で、特にカーニングが必要なのはプロポーショナルフォントの場合…ということですかね。これがタイポグラフィとカーニングの関係。単純な関係ですが、私もごっちゃにしがちでよく理解してません…なんか間違ってたらすみません…。

文字詰めの感覚とは?

文字詰め(カーニング)に関して、人気があって私も参考にしている記事にコチラがあります。

[Webデザイン] 文字組みについて本気出して考えてみた | Stocker.jp / diary

この記事でも触れられていることで、ひらがな/カタカナは原則として詰めるとか、句読点は詰めるとか、詰めるということとその必要性はよく分かるのですが、一体どれくらい詰めたらいいのか、ということは、あまり文字詰めをしない方にはちょっと分かりづらいんじゃないかなぁと思います。
何度かやっていけば感覚的に分かるようになりますが、その感覚が正しいのか、ということは、1人でやってると特に不安に思うんじゃないかと思います…(私がそうだ)。
そこで!カーニングの基本的で簡単な考え方で、私が気をつけていることを書いてみました。
とても簡単で、そして基本的で皆さんご存知な内容かもしれませんが…(;´∀`)。

文字間とは面積

どうして文字間が詰まってるのか?逆に開いているのか?そう感じる理由に、視覚からくる面積の認識があります。

37_newyear_kerning_05

プロポーショナルフォント「Helveticaヘルベチカ」で普通に打ってみたのがこちらになります。普通に文字打って並べた状態を「ベタ組み」というらしい。文字間の調整が必要じゃないかな…と思う組み合わせでアルファベットを並べてみました。
これの「文字間の面積」を見ていきます。

37_newyear_kerning_08

この黒い部分が面積です。見れば、文字間によって面積の大きいところや狭い所…ありますね…。
極端な部分を取り上げてみます。

37_newyear_kerning_11

これなんか一目瞭然。YとAの間は明らかに面積が広いです…。
こんな風に、面積が狭い部分は文字間が詰まって見え、広い部分は空いて見えるんですねー、当たり前なんですけど。
文字間の幅がどうのこうの…ではなく、面積…これを視覚的に認識することによって、文字間の印象を決めているのです。
単に文字間の幅だけではなく、例えばTやYの下にある、文字の線がなく空白になっている部分も、文字間として視覚的に捉えられています。
なので、文字間の幅だけではなく「面積」を、なるべく均等に…と心がけると、文字詰めはやりやすいと思います。
文字の形上、完全に均等はムリなので、なるべく近づけるように…ですかね…。

37_newyear_kerning_14

これでIとIの間、YとAの間は、割と適正に文字詰めされたかと思います。
これを基準に、全部調整していきます。

37_newyear_kerning_16

こんな感じかな??

37_newyear_kerning_20

面積を見るとこんな感じですが、最初のTとAの間とか、後ろの方のEとYの間とか、厳密に言うと均等ではないですが…文字の形状の都合上、これ以上は詰められないです…。まぁでも見た目不自然じゃないかと。

37_newyear_kerning_23

細かく見ていくと、IとIの間に比べて、後方のEとYはめっちゃ近づけていますし、前方のTとAはすでにTの下部にAが食い込んでいます。TとAのように、隣の文字に食い込ませる文字詰めっていいの?と思われるかもしれませんが、先ほどの面積の問題もあり、隣の文字の空白に食い込ませた方が自然に見えます。ロゴなどのタイポグラフィなどだと特に、見た目のバランスが整っているのは大事なので、ここまで詰める方もいるんじゃないかなぁ…。
これで、あくまで大体ですが、面積の均衡を保てるのではないかと思います。

面積をなるべく均等にすることを心がければ、きっと文字詰めはしやすくなるはずです。
今回は分かりやすいように面積を黒く塗りつぶしましたが、、ここまでしなくても多分見た目で何となく分かるんじゃないかと。

日本語でもそんな感じでやったらいいと思うんですけど、日本語は形状がもっと複雑なので…分かりにくいかも…。でも基本は一緒かと思うので、あまり難しく考えなくても良いと思います。というか漢字は詰める必要はないことが多く、詰める必要があるのは、ひらがなやカタカナが多いので、それだとまだ形状も分かりやすいですね。

文字詰めが必要な箇所は大体決まっている

37_newyear_kerning_26

最初に書いたカーニングの説明のところでも触れたんですが、文字詰めが必要な文字や組み合わせというのは大体決まっています。
アルファベットでいうとAとかWとかOとか入ってくると崩れちゃいますし、Iが2つ繋がると、その間だけ妙に狭い印象を受けたりします(先ほどの面積の例が参考)。かな文字なら「し」とか「フ」とか「ノ」とか、なんかちょっと空間が多い文字が出てくると気になるかも…前後の文字にもよるんですが。あとは「っ」とか「ィ」などのちっちゃい文字、「、」「。」「ー(のばし棒)」などの記号が気になります。
上の緑の文字の例だと、カタカナは、斜め線が連なっている「ナッシング」部分は「オールオア」に比べてスカスカした感じがします。斜め線の多い文字が連なることによって、空間が多くできているんですね。ひらがなの場合だと「っ」とか「し」とか、線の少ない文字が並ぶと、他に比べて空間が広く感じます。
このように、使ってるフォントなどにもよるかもしれませんが、文字によってアキが目立つものがあり、ある程度の法則が存在します。
線が少ない文字や偏った文字は要注意かも。

文字詰めの、手抜きできそうな点

こんな話ばかりしてたら、やっぱり文字詰め難しいし、そんな細かくやっとられるか(ノ`Д´)ノ彡┻━┻!などと思われるかもしれませんが、全てに必要があるかと言えば、そうでもなかったりします。

小さい文字は気にならない

これねー。なんか不思議なんですが、文字が大きければ文字詰めってかなり気になるんですが、小さければあまり気になりません…。文字も隙間もちっちゃくて、あんまり気にならないんでしょうか…。

37_newyear_kerning_29

極端ですが…。大きい方に比べて、小さい方は隙間があまり分かりません。大きい方の「T」を見てみると、右のCとの文字間は、左のAとの文字間より少し狭く感じますが、小さい方だったら、パッと見て別にそんな気にならないかと思います。厳密に見るとやっぱり違いますけどね…。
雑誌などの長い文章とか、わざわざ細かく字詰めしていたりしないんじゃないかと。多分。小さい文字の字詰めに関してはあまり気にしなくても良さそうです。
ただ!その分!ロゴなどの大きい文字は!しっかり字詰めしないといけないってことですね…。

以上タイポグラフィとカーニング(文字詰め)の簡単な考え方でした。当たり前なことばっかりですみません。
こちらの記事が、文字詰めに関してもっとしっかり考えられて、丁寧に説明されています。

文字の読みやすさを生み出す為の知識と方法【後編】 | Basic Design Note

あんま正月関係無かったです。この記事。
それでは!Have a nice design!!