デザインに関する備忘録

web・DTPに関して自分が勉強したことを忘れないように日々日記にしてます。

webデザインのフォントタイポグラフィー

この記事では、webデザインのタイポグラフィーに関してまとめています。

 

タイポグラフィーとは

活字などを使って、それを適切に配列することで、印刷物やwebにおける文字の体裁を整える技のことを言います。

イラレなどでフォントを配置した際に、文字と文字の間隔が狭かったり、広すぎたりしてますよね。フォントによってボディサイズやセットの大きさが違います。その体裁を整えて美しいフォントの配置にするのが大切ですね。

 

フォントについて詳しく知りたい方こちらもオススメです。

和文フォント大図鑑

http://www.akibatec.net/wabunfont/study/basic/basic2.html

 

等幅とプロポーショナルフォントの違い

MSゴシックとMSPゴシックの違いって皆さん知ってますか?私は昨日初めて知りました(笑)

MSゴシックは等幅フォントになります。等幅フォントは同じ幅のセットの中に文字が配置されていますので、iやlなどの小さい文字は余白が広くなります。ようは、小学生の時に使っていたようなマス目付きの漢字練習帳のようなものに一文字づつ配置されているのが等幅フォントです。

MSPゴシックはプロポーショナルフォントで文字によってセットのサイズが調整されている、つまりカーニングがすでにされているフォントのことを言います。

 

webでテキストの体裁を整えるにはCSSのletter-spacingしかなかった気がするのでホームページを作ることのフォントはプロポーショナルフォントを使用すると綺麗な文字組みができるかなと思います。

 

逆に、プログラミングなどをされる場合のフォントは等幅フォントの方が見やすいです。

 

また上記で書いた通り、webでテキストの体裁を整えるにはCSSletter-spacingしかないと思われるので(JQueryあたりでありそうな気もするが…)イラレやフォトショでカンプデータを作る時、コーディングの際にテキストを直接入力する箇所はトラッキングしか使わないようにした方が良いですね。

f:id:mi5tsu9a1ki4:20160405103303j:plain

 

そんなわけで今日はここまで。