Webフォント

Webフォントの最適化01「FOIT・FOUT」にて、Web フォントの課題の一つである FOUT（フォントが入れ替わる際のチラツキ）を紹介しました。 Web フォントの利用の際、切り替わりによってテキストの行数が変化することなどにより、ページのレイアウトが変化してしまいます。これにより、テキストの読み取りの阻害や誤クリックなどのユーザー体験の低下や、CLS（Cumulativ…

unicode-range は指定することで、そのフォントで表示する文字の Unicode 範囲を指定することができます。 Webフォントのデザインテクニック05「混植してみよう」では、これを利用して混植表示を試みましたが、最適化でも利用することがあります。 unicode-range は、指定した範囲の文字が出てくるまで、そのフォントが読み込まれることはありません。 例えば、…

Web フォントの利用において、フォントファイル自体の最適化をする際、サブセット化は一番最初に検討される方法です。 サブセット化とは、必要なグリフだけを収録したフォントファイルを生成することです。 その際、不要なグリフを削除するだけでなく、GSUB・GPOS や、他の様々なテーブルも再構築する必要があります。 Web フォント配信サービスでは、利用しているページを解析し、動的に…

Web フォントには、いくつかのファイル形式がありますが、現在ではほとんどのケースで WOFF または WOFF2 フォーマットを使うのが良いでしょう。 WOFF / WOFF2 の主な違いは圧縮アルゴリズムで、WOFF2 のほうが圧縮率が高いとされています。２つのフォーマット間には互換性がないため、WOFF2 を WOFF として、もしくは WOFF を WOFF2 として読…

本記事では、前回の記事の知識を前提としています。以下からお読みいただけます。 前回の記事：Webフォントの最適化01「FOIT・FOUT」 CSS の @font-face ルールの中に、font-display という記述子があります。このプロパティではフォントデータの読み込みが完了するまでの間、どのようにテキストを表示するかを定義できます。 font-display には、…

Webフォントの概要03「Webフォントの課題」にて、日本語フォントはフォントデータの容量が大きく、ページの表示に時間がかかるなどの課題があることを説明しました。本シリーズでは、この詳細と最適化手法を紹介します。 まずは、FOIT・FOUTについてです。 Web フォントを使用すると、フォントデータの読み込みに時間がかかります。その間のテキストの扱いは、大まかに以下の2つの選択…

セルフホスティングの場合、フォントの読み込みには @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…

Web フォントには、主に「フォント配信サービスの利用」と「セルフホスティング」の２つの配信形式があります。 ここでは「セルフホスティング」について説明します。 セルフホスティングとは、Web サイト制作者がサーバー上にフォントファイルを置き、サイト内で利用する方法です。 閲覧数や設定をあまり気にせず自由に利用できる反面、単にサーバーに置くだけでは、閲覧者に知識がある場合にフォ…

Web フォントには、主に「フォント配信サービスの利用」と「セルフホスティング」の２つの配信形式があります。 ここでは「フォント配信サービスの利用」について説明します。 フォント配信サービスとは、Web フォントを配信するサービスを利用する方法です。フォントデータを自前で持つ必要がありません。 タイププロジェクトのフォントも配信しているREALTYPEや、Adobe CC製品に…

前回は Web フォントの魅力や利点について書きましたが、Web フォントにはいくつか課題もあります。 一つは料金の問題で、フォント配信サービス・セルフホスティングライセンスは、ほとんどが有料で、これが一つのハードルとなっているようです。また、長い期間残す必要があるサイトの場合は、現在のフォント配信サービスの料金体系と相性が悪い場合があります。 「デザイナーとしては Web フ…

Webフォントの利用には、様々な魅力や利点があります。まず、印象の統制とブランドの向上です。前回の記事でも軽く触れたとおり、日本ではまだ Web フォントの利用は多いと言えませんが、ブランドや印象が重要な場面に限って言えば、使われる場面がとても多くなりました。これは、国内の Web デザイン参考サイトなどを見るとよく現れていることが分かるかと思います。 コーポレートサイト、ラン…

Web フォントとは、フォントデータをインターネットから読み込み、Web ページをそのフォントで表示することができる技術です。 日本ではまだ常用とは言えませんが、英語圏では既に多くのサイトやサービスが Web フォントを利用しています。 試しに、同じサイトを別のフォントで制作してみました。※これらのサイト・画像の情報は本記事用に作成した架空のものです。 変えているのはフォントの…