Webデザインはタイポグラフィが90%以上。
文字を美しく見せることはとても重要である。
タイポグラフィのテクニックについてまとめていく。
和欧混植
和文フォントと欧文フォントで異なるフォントを組み合わせること。
これにより文字が一気に個性的になる。
よくある例がNotoSerif とRobotoの組み合わせなど。
前の会社でやっていたが、今の会社でやってないなということに気づき、ちょい気になったことからこういうのがテクニックとしてあるのだなといま知った。
画像文字でいいのであれば、欧文フォントを少し大きくするとまた違った印象を与えられる。
カーニング
デザインニングインザブラウザしていると忘れがち。
カーニングすることで、見出しのパターンを増やすことができる。
個人的にカーニングはまさに人間の知覚と機械の解釈との戦いだと思っている。
人間が感じるカーニングの心地よさと、機械的な等間隔の並びは違うから、機械が発達しようとなかなかカーニングは手動で行っていることが多いはず。
機械が綺麗にレイアウトを揃えているつもりでも、人間の目で揃っていなければ、それは揃っていないのと同じ。
斜体
アクセントに。
font-style: oblique; を使用してもいいけど、transform: skewX(10deg); とか使うほうが案外良く見えることがある。
手書き文字
どうしようもなかったら、手書き文字を一部に追加するといい。
簡単に目を引かせることができる。
サイズ変更
ちょっとでもいいし、めちゃめちゃジャンプ率をあげたりして、インパクトを与えてみるのもひとつの手。
はみ出し
あえて、不自然に、大胆にはみ出すことで、目を引かせる。
ただし、他のものが綺麗に整列されている中ではみ出すようにすることで、効果的な違和感を感じさせるという意味であって、ランダムレイアウトではない。
下線をつける
ただの下線でもいいし、蛍光ペンのようなカラーにしても強調が可能。
色を変える
ちょっと薄くしたり、印象的な色にしたり。グラデーションにしたりなど。
余白を利用する
行間やテキスト間マージンを利用してみる。
文字の並び、組み方を変える
縦組みにしたり、斜め書きにしたりしてみる。