* タイポグラフィによる美しいテキストレイアウト *
美しいテキストレイアウトの作成方法 2
テキストレイアウトについて少しテクニカルなお話をします。
まず前提として、
文字は何よりも最優先
覚えておきましょう。
文字というのは加工するほど読みづらくなるので、
どちらかといえば、やってはダメな処理の方が多いんです。
ということで、テキストレイアウトでやらない方がよい、
また、こうした方がよいというお話しをします。
フチ文字
文字の周りにフチを入れる処理はしないほうが良いです。
書体というのは何も加工されていない状態が一番美しいからです。
たとえば文章を置いたとき、背景との色差で読めない場合、
仕方なく白や黒のフチを文字の周りに入れる処理を検討すると思いますが、
ご覧の通りこれはこれで読みづらくなります。
色を周囲に合わせればいいという話でもなく、
フチ文字は読みづらい
言い換えれば負けフラグなんです。
せめてフレア処理にするか、
こんなグラデを用意して、
文章の下に敷けば、背景と同化して自然な感じで読めるようになります。
文字を犠牲にしては駄目です。
フチ文字をどうしても使いたい場合
どうしてもと言うなら仕方ないですね。
とりあえず色フチと白フチの2タイプ用意します。
フチを細く出来るのであれば細くします。
それができない場合は、
まず、文字の中抜け箇所をフチ色で埋めます。
抜けて向こうが見えるのはみっともないですからね。
赤白や黒白など文字とフチの色差が激しい場合は、
薄い色を濃く、または濃い色を薄くして色差を減らします。
目に優しい色合いが読みやすくさせます。
ちなみにこういうのは線画なのでフチ文字とは違います。
浮き文字
浮き上がらせた文字、浮き文字。
ドロップシャドウとも言います。
この処理自体に問題はないのですが、やりすぎには注意です。
せめてこのくらいですかね。
文章と影が離れるほどぼかしを強くしていき、影は薄目がキレイです。
影が文章に近い場合、
こんな感じ。
文字に限らず、オブジェクトなどにも同じことが言えます。
例えばボックスフレームなんかは、
これだとやりすぎなので、
罫線をなくして影だけでフレームを構成。
右と下の影を1.5倍ほど出すとちゃんとドロップシャドウになります。
まとめ
* TypoGraphy 特集 * はここまでです。
いろいろお話ししましたが、まぁあれですね
結論：
何事も、
やりすぎ注意
ほどほどが一番美しいんです。
おさえて、おさえて、丁寧に。
美しいテキストレイアウトを目指していきましょう。
大丈夫。なれれば誰でもできるようになります。
KUMA* STUDIO PRO で、UNITYでタイポグラフィ入魂チャレンジしていますので、
もし興味があればご覧ください。
▷ KUMA* STUDIO PRO タイポグラフィによる美しいテキストレイアウト
0コメント