DIVI 5を使用したフォントとフォントサイズの管理5

フォントとタイポグラフィは、サイトのトーンを設定します。それを正しくすることは、あなたのブランドを助け、読みやすさを向上させることができます。 Divi 5は、フォントを迅速かつ簡単に作業させます。 Diviのデザイン変数やオプショングループプリセットなどの新しい機能により、フォントのセットアップが簡単になります。

この投稿では、Divi 5でフォントとフォントサイズを管理する方法を教えてくれます。

Divi 5は新しいWebサイトビルドの準備ができていますが、後方互換性システムに最後の仕上げをしています。それまでの間、D4に構築されたサイトの更新を控えます。その変更がいつ起こったかをお知らせします。

新しいWebサイトのフォントを介して考えるときの考慮

新しいサイトを開始するとき、フォントの選択はユーザーの第一印象を形作ります。これらのポイントを検討して、タイポグラフィがコンテンツをサポートしていることを確認してください。

• 読みやすさ：特にボディテキストのために、クリアフォントを選択します。
• 一貫性：フォントを制限します - 2つまたは3つの作業が最適です。
• 応答性：フォントがさまざまな画面サイズ（理想的には320pxから1440pxまで）に適応するようにします。
• 互換性：ディスプレイの問題を避けるために、Webセーフまたは一般的なフォントを選択します。

Divi5でフォントとフォントサイズを管理する方法

Diviのライブラリからの施設レイアウトを使用しましょう。 「Business CV」パックからランディングページのレイアウトを選択し、Divi 5の新機能を使用してタイポグラフィを刷新します。既存のDivi 5サイトを持っているが、タイポグラフィを改善したい場合は、このレイアウトを使用せずにこれらの同じ手順に従うことができます。

ステップ1：フォントペアリングの選択

優れたフォントペアリングは、スタイルと読みやすさをブレンドします。 GoogleフォントもDiviに組み込まれており、使いやすいため、安全な賭けです。

以下の例では、見出しとボディテキストにレイアウトパックがポピンを使用していることに固執します。 LoraとRobotoもペアリングすることができます。

ステップ2：プライマリヘッダーとボディのフォントの設定

フォントを選択したので、Diviを使用してWebサイトに追加できます。 Visual Editorで、左上に変数マネージャーを開きます。 Diviの設計変数により、Webサイトでフォントをグローバルに制御できます。

主要な見出しとボディフォントには、2つのデフォルトのフォント変数があります。フォントセクションに移動し、「ポピン」を見出しフォントとして、ボディフォントとして「ロボット」を設定します。

デザインとブランドの要件に一致するものにフォントを設定します

この時点では、特にテキストでそれらの色の一部を使用する予定がある場合は、ブランドの色がデザイン変数として設定されていることを確認することも良い考えかもしれません。

入力が完了したら、必ず変数を保存してください

ステップ3：フォントサイズの作成

より複雑な部分のために。すべてのデバイスサイズでタイポグラフィをどのように見栄えを良くするかを考えるのが最善です。 Divi 5には2つのオプションがあります。最初の優先オプションはClamp（）を使用することであり、2番目はさまざまなブレークポイントでフォントを複数回設定することです。

各見出しレベル、ボディテキスト、およびその他のテキストの状況のフォントサイジングをどのように構築するかは完全にあなた次第です。

clamp（）を備えた流体タイプグラフィ

clamp（）では、最小値、優先値、最大値を設定できます。別の投稿では、Clamp（）について詳しく説明し、それらの値を把握する簡単な方法を提供します。しかし、ここに例があります：

このレイアウトには、デフォルトのH1サイズと、最初のセクションではその人の名前の一意の（および大きい）H1サイズがあります。上記のサイジングチャートで同じ原則を引き継ぎ、より小さなボディフォントのバリエーションを追加しました。

単純なHTMLドキュメントでフォントサイジングをテストして、物事を単独で確認できます（これはDIVI内でも実行できます）。これは、上記のフォントサイジングがフォントペアリングでどのように見えるかを示します。

フォントサイズに慣れたら、デザイン変数として追加できます。それぞれに識別可能な名前を付け、右側の値を貼り付けます。

ブレークポイントを備えたユニットを固定しました

clamp（）は、フォントサイジングの最も汎用性の高いオプションですが、多くのユーザーはまだピクセルやREMなどの固定値を使用しています。これらをDiviのカスタマイズ可能なブレークポイントと一緒に使用して、必要に応じてフォントを上下にスケーリングできます。

同様の効果の値の数は、この方法で使用するときにトリプルを使用するため（上​​記の10のClamp（）値の代わりに、これは30個の個別の値になります）。これらの値で変数マネージャーに記入することを必ずしもお勧めしませんが、必要に応じて、

各ブレークポイントのサイジング構造を構築し、次のステップに持ち越すことができます。それらを設計変数として配置する代わりに、それらをオプショングループと要素プリセットに直接適用できます。

ステップ5：変数マネージャーからプリセットへのフォントサイズの追加

数値変数が設定されている（または少なくとも策定された）場合、プリセットに適用する時が来ました。オプショングループプリセットの最良のユースケースの1つはタイポグラフィです。見出し/タイトルフィールドを使用する任意のモジュールに使用できる7つの見出し/タイトルオプショングループプリセットを作成できます（たとえば、見出し、宣伝、アコーディオン、個人モジュールなど）。

テキストオプショングループにも同じことが言えます。 2つのプリセット（1つは通常用に、もう1つは小さなボディテキスト用）を設定できます。テキストオプショングループを使用するモジュールは、それらのスタイルを使用できます。見出しやテキストスタイルの場合、これは、Webサイト全体で使用できるすべてのさまざまなモジュールに要素プリセットとしてこれらのスタイルを適用するよりもはるかに効率的です。

固定値をブレークポイントに割り当てます

以下のビデオは、複数のブレークポイントで固定値を選択した場合の基本的な手順を示しています。テキストモジュールをクリックし、 [デザイン]タブに移動し、テキストオプショングループの上にホバリングし、 OGアイコンをクリックし、新しいプリセットを作成し、各ブレークポイントでスタイルを適用します。右側のサイドバーの底までスクロールして、プリセットを保存します（非常に重要）。あなたが思いついたのと同じくらい多くのテキストのバリエーションについてこれを繰り返します（小規模、規則的、大きなオプションなど）。

OGプリセットを割り当て、そのオプショングループのデフォルトプリセットとして最も使用することが期待されます。隣に星が表示されている場合、それが現在のデフォルトです（これはサイト全体に適用されます。他のモジュールスタイルや要素プリセットが全体に適用されないと仮定します）。

clamp（）機能の割り当て（より簡単）

このプロセスは、Clamp（）関数で設計変数を使用する場合に類似していますが、はるかに簡単です。以下のビデオでは、オプショングループレベルに2つの見出しサイズを設定しています。上記との唯一の違いは、値を貼り付けているのではなく、以前に設定した変数を使用していることです。 OGプリセットをセットアップしているときに、デフォルトのフォントが選択されていることを確認し、必要に応じて色を設定してください。代わりにモジュールレベルで色を設定するのが好きな人もいますが、それはあなた次第です。

各H1-H6見出しレベルを新しいカスタムオプショングループプリセットとして設定します。

作成したオプショングループプリセットを使用して、これらのプリセットをレイアウトの見出しに適用します。オプショングループプリセットの美しさは、テキスト、宣伝者、ヘッダーモジュールなど、そのオプショングループ内のモジュールで動作することです。

DIVI 5のフォントのベストプラクティス

タイポグラフィを最大化するには、これらのヒントを念頭に置いてください。

• 常にグローバルフォント変数を早期に設定してください。
• 一貫した間隔とサイズを使用します（はい、デザイン変数として文字間隔とラインの高さを設定できます）。
• 画面サイズでレスポンシブビューを定期的にプレビューします。
• フォントやフォントの重量が多すぎて避けてください。

Divi5のタイポグラフィは新鮮な空気の息吹です

Diviの最新の機能のおかげで、完全なタイポグラフィシステムを所有しています。

フォントはデザイン変数としてライブです。 Clamp（）を使用する場合、フォントサイズでも同じです。または、これらのカスタマイズ可能なブレークポイントの7つすべてをすべて運動させたい場合は、そのルートも取ることができます。

オプショングループプリセットは、サイト全体にこれらの選択肢を簡単に適用します。ビルド全体でフォントサイズを微調整するのは、設計変数として設定されているため、簡単です。何があっても、あなたのデザインはシャープであり、ビルド時間は縮小します。

Divi 5は、デザインシステムをアップグレードする多くの新機能を立ち上げました。 Divi 5の新しいサイトの構築を開始して、最新のすべての機能を活用してください。既存のWebサイトをDIVI 5に移行するのを少し待つことをお勧めします。