Blog スタッフブログ

こんにちは、Webデザイナーのそいです。

バナーデザインやWEBデザイン、DTPデザインにおいて押さえておきたい「文字詰め」。

ひらがなや漢字、カタカナ、英語といった文字体によって文字の広がりや見え方の印象がかなり変わってくるんです。今回はそれぞれの文字がもつ特徴や印象を紹介しながら文字詰めについて考えていきたいと思います。

今回は細かく調査していくので2回に分けて記事を紹介していきます。

前提

カーニング設定は無し。字間「0」でそれぞれの文字の特徴を見ていきたいと思います。

今回の記事では、特徴を踏まえたうえで、それぞれをバランス良く調整するならどう文字詰めをしていくかを検証していきます。

ひらがな

まずは「ひらがな」を紹介していきます。字間0の場合だと「い」と「づ」の間が詰まっていたり「く」「り」の間が広がっていたりと、文字のかたちによっては字間がバラバラとした印象です。

カーニング設定を「オプティカル」に設定することでこれらの文字間「い」と「づ」が詰まって見えるものの全体的に字間のバランスが取れているように見えます。

これらを調整するなら「すまい」の文字を基準に、上述の詰まりや広がりが気になる箇所を詰めることでバランスが整います。特に「く」と「り」の間は不自然な広がりを感じるので2倍ほど詰め大胆に調整しています。

漢字

次に「漢字」を紹介します。漢字はひらがなと比べると画数が増え複雑な印象になる（文字の密度が上がる）ため

文字と文字の間がどこを取っても均等に見えます。

カーニング設定を「オプティカル」に設定してもあまり差が無いようにも感じます。「一」「二」など極端に画数が少ない文字に複雑な画数の文字が順で並ぶ以外は、文字詰めは特段意識しなくともバランスが整うように考えます。

カタカナ

次にカタカナを紹介します。カタカナでは大文字＆小文字が混合する単語があります。そういった単語の場合、

小文字の左右の字間の余白が、大文字と比べて広がって見えます。また濁点のある文字との字間も詰まって見えるなど全体的に文字詰め調整が必要なのがカタカナの特徴のように思います

カーニング設定を「オプティカル」に設定しても、よく見ると文字と文字の間の余白がアンバランスになっています。

これらを調整する際は、「ス」と「テ」の間を基準にするなど、濁点の無い大文字が並ぶ箇所がどこかを見ていくとわかりやすいでしょう。

基準の文字に対し、上述で挙げたバランスの悪い文字を詰めたり広げたり調整していきます。小文字の左右の字間「-100」と詰まり気味で調整＋数値は細かく分けすぎず統一するだけでもだいたいのバランスが整います。

英語

最後に英語を紹介します。

英語は漢字同様に、文字詰め前の時点で特段字間のバランスを調整する必要はないように見えます。「u」と「r」の間は若干広がって見えますが、日本語に比べると画数がかなり少ないためバランスが悪く見えないのが英語の特徴です。

カーニング設定を「オプティカル」に設定してもやはり崩れず、より均等に揃った印象ですね。英語の場合も調整をしなくても何ら問題はないように考えます。

まとめ

今回はひらがな・漢字・カタカナ・英語の文字詰めのコツを紹介しました。

1文字1文字の字間を細かく見ていくと、手を加えなくてもバランスが良い文字体、手を加えたほうが良い文字体がはっきり見えます。

WEBで表示されるテキスト吐き出しの文章や、DTPにおける細かな説明文章などは1文字ずつ文字詰めをしていく必要はありませんが、見出しやバナーなどの文字にはデリケートにバランスを見ていくことでデザインの精度が格段に上がります。違和感がどこにあるかをつど分析→文字詰め（実践）していくことがスキルアップのコツになるのではないでしょうか。

次回は文字体を組み合わせた場合の文字詰めのコツなどを紹介していきたいと思います。

今回もご一読いただきありがとうございました。