Gérer les polices et les tailles de police avec Divi 5

Les polices et la typographie donnent le ton à votre site. Le bien faire les choses peut aider votre marque et améliorer la lisibilité. Divi 5 rend le travail avec les polices rapidement et facile. Avec les nouvelles fonctionnalités de Divi, comme les variables de conception et les préréglages du groupe d'options, la configuration des polices devient facile.

Cet article vous apprend à gérer les polices et les tailles de police dans Divi 5, créant une typographie réactive qui évolue magnifiquement entre les appareils.

Divi 5 est prêt pour les nouvelles constructions de sites Web, mais nous mettons la touche finale sur le système de compatibilité vers l'arrière. En attendant, maintenez les sites de mise à jour construits sur D4. Nous vous ferons savoir quand ce changement se produira.

Considérations lorsque vous réfléchissez à des polices pour un nouveau site Web

Lors du démarrage d'un nouveau site, les choix de polices façonnent la première impression de l'utilisateur. Considérez ces points pour vous assurer que votre typographie prend en charge votre contenu:

• LIVIBILITÉ : Choisissez des polices claires, en particulier pour le texte du corps.
• Cohérence : limitez vos polices - deux ou trois fonctionnent mieux, avec au moins un pour les titres et un pour le texte du corps.
• Réactivité : Assurez-vous que les polices s'adaptent à différentes tailles d'écran (idéalement de 320px à 1440px).
• Compatibilité : optez pour des polices en matière de femmes ou populaires pour éviter les problèmes d'affichage.

Comment gérer les polices et les tailles de police dans Divi 5

Utilisons une mise en page avant de la bibliothèque de Divi. Nous choisirons la disposition de la page de destination dans le pack «Business CV» et réorganiserons la typographie en utilisant les nouvelles fonctionnalités de Divi 5. Si vous avez un site Divi 5 existant mais que vous souhaitez améliorer sa typographie, vous pouvez suivre ces mêmes étapes sans utiliser cette mise en page.

Étape 1: Choisir des accords de police

Bonnes appariements de polices mélangent le style et la lisibilité. Les polices Google sont également un pari sûr car elles sont intégrées à Divi et faciles à utiliser.

Dans les exemples ci-dessous, nous resterons avec l'utilisation par le pack de mise en page des poppins pour les en-têtes et le texte du corps. Vous pouvez également essayer de jumeler Lora et Roboto.

Étape 2: Définition des polices pour l'en-tête primaire et le corps

Maintenant que vous avez choisi des polices, nous pouvons les ajouter au site Web à l'aide de Divi. Dans l'éditeur visuel, ouvrez le gestionnaire de variables en haut à gauche. Les variables de conception de Divi vous permettent de contrôler les polices à l'échelle mondiale sur votre site Web.

Il existe deux variables de police par défaut pour vos polices de cap primaire et de corps. Allez dans la section des polices et définissez « Poppins » comme la police de cap et « Roboto » comme police corporelle.

Réglez vos polices sur tout correspond à vos exigences de conception et de marque

À ce stade, il pourrait être également une bonne idée de vous assurer que les couleurs de votre marque sont également définies comme des variables de conception, surtout si vous prévoyez d'utiliser certaines de ces couleurs dans le texte.

Assurez-vous d'enregistrer vos variables lorsque vous les saisissez

Étape 3: Création de tailles de police

Maintenant pour la partie plus impliquée. Il est préférable de réfléchir à la façon dont votre typographie est bonne sur la taille de chaque appareil. Avec Divi 5, vous avez deux options. La première option et préférée consiste à utiliser CLAMP (), et la seconde consiste à régler la police plusieurs fois à différents points d'arrêt.

La façon dont vous construisez votre dimensionnement de police pour chaque niveau de cap, texte corporel et autres situations de texte dépend entièrement de vous.

Typogrphie fluide avec clamp ()

Clamp () vous permet de définir une valeur minimale, une valeur préférée et une valeur maximale. Dans un autre article, nous approfondissons la clamp () et fournissons un moyen facile de comprendre ces valeurs. Mais voici un exemple:

Cette disposition a une taille H1 par défaut et une taille H1 unique (et plus grande) pour le nom de la personne dans la première section. Nous avons reporté ce même principe dans le graphique de dimensionnement ci-dessus et ajouté une plus petite variation de police corporelle.

Vous pouvez tester votre dimensionnement de police dans un simple document HTML pour voir les choses isolément (cela peut également être fait à l'intérieur de Divi). Voici à quoi ressemble le dimensionnement de police ci-dessus avec le couple de police.

Une fois que vous êtes à l'aise avec vos tailles de police, vous pouvez les ajouter sous forme de variables de conception. Donnez à chacun un nom perceptible et collez la valeur à droite.

Unités fixes avec des points d'arrêt

Clamp () est l'option la plus polyvalente pour le dimensionnement des polices, mais de nombreux utilisateurs utilisent toujours des valeurs fixes comme les pixels ou le REM. Vous pouvez les utiliser aux côtés des points d'arrêt personnalisables de Divi pour faire évoluer votre police de haut en bas si nécessaire.

Étant donné que votre nombre de valeurs pour un effet similaire triples lorsque vous l'utilisez de cette façon (au lieu de 10 valeurs CLAMP () ci-dessus, ce serait 30 valeurs individuelles). Il n'est pas nécessairement recommandé de remplir le gestionnaire variable avec ces valeurs, mais vous pouvez si vous le souhaitez,

Vous pouvez construire votre structure de dimensionnement pour chaque point d'arrêt et le transporter à l'étape suivante. Au lieu de les placer comme variables de conception, vous pouvez les appliquer directement aux préréglages du groupe d'options et des éléments.

Étape 5: Ajout de tailles de police du gestionnaire variable aux préréglages

Avec vos variables de nombre défini (ou au moins formulées), il est temps de les appliquer aux préréglages. L'un des meilleurs cas d'utilisation pour les préréglages du groupe d'options est la typographie. Vous pouvez créer sept (7) préréglages de groupe d'options d'en-tête / titre que vous pouvez utiliser pour n'importe quel module qui utilise le champ d'en-tête / titre (comme des modules de tête, de texte de présentation, d'accordéon et de personne, par exemple).

Il en va de même pour le groupe d'options de texte. Je peux définir deux (2) préréglages (un pour ma normale et un pour mon petit texte de corps), et tout module qui utilise le groupe d'options de texte peut utiliser ces styles. Pour les styles de cap et de texte, cela est beaucoup plus efficace que d'appliquer ces styles en tant que préréglages d'élément à tous les différents modules que vous pourriez utiliser sur tout votre site Web.

Attribuer des valeurs fixes aux points d'arrêt

La vidéo ci-dessous montre les étapes de base si vous avez opté pour les valeurs fixes à plusieurs points d'arrêt. Cliquez sur un module de texte, accédez à l'onglet Design , survolez le groupe d'options de texte, cliquez sur l' icône OG , créez un nouveau préréglage et appliquez vos styles à chaque point d'arrêt. Faites défiler vers le bas de la barre latérale droite et enregistrez votre préréglage ( très important ). Répétez ceci pour autant de variations de texte que vous avez proposé (comme les petites, régulières et grandes).

Attribuez le préréglage OG que vous prévoyez d'utiliser le plus comme préréglage par défaut pour ce groupe d'options. Si vous voyez une étoile à côté, c'est-à-dire votre défaut actuel (cela s'appliquera sur votre site, en supposant qu'aucun autre styles de module ou préréglages d'élément n'est appliqué partout).

Attribuer des fonctions CLAMP () (plus facile)

Le processus est similaire lors de l'utilisation de la variable de conception avec la fonction clamp (), mais beaucoup plus facile. Dans l'exemple de vidéo ci-dessous, nous avons défini deux tailles d'en-tête au niveau du groupe d'options. La seule différence par rapport à ce qui précède est que nous ne collons pas les valeurs mais en utilisant les variables que nous avons configurées plus tôt. Lors de la configuration de vos préréglages OG, assurez-vous que les polices par défaut sont choisies et définissez les couleurs comme vous le souhaitez. Certaines personnes aiment la fixation des couleurs au niveau du module, mais c'est à vous.

Vous définissez chaque niveau d'en-tête H1-H6 en tant que nouveau préréglage de groupe d'options personnalisés .

Appliquez ces préréglages aux titres de votre disposition à l'aide des préréglages de groupe d'options que vous avez créés. La beauté des préréglages du groupe d'options est qu'ils fonctionnent sur des modules de ce groupe d'options, tels que les modules de texte, de texte de présentation et d'en-tête.

Meilleures pratiques pour les polices dans divi 5

Pour maximiser votre typographie, gardez à l'esprit ces conseils:

• Définissez toujours les variables de police globales tôt.
• Utilisez un espacement et des tailles cohérents (oui, vous pouvez également définir l'espacement des lettres et la hauteur de la ligne en tant que variables de conception).
• Aperçu régulièrement des vues réactives sur les tailles d'écran.
• Évitez trop de polices ou de poids de police.

La typographie dans Divi 5 est une bouffée d'air frais

Vous possédez maintenant un système de typographie complet grâce aux dernières fonctionnalités de Divi.

Les polices vivent comme variables de conception. Idem avec les tailles de police lorsque vous utilisez CLAMP (). Ou si vous souhaitez exercer les sept de ces points d'arrêt personnalisables, vous pouvez également emprunter cette voie.

Les préréglages du groupe d'options appliquent ces choix sans effort sur l'ensemble de votre site. Ajuster les tailles de polices tout au long d'une construction est très facile car elles sont définies comme des variables de conception. Quoi qu'il en soit, vos créations resteront nettes et votre temps de construction rétrécira.

Divi 5 a lancé de nombreuses nouvelles fonctionnalités qui mettent à niveau votre système de conception. Commencez à construire de nouveaux sites dans Divi 5 aujourd'hui pour profiter de toutes les dernières fonctionnalités. Nous vous recommandons d'attendre un peu plus longtemps pour migrer les sites Web existants vers Divi 5.