デザインやコーディングをする際に、ロゴやタイトル部分、コンテンツの文章が書かれている部分で「文字が読みにくい」「なんだか違和感を感じる」となったことはありませんか？
それは、文字と文字の間隔や行間が影響していることがあります。
私自身もデザインやコーディングをする際に、レタースペーシング＝文字詰めの考え方がなかなか身に付かず悩んでいました。そんな中、学んだことを振り返りも兼ねてまとめてみました。
レタースペーシングとはなにか
レタースペーシングとは、文字と文字の隙間、間隔のことを意味します。
他にもカーニングや文字詰めと呼ばれることもあります。
これを整えることで、文字が見えやすくなりより伝わりやすい文字や文章にすることができます。
また、これらはとくにロゴデザインを見るとわかりやすいのですが、機械的に揃えただけでは均等には見えません。なぜなら、文字にはそれぞれ形があり中心や端部分が異なっているからです。
そのため、視覚的な均等に揃える必要があり、多くの人が見やすい形に整えることが、レタースペーシングの考え方になります。
レタースペーシングの基本
レタースペーシングの基本は３ステップです。
英語や数字、漢字やカナなどそれぞれのフォントによっても特徴や揃え方は変わってくるのですが基本は下記の流れに沿って作業します。
文字の形や余白の特徴を把握する
各文字の形や余白を把握する必要があります。文字の中心がどこになるのか、文字の端はどの部位になるのかを確認することで、余白間を考えやすくなります。
また、文字の中心を探す際は、文字を長方形に置き換えて、違いを把握し、視覚的な基準を探すと分かりやすいです。
三文字ごと分解して対応する
文字数が多い場合、全体を俯瞰して整えるのは難しいです。
そのため、中心となる文字を見つけ出し、その文字を主体として三文字ごと整えていくと全体的に揃えやすくなります。
せっかくなので、rambleの並びで考えてみましょう。(わかりやすく大文字に変換してみました。)
三文字ごと分解して揃えていくということは、4パーターンに分け考えることになります。
また、綴りが六文字なので左右の中心はそれぞれ「A」と「L」になり、その2文字を中心に揃えると整えやすいことがわかります。
全体を結合してブラッシュアップする
最後に全体を組み直して、パーツが空きすぎている箇所がないか、狭い箇所がないかを見直します。
単語を分解することで、見る視点を狭めることができ、混乱を防ぎながら調整することができます。
スペースの関係性
文字と文字のスペースであるレタースペースの他にも、単語と単語のスペースである「ワードスペース」や、行間である「ラインスペース」、文と文の余白である「カラムスペース」やページ全体の余白である「マージン」といったスペースがあります。
これらのスペースは全て関連づけられており、レタースペースが多めに取られている場合、その他のスペースも順に広がっていくものとされています。
そのため、デザインをする際は、レタースペースを基準としてその他のスペースを調整することで全体的なバランスがとりやすくなります。WEBサイトやアプリでも、余白が広いデザインの場合は、レタースペーシングも広めに取られていりたりと、目的に合わせて調整されているのが感じられるのではないでしょうか。
文章の読みづらさなどを感じた場合は、レタースペーシングにあわせて調整するとバランスが取れることがあります。
余白はデザインの基本的かつ大切な要素です。その基準点とも言えるレタースペーシングは、デザインにおける重要な点となるため、今後はよりその点も意識していきたいと思います。
まとめ
色々な書籍や記事を見てきたのですが、やはりスペーシングについては全くの正解はないとされていました。時代や流行によっても変わってくるものであり、人の感覚によって違うものなので、難しい点です。
だからこそ、自分の中で指針立てて、より多くの方に共感してもらえるものを目指す必要があるのだと感じました。今後も色々な視点を持ちながら経験値を上げていきたいと思います。
参照記事/書籍
カーニングのコツと考え方 文字詰めの基本をわかりやすく解説 | 321web
基本的な考え方からデザインソフトを使った実践方法までわかりやすくまとめられた記事です
レタースペーシングの基本から、フォントの作り方・歴史、実際のロゴデザインのスペーシング解説までわかりやすくまとめてある本です！
実際のレタースペーシングをWEB上で手軽に練習することができるサイト
英単語のみなのですが、隙間時間に色々な単語で練習することができるので移動時間とかにおすすめです。