Comment créer une typographie réactive avec CSS

Développer un site Web avec autant de points d'arrêt peut être épuisant. Il existe de nombreuses nouvelles techniques à apprendre en CSS, que vous soyez un développeur chevronné ou un développeur de niveau intermédiaire.

Mais comment débuter avec la typographie responsive? Voici comment prendre des mesures pour adapter les pages Web à n'importe quelle taille d'écran.

Importance de la typographie réactive

La typographie joue un rôle essentiel dans le développement et la conception Web en garantissant la lisibilité, la convivialité et l'esthétique générale d'un site Web. Tout le monde veut un site Web réactif. Ne serait-il pas formidable que le texte ou les polices s'adaptent automatiquement aux différentes tailles d'écran? Les autres avantages de la typographie réactive dans le développement Web incluent les suivants ;

• Il améliore l'expérience utilisateur globale sur différents appareils ou tailles d'écran en garantissant la lisibilité et la lisibilité.
• Il augmente l'accessibilité en accueillant les utilisateurs ayant une déficience visuelle ou d'autres handicaps. Il s'adapte à diverses préférences de l'utilisateur, telles que des tailles de police ajustables.
• Une typographie cohérente sur tous les appareils et toutes les résolutions permet de préserver l'identité de la marque et l'unité visuelle.

Voici un modèle de code que vous pouvez copier dans votre éditeur de code avant de commencer, afin que vous puissiez suivre les techniques à discuter.

Le fichier de code HTML

index.html
html>
<htmllangue="fr">
<diriger>
<métajeu de caractères="UTF-8">
<métanom="fenêtre"contenu="width=device-width, initial-scale=1.0">
<lienrel="feuille de style"href="style.css">
<titre> Typographie réactive titre>
diriger>
<corps>
<divclasse="récipient">
<h1> Lorem ipsum h1>
<p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut, obcaecati. Corporis quam, blanditiis odit optio dignissimos facilis magni doloribus adipisci at quaerat oluptas molestiae eius dicta officia quod eaque perspiciatis! 
p>
div>
corps>
html>

Le fichier de code CSS

/*style.css*/
corps{
afficher: fléchir;
justifier-contenu: centre;
aligner les éléments: centre;
hauteur: 100vh;
}
.récipient{
largeur: 400pixels;
Couleur de l'arrière plan: blanc antique;
rembourrage: 15pixels;
boîte ombre:0 2pixels 5pixelsRVB(0,0,0, 0.1) ;
}
h1{
couleur: rose vif;
}

Explorons maintenant quelques méthodes et techniques efficaces pour mettre en œuvre une typographie réactive à l'aide de CSS.

1. Serrage

Il s'agit d'une technique de typographie CSS moderne qui permet et garantit que la taille de police d'un élément reste dans une certaine plage. La fonction de serrage "Clamp()" prend en compte trois paramètres, la valeur minimale, la valeur idéale et la valeur maximale. La fonction pince ne se limite pas à la typographie. Il peut être utilisé pour des images, des cartes, des vidéos et d'autres médias. Voilà comment cela fonctionne.

Clamp (valeur min, valeur idéale, valeur max):

h1{
taille de police: serrer(2Rem, 5vw, 3Rem);
}
p{
taille de police: serrer(1Rem, 3vw, 2Rem);
}

Dans cet exemple, les tailles de police pour le titre et le paragraphe sont définies à l'aide de la fonction "clamp ()". Pour le titre "h1", la valeur minimale est définie sur "2rem", garantissant que la taille de la police ne descendra pas en dessous de deux fois la taille de la police racine. La valeur idéale ou préférée est définie sur "5vw", qui correspond à 5 % de la largeur de la fenêtre d'affichage, ce qui la rend sensible aux différentes tailles d'écran. La valeur maximale est définie sur "3 rem", garantissant que la taille de la police ne sera pas supérieure à trois fois la taille de la police racine. Vice versa pour le style de paragraphe.

Il est recommandé d'utiliser la largeur de la fenêtre "vw" ou le pourcentage "%" pour la valeur idéale, car cela permet à la propriété de s'adapter proportionnellement à l'espace disponible, ce qui rend la conception plus réactive. Assurez-vous que vous savez quelle unité CSS vous devez utiliser pour votre scénario.

Il s'agit de la technique de typographie la plus couramment utilisée par les développeurs. Cela implique de créer des requêtes multimédias pour chaque point d'arrêt. Il vous permet d'appliquer des styles spécifiques en fonction de différentes tailles d'écran. Voici une illustration:

/* Taille de police par défaut */
h1{
taille de police: 38pixels;
}
p{
taille de police: 20pixels;
}
/* Taille de police pour les petits écrans */
@médias (largeur maximale:800px){
h1{
taille de police: 32pixels;
}
p{
taille de police: 18pixels;
}
}
/* Taille de police pour les petits écrans */
@médias (largeur maximale:400px){
h1{
taille de police: 28pixels;
}
p{
taille de police: 15pixels;
}
}

Dans cet exemple, le titre et le paragraphe sont définis sur une valeur par défaut de "38px" à "20px" respectivement. Ensuite, des conditions sont définies pour des tailles d'écran plus petites afin de rendre la mise en page réactive sur les téléphones mobiles. Vous pouvez créer autant de requêtes multimédias que vous le souhaitez en fonction de la conception et de la réactivité que vous souhaitez, parmi de nombreuses autres media query astuces CSS que vous devez connaître.

3. Propriétés personnalisées CSS

Aussi connu sous le nom de variables personnalisées CSS, il stocke des valeurs qui peuvent être réutilisées tout au long de votre style. Il peut être utilisé pour la typographie afin de faciliter la gestion et la personnalisation. Voici un exemple.

:racine {
--heading-font-size: 3Rem;
--paragraphe-font-size: 1.5rem;
}
h1{
taille de police: var(--heading-font-size);
}
p{
taille de police: var(--paragraphe-font-size);
}
@médias (largeur maximale:800px){
:racine {
--heading-font-size: 2Rem;
--paragraphe-font-size: 0.9rem;
}
}
@médias (largeur maximale:400px){
:racine {
--heading-font-size: 1.5rem;
--paragraphe-font-size: 0.8rem;
}
}

Dans cet exemple, la propriété CSS est définie au niveau racine, ce qui nous permet d'y accéder globalement. --heading-font-size et --paragraph-font-size sont des noms descriptifs pour le titre et le paragraphe, respectivement, avec des valeurs par défaut données aux deux. Cette technique peut être réutilisée pour diverses requêtes multimédias afin d'assurer la cohérence à tous les niveaux.

Meilleures pratiques de typographie réactive

Il est courant chez les développeurs d'utiliser directement la largeur de la fenêtre (vw) pour effectuer la typographie. Bien qu'il soit simple et semble fonctionner, il devient minuscule sur les petites tailles d'écran et extrêmement grand sur les grandes tailles d'écran. Cela se produit également lorsque vous effectuez un zoom avant et arrière sur votre page. Si vous le pouvez, évitez d'utiliser la fenêtre directement comme celle-ci ;

h1{
taille de police: 2vh;
 }

Testez toujours et assurez-vous que votre typographie est lisible sur différentes tailles d'écran et testez toujours la compatibilité du navigateur. Tenez compte de la lisibilité et assurez-vous que les tailles de police ne sont ni trop petites ni trop grandes

La typographie réactive est la clé d'une conception Web lisible

La typographie réactive joue un rôle central dans la conception et le développement de sites Web. En mettant en œuvre des méthodes et des techniques telles que le serrage, les requêtes multimédias et les propriétés personnalisées CSS, vous pouvez vous assurer que votre typographie s'adapte à différentes tailles d'écran et appareils. Il y a tellement de techniques à explorer lorsque vous essayez de créer de la réactivité à l'aide de CSS - utilisez ces techniques pour commencer à développer une expertise dans ce domaine.