【デザイン基礎かるた：も】

文字詰めて
魅せる画面の
美しさ

私が最初に文字詰め地獄にはまった…もとい、文字詰め徹底特訓をしたのはアシスタントデザイナー時代、とあるパッケージの裏面の情報がみっちり詰まった画面でした…。

Webが出始めた頃は「Webに文字詰めなんて必要？」勢が結構な割合でいらっしゃいましたが、「必要！」と声を大にして主張したいと思います。

文字詰めは、書体の構造により任意の文字を並べた時に生まれてしまう不揃いな空間を調整することにより、言葉や文章を読みやすく、受け取りやすくするための技術。

日本語書体は、漢字、ひらがな、カタカナ、句読点、すべて「仮想ボディ」と言われる正方形の中で作られるため、

文字を並べたとき、仮想ボディ内のふところや隙間が「アキ」として認知されてしまう。その空間を調節し、文章を一塊に見えるように調節してあげると、情報としてその単語・文章が受け取りやすくなります。
カタカナのトは全デザイナーの敵だよね。

欧文は、和文同様に文字の間の空間が認知されるとともに上下にできる空間もあるため、行間の見え方も違って見えてしまいます。

書体にもよりますが、斜線・曲線で構成された文字の前後は結構な確率で他の部分よりも空間が開く…。不揃いな空間、キモチワルイ…！

空間の中で「あ、ここのバランスは良い感じだな」と思う基準を一つ決めて、そこと同じように見えるように調節していくと良いです。

また、「」（）などの約物も、そのまんまにしていると不自然なアキが出来てしまうので、あらかじめ「行末約物半角」などを選択してざっくりと詰めてから微調整するとよいですね。

文字情報が多めな画面ほど、詰めはしてあげたほうがよいです。
Webの場合も、タイトル・見出しはマストで行うくらいしておくとクオリティが段違い。

photoshop・イラレでの文字詰めの方法についてはこちらの記事を参照させていただきましょう。

綺麗な文字組は『文字詰め』から | フォントの話 | つみきブログ

XDは…大好きだけど、厳密に文字詰められないのが玉に瑕。

文字詰めの上達方法が分からないよ、どこまでやるのが正解なの…？
という新人さんは多いです。
こればっかりは、ポイントを押さえた上で自分で感覚を磨くしかないんじゃないかな〜。。と思うのです。「どこまでも、やる。やり続ける」が正解。

・先輩の作った美しい画面をトレースして、どこをどう調整しているのかを確認しながら手を動かして同じように作る
・人の作った文字組みに校正記号で添削してみる

これの積み重ね。
やり続けると必ず感覚が分かってくるため、きちんとこのあたりを指摘・指導してくれる先輩にチェックを受けるなどすると良いですよ（新人の、1〜2年のうちに徹底して感覚を叩き込むのをおすすめ）

校正記号：ツメ・アキ［文字や行を詰める指示・空ける指示］

しかし、私がWebデザインに転向した頃に諦めていたWebページ本文や見出しのフォント指定や文字詰めも、今はある程度の調整が出来る良い時代になりました……（遠い目）。
画像やSVGで書き出す部分のように一文字ずつ厳密に調整…は無理でも、美しく読みやすくできる工夫は可能な限り取り入れていきたいですね。

文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA

文字間のアキを調整する | Webフォント・サービス FONTPLUS

あ〜。そのうち全部AIが勝手に判断してやってくれるようになったりしないかな〜。