日付・価格など数字を使った文字組をキレイに見せる数字デザイン

イベントやセールの告知では日付や価格など数字を使ったの文字組を大きく扱うことが多いかと思います。

数字と漢字の組み合わせになるので、ベタ打ちのままだとバランスが悪く、ダサいデザインになってしまいます。

この記事では日付デザインや価格デザインなどの数字を使った文字組のやり方を紹介とイラストレーターでの調整方法も合わせて紹介します。

Adobe Illustratorの期限が切れそうな方や持っていない人はAdobe CCをお得に購入できる方法を参考にどうぞ。

日付けの文字組

日付のベタ打ちはこんな感じです。調整方法を紹介します。

数字を大きさを変えてメリハリをつける

伝えたい優先順位を決める。

伝えたいのは日にちなので、数字を大きくして目立たせます。数字を大きくすることでメリハリがついて数字が埋もれることなく見やすくなりました。

また、西暦は日にちと同じように目立つ必要がないので、小さくしてより日にちを目立たせます。

数字のフォントを変える

同じ書体をそのまま大きくしても目立ちますが、数字の書体を変更することでより差別化ができて数字が強調されます。当然ですが、年、月、日のフォントより太めの方がバランスは良くなります。

字間・ベースラインを微調整をする

字間の調整

文字の書体を変更して、メリハリは着きましたが、パラパラした印象なので、字間を調整します。

2022年・9月・23日とそれぞれグループを意識してに字間の調整をします。極端に開けたり詰めたりすると違和感が出るので、なんとなくグループで別れている程度の調整でOKです。

あと「0」の左右が開いた印象なので詰めます。

ベースラインの調整【イラストレーター】

先程、ベースラインを揃えましたが、よく見ると漢字と数字がずれています。漢字のみを指定して「ベースラインシフトを設定」を調整します。

細かいことですが、大きく扱うときは特に注意が必要です。

日付けの文字組みができました。

デザインをして「なんとなくパラパラする」「まとまりがなんとなくない」なんて場合は意外にこのような細部の調整をすると解決したりします。細かな調整の積み重ねがまとまった良いデザインになることは間違い無いです。

曜日のバリエーション

曜日の入れ方を工夫することで日付にアクセントをつけることができます。

日付けの文字組参考

伝えたいこと目立たせるジャンプ率についての記事も参考にどうぞ。

その他の数字の文字組

金額の文字組

金額表示のポイント

• 数字のフォントを変える：円・（税込）より太いフォントを選ぶ
• 円・（税込）・万円を小さくしてまとめる
• 字間の調整をする：「,」の前後は数字によっては空きすぎるので調整をする
• ベースラインを揃える

金額の文字組参考

割合の文字組

• 小数点以下・％は小さく表示することで数字を目立たせる

参考

電話番号の文字組み

ベタうちのままだと「-」が少し下がって表示されるので、「ベースラインシフトを設定」で少し上に上ます。

時間の文字組み

「：」も同様にが少し下がって表示されるので、「ベースラインシフトを設定」で少し上に上げてセンターにします。

まとめ

日付や価格などの数字を使った文字組のやり方でした。

ベースラインや字間の調整は細かいことですが、この積み重ねが読みやすく、わかりやすいデザインにつながります。

素人っぽいデザインか、プロっぽいデザインかはこのへんの小さな調整で違いが出てきます。

参考になったら幸いです。

• 価格表記に最適なおしゃれな数字フォントを集めた記事も参考にどうぞ。

• その他の文字組デザインのコツを書いた記事も参考にどうぞ。