Adobe Fonts のバリアブルフォントを使用する

バリアブルフォントは、高度にカスタマイズ可能なフォント技術です。Adobe Fonts バリアブルフォントパネルを使用すると、バリアブルフォントの外観を調整し、プロジェクトに最適なスタイルを選択できます。現在バリアブルフォントをサポートしている Creative Cloud アプリは、Photoshop、InDesign、および Illustrator です。

 

Adobe Fonts でバリアブルフォントを参照する

バリアブルフォントの概要

バリアブルフォントは、1 つのファイルを使用して多くのフォントスタイルを保存しますが、静的フォントは使用可能なスタイルごとに個別のファイルを使用します。これらを使用すると、フォントのデザイン軸ごとに値を指定できるため、静的フォントではできないフォントの外観の制御を行うことができます。 

従来の静的フォントでは、プロジェクトで使用する個々のスタイルを追加またはインストールする必要があります。たとえば、Acumin Pro では、Acumin Pro 標準、Acumin Pro 斜体、および使用したいその他のスタイルを追加することができます。Acumin Variable には Acumin のすべてのスタイルが含まれているため、1 つのフォントを追加するだけで済みます。 

グラフィカルユーザーインターフェイス、自動生成されるアプリケーションの説明
Acumin Pro は 18 を超える個別のスタイルを備えた静的フォントで、それぞれを追加して使用する必要があります。または、Acumin Variable では傾斜、線幅、および幅の軸を利用できるため、1 つのフォントを追加してカスタマイズすることができます。

バリアブルフォントの各設定はインスタンスと呼ばれます。インスタンスは、すばやくアクセスできるように作成されたプリセットスタイルです. 上の図のバリアブルフォントパネルは、Acumin Variable がデフォルトインスタンスに設定されていることを示しています。これは、すべてのバリアブルフォントがカスタマイズ前に使用する事前定義された設定です。  

パネルのさらに下にあるのは、軸コントロールです。軸は、スタイルのバリエーションの連続範囲を表します。1 つのバリアブルフォントに複数の軸を含めることができます。軸は、最小値または最大値の範囲内の任意の数にカスタマイズできます。Acumin Variable の例では、軸は傾斜線幅です。

Adobe Fonts Web サイトでバリアブルフォントを使用する方法

Adobe Fonts Web サイトにあるバリアブルフォントのすべてのファミリー詳細ページには、フォントを目的のスタイルにカスタマイズできるインタラクティブなテキストツールとパネルが含まれています。プリセットインスタンスを選択して、すばやく操作したり、独自のインスタンスを作成したりできます。  

グラフィカルユーザーインターフェイス、自動生成されるアプリケーションの説明

バリアブルフォントを Web プロジェクトに追加する

バリアブルフォントを Web プロジェクトに保存するには、ファミリーページのバリアブルフォントパネルの上にある「Web プロジェクトに追加」を選択します。正しいフォントが選択されていることを確認してください。一部のバリアブルフォントには、ファミリー内に追加のフォントがあります。

グラフィカルユーザーインターフェイス、自動生成されるアプリケーションの説明

パネルの下部にある「CSS をコピー」を選択して、作成したカスタムインスタンスに対応するコードを取得します。カスタム設定がない場合、コードはデフォルトのインスタンスを反映します。

グラフィカルユーザーインターフェイス、自動生成されるアプリケーションの説明

バリアブルフォントをカスタマイズした後、ブラウザーの URL をブックマークして、最後のカスタム設定を後で再確認するか、「URL をコピー」を選択して設定を共有または保存します。

使用中のバリアブルフォント

バリアブルフォントは、カスタマイズ可能な性質のため、デジタルグラフィックから製品パッケージ、さらに車両の広告まで、様々な用途に最適です。幅を調整することで、不規則な表面でも読むことができるようにフォントを配置できます。 

クリエイティブなバリアブルフォント設定は、ブランドの個性を引き出したり、ローワーサードのグラフィックに収まらないことが多い長いタイトルに対応したりできます。  

カメラに向かって微笑む人

傾斜、線幅、および幅の軸を使用して、車のドアパネルに合わせて Obviously Variable を調整します。Acumin Variable は、ローワーサードの長いタイトルに使用されます。

バリアブルフォントを使用して、ビルボードやポスターに視覚的な階層を作成したり、パッケージデザインの小さなスペースや奇妙な形状に合わせてバリアブルフォントを調整したりできます。 

街を背景にしたビルボード
Acumin Variable は、視覚的な階層を作成するために使用されます

テキスト、洗面道具、ローションを含む画像
Minion Variable の線幅とオプティカルサイズの軸は、視覚的な階層を作成するために使用されます

バリアブルフォントは、段落の位置合わせでより適切な改行を作成することで際立ちます。特に、幅軸を使用すると、より効率的で視覚的に快適な単語間隔を設定できます。  

テキスト説明
Kepler Variable の幅軸は、段落の位置合わせで目に見えるギャップを減らすために使用されます。赤い長方形は、各文内で削減されたスペースの量を示しています。

バリアブルフォント機能により、レスポンシブ Web デザインで優れたパフォーマンスを発揮できます。1 つのバリアブルフォントを使用して小さい画面サイズから大きい画面サイズまで調整できるため、ファイルサイズを小さく保ち、読み込み時間を短縮できます。 

テキスト、ジャック、スクリーンショットを含む画像
バリアブルフォントは 1 つのフォントファイルに含まれているため、Web 上での読み込みが速くなります。

ダイアグラム、自動生成されるテキスト説明
バリアブルフォントを Web サイトで使用して、画面サイズの変化に合わせてタイプを調整できます

コードスニペットを CSS に追加して、バリアブルフォントをアニメーション化したり、サウンド、アンビエントライト、またはコンピューターシステムのテーマに反応したりすることができます。また、バリアブルフォントの軸を使用すると、バリアブルフォントのアニメーション化が容易になります。 

シェイプを含む絵
軸の値範囲を通るバリアブルフォントの移動により、アニメーションが可能になります

書体デザイナーは、このフォント技術と対話し、革新する新しい方法を模索し続けています。


関連リソース 

ヘルプをすばやく簡単に入手

新規ユーザーの場合