見出し画像

ビギナー必見!タイポグラフィを扱う上で大事なこと

当たり前ですがWebやアプリケーションは文字情報が大部分を占めます。今回はタイポグラフィを扱う上で意識していること書きたいと思います。(ノンデザイナー、初心者向けの内容です。)

詰める、揃える

画像1

テキストを打ち込んだだけでは、文字と文字のスペースが乱雑に見えるので文字詰め(カーニング)を行いましょう。文字詰めは一長一短でできるものではないですが、最低限行っているものと、行っていないものでは印象がぜんぜん違います。

同じフォントでも英数字は一回り小さく作られているので、少し大きくするなどして大きさが揃って見えるようにしましょう。

画像2

またハイフンなど記号は中央より下に位置していることが多い(フォントによる)ので、中央に位置するように調整するのがよいです。

画像7

テキストを疑う

画像3

スタッフ、クライアントが用意してくれた文言、文章でも、ただ流し込むのではなく、記号など正しい使い方をしているか確認を行う。英数の記号と日本語の記号が混在してたり、誤った使い方をしていることはけっこうあります。
また電話番号、連絡先、日付、曜日などは、別資料、カレンダーを確認するようにしたほうがいいです。それ以外も内容は問題ないか、意味が伝わる文章か、どのような印象を与えるか確認するのがいいでしょう。
このような確認を行うだけで、様々な事故が回避できます。

画像8

文字間はリズム

画像4

人間はタイポグラフィを見た瞬間に頭のなかで読んでいます。
文字間が狭いと早く、広いとゆっくり、どのような印象で伝えたいかリズムを考えるとよいでしょう。

画像9

読ませる文章の行間

画像5

画像6

長めの読ませる文章の行間はフォントサイズの150%〜200%が読みやすいと言われています。また横幅の文字数は36文字から40文字程度で折り返すいいです。それ以上長いと前の行を記憶できないそうです。

画像10

さいごに

当たり前のことばかりですが、私が若い頃に先輩デザイナーたちから口酸っぱく教えていただいたことを自戒をこめて書いてみました。

Webやアプリなどでは調整できることが、限られていますが、何気なく読んでいる文章も少しのことを意識するだけで、印象は大きく変わります。ユーザーにどのように伝えたいを意識して制作していきたいと思います。

【マネーフォワードでは愛のあるデザイナー募集中】
マネーフォワード ホームカンパニーのデザイン部が気になる方、デザイナーとラフに話してみたい人は、こちらからご連絡ください!


この記事が気に入ったらサポートをしてみませんか?