Web アクセシビリティ: アクセシブルな流体タイポグラフィー

• はじめに
• すべての前に: font-size: 20px - 悪い習慣
• アクセスしやすい流動的なテキストを作成する方法
• 10 分でわかるタイポグラフィ コンポーネント
• からインスピレーションを得た

導入

今日は重要なトピックであるアクセシビリティについて思い出したいと思います。それはコミュニティ主導型です
デジタル アクセシビリティを容易にするための取り組み。

このトピックのほんの一部はタイポグラフィです。テキストはブラウザのどのフォント サイズでも適切に表示されるはずです。

100%	200%

すべての前に: font-size: 20px - 悪い習慣

私たち皆がそうしていましたし、インターネット上の多くの人がコースでそれを使用しています。しかし、それは悪いアプローチです。どの単位を選択すればよいかわからない場合の簡単なルールを 1 つ示します:

px - 境界線や影など、変更されない固定サイズの要素。

rem - ブラウザのデフォルトのフォント サイズを変更したユーザーがアクセスできるようにするフォント サイズです。

vw / vh - ビューポート サイズに応じた要素のサイズ設定

% - 相対サイズに従う要素のサイズ設定

アクセシブルな流動的なテキストを作成する方法

必要なのは、アクセスできるようにするためのクランプ() と式を作成することだけです
レスポンシブにします。

1. グローバル フォント サイズを 16 ピクセルに設定していることを確認してください。行の高さは少なくとも 1.2

html {
  font-size: 16px; /* 1 rem */
  line-height: 1.2;
} 

1. 最小および最大の画面サイズを定義します。私の場合は 320 ピクセルから 1920 ピクセルです。

2. 最小画面と最大画面で表示するテキストのサイズを定義します。私の例では h1 タグがあるので、
   それに応じて、font-size は 50px と 90px になります。

3. https://utopia.fyi/type/calculator に移動し、そこに値を入力します

1. CSS ジェネレーターまで下にスクロールします。 --step-0 の値が必要です

   Copy
   /* @link https://utopia.fyi/type/calculator?c=320,50,1.2,1920,90,1.25,2,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
--step--2: clamp(2.1701rem, 1.8842rem + 1.4299vw, 3.6rem);
--step--1: clamp(2.6042rem, 2.225rem + 1.8958vw, 4.5rem);
--step-0: clamp(3.125rem, 2.625rem + 2.5vw, 5.625rem);
--step-1: clamp(3.75rem, 3.0938rem + 3.2813vw, 7.0313rem);
--step-2: clamp(4.5rem, 3.6422rem + 4.2891vw, 8.7891rem);
}

1. クランプを置く(3.125rem、2.625rem 2.5vw、5.625rem);テキストのフォントサイズとして。

結果:

320px	1920px	1920px(200% zoom)

1 行の CSS でテキストが応答性が高く、ブラウザーのスケーリングにもアクセスできることがわかります。

10 分でわかるタイポグラフィーのコンポーネント

私の目的は、柔軟なタイポグラフィ コンポーネントを可能な限り高速かつ柔軟に作成することでした。

私は最大の h1 テキストを取得しました。 https://utopia.fyi/type/calculator に移動し、8 つのダウンスケール ステップを生成しました:

これは私の p、h1-6、スパン、ラベルのテキスト サイズになります

html {
  font-size: 16px; /* 1 rem */
  line-height: 1.2;
} 

その後、さらに 5 分間反応して遊んで出来上がりです:

React 用の再利用可能なタイポグラフィ コンポーネント

に触発された

REM を使用してもウェブサイトの応答性が良くなりません - その理由は次のとおりです

流体タイポグラフィ

以上がWeb アクセシビリティ: アクセシブルな流体タイポグラフィーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。