Webフォントのデザインテクニック

セルフホスティングの場合、フォントの読み込みには @font-face を使います。そのプロパティである unicode-range を使うことで、フォントの使用する文字範囲を指定できるため、複数書体の混植ができます。 ただし、 unicode-range には、フォントデータをサブセットする機能はなく、表示している文字以外のフォントデータも全てダウンロードされることに注意して…

Webフォントの中には、OpenType機能を使って字形を変更できるものがあります。 たとえば、濱明朝イタリックにはリガチャ liga と任意の合字 dlig が含まれています。これらは CSS で font-feature-settings を指定することで、利用を制御できます。 以下は liga と dlig をそれぞれ有効／無効にしたものを並べたものです。 通常、ブラウザ…

大きい見出しなどに Web フォントを利用する場合、画面やウィンドウサイズによっては、改行位置がデザインの意図通りでないものになることがあります。 これを解消するために、改行可能位置を示す<wbr> 要素がありますが、日本語の場合は、1文字1単語と解釈されてどこでも改行してしまうので、現状は、以下のように少し複雑な指定をする必要があります。 上が何もしていないもの、…

タイポグラフィを活かしたサイトデザインでは、スクリーンに対して大きく表示したり、周りのグラフィック要素との相対的な位置やサイズが重要になる場合があります。 例えば、以下のようなデザインカンプ（デザインの完成見本画像）の場合、ウィンドウサイズの変化によって、テキストのサイズや位置が変わると要素の比率が変わってしまい、コーヒーのビジュアル部分にテキストがかぶってしまうなど、デザイン…

見出しやリード文など、文字サイズが大きいために文字間が目立つ場合や、文の視覚的なまとまりが欲しい場合は、詰め組みするとより綺麗に見せることができます。 OpenType フォントは、文字の形状だけでなく、文字組版に関するさまざまな機能についての情報を含んでいます。 このうち、paltとkern（縦組みの場合はvpalとvkrn）という OpenType 機能を利用することで、W…