Fluid Typography: それが何であるか、なぜ、どのように使用するかを理解する
公開: 2022-10-26画面サイズのバリエーションが増えるにつれて、レスポンシブ タイポグラフィの重要性が増しています。 しかし、従来のレスポンシブ デザイン手法には限界があり、より多くの人々が流動的なタイポグラフィを Web サイトに実装するようになっています。
この投稿では、流動的なタイポグラフィ、その仕組み、WordPress での実装方法について説明します。
流体タイポグラフィとは?
Fluid typography は、テキストが画面サイズに合わせて自動的に拡大縮小されるレスポンシブ タイポグラフィ手法です。 画面サイズが大きくなると、フォント サイズ、行の高さ、文字間隔などのタイポグラフィの値が大きくなります。 同様に、画面サイズが小さくなると値が減少します。
Fluid Typography vs. 従来のレスポンシブ タイポグラフィ
従来、デザイナーはブレークポイントを使用してフォント サイズを決定していました。 たとえば、Web サイトでは、モバイル、タブレット、デスクトップの 3 つのブレークポイントを使用する場合があります。 ブレークポイントは、デバイスの種類ではなく、ブラウザーの幅によって決まります。
このアプローチの問題点は、デバイスによって画面サイズが大きく異なることです。 そのため、ブレークポイントの間またはブレークポイントに近い画面サイズは、多くの場合、設計上の課題となります。 たとえば、ほとんどデスクトップの幅に近い幅の広いタブレット画面では、タイポグラフィが小さすぎるように見える可能性があります。
これらの課題に対処するために、設計者はより多くのブレークポイントを実装できますが、それは保守が困難な複雑なコードにつながるだけです。
Fluid Typography の仕組み
Fluid typography は最小値から始まり、設定された最大値に達するまで、画面幅が大きくなるにつれて値が大きくなります。 高速道路の制限速度のような値を考えてみてください。 時速 45 マイルの最低速度を維持する必要があります。 上限は 65 mph で、交通の流れに基づいて速度を選択します。
CSSクランプ機能
Fluid typography は、CSS クランプ機能を利用して自動スケーリングを実現します。 クランプ機能には、最小値、優先値、最大値の 3 つの値が必要です。 優先値は計算された数値です。 この関数は、最小値と最大値の間を保ちながら、画面サイズに対して必要な優先値を決定します。
クランプ ステートメントは次のようになります。
クランプ（最小、優先、最大）;
それがフォントサイズでどのように機能するかを見てみましょう：
クランプ(1.5rem、2vw + 1rem、2.25rem);
最小値と最大値に rem 値を使用していることに注意してください。 Rem 値はよりアクセスしやすくなっています。 誰かがブラウザをズームしてテキスト サイズを大きくすると、滑らかなタイポグラフィがそれに応じて調整され、値をピクセルで指定した場合よりも適切になります。
推奨値は計算です。 「vw」はビューポートを表すため、2vw はビューポート幅の 2% です。
ルート フォント サイズが 16px でビューポート幅が 800px の場合、推奨されるテキスト サイズは 32 ピクセルまたは 2 rem です。
800px x .02 = 16 ピクセル (または 1 レム)
1 レム + 1 レム = 2 レム (または 32 ピクセル)
心配しないで。 計算する必要はありません。 CSS 関数がそれを処理します。
また、スタイルシートを作成するときに代数のスキルを磨く必要もありません。 Modern fluid typography editorなどのツールを使用して、クランプ ステートメントを作成することを検討してください。
ツールのグラフは、優先値が最小値と最大値の間でどのように変化するかを視覚的に確認するのに最適です。
Fluid Typography を使用する際の考慮事項
滑らかなタイポグラフィには欠陥がないわけではありません。 一部の設計者は、より伝統的な方法で同様の結果を達成できるため、設定する価値があるよりも面倒だと主張しています. それを使用するかどうか、またどのように使用するかを決定するときは、これらの考慮事項を念頭に置いてください。
Fluid Typography を使用する場合
流れるようなタイポグラフィは、見出しや表示テキストに最適です。 コピーと同じくらいデザイン要素である巨大なテキスト処理は、流れるようなタイポグラフィの完璧な使用例です。 テキストのサイズと視覚的なインパクトを画面のサイズに合わせる必要があります。
Fluid Typography を使用しない場合
反対に、最小値と最大値の差がそれほど大きくない場合、滑らかなタイポグラフィはうまく機能しません。 本文のコピー、タグ、著者名、投稿日などのテキスト要素は、おそらく画面サイズ全体でかなり標準的です。 クランプ機能を実装する代わりに、従来の CSS で処理できます。
常にフォールバック値を設定する
柔軟なタイポグラフィを使用するときはいつでも、ブラウザーがクランプ機能をサポートしていない場合に備えて、常にフォールバック値を含めてください。 最新のブラウザはすべてクランプ機能をサポートしていますが、Internet Explorer の頑固なホールドアウトが残っている場合に備えて、フォールバック値によってセキュリティが強化されます。
WordPress の流動的なタイポグラフィ
Fluid typography のサポートは Gutenberg 13.8 で追加され、 WordPress 6.1に含まれる予定です。 流動的なタイポグラフィ機能により、テーマの作成者は、theme.json ファイルでスケーラブルなフォント サイズを定義できるようになります。
この機能はまだ開発中のため、ベータ版にアクセスするにはGutenberg プラグインをダウンロードする必要があります。 Make WordPress Themes team のこの記事で、新しい流動的なタイポグラフィ オプションをテストして実装する方法について詳しく読むことができます。
WordPress で流動的なタイポグラフィを実装するのは、テーマ レベルで最も簡単です。 独自のテーマを作成する場合は、Gutenberg プラグインをダウンロードしてテストを開始してください。 独自のテーマを作成したり、流動的なタイポグラフィ スタイルシートを作成したりすることが技術的なスキルを少し超えている場合でも、心配する必要はありません。 より多くのテーマがブロックと完全なサイト編集を採用しているように、流動的なタイポグラフィが新しいテーマのリリースの一部になることを期待できます.
WordPress で新しいサイトとタイポグラフィ スタイルを構築してテストする
Web デザイナーや開発者は、流動的なタイポグラフィーなど、新しいアイデアやデザインをテストするためのスペースを必要としています。 Pressable は理解しています。 そのため、すべてのクライアントに無制限のステージング サイトを提供しています。 新しいテーマの構築をテストしたり、WordPress の最新のベータ機能を試したりできるように、必要な数だけ作成してください。 始めるのは簡単です。 プランを選択するだけで、数回クリックするだけでサイトを作成できます。
