La typographie fluide est un texte web (ou une taille de police) qui évolue de manière fluide en fonction de la largeur du navigateur. Généralement, la typographie en responsive web design (ou typographie responsive) consiste à modifier la taille de la police à certains points de rupture via des media queries. Mais cela peut être un processus fastidieux dès lors que vous essayez d’obtenir la bonne taille de police pour différents appareils et tailles d’écran. Avec la typographie fluide, l’idée est de faire évoluer la police de manière fluide entre une taille minimale et une taille maximale. Cela permet d’obtenir un design plus cohérent sur différentes tailles d’écran, sans trop d’efforts. Mais pour rendre une taille de police fluide, nous devons utiliser des méthodes CSS qui impliquent l’utilisation d’unités de longueur relatives (comme vw), de fonctions mathématiques CSS (comme calc(), min() et max()), et de requêtes média personnalisées.
Dans ce billet, nous allons vous aider à comprendre la typographie fluide et comment créer une typographie fluide dans Divi en utilisant 6 méthodes.
Nous allons couvrir les points suivants :
Coup d’œil rapide
Voici un aperçu rapide du type de typographie fluide que nous allons concevoir à l’aide de différentes méthodes.
Pour importer la mise en page de section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.
Cliquez sur le bouton Importer.
Dans la fenêtre contextuelle de portabilité, sélectionnez l’onglet d’importation et choisissez le fichier à télécharger depuis votre ordinateur.
Cliquez ensuite sur le bouton d’importation.
Une fois cela fait, la mise en page de la section sera disponible dans le Divi Builder.
Passons au tutoriel, voulez-vous ?
Ce dont vous avez besoin pour commencer
Pour commencer, vous devez effectuer les opérations suivantes :
- Si vous ne l’avez pas encore fait, installez et activez le thème Divi.
- Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour modifier la page sur le front-end (constructeur visuel).
- Choisissez l’option « Build From Scratch ».
Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi. Mais avant de commencer à tester quelques exemples de typographie fluide dans Divi, commençons par mieux comprendre de quoi il s’agit.
Qu’est-ce que la typographie fluide ?
La typographie fluide, dans le monde de la conception Web, est un contenu textuel qui s’adapte de manière fluide à la taille de la fenêtre de votre navigateur (ou de votre écran). Rendre la typographie (ou le texte) « fluide » est la méthode qui consiste à appliquer les pratiques de la conception web fluide spécifiquement au texte web (qui est le plus souvent utilisé dans la conception réactive pour mettre à l’échelle la largeur des conteneurs de contenu comme les colonnes, les lignes et les sections). En d’autres termes, la typographie fluide est du texte sur votre page Web avec une valeur de taille de police qui est relative à la largeur de la fenêtre du navigateur. Ainsi, lorsque la largeur de votre navigateur augmente ou diminue, le texte de votre page fait de même. Pour ce faire, nous devons utiliser une unité de longueur relative comme vw (viewport width) au lieu de px (pixels) qui est une unité de longueur absolue. Mais ce n’est pas tout. Nous devons également réfléchir à la manière de contrôler correctement cette taille de police vw dans le cadre d’une taille de police minimale et maximale.
La typographie fluide est différente des méthodes traditionnelles de responsive design pour redimensionner brusquement le texte à plusieurs points de rupture à l’aide de media queries. Dans Divi, par exemple, nous pouvons ajouter un module de texte, puis utiliser les options intégrées de conception de texte responsive pour définir une taille de police pour le bureau, la tablette et le téléphone. Bien que la taille de la police soit réactive en ce sens qu’elle change en fonction de chaque appareil (ou point de rupture), elle n’est pas fluide. Une typographie fluide ne se casse pas ou ne passe pas à une taille différente à différents points de rupture. La taille de la police commence par une valeur minimale, puis évolue en fonction du navigateur jusqu’à atteindre la taille maximale que vous avez déterminée.
Pourquoi une typographie fluide ?
Il semble que la conception Web s’oriente davantage vers les pratiques de conception fluide que vers celles de la conception réactive traditionnelle. Compte tenu de la diversité des appareils et des tailles d’écran, il est logique d’avoir une conception « fluide » qui s’adapte à la largeur du navigateur. Cela évite le casse-tête du redimensionnement des éléments sur différents appareils. Par exemple, les lignes et les colonnes sont désormais généralement dimensionnées en pourcentage plutôt qu’en pixels. Et la plupart du temps, le contenu peut également être dimensionné de manière à s’adapter de façon fluide à son contenant (par exemple, une image d’une largeur de 100 % s’adaptera de façon fluide à la largeur de la colonne).
La typographie fluide est un outil utile dans la conception Web, car elle permet à la taille de la police de s’adapter aux autres éléments de conception fluides de la page (comme les lignes, les images, les graphiques, etc.). La conception reste ainsi plus cohérente sur plusieurs tailles d’écran, car les éléments de conception ne se déplacent pas (ou ne sautent pas) à différents points de rupture.
Mais la typographie fluide n’est pas aussi facile à réaliser.
Le défi unique de la typographie fluide : Définir une taille de police minimale et maximale
L’utilisation de la typographie fluide dans la conception Web a toujours été un défi unique pour les développeurs Web, car pendant longtemps, les CSS n’ont pas fourni de taille minimale ou maximale pour une police, jusqu’à très récemment. Heureusement, des fonctions de comparaison comme min(), max() et clamp() ont été introduites et deviennent de plus en plus courantes. Mais cela n’a pas été le cas avec d’autres éléments HTML comme les div ou les sections. Par exemple, vous pouvez donner à une section une largeur maximale et une largeur minimale en CSS sans problème. Mais pour les éléments de texte (p, h1, h2, etc…), nous avons besoin de méthodes différentes.
Créer une mise en page Divi simple pour explorer les méthodes de typographie fluide dans Divi
Avant de nous attaquer aux différentes méthodes de création de typographie fluide dans Divi, nous devons créer une mise en page simple avec quelques modules de texte à utiliser comme modèle pour tester ces méthodes.
Pour commencer, ajoutez une rangée d’une colonne à la section.
Ensuite, ajoutez un nouvel élément de texte à la colonne. Celui-ci sera utilisé pour la typographie fluide du texte sur un titre H1.
Ajoutez un titre H1 au contenu du corps de l’élément de texte.
Ensuite, mettez à jour le design comme suit :
- H1 Heading Font : Roboto
- Hauteur de la ligne de l’en-tête H1 : 1.3em
Ensuite, ajoutez un nouveau module de texte sous le précédent. Il sera utilisé pour tester la typographie fluide sur le texte des paragraphes.
Vous pouvez conserver le contenu du corps fictif par défaut pour nos tests. Sous l’onglet design, mettez à jour les éléments suivants :
- Police du texte : Roboto
- Hauteur de la ligne de texte : 1,5em (bureau, 2em (téléphone)
Voilà, c’est fait ! Nous allons utiliser toute cette section, y compris le module de texte de l’en-tête et le module de texte du corps, comme modèle pour démarrer chacun de nos exemples de construction dans la prochaine partie du tutoriel.
Utilisation du modèle
Si vous prévoyez de construire chaque exemple, vous voudrez peut-être enregistrer cette section dans la bibliothèque Divi afin de pouvoir la réintroduire dans la page après chaque construction. Vous pouvez aussi simplement dupliquer la section avant chaque nouvelle construction.
Examinons maintenant de plus près ces méthodes de typographie fluide, puis utilisons-les dans Divi.
6 méthodes pour créer une typographie fluide et comment les utiliser dans Divi
#1 Utilisation d’une unité de longueur VW pour la taille de la police (utile mais limitative)
L’utilisation de l’unité de longueur vw pour la taille de la police est un ingrédient clé de la typographie fluide, car l’unité de longueur vw est relative au viewport (ou largeur du navigateur), de sorte qu’elle augmente et diminue en fonction de la largeur du navigateur. Toutefois, l’utilisation de l’unité de longueur vw pour la taille de la police ne vous permet pas de contrôler la taille minimale ou maximale de la police. Cela signifie que la taille de la police continuera de s’adapter à la largeur du navigateur (ou de la fenêtre d’affichage) sans aucune limite. Par conséquent, vous pouvez facilement obtenir un texte beaucoup trop petit sur un mobile et beaucoup trop grand sur un grand écran.
Toutefois, l’utilisation d’une taille de police vw en soi peut fonctionner parfaitement dans certains cas. Par exemple, si vous souhaitez afficher un titre fluide pour votre site, vous pouvez simplement attribuer une unité de longueur vw comme taille de police (quelque chose comme font-size : 5vw). Toutefois, vous devez vous assurer que le conteneur enveloppant le texte de l’en-tête a une largeur égale à celle de la fenêtre du navigateur. Ainsi, si vous utilisez cette méthode dans Divi, vous devez vous assurer que la section, la ligne, la colonne et le module ont une largeur de 100 %.
Exemple Divi 1 : Utilisation de l’unité de longueur VW après la largeur du téléphone pour créer une typographie fluide dans Divi
Voici comment utiliser cette méthode dans Divi.
Le texte de l’en-tête
À l’aide du modèle de mise en page que nous avons créé précédemment, ouvrez les paramètres du module de texte de l’en-tête (celui qui comprend l’en-tête H1) et mettez à jour les éléments suivants :
- Taille du texte de l’en-tête (ordinateur de bureau et tablette) : 5vw
- Taille du texte de l’en-tête (téléphone) : 38,35px
La valeur impaire en px pour la taille du texte de l’en-tête sur le téléphone est en fait calculée sur la base des 5vw utilisés. Le point de rupture réel où l’affichage sur téléphone devient un affichage sur tablette est à 767px. Et 5 % de 767px correspondent à 38,35px. Cela me donne la taille exacte de la police nécessaire au point de rupture, de sorte qu’il n’y aura pas de saut de taille de la police lors de la transition.
Une fois la taille du texte de l’en-tête définie, enregistrez le module.
Le texte du corps
Ouvrez les paramètres du module de texte du corps et mettez à jour les éléments suivants :
- Taille du texte (ordinateur de bureau et tablette) : 2.1vw
- Taille du texte (téléphone) : 16.1px
Résultat de l’exemple 1
Voici un aperçu du résultat obtenu en ajustant la largeur de la fenêtre du navigateur (ou viewport).
Remarquez que la taille minimale de la police est de 16,1px sur l’écran du téléphone et qu’une fois le point de rupture de 767px atteint sur la tablette, la taille de la police 5vw entre en jeu et continue de s’adapter à la taille du navigateur.
Principale limite
Si vous avez une taille de police avec une unité de longueur vw à l’intérieur d’un conteneur qui a une largeur maximale de 1080px, la police continuera à s’agrandir avec la largeur du navigateur alors que le conteneur reste à une largeur de 1080px, ce qui conduira à certaines incohérences de conception (comme avoir un texte très grand dans une petite rangée sur de grands écrans).
#2 Utilisation de Calc() et de l’unité de longueur VW pour la taille de la police
L’utilisation de la fonction CSS calc( ) pour calculer une valeur de taille de police avec une unité de longueur vw vous permettra de désigner une taille de police minimale tout en permettant au texte de s’adapter à la fenêtre du navigateur grâce à l’unité de longueur vw. La limite est qu’il n’y a pas de limite maximale. Ainsi, même si vous avez résolu le problème de la taille minimale de la police, il se peut que le texte devienne trop gros de manière incontrôlable sur les grands écrans.
Exemple 2 pour Divi : utilisation d’une unité de longueur VW calculée pour créer une typographie fluide dans Divi
Le texte des en-têtes
À partir d’une nouvelle version du modèle de mise en page que nous avons créé à l’origine, ouvrez le paramètre du module de texte de l’en-tête.
Ensuite, mettez à jour la taille du texte de l’en-tête :
Ensuite, passez à l’onglet advance et ajoutez le CSS personnalisé suivant à l’élément principal :
font-size : calc(3em + 2vw) !important
L’unité de longueur em est relative à la taille de la police de l’élément. Nous donnons donc à la taille du texte de l’en-tête une valeur de 1em qui est relative à la taille de la police définie pour le corps du texte du module, qui est de 14px par défaut. Cela signifie donc que dans notre calcul, 3em correspond à 3 fois 14px, soit 42px. Cette valeur de calcul de la taille de la police vous permet de mieux contrôler la taille de la police de départ en ajoutant 2vw à la taille de la police qui est de 3em. Cela rendra le texte fluide tout en garantissant que la taille de la police ne sera jamais inférieure à 3em.
Le texte du corps
Ouvrez ensuite le module du corps du texte et mettez à jour la taille du texte :
Ajoutez ensuite le CSS suivant à l’élément principal :
font-size : calc(1em + 0.5vw) !important
Résultat de l’exemple 2
Voici un aperçu du résultat obtenu en ajustant la largeur de la fenêtre du navigateur (ou viewport).
#3 Utilisation des points d’arrêt réactifs intégrés de Divi avec calc() et vw
pour une taille de police fluide sur l’écran d’une tablette
Avec Divi, les points d’arrêt sont prédéterminés (intégrés au thème). Mais nous pouvons tout de même cibler chacun de ces points d’arrêt en utilisant les onglets responsive intégrés pour les écrans de bureau, de tablette et de téléphone. Cela nous permettra d’ajouter une taille de police minimale sur l’écran du téléphone, une taille de police fluide sur l’écran de la tablette et une taille de police maximale sur l’écran du bureau.
Voici comment procéder.
Texte de l’en-tête
En utilisant un nouveau modèle de mise en page, ouvrez les paramètres du texte de l’en-tête et mettez à jour la taille du texte de l’en-tête :
Sous l’onglet avancé, ajoutez le CSS personnalisé suivant à l’élément principal :
Desktop
font-size : 80px ;
Tablette
font-size : calc(40px + 40 * (100vw - 767px)/213) !important ;
Téléphone
font-size : 40px ;
Cela définit une taille de police minimale de 40px sur le téléphone, une taille de police fluide sur la tablette et une taille de police maximale de 80px sur le bureau.
Texte du corps
Ensuite, ouvrez les paramètres du module du corps du texte et mettez à jour la taille du corps du texte :
Sous l’onglet avancé, ajoutez le CSS personnalisé suivant à l’élément principal :
Desktop
font-size : 24px ;
Tablette
font-size : calc(16px + 8 * (100vw - 767px)/213) !important ;
Téléphone
font-size : 16px ;
Cela définit une taille de police minimale de 16px sur le téléphone, une taille de police fluide sur la tablette et une taille de police maximale de 24px sur le bureau.
Résultat de l’exemple 3
Voici un aperçu du résultat obtenu en ajustant la largeur de la fenêtre du navigateur (ou viewport).
Cette méthode n’est en fait qu’un échauffement pour la méthode suivante, car elle limite la taille de la police fluide sur les points d’arrêt intégrés de Divi pour les tablettes (entre 767px et 980px), mais elle est utile pour obtenir une taille de police fluide sur l’affichage des tablettes dans Divi. Il introduit également l’idée de la façon dont vous pouvez ajouter une taille de police fluide à certains points de rupture que nous explorerons plus en détail dans notre prochaine méthode.
#4 Utilisation de requêtes multimédias personnalisées avec calc() et vw pour obtenir une taille de police fluide à des points de rupture personnalisés.
Pour une solution de typographie fluide plus personnalisable et plus complète, nous devons ajouter des points d’arrêt personnalisés (à l’aide de requêtes média) qui étendront la zone dans laquelle nous voulons engager la taille de notre police fluide à ce que nous voulons. Cela nous permettra de définir une taille de police minimale à un petit point de rupture (par exemple 480px de largeur) et une taille de police maximale à un grand point de rupture (par exemple 980px). Ensuite, nous pouvons utiliser la zone intermédiaire entre les points de rupture petit et grand pour donner à la police une taille qui est fluide en utilisant un calcul qui incorpore l’unité de longueur vw. L’astuce consiste à utiliser le bon calcul dans la zone centrale pour que la taille de la police commence à devenir fluide (ou à s’adapter à la largeur du navigateur) à la taille minimale de la police (définie au niveau du petit point de rupture) et s’arrête à la taille maximale de la police (définie au niveau du grand point de rupture). Pour plus d’informations, consultez l’article sur la typographie fluide de CSS Tricks.
Voici comment procéder.
À l’aide d’un nouveau modèle de mise en page, ouvrez les paramètres du module de texte de l’en-tête et attribuez une classe CSS personnalisée :
Ensuite, ouvrez le module de texte du corps et donnez-lui la même classe CSS :
Ajoutez un module de code sous le module body text.
Ouvrez ensuite les paramètres du module de code et collez le code suivant dans la zone de code en veillant à entourer le code des balises de style nécessaires :
.fluid-text h1 {
font-size : 3em !important
}
.fluid-text p {
font-size : 1em !important ;
}
@media all and (min-width : 480px) {
.fluid-text h1 {
font-size : calc(3em + 40 * ((100vw - 480px) / 500)) !important ;
}
.fluid-text p {
font-size : calc(1em + 10 * ((100vw - 480px) / 500)) !important ;
}
}
@media all and (min-width : 980px){
.fluid-text h1 {
font-size : calc(3em + 40px) !important ;
}
.fluid-text p {
font-size : calc(1em + 10px) !important ;
}
Cela donnera à notre titre (.fluid-text h1) une taille de police minimale de 3em sur un écran de taille inférieure à 480px, une taille de police fluide entre 480px et 980px, et une taille de police maximale de (3em + 40px) au-dessus de 980px.
Vous n’êtes pas obligé d’utiliser des unités de longueur em pour la taille, mais je l’ai fait pour cet exemple parce que cela vous donne le bonus supplémentaire de pouvoir changer la taille de la police du titre et du corps du texte en utilisant l’option de taille de texte intégrée de Divi, au lieu de devoir mettre à jour le code CSS personnalisé dans le module de code.
Par exemple, pour ajuster la taille du texte de l’en-tête dans le module de texte de l’en-tête, il suffit de mettre à jour la taille du corps du texte (et non celle de l’en-tête, qui est relative au corps du texte).
Pour mettre à jour la taille du texte du corps du module de texte, il suffit d’ajuster la taille du corps du texte dans le module également.
Résultat de l’exemple 4
Voici un aperçu du résultat obtenu en ajustant la largeur de la fenêtre du navigateur (ou viewport).
#5 Utilisation de min() et max() pour créer une typographie fluide dans Divi
En plus de calc(), des fonctions mathématiques plus avancées ont été introduites pour simplifier la création d’une typographie fluide en CSS. Il s’agit des fonctions min() et max().
D’un point de vue positif, la création d’une typographie fluide à l’aide des fonctions min( ) et/ou max() pour générer la taille de la police est une solution beaucoup plus simple qui ne nécessite pas de media queries. En utilisant les mathématiques de base, vous pouvez établir une taille de police minimale, une taille de police maximale et une taille de police fluide qui évolue entre les tailles minimale et maximale.
Voyons cela en action à l’aide de Divi Builder.
Texte d’en-tête
À l’aide d’un nouveau modèle de mise en page, mettez à jour les paramètres du module de texte de l’en-tête comme suit :
Sous l’onglet avancé, ajoutez le fragment CSS suivant à l’élément principal :
font-size : min(max(40px, 4vw), 80px) !important ;
Texte du corps
Ensuite, ouvrez les paramètres du module body text et mettez à jour les éléments suivants :
Sous l’onglet avancé, ajoutez l’extrait CSS suivant à l’élément principal :
font-size : min(max(16px, 4vw), 24px) !important ;
Cet extrait attribue une taille de police minimale de 16px, une taille de police fluide (ou à échelle) de 4vw et une taille de police maximale de 24px. La taille de police 4vw sera activée lorsque cette valeur se situera entre les valeurs min et max.
Résultat de l’exemple 5
Voici un aperçu du résultat obtenu en ajustant la largeur de la fenêtre du navigateur (ou viewport).
#6 Utilisation de clamp() pour créer une typographie fluide dans Divi
Si les fonctions min() et max() ne sont pas assez simples pour vous, alors vous pouvez tout aussi bien utiliser clamp(). Elle est extrêmement facile à utiliser, à comprendre et, à mon avis, plus intuitive que min() ou max(). La fonction clamp() a tout ce dont nous avons besoin en un seul endroit, un point de départ pour définir la taille de police minimale, une zone intermédiaire à placer pour définir la taille de police fluide, et un point final pour définir la taille de police maximale. Ces trois paramètres constituent une solution parfaite pour une typographie fluide.
Voyons maintenant à quel point il est facile de les utiliser dans Divi.
Texte d’en-tête
Avec un nouveau modèle de mise en page, ouvrez le module de texte d’en-tête et mettez à jour la taille du texte d’en-tête :
Sous l’onglet avancé, ajoutez l’extrait CSS suivant à l’élément principal :
font-size : clamp(40px, 8vw, 80px) !important ;
Cela définira une taille de police minimale de 40px, une taille de police fluide de 8vw et une taille de police maximale de 80px.
Texte de l’en-tête
Ensuite, mettez à jour la taille du texte du corps du texte comme suit :
Sous l’onglet avancé, ajoutez le fragment CSS suivant à l’élément principal :
font-size : clamp(16px, 4vw, 26px) !important ;
Cela définira une taille de police minimale de 16px, une taille de police fluide de 4vw et une taille de police maximale de 26px.
Résultat de l’exemple 6
Voici un aperçu du résultat de l’ajustement de la largeur de la fenêtre du navigateur (ou viewport).
Support des navigateurs
Dans l’ensemble, les solutions de typographie fluide présentées dans cet article sont prises en charge par la plupart des navigateurs. Tous les navigateurs (même IE) semblent prendre en charge la fonction calc() en CSS, mais Safari semble présenter un petit bogue en ce sens qu’elle ne s’adapte pas lors du réglage du navigateur, mais affiche la taille correcte lors du rafraîchissement de la page (bizarre). Cependant, ce problème semble pouvoir être résolu en utilisant des requêtes média personnalisées comme nous l’avons fait dans la méthode n° 4 ci-dessus. Les fonctions min() max() et clamp() (présentées dans les méthodes #5 et #6 ci-dessus) sont étonnamment bien supportées. Mais elles semblent aussi avoir le bug bizarre de Safari et ne sont pas actuellement supportées par IE.
Donc, si vous cherchez un vainqueur clair en ce qui concerne le support des navigateurs, je pense que la méthode n°4 est probablement la meilleure jusqu’à présent. Mais si cela ne vous dérange pas de laisser IE dans la poussière, l’utilisation de clamp() pour une typographie fluide est une solution étonnante !
Réflexions finales
La création de la typographie fluide dans Divi a une certaine courbe d’apprentissage, je l’admets. Cependant, les avantages d’avoir une taille de police fluide peuvent être cruciaux pour la conception globale de votre site Web. De plus, il n’est plus nécessaire d’ajuster la taille de la police à l’aide d’une tonne de requêtes média pour qu’elle soit parfaitement adaptée à chaque appareil. Espérons que ces méthodes vous aideront à créer une typographie fluide sur votre propre projet Divi.
Je suis impatient d’avoir de vos nouvelles dans les commentaires.
À la vôtre !
