Divi is a internet clothier’s absolute best good friend. The visible web page builder streamlines the design procedure and springs supercharged with an outstanding ecosystem of Divi services and products, together with Divi Cloud, Divi Teams, Divi AI, and extra. Then again, without reference to the present hype round those options, on this planet of internet design, typography is a foundational design component that can’t be disregarded. That’s the place Divi’s monumental font library (because of our Google Fonts Integration) and powerful textual content styling choices come into play.
On this put up, we’ll spotlight fifteen of the most productive Divi fonts and combos for you to take a look at this yr, in addition to pointers and absolute best practices for the usage of them for your Divi web site.
About Divi Font and Textual content Styling Choices
Divi gives an intensive vary of font and textual content styling choices that help you customise the feel and appear of your content material. You’ll be able to simply regulate textual content kinds equivalent to dimension, weight, line top, letter spacing, and font circle of relatives for any textual content component for your web site.
You’ll be able to prolong Divi’s textual content design choices with third-party plugins from the Divi Market, like Text-On-A-Path, Divi Next Text Plugin, Divi Sensei Fancy Text, and Divi Sensei Typing Text.
15 Easiest Divi Fonts & Font Combos
It may be formidable to manner an inventory of 800+ fonts and check out to come to a decision which of them are proper in your mission. Confidently, this checklist (in alphabetical order) will can help you minimize throughout the noise and make robust design possible choices.
I’ve executed my absolute best to spotlight fonts we haven’t lined on our weblog prior to. In our put up 12 Best Google Fonts for WordPress, we lined many in style Google Fonts that have a tendency to be beneficial. One of the crucial hottest Google Fonts for web pages come with:
- Lato (that’s the font you might be studying at the moment 😁)
- Merriweather
- Poppins (see demo)
- Playfair Display
- Montserrat
- and more.
The checklist underneath is composed of extra in style fonts (in addition to some hidden gem stones) that you’ll check out when designing your Divi web pages. They’re to be had within the Divi builder, and plenty of have additionally been included into our 250+ pre-made Divi structure packs.
1. Alegreya Sans
Alegreya Sans is a sans-serif typeface designed by way of Juan Pablo del Peral for the Spanish foundry Huerta Tipográfica. It has a pleasant, comfy, and approachable personality that makes it splendid for internet design initiatives with a softer emblem voice. The font circle of relatives is composed of 8 weights starting from Skinny to Black, each and every of which incorporates small caps and italics.
Easiest For: weblog posts, touchdown pages, and any long-form internet content material that wishes a softer really feel and is straightforward to learn.
Mix with: Eczar, Open Sans, Lato, Merriweather, Supply Sans 3, and Gowun Batang.
2. ASAP
ASAP is a contemporary sans-serif typeface designed by way of Dušan Jelesijević. Its blank, minimalistic taste makes it highest for web pages that wish to put across a modern but undying emblem voice. The font circle of relatives is composed of 8 weights starting from Skinny to Black, each and every of which incorporates small caps and italics.
Easiest For: each headings and frame textual content. Because of its blank and trendy glance, it’s specifically efficient in tech-related and fresh internet designs.
Mix with: Flamenco.
3. Sour
Bitter is a serif typeface designed by way of Sol Matas for Huerta Tipográfica. It has a chic and vintage really feel with a slight trace of quirkiness, making it splendid for web pages that wish to handle a complicated but approachable emblem voice. The font circle of relatives is composed of 8 weights starting from UltraLight to Black, each and every of which incorporates small caps and italics.
Easiest For: frame textual content. Can be utilized for headings too, however actually shines when used for weblog posts or web page replica.
Mix with: Duru Sans, Montserrat, Arimo, Raleway, Roboto, Rubik, PT Sans.
4. Fira Sans
Fira Sans is a sans-serif typeface designed by way of Erik Spiekermann, Ralph du Carrois, Anja Meiners, and Botio Nikoltchev of Carrois Kind Design. It used to be to begin with created for Mozilla’s FirefoxOS and targets to supply legibility throughout quite a lot of gadgets.
Easiest For: each headings or frame textual content. Because of its blank and trendy glance, it’s specifically efficient on tech-related web pages. However don’t let that prevent you from making an attempt it out on various kinds of web pages. Particularly because it pairs with such a lot of different Divi fonts so effectively.
Mix with: Inconsolata, Playfair Show, Montserrat, Lato, Supply Sans 3, and Merriweather.
5. IBM Plex Mono
IBM Plex Mono is a monospaced typeface and a part of the IBM Plex circle of relatives, which used to be designed to include IBM’s emblem spirit and historical past. The typeface circle of relatives used to be created by way of Mike Abbink and Daring Monday and launched in 2017. The Mono variant attracts inspiration from the IBM Selectric typewriter.
Easiest For: headings, frame textual content, and code snippets. Because of its monospaced nature, which guarantees that each and every personality occupies an identical quantity of area, it’s smooth to learn and perceive on monitors. All of which makes it highest for weblog posts. If in case you have a retro-tech theme, even higher!
Mix with: Roboto, Oswald, and Playfair Show.
6. Inter
Inter is a flexible sans-serif typeface designed by way of Rasmus Andersson. It’s optimized for clarity in consumer interfaces, making it a well-liked selection for virtual design. One among its unique options is the huge x-height, which improves legibility at small sizes. It additionally helps quite a lot of languages and scripts, together with Latin, Greek, and Cyrillic.
Easiest For: consumer interface design components. Use this font for menus, meta-text, breadcrumbs, CTAs, and extra. Take a look at pairing it with the fonts underneath to look which goes right for you.
Mix with: Domine, IBM Plex Serif, Supply Sans 3, Ovo, Rosarivo, Paintings Sans, and Favorit.
7. Kanit
Kanit is a sans-serif typeface designed by way of Cadson Demak, a Thai-type foundry. The title Kanit approach “arithmetic” in Thai, indicating its geometric design foundation. It’s a contemporary, futuristic-looking font with a singular persona, that includes rounded corners and semi-wide letter spacing. It helps Latin and Thai scripts, making it a very good selection for multilingual environments.
Easiest For: information, science, safety, and different emblem sorts with a major somewhat than informal tone. It’s appropriate for each headlines and frame textual content.
Mix with: Hind, Montserrat, Maitree, Archivo.
8. Libre Franklin
Libre Franklin is a reinterpretation and growth of the vintage 1912 typeface by way of Morris Fuller Benton, Franklin Gothic. The mission used to be led by way of Impallari Kind, with the objective of making an open-source selection. Libre Franklin is a pleasant sans-serif font that helps complicated branding and internet design initiatives, making it highest for tech and trendy programs.
Easiest For: virtual interfaces, textual content, and headings because of its robust, impartial look. The font’s wide variety of weights additionally permits for a lot flexibility when growing a visible hierarchy for your design. Making it a just right font for construction content material like weblog posts.
Mix with: Neuton, Libre Baskerville, Public Sans.
9. Newsreader
Newsreader is a singular serif typeface designed by way of Manufacturing Kind. Google Fonts commissioned it for use for steady, on-screen studying in content-rich environments like information web pages. Newsreader is very flexible and is available in quite a lot of kinds, from Further Gentle to Further Daring. It’s essentially meant for longer-form studying, making it a very good selection for blogs, articles, and virtual books.
Easiest For: long-form weblog posts, case research, reviews, or anything else that calls for a large number of studying.
Mix with: Arimo.
10. Noto Serif
Noto Serif is a flexible and complete font circle of relatives evolved by way of Google. This modulated serif font (that means the thickness of the stroke varies all through each and every personality) helps Latin, Cyrillic, and Greek scripts, making it appropriate for quite a lot of languages and programs. Noto Serif is understood for its adaptability, offering a harmonious typographic device.
Easiest For: frame textual content and headlines, providing just right clarity and aesthetic enchantment. If in case you have a multilingual web site with an target audience that speaks Greek or a Cyrillic language it is a forged selection.
Mix with: Noto Sans JP, Open Sans, Supply Sans 3, Bebas Neue, Lato, and Oswald.
11. Nunito
Nunito is a well-balanced, sans-serif typeface superfamily created by way of Vernon Adams. It includes a rounded terminal sans design and is understood for its skinny, uniform stroke widths, making it extremely readable and appropriate for each frame and show replica.
Easiest For: show textual content and headings–this type of quotes, evaluations, or blurbs on a touchdown web page. It’s additionally just right for design portfolio, finance, building, and company web pages.
Mix with: Asul, Domine, Teko, Vampiro One, Montserrat, Marcellus, Oswald.
12. PT Sans
PT Sans is a common sans-serif typeface designed by way of Alexandra Korolkova, Olga Umpeleva, and Vladimir Yefimov. Launched by way of ParaType in 2009, it used to be evolved as a part of the “Public Forms of Russian Federation” mission. PT Sans turns out to be useful in lots of programs, from internet to print, because of its prime clarity and blank design.
Easiest For: long-form studying fabrics equivalent to weblog posts, case research, or reviews. Its quite a lot of weights additionally permit for flexibility when growing a visible hierarchy for your internet design.
Mix with: Rubik, Playfair Show, Lato, Inconsolata, Poppins, Tenor Sans, IBM Plex, Vollkorn SC, and Nunito.
13. Questrial
Questrial is a sans-serif typeface designed by way of Joe Prince. It gives a contemporary taste that’s complemented with traits of vintage typefaces. Questrial has quite brief and prolonged letterforms, which can also be helpful in quite a lot of design contexts.
Easiest For: put up or web page textual content and headings. Its blank and impartial aesthetic makes it splendid for internet design initiatives that wish to be in contact class, elegance, and a touch of caprice. (Simply take a look at that deceptively playful “Q”!)
Mix with: Quattrocento.
14. Recursive
Recursive is a singular, flexible typeface created by way of Arrow Kind. It gives quite a lot of predefined kinds, drawing inspiration from single-stroke informal, a mode of brush writing utilized in signal portray, however is essentially designed to satisfy the desires of virtual monitors.
Easiest For: consumer interface design components, show textual content, code snippets, infographics, and headings. Examples would come with menus, breadcrumbs, code snippets in weblog posts, case research, buyer evaluations, and extra.
Mix with: Nunito, Rubik, and IBM Plex Sans.
15. Vollkorn
Vollkorn is a serif typeface designed by way of Friedrich Althausen. It used to be one of the most earliest fonts to be incorporated in Google Fonts in 2010. Vollkorn, this means that “complete grain” in German, is meant to be a quiet, modest, and practical typeface for wide use.
Easiest For: frame textual content, headlines, blurbs, and CTAs. It’s a font that may do all of it. Its delicate traits make it a super selection when you wish to have a font that’s readable and sensible, but nonetheless injects slightly of persona into your web site.
Mix with: PT Sans, Poppins, Lato, Montserrat, Supply Sans 3.
Honorable Mentions
When coping with loads of fonts, it may be difficult to resolve the “absolute best” ones. The fonts underneath made my checklist of finalists for this put up. When you didn’t to find the font you’re on the lookout for above, those are price testing.
Guidelines and Easiest Practices for The use of Divi Fonts
As soon as your font (or fonts) are decided on, we advise a couple of pointers and absolute best practices for purchasing essentially the most out of them inside of Divi.
Add Customized Fonts with drag-and-drop
When you don’t discover a font inside of Divi’s intensive font choices, you’ll all the time use Divi’s Drag and Drop functionality to add your customized fonts.
All you need to do is drag the OTF or TTF font report onto a web page the place the Divi Builder is enabled. A conversation field will routinely seem, prompting you to add the font. It’s going to even help you substitute current fonts with newly uploaded ones!
Upload Textual content Gradient Designs with Divi AI
Divi AI opens up apparently never-ending chances for customized design results. For instance, you’ll use Divi AI so as to add customized CSS to typography components. On this instance, we’ve used Divi AI so as to add a gradient overlay to this heading by means of a easy urged: “Generate a gradient background overlay at the h1 heading the usage of the 2 pink colours on this structure.”
Allow the Divi Builder on any web page to take a look at this out for your self. Then, make a selection a textual content module with a heading, navigate to the Complex tab > Customized CSS, and click on the AI button. After that, form your urged within the new discussion field and watch Divi AI pass to paintings.
Allow Google Fonts Caching
In the end, to verify your web site is working at its optimum efficiency degree, you’ll wish to make sure you’ve enabled Google Font caching in Divi’s Theme Choices. To take action, navigate to Divi Theme Choices > Normal > Efficiency. Then, you should definitely have the toggle subsequent to “Beef up Google Fonts Loading” enabled.
Easiest Divi Fonts: Abstract and Conclusion
Divi comes loaded with over 800 fonts, easy-to-use textual content design settings, and complex equipment like Divi AI that open up never-ending design chances. On this put up, we’ve lined fifteen of the most productive fonts to be had in Divi and a few honorable mentions, all price attention in your subsequent mission.
You might also wish to see what else is conceivable with Divi and text-based designs. Those tutorials are a great spot to begin:
- How to Create Curved Text Designs in Divi
- How to Create Stunning Text Designs Using Section Dividers in Divi
- How to Animate Letters for Unique Text Designs in Divi
- How to Use Text as an Abstract Design Element in Divi
- The Complete Guide for Creating Fluid Typography in Divi (6 Methods)
You’ll be able to take issues even additional with text-based extensions from the Divi Market.
Featured Symbol by means of Vladimir Ivankin / shutterstock.com
The put up 15 Best Divi Fonts to Try in 2024 (Top Pairings & Pro Tips) gave the impression first on Elegant Themes Blog.
0 Comments