Développer un site web avec autant de points de rupture peut être épuisant. Il y a beaucoup de nouvelles techniques à apprendre en CSS, que vous soyez un développeur chevronné ou un développeur de niveau intermédiaire.



Mais comment commencer avec la typographie réactive ? Voici comment prendre des mesures pour adapter les pages web à toutes les tailles d’écran.



Importance de la typographie réactive

La typographie joue un rôle essentiel dans le développement et la conception de sites web en garantissant la lisibilité, la facilité d’utilisation et l’esthétique générale d’un site web. Tout le monde veut un site web réactif. Ne serait-ce pas formidable si le texte ou les polices s’adaptaient automatiquement aux différentes tailles d’écran ? Les autres avantages de la typographie réactive dans le développement web sont les suivants ;

  • Elle améliore l’expérience globale de l’utilisateur sur différents appareils ou tailles d’écran en garantissant la lisibilité.
  • Il améliore l’accessibilité en s’adaptant aux utilisateurs souffrant de déficiences visuelles ou d’autres handicaps. Il prend en compte les préférences des utilisateurs, par exemple en ajustant la taille des polices.
  • 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 de suivre les techniques abordées.

Le fichier de code HTML

 <!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title> Responsive Typography </title>
</head>
<body>
<div class="container">
<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>
</body>
</html>

Le fichier de code CSS

 /*style.css*/
body{
display: flex;
justify-content: center;
 align-items: center;
height: 100vh;
}
.container{
width: 400px;
background-color: antiquewhite;
padding: 15px;
box-shadow:0 2px 5px rgba(0,0,0, 0.1) ;
}
h1{
color: hotpink;
}

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

Lire  Comment utiliser l'application Podcasts sur un Mac : Guide du débutant


1. Serrer

Il s’agit d’une technique typographique CSS moderne qui permet et garantit que la taille de la police d’un élément reste dans une certaine fourchette. La fonction de serrage « Clamp() » prend en compte trois paramètres : la valeur minimale, la valeur idéale et la valeur maximale. La fonction clamp n’est pas limitée à la typographie. Elle peut être utilisée pour les images, les cartes, les vidéos et d’autres médias. Voici comment elle fonctionne.

Pince (valeur minimale, valeur idéale, valeur maximale) : 

 h1{
font-size: clamp(2rem, 5vw, 3rem);
}
p{
font-size: clamp(1rem, 3vw, 2rem);
}

Dans cet exemple, la taille des polices des titres et des paragraphes est définie à l’aide de la fonction « clamp() ». Pour le titre « h1 », la valeur minimale est fixée à « 2rem », ce qui garantit que la taille de la police ne sera pas inférieure à deux fois la taille de la police racine. La valeur idéale ou préférée est fixée à « 5vw », soit 5 % de la largeur de la fenêtre de visualisation, ce qui permet de s’adapter aux différentes tailles d’écran. La valeur maximale est fixée à « 3 rem », ce qui garantit que la taille de la police ne sera pas supérieure à trois fois la taille de la police racine. Il en va de même pour le style des paragraphes.


2. Requête média

Il s’agit de la technique de typographie la plus couramment utilisée par les développeurs. Elle consiste à créer des requêtes de média pour chaque point d’arrêt. Elle permet d’appliquer des styles spécifiques en fonction des différentes tailles d’écran. En voici une illustration : 

  /* Default font-size */
h1{
font-size: 38px;
}
p{
font-size: 20px;
}
/* Font-size for small screens */
@media (max-width:800px){
h1{
font-size: 32px;
}
p{
font-size: 18px;
}
}
/* Font-size for smaller screens */
@media (max-width:400px){
h1{
font-size: 28px;
}
p{
font-size: 15px;
}
}

Dans cet exemple, le titre et le paragraphe sont réglés sur une valeur par défaut de « 38px » et « 20px » respectivement. Ensuite, des conditions sont définies pour des tailles d’écran plus petites afin que la mise en page soit adaptée aux téléphones mobiles. Vous pouvez créer autant de media queries que vous le souhaitez en fonction de la conception et de la réactivité que vous souhaitez, parmi de nombreuses autres astuces CSS de media query que vous devriez connaître.


3. Propriétés CSS personnalisées

Également connues sous le nom de variables personnalisées CSS, elles stockent des valeurs qui peuvent être réutilisées dans votre style. Elles peuvent être utilisées pour la typographie afin de faciliter la gestion et la personnalisation. Voici un exemple. 

 :root {
--heading-font-size: 3rem;
--paragraph-font-size: 1.5rem;
}
h1{
font-size: var(--heading-font-size);
}
p{
font-size: var(--paragraph-font-size);
}
@media (max-width:800px){
:root {
--heading-font-size: 2rem;
--paragraph-font-size: 0.9rem;
}
}
@media (max-width:400px){
:root {
--heading-font-size: 1.5rem;
--paragraph-font-size: 0.8rem;
}
}

Dans cet exemple, la propriété CSS est définie au niveau de la racine, ce qui nous permet d’y accéder globalement. Les propriétés –heading-font-size et –paragraph-font-size sont des noms descriptifs pour l’en-tête et le paragraphe, respectivement, avec des valeurs par défaut pour les deux. Cette technique peut être réutilisée pour diverses requêtes de média afin d’assurer la cohérence de l’ensemble.

Lire  Les 8 meilleures carrières en intelligence artificielle


Meilleures pratiques en matière de typographie réactive

Les développeurs ont l’habitude d’utiliser la largeur de la fenêtre de visualisation (vw) directement pour réaliser la typographie. Bien que cela soit simple et semble fonctionner, la typographie devient minuscule sur les écrans de petite taille et extrêmement grande sur les écrans de grande taille. C’est également le cas lorsque vous effectuez un zoom avant ou arrière sur votre page. Si vous le pouvez, évitez d’utiliser le viewport directement de cette manière ;

   h1{
font-size: 2vh;
 }

Testez toujours votre typographie pour vous assurer qu’elle est lisible sur différentes tailles d’écran et vérifiez toujours la compatibilité de votre navigateur. Tenez compte de la lisibilité et veillez à ce que la taille des polices ne soit ni trop petite ni trop grande.


La typographie réactive : la clé d’une conception web lisible

La typographie réactive joue un rôle essentiel dans la conception et le développement de sites web. En mettant en œuvre des méthodes et des techniques telles que le clamping, les media queries et les propriétés CSS personnalisées, vous pouvez vous assurer que votre typographie s’adapte à différentes tailles d’écran et à différents appareils. Il existe de nombreuses techniques à explorer pour créer une typographie réactive à l’aide de CSS – utilisez ces techniques pour commencer à développer votre expertise dans ce domaine.