Accessibilité Web : typographie fluide accessible

• Présentation
• Avant tout : font-size : 20px - mauvaise pratique
• Comment rendre un texte fluide accessible
• Composants de typographie en 10 minutes
• Inspiré par

Introduction

Aujourd'hui, je souhaite rappeler un sujet important : l'accessibilité. C'est une initiative communautaire
effort pour faciliter l’accessibilité numérique.

Une petite partie de ce sujet concerne la typographie. Le texte doit s'afficher correctement quelle que soit la taille de police du navigateur.

100%	200%

Avant tout : font-size : 20px - mauvaise pratique

Je sais, on a tous fait ça, beaucoup d'internautes l'utilisent dans leurs cours. Mais c'est une mauvaise approche. Voici une règle simple si vous ne savez pas quelle unité choisir :

px - éléments de taille fixe qui ne changeront pas, comme pour les bordures ou les ombres.

rem - tailles de police pour le rendre accessible aux utilisateurs qui ont modifié la taille de police par défaut de leur navigateur.

vw / vh - dimensionnement des éléments correspondant à la taille de la fenêtre

% - dimensionnement des éléments respectant la taille relative

Comment rendre un texte fluide accessible

Tout ce dont nous avons besoin c'est de clamp() pour le rendre accessible et d'une formule pour
rendez-le réactif.

1. Assurez-vous de définir la taille de police globale sur 16 px. Et hauteur de ligne d'au moins 1,2

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

1. Définissez votre taille d'écran minimale et maximale, 320 px - 1920 px dans mon cas.

2. Définissez la taille de votre texte que vous souhaitez avoir à votre écran minimum et maximum. Dans mon exemple, j'ai la balise h1 donc mon
   la taille de la police sera de 50 px et 90 px en conséquence.

3. Allez sur https://utopia.fyi/type/calculator et mettez-y vos valeurs

1. Faites défiler jusqu'à CSS Generator. Nous avons besoin de la valeur --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. Mettez la pince (3,125rem, 2,625rem 2,5vw, 5,625rem) ; comme taille de police de votre texte.

Résultat :

320px	1920px	1920px(200% zoom)

Vous pouvez voir qu'avec 1 ligne de CSS, mon texte est également réactif et accessible à la mise à l'échelle du navigateur.

Composants de typographie en 10 minutes

Mon intention était de créer un composant de typographie flexible aussi rapide et flexible que possible.

J'ai pris mon plus gros texte h1. Je suis allé sur https://utopia.fyi/type/calculator et j'ai généré 8 étapes de réduction :

Ce serait mes tailles de texte p, h1-6, span et label

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

Puis encore 5 minutes à jouer avec React et Voilà :

Mes composants typographiques réutilisables pour React

Inspiré par

L'utilisation de REM ne rend pas votre site Web réactif - Voici pourquoi

Typographie fluide

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!