とうとうこの記事にたどり着きましたね。
ということは、photoshop（フォトショップ）で「いつも文字組み（カーニング）に苦労している」と悩んでいるのではないでしょうか？
世間ではカーニングって言葉でまとめてますが、リーディングやトラッキングといった用語も含めて文字組みで捉えないといけません。まぁ、cofeebreakでは文字組み（カーニング）とわざわざ説明付きで呼んでおきます。
文字組み（カーニング）はハマればハマる程デザインに品がもてるので、多くの先輩Webデザイナーさんが新人指導のときに「文字詰めが甘い！」と、そんなことも知らない的なオーラをだしながら指導してきます。
それだけデザインセンスがアップする技術なので先輩Webデザイナーさんも「伝えたい」のです。
文字組み（カーニング）は、やってしまえばすぐ覚える技術なのでさっそく試していきましょう！
これだけでセンスが良く見えるよ。
そんな時は、やっぱり変な人だなと思いながら記事を読んでいただければ幸いです。
目次
文字組みは難しくない技術！
雑誌、情報誌、新聞、ポスター、広告、Webサイト、他諸々、文字組みされたテキストはあらゆる物に施されデザインされています。文字同士が奇麗に整列しているテキストデザインを調べてみる事で、ある程度の規則性も分かってくるのではないでしょうか？
みなさんの観察力で規則性を調べるだけで文字組みは「おそらくこうなのかな？」という仮説はできるのです。
その仮説は当たっています。
私は独学でWebデザインを勉強していたのですが、様々なものを見て吸収して行く中でデザインの規則性を見つけ仮説検証する事で実証できたのです。
【関連記事】
【Webデザイン上達のコツ5選】普段の生活の中で、デザイン力を身につける方法！
※生活の中でも様々なデザインの規則性を発見し、デザインの上達につなげるアイデアをまとめました。
何も知らないとこからはじめた私が言うので、文字組みは難しい技術ではないはずです。
規則性を見つけて繰り返しデザインするだけで成り立っていくと考えてください。
ということで、最初はこんな感じで身に付けていきながら後から細かくてめんどくさい部分を身につけていきましょう。
気になるよね。
文字組みはめんどくさい技術でもある
文字組みはリーディング、トラッキング、カーニングといった調整で程よい間隔に調整していきます。その文字間隔はデザインによって違ってくるので、全て調整するにはかなりの時間が必要です。
与えられた時間と予算を考えて制作するなら、細部の調整までは手をまわすのは現実的ではないです。だからめんどうな作業なのですが、できれば質を担保しできるだけ調整したいですよね。
そこで、登場するのがPhotoshopはある手度自動処理する技術「オプティカル」です。
文字組みはリーディング、トラッキング、カーニングを施す前にオプティカルを施して自動で文字組み調整しておきます。これである程度の質を担保できるので、細かい文字組み調整をやっていきます。
「オプティカル」を設定した文字組み（カーニング）です。これだけでも程よく均等に調整されていますね。
文字ツールの「オプティカル」を選択するといいよ。
リーディング、トラッキング、カーニングの基本操作を覚える
めんどくさいで片付けるならプロとして見落としが多いデザイナーになるので、ここからは具体的に情報をまとめていきますね。
ベストな文字間隔はどれくらいなのか？
まず、平均的な間隔ってあるのか？を紹介しています。
明確な根拠はないですが、Webdデザイン業界で伝わる指標があります。
| 項目 | 内容 |
|---|---|
| 行間 | 文字サイズの50%〜100% |
| 文字間 | 文字サイズの5%〜10% ※数値が低いので間隔調整は難しいかもです！ |
文字間隔は均等にするとキレイになる
フォトショップのカーソルで文字同士の距離を均等にしてみましょう！
「ブレイク」の文字調整が難しい部分ですね。
調整前は「レ・イ・ク」の余白が広く感じるので文字同士を食い込ませます。
これで、ほぼ均等ですね。
詰めすぎず離れすぎずを見比べてみる
均等にした間隔を広い等間隔で調整してみましょう！
広すぎると、文章の可読性が下がるのがわかりますね。
文字を詰めても離しても可読性が確保できる間隔を身につけておきましょう。
上下反転する事で文字を意識せずの調整する
文字を意識するのではなく、形としてとらえ間隔を調整する方法です。
上下反転後に「ヒ」と「レ」を微妙に調整しています。この方法は、上手く調整しているけどどの辺りがベストな状態かが分からなくなり間隔が麻痺してる時に活用してください。
ジャンプ率を応用して文字要素を見やすくする
文字の大きさをデザイン処理して可読性をアップする方法です。
Webサイトのバナー見出しやランディングページ（LP）のテキスト訴求で活用するテクニックです。
「ー」は横幅を短く、「カタカナ」を少し大きく、「！」を大きくして横幅と高さを調整したり、
「本」は訴求したい文字としてわざと大きくしています。
coffeebreak流の文字組みトレーニング法を紹介
ものすごい小さいサイズでカーニングの限界にせまる！
大きさが限られた場所に無理やり文字を詰め込む事で工夫が生まれます。
実際に詰め込む事で、ギリギリの隙間と可読性を追求できます。この作業の繰り返しで文字組みスキルの上達が見込まれます。
本日のまとめ
- Photoshopのオプティカル自動調整を活用する
- 文字間隔は均等で程よい距離感でいい
- 上下反転やジャンプ率を活用してバランスをとる
- 文字間隔と可読性を身につけるには小さいバナーサイズで練習する
私の記事はヘタクソなので上手くノウハウを受け取ってもらえないかもですが、
最後まで読んでいただいて感謝いたします。
coffeebreakの中の人です。