変数フォントを使用するための4ステップ

Sep 11, 2025

操作方法

Variable fonts: The outlines of various weights and style of a single font family in magenta, emblazoned with the words 'Get versatile with variable fonts' in a bold, sans serif font.

（画像クレジット：未来）

変数フォントFont Designersがフォント自体内のタイプのバリエーションを定義できるようにして、1つのフォントファイルが複数のフォントのように機能することができます。標準フォントは、それぞれ異なるスタイルを表す複数の別々のフォントファイルを含むフォントファミリにグループ化されます。たとえば、軽量または太い重みです。変数フォントには、単一のフォントファイルにこの同じ情報がすべて含まれています。

ソースSANS PROを例として使用すると、変数バージョンのフォントの合計は約394KBで、さまざまな重みになります。これらのフォントの重みを標準のフォントファイルとして個別に使用する場合は、平均して、それぞれ234KB、それぞれが約1856KBの組み合わせファイルサイズになります。もちろん、この計算は、すべてのフォントの重みが標準のフォントとして個別に存在することを前提としています。（通常のフォントだけを探している場合は、弊社の投稿をチェックしてください。 最高の無料のフォント 利用可能です。）

標準フォントとして存在しないフォントを削除すると、組み合わされたファイルサイズはまだ変数フォントのサイズと著しく少ないスタイルの3倍です。太字と定期的なバージョンをたとえたとえたとえ多くのWebプロジェクトで一般的なものであっても、標準ソースSANS Proフォントの2つのバージョンはまだ単一の変数フォントよりも大きいです。これが実証されているのは、変数フォントを使用すると、設計や創造性を犠牲にすることなく帯域幅を大幅に節約する可能性があります。

A comparison of the filesize of a range of font weights between a standard and a variable font – the standard font family totals 1864kb compared to 394kb for the variable font. — フォントソースSANS PROの標準バージョンと変数バージョン間のフォント重みの範囲のファイルサイズの比較（イメージクレジット：マンディマイケル）

変数フォントは、軸に沿ってマスターバリエーションを補間することによって機能し、基本的に新しいポイントを構築します。これは、軸に沿って任意のポイントでフォントウェイトを設定することができます。これは、はるかに多数のスタイルやバリエーションを表示します。さらに、変数フォントを各バリエーションの間でアニメートすることができると補間することができ、スムーズな遷移を太い重量に太い重量にすることができます。

可変フォントをさらに刺激的にするのは、設計者が単一の軸に制限されていないということです。変数フォントには、さまざまなスタイルの範囲を表すさまざまな軸を含めることができます。これには、凝縮、イタリック体、光学サイズ、またはその他のより創造的またはカスタムオプションが含まれます。

フォントを新しいウェブサイトに置きたいですか？ Webデザインリソースのために、私たちの最高に向かいます ウェブサイトビルダー トップの切り札とピック ウェブホスティング サービスまたはストレージアップグレードのために、これらをチェックしてください クラウドストレージ オプション。

01.変数フォントの軸を理解する

A chart showing a single variable font transforming along two axes: weight and width. It ranges from low weight and narrow in the bottom left corner to high weight and thick at the top right. — 重みと幅軸にわたる変数フォントの補間を見ると、利用可能なカスタマイズの範囲が表示されます。（イメージクレジット：マンディマイケル）

CSSの変数フォントを使用すると、Web上でフォントを通常使用する方法と非常によく似ています。 @ Font-Face At-Rune 。ただし、まず、可変フォント内のさまざまな種類の軸を理解する必要があります。

可変フォントには2種類の軸があります。登録軸とカスタム軸です。登録された軸は、標準化する価値があるほど十分に一般的な軸を指します。現在5つの登録軸があります。重量、幅、傾斜、イタリックおよび光学サイズ、およびこれらは、フォントウェイトなどの既存のCSSプロパティにマッピングされることがよくあります。

カスタム軸は書体の設計者によって定義され、任意の種類のバリエーションにすることができ、Fontファイル内の4文字の識別子はCSSで参照できます。

02.登録軸を使用してください

A range of variable font weights along an axis from light (200) to black (900). — 重量の変動は、光（200）から黒（900）までの軸上で定義されます（900）（イメージクレジット：マンディマイケル）

登録軸に関しては、それに関連するCSSプロパティを使用していることを確認します。たとえば、フォントウェイトやフォントスタイルなどです。

Theを使用してフォントを設定できます @ Font-Face At-Rune 私たちが通常どおりです。変更は、フォントウェイト、フォントストレッチ、フォントスタイルのような記述子のバリエーションを定義する方法です。以前は200のフォントウェイトを設定し、これをフォントのライトバージョンとして定義しました。デザイン。変数フォントを使用すると、単一のフォントフェイスブロックのみが必要です。したがって、複数のインスタンスを使用する代わりに、フォント軸上で定義されている最小値と最大値に対応する値の範囲を指定します。

 @フォント面{
フォントファミリ： "ソースSANS変数";
SRC：URL（ "source-sans-variable.woff"）フォーマット（ "Woff-bariations"）。
フォント重量：200 700;

この例では、200から700のフォントの重さを設定します。次に、フォントがその軸に定義されている900重量を持たせても、900の重みを定義してみてください。使用できません。範囲はあなたがあなたのCSSにアクセスできるものを定義します。

03.カスタム軸を設定します

カスタム軸を使用するときに既存のCSSプロパティが存在しないため、Font-Variation-Settingsという新しいCSSプロパティを使用する必要があります。これにより、必要な数の名前とカスタム軸を定義できます。

 H1 {
フォントファミリー：「私の変数フォント」;
フォントバリエーション - 設定： 'wght' 375、 'Inli' 88;

ここでの例では、wghtは登録された重みの軸を指し、InliはInlineと呼ばれるカスタム軸と呼ばれ、それぞれは変動軸に沿ったポイントに対応する関連数値値を表します。登録軸をFont-Variation-Settingsの値として参照できますが、代わりにマッピングされたCSSプロパティを使用することをお勧めします。

古いブラウザでサポートを確保するために、CSS機能検出を利用して、サポートされていないブラウザにフォールバックフォントを使用できます。

 H1 {
  フォントファミリー： "Source Sans"、Sans-Serif;
  フォント重量：700;
}

@supports（フォントバリエーション - 設定：Normal）{
H1 {
 フォントファミリー： "Decovar";
 フォントバリエーション - 設定： "INLI" 88;
 }

Font-Variation-Settingsサポートを確認することで、サポートCSSブロック内の変数フォントスタイルを含めることができます。

04. JavaScriptと変数フォントを組み合わせます

A range of As rendered in a variety of font weights and sizes, showing the smooth transitions offered by variable fonts. — 可変フォントにより、薄い太さから太い重みへのスムーズな遷移が可能になります。これにより、JavaScript変数を使用してスムーズな変換を作成できます。（イメージクレジット：マンディマイケル）

私たちは、私たちがより微調整されたコントロールを望んでいる場合、または私たちがCSSだけでアクセスできないイベントに基づいてフォントを変更することができる状況についてはJavaScriptイベントを利用できます。簡単な例では、私たちのフォントの重みと私たちのビューポートのサイズに合わせるでしょう - ビューポートが小さくなると、フォントの体重は重くなります。

流体スケールを作成するためには、フォントの重みとビューポートのサイズの2セットの値と単位セットを揃える必要があります。 window.innerwidthを使用して現在のビューポート幅にアクセスし、それを0~0.99の範囲に変換することで新しいパーセンテージベースのスケールを作成できます。最小ビューポートサイズを含めることで、効果の範囲を制御できます。

 var viewPortScale =
（window.innerwidth  -  MinWindowsize）/（MaxWindowsize  -  MinWindowsize）;

その後、ビューポートのサイズに基づいてフォントの重みを決定します。

 VAR FontWeightScale = ViewPortScale *（MinFontWeight  -  MaxFontWeight）+ MaxFontWeight;

CSSカスタムプロパティを使用して、JavaScriptの値を使用して、CSSのフォントの重みを更新できます。

 P.Style.SetProperty（ " -  weight"、fontweightscale）;

これが関数に組み合わされてサイズ変更イベントリスナーに接続されると、ウィンドウの新しいサイズに基づいてフォントの重みを更新できます。

この基本的なアプローチでは、すべての方法のイベントや経験に基づいて自分のタイポグラフィを変更することができます。ビューポートが広いところは、より詳細になることができます。逆に、それが小さく、より狭いスペースでは、フォント幅の減少や体重を増やすことを調べ、読みやすさ、使いやすさ、設計の観点から私たちのコンテンツとタイポグラフィをより良い管理を提供するかもしれません。

あなたはできるコードを見るこれについてはコードペン。

この記事はもともと発行318に発行されました ネット Webデザイナーや開発者向けの世界で最も売れている雑誌。 ここでネットを購読する 。

CSSの生成時の変数フォントの詳細を説明します

An image promoting Bianca Berning's talk 'The future of type' at Generate CSS on 26 September. — （イメージクレジット：Getty / Bianca Berning / Future）

CSSの生成での彼女の話は、2019年9月26日にリッチミックスで開催されたwebデザイナーのための焦点が稼働したCSSカンファレンス、ロンドン、ビアンカベニメントは、伝統的なフォントが伝統的なメディア内の書面による言葉の新しい機会を新しい、没入豊かに創造することができる方法を探求します。 AR、VR、および複合現実などの経験。

あなたがこれと他の素晴らしい協議をキャッチしたいのなら、それは今あなたのチケットをスナップする価値があります。 8月15日に5pm UTCの前にあなたをつかむならば、あなたはたった£199 + VATを支払う£50を節約することができます。今すぐあなたのチケットを購入してください！

関連記事：

Tech Typeはタイプを変えています
CSSで変数フォントを始めましょう
変数フォントを使用してタイプをオンラインに変換します

変数フォントを使用するための4ステップ

01.変数フォントの軸を理解する

02.登録軸を使用してください

03.カスタム軸を設定します

04. JavaScriptと変数フォントを組み合わせます

CSSの生成時の変数フォントの詳細を説明します

操作方法 - 最も人気のある記事

ブランドタイポグラフィ：完全なガイド

デジタルプレンエアー絵画の作成方法

映画館4Dのコンセプトアートをモデル化する方法

19世紀のマスターのようにペイントする方法

チャットボットインタフェースの構築方法

Marvelとの完璧なプロトタイプとハンドオフデザイン

ハーレー・クインを描く方法

彫刻と塗装済みの移動マップを組み合わせる方法

カテゴリ