知っていると使える文字のジャンプ率について

screen_typo

今日は文字のジャンプ率についてです。

ジャンプ率とは例えばタイトルと本文の文字サイズの比率の事です。

 

この比率が大きいとタイトルと本文の役割分担が一目でハッキリと分かり易く、

さらに比率が大きくなればなるほど元気な印象を与えます。

 

また今回もずさんな例ですが図でご紹介していきます。

まずは比率がほぼ無い例です。

 

ここでは「WEBdesign」タイトル

「WEBデザインのあれこれについてあれこれの文章」本文としています。

ジャンプ率01

ジャンプ率01

今回も大げさな例ですが、見て分かるとおり、

タイトルと本文の見分けがつきません。

これは大きさもほとんど同じですし、文字の書体などもほぼ一緒(ゴシック体)だからです。

 

ではここからジャンプ率を上げて見ましょう。

ジャンプ率02

ジャンプ率02

ガツンと大きさ広げれば、もうタイトルと本文でそれぞれが違う役割をしているのだろうという事は分かります。

 

ここまで文字だけでの説明で、どういう時に使うかのイメージがわかないかもしれないので、

例えば下記のように使われることがあるのかもしれません。

ジャンプ率02-2

ジャンプ率02-2

これだとタイトルとサブタイトルという役割になるのですかね。

 

ジャンプ率が文字の大きさの比率の意味だけで使われるのかもしれないのですが、

自分は文字の大きさ以外の要素でもジャンプ率と、かってに使っちゃってます。

その例をここからいくつか思いついたモノをご紹介します。

ジャンプ率03

これは文字の大きさはほとんど変わってないですが、文字の太さが変わってます。

ちょい離してもいるのでタイトルと本文かなっていうのは分かるかと思います。

ジャンプ率は最初の例みたいに大きさを思いっきり変えればできるのですが、

躍動的になりすぎて、落ち着いたイメージの時には合わなくなってしまう時があると思います。そういう時は上の例のように大きさは変えず、太さやスペースを空けたりすることで解決するかもしれません。

 

ジャンプ率04

ジャンプ率04

タイトルを中抜きにしてみたり、

 

ジャンプ率05

ジャンプ率05

フォントを変えてみたりしてみます。フォントもまったく違うモノにすることで、

ジャンプ率が大きい、というのかもしれません。

 

ジャンプ率06

ジャンプ率06

ぼかしてみたり。

ここまで来ると遊んじゃってます。今初めて試しました笑

 

デザインて考えると可能性がいっぱいあるようで自分なりに応用していったりしてくると楽しくなってきますね。

 

Photoshopでタイトル部分をゴリゴリに着飾ったりしなくとも、

ちょっとした工夫で上手く見せられたりもするという事が言いたいんだと思います。ジャンプ率。

 

 


このエントリーをはてなブックマークに追加
TAGS: