バリアブルフォントは、高度にカスタマイズ可能なフォント技術です。 Adobe Fonts バリアブルフォントパネルを使用すると、バリアブルフォントの外観を調整し、プロジェクトに最適なスタイルを選択できます。 現在バリアブルフォントをサポートしている Creative Cloud アプリは、Photoshop、InDesign、および Illustrator です。
バリアブルフォントの概要
バリアブルフォントは、1 つのファイルを使用して多くのフォントスタイルを保存しますが、静的フォントは使用可能なスタイルごとに個別のファイルを使用します。 これらを使用すると、フォントのデザイン軸ごとに値を指定できるため、静的フォントではできないフォントの外観の制御を行うことができます。
従来の静的フォントでは、プロジェクトで使用する個々のスタイルを追加またはインストールする必要があります。 たとえば、Acumin Pro では、Acumin Pro 標準、Acumin Pro 斜体、および使用したいその他のスタイルを追加することができます。 Acumin Variable には Acumin のすべてのスタイルが含まれているため、1 つのフォントを追加するだけで済みます。
バリアブルフォントの各設定はインスタンスと呼ばれます。 インスタンスは、すばやくアクセスできるように作成されたプリセットスタイルです。上の図のバリアブルフォントパネルは、Acumin Variable がデフォルトインスタンスに設定されていることを示しています。これは、すべてのバリアブルフォントがカスタマイズ前に使用する事前定義された設定です。
パネルのさらに下にあるのは、軸コントロールです。 軸は、スタイルバリエーションの連続的な範囲を表します。1 つのバリアブルフォントには複数の軸を含めることができます。軸は最小値から最大値の範囲内で任意の数値にカスタマイズできます。Acumin Variable の例では、軸は傾斜、線幅、幅です。
Adobe Fonts Web サイトでバリアブルフォントを使用する方法
Adobe Fonts Web サイトにあるバリアブルフォントのすべてのファミリー詳細ページには、フォントを目的のスタイルにカスタマイズできるインタラクティブなテキストツールとパネルが含まれています。 プリセットインスタンスを選択して、すばやく操作したり、独自のインスタンスを作成したりできます。
バリアブルフォントを Web プロジェクトに追加する
バリアブルフォントを Web プロジェクトに保存するには、ファミリーページのバリアブルフォントパネルの上にある「Web プロジェクトに追加」を選択します。 正しいフォントが選択されていることを確認してください。一部のバリアブルフォントには、ファミリー内に追加のフォントがあります。
パネルの下部にある「CSS をコピー」を選択して、作成したカスタムインスタンスに対応するコードを取得します。 カスタム設定がない場合、コードはデフォルトのインスタンスを反映します。
?$png$&jpegSize=100&wid=300)
バリアブルフォントをカスタマイズした後、ブラウザーの URL をブックマークして、最後のカスタム設定を後で再確認するか、「URL をコピー」を選択して設定を共有または保存します。
使用中のバリアブルフォント
バリアブルフォントは、カスタマイズ可能な性質のため、デジタルグラフィックから製品パッケージ、さらに車両の広告まで、様々な用途に最適です。 幅を調整することで、不規則な表面でも読むことができるようにフォントを配置できます。
クリエイティブなバリアブルフォント設定は、ブランドの個性を引き出したり、ローワーサードのグラフィックに収まらないことが多い長いタイトルに対応したりできます。
傾斜、線幅、および幅の軸を使用して、車のドアパネルに合わせて Obviously Variable を調整します。 Acumin Variable は、ローワーサードの長いタイトルに使用されます。
バリアブルフォントを使用して、ビルボードやポスターに視覚的な階層を作成したり、パッケージデザインの小さなスペースや奇妙な形状に合わせてバリアブルフォントを調整したりできます。
バリアブルフォントは、段落の位置合わせでより適切な改行を作成することで際立ちます。 特に、幅軸を使用すると、より効率的で視覚的に快適な単語間隔を設定できます。
バリアブルフォント機能により、レスポンシブ Web デザインで優れたパフォーマンスを発揮できます。 1 つのバリアブルフォントを使用して小さい画面サイズから大きい画面サイズまで調整できるため、ファイルサイズを小さく保ち、読み込み時間を短縮できます。
コードスニペットを CSS に追加して、バリアブルフォントをアニメーション化したり、サウンド、アンビエントライト、またはコンピューターシステムのテーマに反応したりすることができます。 また、バリアブルフォントの軸を使用すると、バリアブルフォントのアニメーション化が容易になります。
書体デザイナーは、このフォント技術と対話し、革新する新しい方法を模索し続けています。
