Webフォントの最適化06「size-adjust・ascent-override・descent-override」

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

Webフォントの最適化05「unicode-range」

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

Webフォントの最適化04「サブセット化」

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

Webフォントの最適化03「ファイル形式」

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

Webフォントの最適化02「font-display」

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

Webフォントの最適化01「FOIT・FOUT」

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

Webフォントのデザインテクニック05「混植してみよう」

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

Webフォントのデザインテクニック04「字形を変更しよう」

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

Webフォントのデザインテクニック03「改行位置を指定しよう」

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

Webフォントのデザインテクニック02「文字サイズを画面サイズに合わせる」

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

Webフォントのデザインテクニック01「見出しやリード文を詰め組みしよう」

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

Webフォントの概要05「Webフォントの配信形式:セルフホスティング」

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

Webフォントの概要04「Webフォントの配信形式:フォント配信サービス」

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

Webフォントの概要03「Webフォントの課題」

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

Webフォントの概要02「Webフォントの魅力・利点」

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

Webフォントの概要01「Webフォントとは」

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