15 meilleures polices Divi à essayer en 2024 (meilleurs appariements et conseils de pro)

Publié: 2024-02-01

Divi est le meilleur ami du web designer. Le constructeur de pages visuelles rationalise le processus de conception et est livré avec un écosystème impressionnant de produits et services Divi, notamment Divi Cloud, Divi Teams, Divi AI, et plus encore. Cependant, quel que soit le battage médiatique actuel autour de ces fonctionnalités, dans le monde de la conception Web, la typographie est un élément fondamental de conception qui ne peut être ignoré. C'est là que l'énorme bibliothèque de polices de Divi (grâce à notre intégration de polices Google) et les options robustes de style de texte entrent en jeu.

Dans cet article, nous mettrons en évidence quinze des meilleures polices et combinaisons Divi à essayer cette année, ainsi que des conseils et bonnes pratiques pour les utiliser sur votre site Divi.

Table des matières
  • 1 À propos des options de police et de style de texte Divi
  • 2 15 meilleures polices et combinaisons de polices Divi
    • 2.1 1. Alegreya Sans
    • 2.2 2. DÈS QUE POSSIBLE
    • 2.3 3. Amer
    • 2.4 4. Fira Sans
    • 2.5 5. IBM Plex Mono
    • 2.6 6. Inter
    • 2.7 7. Kanit
    • 2.8 8. Libre Franklin
    • 2.9 9. Lecteur de nouvelles
    • 2.10 10. Noto Serif
    • 2.11 11. Nunito
    • 2.12 12. PT Sans
    • 2.13 13. Questique
    • 2.14 14. Récursif
    • 2.15 15. Vollkorn
    • 2.16 Mentions honorables
  • 3 astuces et bonnes pratiques pour utiliser les polices Divi
    • 3.1 Télécharger des polices personnalisées par glisser-déposer
    • 3.2 Ajouter des modèles de dégradé de texte avec Divi AI
    • 3.3 Activer la mise en cache des polices Google
  • 4 meilleures polices Divi : résumé et conclusion

À propos des options de police et de style de texte Divi

Divi propose une large gamme d'options de style de police et de texte qui vous permettent de personnaliser l'apparence de votre contenu. Vous pouvez facilement ajuster les styles de texte tels que la taille, l’épaisseur, la hauteur des lignes, l’espacement des lettres et la famille de polices pour n’importe quel élément de texte de votre site Web.

Vous pouvez étendre les options de conception de texte de Divi avec des plugins tiers de Divi Marketplace, comme Text-On-A-Path, Divi Next Text Plugin, Divi Sensei Fancy Text et Divi Sensei Typing Text.

15 meilleures polices et combinaisons de polices Divi

Il peut être intimidant d’aborder une liste de plus de 800 polices et d’essayer de décider lesquelles conviennent le mieux à votre projet. Espérons que cette liste (par ordre alphabétique) vous aidera à passer outre le bruit et à faire des choix de conception judicieux.

J'ai fait de mon mieux pour mettre en évidence les polices que nous n'avions pas abordées auparavant sur notre blog. Dans notre article 12 meilleures polices Google pour WordPress, nous avons couvert de nombreuses polices Google populaires qui ont tendance à être recommandées. Certaines des polices Google les plus populaires pour les sites Web incluent :

  • Lato (c'est la police que vous lisez en ce moment)
  • Merriweather
  • Poppins (voir démo)
  • Affichage du salon
  • Montserrat
  • et plus.

La liste ci-dessous comprend des polices populaires supplémentaires (ainsi que quelques joyaux cachés) que vous pouvez essayer lors de la conception de vos sites Web Divi. Ils sont disponibles dans le constructeur Divi, et beaucoup ont également été intégrés dans nos plus de 250 packs de mise en page Divi prédéfinis.

1. Alegrya Sans

Alegreya Sans est une police sans empattement conçue par Juan Pablo del Peral pour la fonderie espagnole Huerta Tipografica. Il a un caractère convivial, détendu et accessible, ce qui le rend idéal pour les projets de conception Web avec une voix de marque plus douce. La famille de polices se compose de 8 graisses allant de Thin à Black, chacune comprenant des petites majuscules et des italiques.

Idéal pour : les articles de blog, les pages de destination et tout contenu Web long qui nécessite une sensation plus douce et est facile à lire.

À combiner avec : Eczar, Open Sans, Lato, Merriweather, Source Sans 3 et Gowun Batang.

2. DÈS QUE POSSIBLE

ASAP est une police sans empattement moderne conçue par Dušan Jelesijevic. Son style épuré et minimaliste le rend parfait pour les sites Web qui souhaitent transmettre une voix de marque à la fois contemporaine et intemporelle. La famille de polices se compose de 8 graisses allant de Thin à Black, chacune comprenant des petites majuscules et des italiques.

Idéal pour : les titres et le corps du texte. En raison de son aspect épuré et moderne, il est particulièrement efficace dans les conceptions Web contemporaines et liées à la technologie.

Combiner avec : Flamenco.

3. Amer

Bitter est une police serif conçue par Sol Matas pour Huerta Tipografica. Il a une sensation élégante et classique avec une légère touche de bizarrerie, ce qui le rend idéal pour les sites Web qui souhaitent conserver une voix de marque sophistiquée mais accessible. La famille de polices se compose de 8 graisses allant de l'UltraLight au Black, chacune comprenant des petites majuscules et des italiques.

Idéal pour : le corps du texte. Peut également être utilisé pour les titres, mais brille vraiment lorsqu'il est utilisé pour des articles de blog ou pour la copie de pages.

À combiner avec : Duru Sans, Montserrat, Arimo, Raleway, Roboto, Rubik, PT Sans.

4. Fira Sans

Fira Sans est une police sans empattement conçue par Erik Spiekermann, Ralph du Carrois, Anja Meiners et Botio Nikoltchev de Carrois Type Design. Il a été initialement créé pour FirefoxOS de Mozilla et vise à assurer la lisibilité sur différents appareils.

Idéal pour : les deux titres ou le corps du texte. En raison de son aspect épuré et moderne, il est particulièrement efficace sur les sites Web liés à la technologie. Mais cela ne vous empêche pas de l’essayer sur différents types de sites Web. D’autant plus qu’elle se marie si bien avec tant d’autres polices Divi.

À combiner avec : Inconsolata, Playfair Display, Montserrat, Lato, Source Sans 3 et Merriweather.

5. IBM Plex Mono

IBM Plex Mono est une police à espacement fixe qui fait partie de la famille IBM Plex, conçue pour incarner l'esprit et l'histoire de la marque IBM. La famille de polices a été créée par Mike Abbink et Bold Monday et publiée en 2017. La variante Mono s'inspire de la machine à écrire IBM Selectric.

Idéal pour : les titres, le corps du texte et les extraits de code. En raison de sa nature à espacement fixe, qui garantit que chaque caractère occupe la même quantité d'espace, il est facile à lire et à comprendre sur les écrans. Tout cela le rend parfait pour les articles de blog. Si vous avez un thème rétro-tech, c'est encore mieux !

À combiner avec : Roboto, Oswald et Playfair Display.

6. Inter

Inter est une police sans empattement polyvalente conçue par Rasmus Andersson. Il est optimisé pour la lisibilité dans les interfaces utilisateur, ce qui en fait un choix populaire pour la conception numérique. L'une de ses caractéristiques distinctives est la grande hauteur d'x, qui améliore la lisibilité dans les petites tailles. Il prend également en charge diverses langues et écritures, notamment le latin, le grec et le cyrillique.

Idéal pour : éléments de conception d’interface utilisateur. Utilisez cette police pour les menus, le métatexte, le fil d'Ariane, les CTA, etc. Essayez de l'associer aux polices ci-dessous pour voir laquelle vous convient le mieux.

Combinez avec : Domine, IBM Plex Serif, Source Sans 3, Ovo, Rosarivo, Work Sans et Favoris.

7. Kanit

Kanit est une police sans empattement conçue par Cadson Demak, une fonderie de caractères thaïlandaise. Le nom Kanit signifie « mathématiques » en thaï, indiquant sa base de conception géométrique. Il s'agit d'une police moderne et futuriste avec une personnalité unique, avec des coins arrondis et un espacement des lettres semi-large. Il prend en charge les scripts latins et thaïlandais, ce qui en fait un excellent choix pour les environnements multilingues.

Idéal pour : l'actualité, la science, la sécurité et d'autres types de marques avec un ton sérieux plutôt que décontracté. Il convient à la fois aux titres et au corps du texte.

Combiner avec : Hind, Montserrat, Maitree, Archivo.

8. Libre Franklin

Libre Franklin est une réinterprétation et une extension de la police classique de 1912 de Morris Fuller Benton, Franklin Gothic. Le projet a été dirigé par Impallari Type, dans le but de créer une alternative open source. Libre Franklin est une police sans empattement conviviale qui prend en charge des projets complexes de marque et de conception Web, ce qui la rend parfaite pour les applications technologiques et modernes.

Idéal pour : les interfaces numériques, le texte et les titres en raison de son apparence forte et neutre. La large gamme de graisses de la police permet également une grande flexibilité lors de la création d'une hiérarchie visuelle dans votre conception. Ce qui en fait une bonne police pour structurer le contenu comme les articles de blog.

Combiner avec : Neuton, Libre Baskerville, Public Sans.

9. Lecteur de nouvelles

Newsreader est une police serif unique conçue par Production Type. Google Fonts l'a commandé pour être utilisé pour une lecture continue à l'écran dans des environnements riches en contenu comme les sites Web d'actualités. Newsreader est très polyvalent et se décline en différents styles, de Extra Light à Extra Bold. Il est principalement destiné à la lecture de longue durée, ce qui en fait un excellent choix pour les blogs, les articles et les livres numériques.

Idéal pour : articles de blog longs, études de cas, rapports ou tout ce qui nécessite beaucoup de lecture.

Combiner avec : Arimo.

10. Noto Serif

Noto Serif est une famille de polices polyvalente et complète développée par Google. Cette police serif modulée (ce qui signifie que l'épaisseur du trait varie pour chaque caractère) prend en charge les écritures latines, cyrilliques et grecques, ce qui la rend adaptée à diverses langues et applications. Noto Serif est connu pour son adaptabilité, offrant un système typographique harmonieux.

Idéal pour : le corps du texte et les titres, offrant une bonne lisibilité et un attrait esthétique. Si vous avez un site Web multilingue avec un public parlant grec ou cyrillique, c'est un choix judicieux.

À combiner avec : Noto Sans JP, Open Sans, Source Sans 3, Bebas Neue, Lato et Oswald.

11. Nunito

Nunito est une superfamille de polices sans empattement bien équilibrée créée par Vernon Adams. Il présente un terminal arrondi sans design et est connu pour ses largeurs de trait fines et uniformes, ce qui le rend très lisible et adapté à la copie de corps et d'affichage.

Idéal pour : afficher du texte et des titres, tels que des citations, des critiques ou des présentations sur une page de destination. Il convient également à la conception de sites Web de portefeuilles, de finances, de développement et d'agences.

Combiner avec : Asul, Domine, Teko, Vampiro One, Montserrat, Marcellus, Oswald.

12. PT Sans

PT Sans est une police sans empattement universelle conçue par Alexandra Korolkova, Olga Umpeleva et Vladimir Yefimov. Lancé par ParaType en 2009, il a été développé dans le cadre du projet « Types publics de la Fédération de Russie ». PT Sans est utile dans de nombreuses applications, du Web à l'impression, en raison de sa grande lisibilité et de sa conception épurée.

Idéal pour : des documents de lecture longs tels que des articles de blog, des études de cas ou des rapports. Ses différentes pondérations permettent également une certaine flexibilité lors de la création d'une hiérarchie visuelle dans votre conception Web.

À combiner avec : Rubik, Playfair Display, Lato, Inconsolata, Poppins, Tenor Sans, IBM Plex, Vollkorn SC et Nunito.

13. Questique

Questrial est une police sans empattement conçue par Joe Prince. Il offre un style moderne complété par les caractéristiques des polices classiques. Questrial a des formes de lettres quelque peu courtes et étendues, qui peuvent être utiles dans divers contextes de conception.

Idéal pour : texte et titres d'un article ou d'une page. Son esthétique épurée et neutre le rend idéal pour les projets de conception Web qui doivent communiquer élégance, classe et une touche de fantaisie. (Il suffit de regarder ce « Q » trompeusement ludique !)

Combiner avec : Quattrocento.

14. Récursif

Recursive est une police unique et polyvalente créée par Arrow Type. Il offre une large gamme de styles prédéfinis, s'inspirant du style décontracté à un seul trait, un style d'écriture au pinceau utilisé dans la peinture de panneaux, mais est principalement conçu pour répondre aux besoins des écrans numériques.

Idéal pour : éléments de conception d'interface utilisateur, texte d'affichage, extraits de code, infographies et titres. Les exemples incluent des menus, des fils d'Ariane, des extraits de code dans des articles de blog, des études de cas, des avis de clients, etc.

Combinez avec : Nunito, Rubik et IBM Plex Sans.

15. Vollkorn

Vollkorn est une police serif conçue par Friedrich Althausen. C'était l'une des premières polices à être incluses dans Google Fonts en 2010. Vollkorn, qui signifie « grain entier » en allemand, se veut une police silencieuse, modeste et fonctionnelle destinée à un large usage.

Idéal pour : corps de texte, titres, présentations et CTA. C'est une police qui peut tout faire. Ses caractéristiques subtiles en font un excellent choix lorsque vous avez besoin d'une police lisible et pratique, tout en injectant un peu de personnalité à votre site Web.

À combiner avec : PT Sans, Poppins, Lato, Montserrat, Source Sans 3.

Mentions honorables

Lorsqu’il s’agit de centaines de polices, il peut être difficile de déterminer les « meilleures ». Les polices ci-dessous ont fait ma liste de finalistes pour cet article. Si vous n’avez pas trouvé la police que vous recherchez ci-dessus, celles-ci valent la peine d’être consultées.

  • Arimo
  • Inconsolée
  • Rosario
  • Signika
  • Spectral
  • Ubuntu

Conseils et bonnes pratiques pour utiliser les polices Divi

Une fois votre ou vos polices sélectionnées, nous vous recommandons quelques conseils et bonnes pratiques pour en tirer le meilleur parti au sein de Divi.

Téléchargez des polices personnalisées par glisser-déposer

Si vous ne trouvez pas de police parmi les nombreuses options de polices de Divi, vous pouvez toujours utiliser la fonctionnalité Glisser-Déposer de Divi pour télécharger vos polices personnalisées.

Il vous suffit de faire glisser le fichier de police OTF ou TTF sur une page où le Divi Builder est activé. Une boîte de dialogue apparaîtra automatiquement, vous invitant à télécharger la police. Il vous permettra même de remplacer les polices existantes par des polices nouvellement téléchargées !

Ajouter des designs de dégradé de texte avec Divi AI

Texte en CSS Divi AI

Divi AI ouvre des possibilités apparemment infinies pour des effets de conception personnalisés. Par exemple, vous pouvez utiliser Divi AI pour ajouter du CSS personnalisé aux éléments de typographie. Dans cet exemple, nous avons utilisé Divi AI pour ajouter une superposition de dégradé à cet en-tête via une simple invite : « Générez une superposition d'arrière-plan dégradé sur l'en-tête h1 en utilisant les deux couleurs rouges de cette mise en page. »

Code généré par Divi

Activez Divi Builder sur n’importe quelle page pour essayer cela par vous-même. Ensuite, sélectionnez un module de texte avec un en-tête, accédez à l' onglet Avancé > CSS personnalisé et cliquez sur le bouton AI. Après cela, tapez votre invite dans la nouvelle boîte de dialogue et regardez Divi AI se mettre au travail.

Activer la mise en cache des polices Google

Enfin, pour vous assurer que votre site fonctionne à son niveau de performances optimal, vous devez vous assurer que vous avez activé la mise en cache des polices Google dans les options de thème de Divi. Pour ce faire, accédez à Options du thème Divi > Général > Performances . Ensuite, assurez-vous que la bascule à côté de « Améliorer le chargement des polices Google » est activée.

Meilleures polices Divi : résumé et conclusion

Divi est livré avec plus de 800 polices, des paramètres de conception de texte faciles à utiliser et des outils avancés comme Divi AI qui ouvrent des possibilités de conception infinies. Dans cet article, nous avons couvert quinze des meilleures polices disponibles dans Divi et quelques mentions honorables, toutes méritant d’être prises en considération pour votre prochain projet.

Vous voudrez peut-être également voir ce qui est possible d’autre avec Divi et les conceptions basées sur du texte. Ces tutoriels sont un excellent point de départ :

  • Comment créer des conceptions de texte incurvé dans Divi
  • Comment créer de superbes conceptions de texte à l’aide de séparateurs de section dans Divi
  • Comment animer des lettres pour des conceptions de texte uniques dans Divi
  • Comment utiliser le texte comme élément de conception abstraite dans Divi
  • Le guide complet pour créer une typographie fluide dans Divi (6 méthodes)

Vous pouvez aller encore plus loin avec les extensions textuelles de Divi Marketplace.

Image en vedette via Vladimir Ivankin / Shutterstock.com