ダイナミックなタイポグラフィのための可変フォント

さまざまなウェイトやスタイルの複数のフォント ファイルを追跡するのは面倒だと思いませんか? Web デザイナーにとって、通常、太字、斜体、その他のフォントのバリエーションに応じて個別のファイルを作成するのは困難な場合があります。これにより、クリエイティブなプロセスが複雑になり、ワークフローが滞ります。これらすべてのバリアントを 1 つのファイルに結合してみてはどうでしょうか?

そこでバリアブル フォントの出番です。バリアブル フォントは OpenType フォント テクノロジの画期的な進歩で、1 つのフォント ファイルに標準、太字、斜体などの複数のバリエーションを含めることができます。これは、デザイナーが 1 つのファイルを操作するだけで、必要なさまざまな重み、スタイル、幅のすべてにアクセスできることを意味します。この発明により、重量、幅、傾きなどの特性を常に簡単に変更できるようになり、設計プロセスが合理化され、創造的な自由が促進されます。

この記事では、Kyiv Sans フォントを例として、CSS におけるさまざまなフォントの関連性を検討し、ウェイトや MIDL などの非標準フォントのバリエーションなどの品質がいかに重要であるかを示します。これらのツールを使用して、CSS でダイナミックで美しいタイポグラフィを作成する方法を学びます。

バリアブルフォントの紹介

可変フォント技術アーキテクチャにより、デザイナーと開発者は CSS を使用してこれらの文字体裁の特徴を瞬時に制御できるため、プロジェクトの特定の要件に合わせて正確に変更することができます。これにより、読み込み時間が大幅に短縮され、多くの静的フォント ファイルが単一の可変フォント ファイルに置き換えられるため、Web パフォーマンスが向上します。

バリアブル フォントは、従来の静的フォント ファイルでは前例のない程度の柔軟性と精度を備えており、タイポグラフィ テクノロジーの大きな発展をもたらしています。スタイルとウェイトごとに個別のファイルが必要な従来のフォントとは異なり、バリアブル フォントは 1 つのスケーラブルなファイル内に複数のスタイルを取り込みます。これは、重さ、幅、光学サイズなどの 1 つ以上の軸に沿った一定の変化を許可する OpenType フォント スタイルで実現されます。

CSS のバリアブル フォントの利点

これらのツールを使用して、動的で見た目に美しい CSS タイポグラフィを作成する方法を説明します。いくつかの例を見てみましょう:

効率: 複数のフォント スタイルを 1 つのファイルに結合することで、可変フォントにより HTTP リクエストが最小限に抑えられ、ページの読み込みが高速化され、全体的な効率が向上します。

柔軟性: デザイナーは、wght などのプロパティや MIDL や CONT などのカスタム プロパティをきめ細かく制御できるため、さまざまなデザイン コンテキストやユーザーの好みに合わせてタイポグラフィを正確に変更できます。

スムーズなトランジション: 可変フォントを使用すると、フォント スタイルを動的に変更でき、個別のフォント ファイル間の突然の切り替えを回避できます。その結果、フォント スタイル間の移行はスムーズかつスムーズになります。

レスポンシブ タイポグラフィ: 可変フォントを使用すると、ビューポート サイズやその他のユーザー定義パラメータに基づいて調整できるため、レスポンシブ タイポグラフィが可能になり、デバイス間で最適な読みやすさと美的魅力が保証されます。

ダイナミック タイポグラフィ: 可変フォントは、ユーザー インタラクションや環境条件に応じてリアルタイムに変化するため、ダイナミックをサポートし、ユーザーの関与を向上させ、没入型エクスペリエンスを生成します。

アクセシビリティ: 幅広いタイポグラフィック オプションにより、テキストのカスタマイズと変更が可能になり、さまざまなデバイスやユーザー設定での読みやすさと読みやすさを確保できます。

美学: ウェブ上では、バリアブル フォントが創造的なデザインのアイデアを刺激し、タイポグラフィの境界に挑戦し、タイポグラフィの表現と実験の新たな機会を開きます。

スケーラビリティ: バリアブル フォントはレスポンシブ デザインに最適で、品質を損なうことなくスケーラブルであるため、どのようなサイズや解像度でもテキストが鮮明で読みやすいことが保証されます。

バリアブルフォントを使用したレスポンシブでダイナミックなタイポグラフィの概念の紹介

最新の Web デザインでは、デザイナーは、フォントを変更する応答性の高いダイナミックなタイポグラフィを使用して、より柔軟で魅力的なタイポグラフィ エクスペリエンスを作成できます。そのアイデアを分析してみましょう:

フォント内の変数: バリアブル フォントは、wght や特殊プロパティ MIDL および CONT など、書体のいくつかのバリアントを含む単一のフォント ファイルです。バリアブル フォントを使用すると、スタイルごとに個別のファイルが必要となり、これらのバリアント間のスムーズな移行が可能になる従来のフォントに比べて、タイポグラフィ デザインの自由度と効率が向上します。

レスポンシブ タイポグラフィ: 多くの画面サイズ、解像度、表示環境に簡単に適合するようにテキストをデザインすることは、レスポンシブ タイポグラフィとして知られています。大型のデスクトップ コンピューターから携帯電話、その他あらゆるデバイスに至るまで、さまざまなデバイスで最高の読みやすさと美しさを保証します。動的なフォント サイズ、行間、その他のタイポグラフィの変更により、レスポンシブ タイポグラフィがユーザー エクスペリエンスとアクセシビリティを向上させるのに役立ちます。

ダイナミック タイポグラフィ: ダイナミック タイポグラフィは、インタラクションとアニメーションをタイポグラフィック デザインに組み込むことで、レスポンシブ タイポグラフィを強化します。 JavaScript と CSS (Cascading Style Sheets) は、デザイナーがコンテンツの変更、ユーザー操作、またはスクロール動作に適した書体を開発するのに役立ちます。ダイナミック タイポグラフィは、wght、MIDL、CONT などのコンポーネントを使用して、視覚的な魅力とインタラクティブ性を生成し、ユーザーの注意を誘導し、引きつけます。

デザイナーは、動的で柔軟なタイポグラフィ手法とさまざまなフォントを組み合わせることで、豊かで多用途で没入型のオンライン タイポグラフィ エクスペリエンスを作成します。ユーザーのアクティビティに応じて書体を動的に変更したり、重要な情報を強調表示するためにテキスト要素をアニメーション化したり、画面のサイズに基づいてフォントの太さとサイズを調整したりする場合でも、このアプローチはデジタル デザインにおける創造性と発明の多くの機会を提供します。

Kyiv Sans のさまざまなフォント プロパティにより、デザイナーは魅力的で完璧なタイポグラフィーのトランジションを作成できます。これにより、Web マテリアルの美的魅力と実用性が向上し、Web マテリアルのインタラクションと使いやすさが向上します。

可変フォントのプロパティについて

さまざまな書体は、従来の静的フォントにはないさまざまな新しい特性を提供します。変更可能な書体の可能性を最大限に活用するには、これらの特性を知ることが必要です。これらはいくつかの基本的なものです:

ウェイト (wght): 連続軸に沿ってウェイトを変更することにより、可変書体は複数の太さレベル間でシームレスに移行できます。デザイナーは、単一のフォント ファイル内で、ライトからウルトラボールド、およびその間のすべてのポイントまで、ウェイトの範囲を指定できます。

中間層効果 (MIDL): このカスタム軸を使用すると、デザイナーは書体内の中間層効果を変更できます。これにより、テキストに独特の視覚スタイルが与えられるだけでなく、デザインの自由度や創意性もさらに高まります。

コントラスト (CONT): もう 1 つのカスタム軸は CONT で、フォントのコントラストを変更できます。デザイン要件に応じてコントラストを動的に変更することで、テキストの読みやすさと視覚的な魅力を最大限に高めることができます。

これらの特質を理解して適用することは、デザイナーが視覚的に印象的な書体を作成するのに役立ちます。 Kyiv Sans は、さまざまなフォント特性を備え、Web タイポグラフィの使いやすさと外観を向上させる特別なカスタマイズの選択肢を提供します。

バリアブルフォントで利用可能な追加軸とバリエーションの概要

従来の太さ、幅、光学サイズの変更を超えて、可変フォントは幅広いパーソナライズの選択肢を提供します。以下は、利用可能な軸とバリアントの概要です:

可変フォントデザイナーが使用できるいくつかの登録された軸は、OpenType 仕様によって定義されています。

• 幅 (wdth): この軸はフォントの水平方向の拡大または縮小を制御し、デザイナーが文字の幅を変更できるようにします。この軸を調整することで、デザイナーは全体の高さを変えることなく、より狭くまたはより広く見えるフォントを作成でき、圧縮スタイルから拡張スタイルまで柔軟に対応できます。

• 傾斜 (slnt): この軸を使用すると、デザイナーは文字の構造を変更せずに、文字に斜体のような傾斜を適用できます。傾斜軸は通常、伝統的な斜体の効果を模倣しますが、直立した文字の形を保持しているため、文体のバリエーションを作成するのに役立ちます。

• イタリック (ital): イタリック軸は、書体の正立バージョンと斜体バージョンを切り替えます。文字を傾けるだけのスラント軸とは異なり、イタリック軸では、真のイタリック体の筆記体の性質を反映して文字が完全に再設計され、より本格的なイタリック スタイルが提供されます。

• 光学サイズ (opsz): この軸はフォントのデザインを調整して、さまざまなサイズでの読みやすさを最適化します。たとえば、小さいサイズでは、より読みやすくするために太いストロークとよりオープンなカウンターが特徴となり、大きいサイズではより洗練され、繊細になります。この軸は、さまざまなメディアにわたるレスポンシブ タイポグラフィに特に役立ちます。

• グレード (GRAD): グレード軸を使用すると、全体の間隔に影響を与えることなく、フォントのストロークの太さを微妙に調整できます。これは、さまざまな印刷環境や画面環境での読みやすさを向上させるのに役立ちます。ウェイトをわずかに増減すると、コントラストと明瞭さが向上します。

• コントラスト (CNTR): この軸は、フォント内の太いストロークと細いストロークの間のコントラストを変更します。コントラストを調整することで、デザイナーは、低コントラストのヒューマニスト スタイルから高コントラストのモダンなデザインまで、さまざまなレベルの強調と視覚的インパクトを持つフォントを作成できます。

• X 高さ (xhgt): この軸は、フォントの大文字に対する小文字の高さを調整します。 X 高さを大きくすると、小さいサイズでの読みやすさが向上したり、よりモダンな外観を作成したりできます。一方、X 高さを小さくすると、より伝統的またはフォーマルな雰囲気を呼び起こすことができます。

登録された軸とは別に、バリアブル フォント作成者は独自のカスタム軸を指定できます。 Kyiv Sans について: これらは次のとおりです:

• 中間層効果 (MIDL): このカスタム軸は、デザイナーにデザインの多様性を与え、書体内の特定の中間層効果を変更できるようにし、それによってオリジナルのスタイルの側面を追加します。

• コントラスト (CONT): このカスタム軸は、文字フォームの太いストロークと細いストロークの間のコントラストを制御するのに役立ちます。デザイナーはこの特性を動的に変更して、控えめなコントラストからより明白な変化まで、さまざまなレベルのタイポグラフィ表現を実現できます。

登録された軸とは別に、新しい軸を構築するオプションにより、フォント デザイナーは高度なカスタマイズとフォントの外観と特性の高度な制御を実現できます。たとえば、MIDL や CONT などのカスタム軸を使用すると、デザイナーはフォントの特別な品質を調整できるため、柔軟で表現力豊かなタイポグラフィが得られます。これらのカスタマイズを可変フォント登録と組み合わせることで、さまざまなタイポグラフィ効果を作成するさまざまな方法が提供されます。たとえば、中間層効果 (MIDL) 軸を使用すると、デザイナーは書体内の独自の中間層を変更して、芸術的自由度を高める独特の視覚的品質を追加できます。一方、コントラスト (CONT) 軸は、太いストロークと細いストロークの間の変化を制御し、微妙なコントラストから顕著なコントラストまでの動的な調整を可能にします。ウェイトや中間層効果などの軸を操作することで、デザイナーはさまざまな太さと独自のスタイルを持つテキストを作成し、書体の外観を正確に制御できます。同様に、ウェイトとコントラストのバリエーションを組み合わせることで、異なる度合いの太さとストロークのコントラストを備えたテキストを作成し、視覚的なインパクトと読みやすさのバランスをとることができます。これらの例は、登録軸とカスタム軸の両方が提供する比類のない自由度を示しており、デザイナーが特定の美的好みやデザイン目標に合わせて書体を調整できるようにします。

CSS での可変フォントの実装

変更可能なフォントの可能性に魅了されたところで、それらを CSS ベースの Web プロジェクトに適用する方法を調べてみましょう。 CSS は、これらの適応可能な書体の機能を適切に使用する手段を提供します。最初に @font-face を使用してフォントを定義します。これにより、さまざまなフォント ファイルとその特性を提供できます。フォントを設定したら、さまざまな CSS 属性を使用してフォントの軸を動的に変更できるため、さまざまなフォントによってもたらされる可能性を最大化できます。

フォントの入手

まず、プロジェクトに必要なバリアブル フォントをダウンロードする必要があります。
インターネット上のいくつかの Web サイトでは、さまざまなフォント ファイルにアクセスできます。最も頻繁に使用されるフォント Web サイトのいくつかは次のとおりです:

• ネットワークを入力
• フォントリス
• Adobe フォント
• フォントスプリング
• Google フォント
• Vfonts.com

この例では、Vfonts.com にアクセスして Kyiv Sans 可変フォントをダウンロードします。 ttf または woff2 ファイル形式は正常に機能しますが、このデモでは ttf を使用します。フォント ファイルを ttf から woff2 に変換する必要がある場合は、everythingfonts.com:

にアクセスしてください。

上のスクリーンショットは、Vfont にアクセスしたときに表示される内容を示しています。

プロジェクトを次のステップに分けます:

1. vfont に移動: 可変フォント リソースが利用可能な Web サイトにアクセスします。

2. Kyiv* タイプの選択: Kyiv* タイプ フォントを選択すると、フォントがホストされている Behance.net にリダイレクトされます。

3. ダウンロード リンクにアクセスします。Behance ページで下までスクロールして、フォントをダウンロードするリンクを見つけます。

4. Google ドライブからダウンロード: ダウンロード リンクをクリックすると、Google ドライブ フォルダーに移動します。そこからフォント ファイルをダウンロードします。

5. ファイルを解凍します: ダウンロード後、ファイルを解凍してその内容にアクセスします。

6. フォント オプションの確認: 解凍されたフォルダーには、選択できるいくつかのオプションが含まれています。

   • アイコン
   • 変数なし
   • 変数

7. 可変フォントを選択します: 可変フォントを含むファイルに注目します。

   • セリフ
   • 傾ける
   • サンズ

8. Sans フォントを使用する: Sans バージョンのフォントを設定して使用します。 Sans フォント ウェイト ファイルは 360 KB であり、これは 8 つの非可変フォント ファイルを使用するのと同等であることに注意してください。

9. トレードオフを評価する: プロジェクトにとって可変フォントの使用が価値があるかどうかを検討してください。通常、太字、斜体のスタイルのみが必要な場合は、可変フォントを使用する必要がない場合があります。ただし、バリエーションを高度に制御する必要がある場合は、バリアブル フォントが非常に有益です。

注: 上記のファイルは TTF 形式です。

次に、VSCode に進み、vanilla vite プロジェクトを使用します。
プロジェクトの作業を開始するには、必要なパッケージをインストールする必要があります。以下の手順に従う必要があります:

1. 新しいターミナルを開きます。

2. コマンドを実行します
   

   npm create vite@latest
   

3. プロジェクトに名前を付けます。

4. パッケージに名前を付けます。

5. バニラ フレームワークを選択します。

6. JavaScript バリアントを選択します。

7. npm install を実行すると、プロジェクトにネゴシエートして必要なモジュールをインストールするのに役立ちます。

8. 依存関係を設定した後、次のコマンドを使用してアプリケーションを起動します。
   

   npm run dev
   

9. ブラウザ上で実行中のプログラムにアクセスするには、http://localhost:your-port-number にアクセスしてください。

プロジェクトが完了すると、目的のアプリケーションを構築するために修正できる豊富なモックコードが得られます。ダウンロードしたバリアブルフォントは、パブリックフォルダーにドロップされるフォントフォルダーにドロップする必要があります。 style.css、main.js、index.html 内の不要なモッ​​ク コードをすべて置き換えます。

index.html コードは次のようになります。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Variable font</title>
  </head>
  <body>
    <div>



<p>From the code above, we're setting up a simple HTML wrapper for our project where the JavaScript will render content in the <div>

<p>The main.js code should look something like this:<br>
</p>

<pre class="brush:php;toolbar:false">import "./style.css";

document.querySelector("#app").innerHTML = `
  <div>
    <h1>



<p>This is where we use document.querySelector() to add content to the element we insert our content into using the id: #</p>

<p>And the style.css code should look something like this:<br>
</p>

<pre class="brush:php;toolbar:false">body {
  font-family: 'Kyiv Sans';
}

@font-face {
  font-family: 'Kyiv Sans';
  src: url('/font/KyivTypeSans-VarGX.ttf');
  font-weight: 0 1000;
  font-display: swap;
}

h1 {
  color: #bd0c0c;
  height: 100vh;
  display: grid;
  place-content: center;
  margin: 0;
  text-align: center;
}

.variable-font {
  font-family: 'Kyiv Sans';
  font-size: 5rem;
  line-height: 1.1;
  font-weight: 100;
  font-variation-settings:
   'wght' 100, 'CONT' 250, 'MIDL' 0;
  transition: font-variation-settings 500ms;  
}

.variable-font:hover {
  font-weight: 1000;
  font-variation-settings:
    'wght' 1000, 'CONT' 250, 'MIDL' -1000;
}

ここで、上記のコードで何が起こっているのか説明しましょう:

本文のデフォルトフォントの設定:

npm create vite@latest

• 目的: これにより、ドキュメント全体のデフォルトのフォントが「Kyiv Sans」に設定されます。
• 影響: より具体的なスタイルによってオーバーライドされない限り、本文内のすべてのテキスト要素はこのフォントを継承します。

カスタム フォントの定義:

npm run dev

• 目的: @font-face ルールを使用すると、カスタム フォントを定義できます。
• フォント名: フォントの名前は「Kyiv Sans」です。
• ソース: フォント ファイルは /font/KyivTypeSans-VarGX.ttf にあります。
• フォントのウェイト範囲: このフォントは 0 ～ 1000 のウェイトの範囲をサポートしており、可変フォントになります。
• フォント表示: スワップにより、カスタム フォントが読み込まれるまで、フォールバック フォントを使用してテキストがすぐに表示されます。

のスタイル設定要素:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Variable font</title>
  </head>
  <body>
    <div>



<p>From the code above, we're setting up a simple HTML wrapper for our project where the JavaScript will render content in the <div>

<p>The main.js code should look something like this:<br>
</p>

<pre class="brush:php;toolbar:false">import "./style.css";

document.querySelector("#app").innerHTML = `
  <div>
    <h1>



<p>This is where we use document.querySelector() to add content to the element we insert our content into using the id: #</p>

<p>And the style.css code should look something like this:<br>
</p>

<pre class="brush:php;toolbar:false">body {
  font-family: 'Kyiv Sans';
}

@font-face {
  font-family: 'Kyiv Sans';
  src: url('/font/KyivTypeSans-VarGX.ttf');
  font-weight: 0 1000;
  font-display: swap;
}

h1 {
  color: #bd0c0c;
  height: 100vh;
  display: grid;
  place-content: center;
  margin: 0;
  text-align: center;
}

.variable-font {
  font-family: 'Kyiv Sans';
  font-size: 5rem;
  line-height: 1.1;
  font-weight: 100;
  font-variation-settings:
   'wght' 100, 'CONT' 250, 'MIDL' 0;
  transition: font-variation-settings 500ms;  
}

.variable-font:hover {
  font-weight: 1000;
  font-variation-settings:
    'wght' 1000, 'CONT' 250, 'MIDL' -1000;
}

• 色: テキストの色を赤の色合い #bd0c0c に設定します。
• 高さ: 高さは 100vh に設定されており、

  は 100vh に設定されています。要素はビューポートの高さ全体に広がります。

• 表示: レイアウトにグリッドが使用され、グリッド プロパティの使用が可能になります。
• コンテンツの中央揃え: place-content: center コンテンツを垂直方向と水平方向の両方で中央揃えにします。
• マージン:

  の周囲のデフォルトのスペースを削除するため、マージンは 0 に設定されます。

• テキストの配置: テキストは水平方向の中央に配置されます。

.variable-font クラスのスタイル設定:

body {
  font-family: 'Kyiv Sans';
}

• フォント ファミリー: テキストに「Kyiv Sans」を使用します。
• フォント サイズ: フォント サイズを 5rem に設定します (ルート要素のフォント サイズを基準にして)。
• 行の高さ: 1.1 では、行間にわずかな間隔が確保されます。
• フォントのウェイト: 初期設定は 100 です。
• フォント バリエーション設定: 可変フォントのカスタム バリエーション設定を使用します。
  • 「wght」は重みを制御します (最初は 100)。
  • 「CONT」と「MIDL」はこのフォントのカスタム軸で、最初はそれぞれ 250 と 0 に設定されています。
• トランジション: フォント バリエーション設定を 500 ミリ秒かけてスムーズに遷移します。

.variable-font のホバー効果の追加:

npm create vite@latest

• ホバー時のフォントの重み: 要素にホバーすると 1000 に変わります。
• ホバー時のフォント バリエーション設定: バリエーション設定を次のように更新します。
  • 「重量」を 1000 に
  • 「CONT」は250のまま
  • 「MIDL」は -1000 に変更されます
• 効果: ユーザーがテキストの上にマウスを移動すると、動的でインタラクティブな視覚効果が作成され、可変フォントの柔軟性が強調されます。

最後には、次のような結果が得られます。

可変フォントを使用したレスポンシブ タイポグラフィの作成

デザイナーがさまざまなデバイスや画面サイズに完璧に適応できるようにすることで、さまざまなフォントを使用したレスポンシブ タイポグラフィがオンライン デザインを変革します。比類のない多用途性は可変フォントによってもたらされ、単一のフォント ファイル内で太さ、幅、コントラストなどのフォント属性を継続的に変更できます。デザイナーは、CSS とメディア クエリを使用してこれらのフォント属性を動的に変更し、読みやすさと見た目の美しさを向上させることができ、デスクトップ モニターから携帯電話まで、あらゆるデバイスでテキストが最適に表示されるようにします。単一の可変フォントで複数の固定フォント ファイルを置き換えることができるため、大規模なフォントの読み込みの必要性が減り、Web サイトのパフォーマンスが向上します。この柔軟性により、ユーザー エクスペリエンスが向上するだけでなく、設計プロセスも合理化されます。レスポンシブ タイポグラフィ (さまざまなフォントを使用すると、より魅力的で効率的、アクセスしやすくなります) がなければ、現代の Web デザインは存在できません。

メディア クエリ: 画面サイズ適応の達人

メディア クエリはレスポンシブ Web デザインの基礎であり、画面サイズの適応のマスターとして機能します。ユーザーのデバイスの機能 (画面の幅、高さ、解像度、方向など) に基づいて、デザイナーは特定の CSS スタイルを適用できます。メディア検索は、デザイナーがラップトップやデスクトップ モニターからスマートフォンやタブレットに至るまで、さまざまなデバイス上で Web サイトの表示と動作を最大限に高めるのに役立ちます。

メディア クエリの力は、さまざまな画面サイズに適合する柔軟で流動的なレイアウトを生成する能力にあります。メディア クエリを使用すると、デザイナーはフォント サイズを変更したり、グリッド レイアウトを変更したり、ビューポートの測定値に基づいて特定の項目を表示または非表示にしたりすることもできます。これにより、使用するデバイスに関係なく、素材の美的魅力とアクセスしやすさが確実に維持されます。

メディア クエリは、さまざまな画面サイズに合わせてレイアウトを調整する特定の場所であるブレークポイントを定義します。さまざまなデバイスをターゲットとするこれらのブレークポイントは、min-width、max-width、その他の CSS 特性を使用して設定されます。たとえば、メディア クエリでは、画面幅が 768 ピクセル以下の場合はモバイル フレンドリーなレイアウトの使用を指定し、より大きなディスプレイの場合は別のレイアウトを使用するように指定できます。

メディア検索を Web デザインに組み込むと、アクセシビリティとユーザー エクスペリエンスが向上します。すべてのプラットフォームで、メディア クエリは、テキストが読みやすく、ナビゲーションが直観的で、マテリアルが適切に整理されていることを保証することで、包括的なデジタル エクスペリエンスの開発を支援します。応答性が高く、順応性が高く、ユーザーフレンドリーな Web サイトを作成したいと考えている Web デザイナーは、まずデバイスが多様に使用される時代のメディア クエリを学習する必要があります。

これが例です:

npm create vite@latest

この例では、メディア クエリを使用して、画面サイズに基づいてフォントのバリエーション設定とフォントの太さを調整しました。最大幅が 600px のデバイスの場合、フォント サイズは 3rem に縮小されます。ウェイトとその他のバリエーションは、:hover エフェクトに応じて調整されます。幅が 601px から 1200px のデバイスの場合、フォント サイズは 4rem に設定され、ウェイトとバリエーションが調整されます。幅 1201 ピクセル以上のデバイスの場合、フォント サイズは 5rem で、元の設定が維持されます。
これらのメディア クエリにより、フォントがさまざまな画面サイズに適応し、さまざまなデバイスでの読みやすさとユーザー エクスペリエンスが向上します。

上の画像は小さい画面のディスプレイを示しています

上の画像は中画面のディスプレイを示しています

上の画像は大画面用のディスプレイを示しています

ビューポート ユニット: レイアウトを流動的にする

ビューポート ユニットは、最新の Web デザインにおける強力なツールであり、さまざまな画面サイズにシームレスに適応する、流動的で応答性の高いレイアウトの作成を可能にします。ビューポートの単位には vw (ビューポートの幅) と vh (ビューポートの高さ) が含まれており、これらはブラウザのビューポートの寸法に相対します。 1 つの vw はビューポートの幅の 1% に相当し、1 つの vh はビューポートの高さの 1% に相当します。これらのユニットは、デザイナーがユーザーの画面のサイズに応じて要素が拡大縮小することを保証するのに役立ち、その結果、より動的で適応性のあるデザインが作成されます。たとえば、ビューポート単位でフォント サイズ、パディング、またはマージンを設定すると、テキストとオブジェクトのサイズが自動的に変更されるため、複数のデバイスで一貫した外観が維持されます。この適応性により、サイトが大きなデスクトップ モニターで表示されるか、小さなモバイル画面で表示されるかに関係なく、コンテンツが読みやすく、見た目も美しいままになるため、ユーザー エクスペリエンスが向上します。ビューポート ユニットを使用すると、デザイナーはデジタル ガジェットの常に変化する地形に合わせて簡単に移動できる、適応性のあるレイアウトを作成できます。

これは、vw を使用してビューポートの幅に基づいてフォント サイズを調整する方法の例です:

npm create vite@latest

この例では、上記のコードから、.variable-font の font-size プロパティがビューポートの幅 vw 単位を使用して設定され、テキスト サイズがビューポートの幅に対応するようになります。

メディア検索とビューポート ユニットをさまざまなフォント特性と組み合わせて、あらゆるデバイスや画面サイズにエレガントにフィットする真にレスポンシブなタイポグラフィを作成できます。これにより、Web サイトへのアクセス方法に関係なく、優れたユーザー エクスペリエンスを提供できるようになります。

可変フォントによる高度なタイポグラフィ効果

バリアブル フォントを使用すると、デザイナーは複雑なタイポグラフィ効果の新しい分野を開拓し、高度にカスタマイズされた動的なテキスト スタイルを作成できます。デザイナーは、重み、幅、カスタム軸などの特性を継続的に調整することで、固定フォントでは以前は難しかったシームレスなトランジションや珍しい視覚効果を作成できるようになりました。フォントを調整することで太さ、コントラスト、正中線を動的に変更でき、テキストの外観を複雑に制御できます。この適応性は、書体をさまざまな画面サイズや方向に簡単に調整できるレスポンシブ デザインで非常に強力です。さらに、インタラクティブなアニメーションにより、ホバリングやクリックなどのユーザーのアクションにテキストが応答し、興味をそそる没入型の出会いを生み出すことができます。ビューポート ユニットとさまざまなフォント特性を組み合わせることで、タイポグラフィの流動性と拡張性を確保し、あらゆる種類のデバイスでの読みやすさと外観を向上させます。これらの洗練された機能を使用すると、デザイナーは従来のタイポグラフィの可能性を拡張して、視覚的に印象的なデジタル素材を作成できます。オンライン タイポグラフィの限界を広げるための魅力的な方法をいくつか見てみましょう:

流体タイポグラフィー

流動的なタイポグラフィーは、テキストがビューポートのサイズに合わせて動的に拡大縮小されるため、多くのデバイスでスムーズで応答性の高い読書エクスペリエンスを提供するデザイン手法です。ビューポート ユニット、メディア検索、および変更可能なフォントにより、滑らかなタイポグラフィにより、画面サイズに関係なく、テキストがわかりやすく、視覚的にバランスが取れた状態を維持できます。この方法では、フォント サイズを固定する必要がなくなり、シームレスな変更が可能になるため、非常に異なる表示条件に合わせて読みやすさと外観が向上します。

これが例です:

npm run dev

仕組み:

calc() 関数: この関数は、相対単位 vw と固定値 rem を組み合わせることで、流体スケーリング効果を生成します。 font-size、たとえば、calc(2rem 2vw) はビューポートの幅に反応し、基本サイズを保証します。

さまざまな要素の流体タイポグラフィ: h1、h2、p などの多くの要素は、流体タイポグラフィを使用してデバイス間で適切にスケーリングされたテキストを保証します。 calc() 関数は、ビューポートの幅に応じて変化するスケーリング係数を含む基本サイズを提供します。

可変フォント: 流動的なタイポグラフィと変更可能なフォントを組み合わせることで、ビューポート サイズに応じてテキスト属性を動的に変更できます。
この方法により、さまざまなデバイスや画面サイズにわたって、テキストの美しさと読みやすさが維持されることが保証されます。

キネティック タイポグラフィーはテキストをアニメーション化することでテキストに命を吹き込み、見​​る人を魅了する興味深くダイナミックな視覚効果を生み出します。この方法では、JavaScript と CSS アニメーションを使用してテキスト属性を変更することで、動きとインタラクションを追加します。可変フォントを使用した例では、:hover エフェクトを使用してフォントの太さをアニメーション化し、動的タイポグラフィ、つまり、明るいウェイトからより太いウェイトまでシームレスに移動することを示しました。これは、コンテンツを強調するだけでなく、流動的でリアルタイムの変更により、さまざまなフォントがユーザー インタラクションをどのように改善できるかを示しています。キネティック タイポグラフィを使用すると、デザイナーはテキストの視覚的な魅力と使いやすさを向上させ、インタラクティブで興味深いデジタル環境におけるその基本的な役割を強化できます。

例: ホバー時のウェイトのアニメーション化

npm create vite@latest

ここでは、滑らかな遷移を使用して、:hover で .variable-font 要素のウェイトを通常の 100 から太字の 1000 にアニメーション化し、微妙でありながらインパクトのある効果を作成しています。

これらは、さまざまなフォントが提供する想像力豊かな機会のほんの一握りにすぎません。ダイナミックなアニメーションから流れるようなレイアウトまで、独特で魅力的な書体を使用する機会は十分にあります。少しの創意工夫と CSS の理解があれば、Web デザインの標準に挑戦し、かなり優れたユーザー エクスペリエンスを生み出すことができます。

結論

可変フォント - Kyiv Sans が最もよく実証しており、複数のフォント スタイルを 1 つのファイルにグループ化することで、Web 上のタイポグラフィを変換します。 ＨＴＴＰクエリの数を減らすことにより、本発明はプロセスを簡素化し、設計の柔軟性を高め、パフォーマンスを向上させる。デザイナーは、CSS の変更可能なフォントを最大限に活用して、さまざまな画面サイズやユーザー インタラクションに完全に適合する、応答性の高い動的な書体を作成できます。
デザイナーは、メディア クエリやビューポート ユニットなどの応答性の高いアプローチだけでなく、ウェイト、中間層効果、コントラストなどの属性を使用して、視覚的に魅力的で簡単にアクセスできるタイポグラフィ エクスペリエンスを作成できます。バリアブル フォントは、その流動性により芸術的表現の新たな方向性が可能になるため、現代の Web デザインに必要なツールです。

リソース

• Netlify でホストされているライブ プレビューをチェックしてください
• ソースコードを表示

参考文献

• 可変フォント
• OpenType
• キエフサンズ
• ビューポート
• 書体
• 登録された軸
• カスタム軸
• @font-face
• ネットワークを入力
• フォントリス
• Adobe フォント
• フォントスプリング
• Google フォント
• Vfonts.com
• ttf
• woff2
• everythingfonts.com
• Behance.net
• メディアクエリ
• px
• レム
• vw
• うーん
• calc()

以上がダイナミックなタイポグラフィのための可変フォントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。