15 melhores fontes Divi para experimentar em 2024 (principais combinações e dicas profissionais)

Divi é o melhor amigo do web designer. O construtor visual de páginas agiliza o processo de design e vem com um impressionante ecossistema de produtos e serviços Divi, incluindo Divi Cloud, Divi Teams, Divi AI e muito mais. No entanto, independentemente do entusiasmo atual em torno desses recursos, no mundo do web design, a tipografia é um elemento fundamental do design que não pode ser ignorado. É aí que entram em jogo a enorme biblioteca de fontes do Divi (graças à nossa integração com Google Fonts) e opções robustas de estilo de texto.

Nesta postagem, destacaremos quinze das melhores fontes e combinações Divi para você experimentar este ano, bem como dicas e práticas recomendadas para usá-las em seu site Divi.

Sobre as opções de fonte Divi e estilo de texto

Divi oferece uma ampla gama de opções de fontes e estilos de texto que permitem personalizar a aparência do seu conteúdo. Você pode ajustar facilmente estilos de texto, como tamanho, espessura, altura da linha, espaçamento entre letras e família de fontes para qualquer elemento de texto em seu site.

Você pode estender as opções de design de texto do Divi com plug-ins de terceiros do Divi Marketplace, como Text-On-A-Path, Divi Next Text Plugin, Divi Sensei Fancy Text e Divi Sensei Typing Text.

15 melhores fontes Divi e combinações de fontes

Pode ser assustador abordar uma lista de mais de 800 fontes e tentar decidir quais são as certas para o seu projeto. Esperançosamente, esta lista (em ordem alfabética) ajudará você a eliminar o ruído e a fazer escolhas de design sólidas.

Fiz o meu melhor para destacar fontes que não abordamos em nosso blog antes. Em nossa postagem 12 melhores fontes do Google para WordPress, cobrimos muitas fontes populares do Google que tendem a ser recomendadas. Algumas das fontes do Google mais populares para sites incluem:

• Lato (essa é a fonte que você está lendo agora)
• Merriweather
• Poppins (veja demonstração)
• Exibição Playfair
• Montserrate
• e mais.

A lista abaixo consiste em fontes populares adicionais (bem como algumas joias escondidas) que você pode experimentar ao projetar seus sites Divi. Eles estão disponíveis no construtor Divi e muitos também foram incorporados em nossos mais de 250 pacotes de layout Divi pré-fabricados.

1. Alegreya Sans

Alegreya Sans é uma fonte sem serifa desenhada por Juan Pablo del Peral para a fundição espanhola Huerta Tipografica. Possui um caráter amigável, descontraído e acessível que o torna ideal para projetos de web design com uma voz de marca mais suave. A família de fontes consiste em 8 espessuras que variam de Fino a Preto, cada uma incluindo versalete e itálico.

Melhor para: postagens de blog, páginas de destino e qualquer conteúdo da web de formato longo que precise de um toque mais suave e fácil de ler.

Combine com: Eczar, Open Sans, Lato, Merriweather, Source Sans 3 e Gowun Batang.

2. O mais rápido possível

ASAP é uma fonte moderna sem serifa projetada por Dušan Jelesijevic. Seu estilo limpo e minimalista o torna perfeito para sites que desejam transmitir uma voz de marca contemporânea, porém atemporal. A família de fontes consiste em 8 espessuras que variam de Fino a Preto, cada uma incluindo versalete e itálico.

Melhor para: títulos e corpo de texto. Devido à sua aparência limpa e moderna, é particularmente eficaz em web designs contemporâneos e relacionados à tecnologia.

Combine com: Flamenco.

3. Amargo

Bitter é uma fonte serifada desenhada por Sol Matas para Huerta Tipografica. Tem um toque elegante e clássico com um leve toque de peculiaridade, tornando-o ideal para sites que desejam manter uma voz de marca sofisticada, mas acessível. A família de fontes consiste em 8 espessuras que variam de UltraLight a Black, cada uma incluindo versalete e itálico.

Melhor para: corpo do texto. Também pode ser usado para títulos, mas realmente brilha quando usado para postagens de blogs ou cópias de páginas.

Combine com: Duru Sans, Montserrat, Arimo, Raleway, Roboto, Rubik, PT Sans.

4. Fira Sans

Fira Sans é uma fonte sem serifa projetada por Erik Spiekermann, Ralph du Carrois, Anja Meiners e Botio Nikoltchev da Carrois Type Design. Foi inicialmente criado para o FirefoxOS da Mozilla e tem como objetivo fornecer legibilidade em vários dispositivos.

Melhor para: títulos ou corpo de texto. Devido à sua aparência limpa e moderna, é particularmente eficaz em sites relacionados à tecnologia. Mas não deixe que isso o impeça de experimentar em diferentes tipos de sites. Especialmente porque combina muito bem com muitas outras fontes Divi.

Combine com: Inconsolata, Playfair Display, Montserrat, Lato, Source Sans 3 e Merriweather.

5. IBM PlexMono

IBM Plex Mono é uma fonte monoespaçada e parte da família IBM Plex, que foi projetada para incorporar o espírito e a história da marca IBM. A família de fontes foi criada por Mike Abbink e Bold Monday e lançada em 2017. A variante Mono se inspira na máquina de escrever IBM Selectric.

Melhor para: títulos, corpo de texto e trechos de código. Devido à sua natureza monoespaçada, que garante que cada personagem ocupe a mesma quantidade de espaço, é fácil de ler e compreender nas telas. Tudo isso o torna perfeito para postagens em blogs. Se você tiver um tema retro-tech, melhor ainda!

Combine com: Roboto, Oswald e Playfair Display.

6. Inter

Inter é uma fonte versátil sem serifa projetada por Rasmus Andersson. Ele é otimizado para facilitar a leitura em interfaces de usuário, tornando-o uma escolha popular para design digital. Uma de suas características distintivas é a grande altura x, que melhora a legibilidade em tamanhos pequenos. Ele também oferece suporte a vários idiomas e escritas, incluindo latim, grego e cirílico.

Melhor para: elementos de design de interface do usuário. Use esta fonte para menus, metatexto, localização atual, CTAs e muito mais. Tente combiná-lo com as fontes abaixo para ver qual funciona melhor para você.

Combine com: Domine, IBM Plex Serif, Source Sans 3, Ovo, Rosarivo, Work Sans e Favorit.

7. Kanit

Kanit é uma fonte sem serifa projetada por Cadson Demak, uma fundição de tipo tailandês. O nome Kanit significa “matemática” em tailandês, indicando sua base geométrica. É uma fonte moderna e futurista com uma personalidade única, com cantos arredondados e espaçamento semi-largo entre letras. Suporta scripts latinos e tailandeses, tornando-o uma excelente escolha para ambientes multilíngues.

Melhor para: notícias, ciência, segurança e outros tipos de marcas com um tom sério em vez de casual. É adequado tanto para títulos quanto para corpo de texto.

Combine com: Hind, Montserrat, Maitree, Archivo.

8. Livre Franklin

Libre Franklin é uma reinterpretação e expansão da fonte clássica de 1912 de Morris Fuller Benton, Franklin Gothic. O projeto foi liderado por Impallari Type, com o objetivo de criar uma alternativa de código aberto. Libre Franklin é uma fonte sem serifa amigável que oferece suporte a projetos complexos de branding e web design, tornando-a perfeita para aplicativos modernos e de tecnologia.

Melhor para: interfaces digitais, texto e títulos devido à sua aparência forte e neutra. A ampla gama de pesos da fonte também permite muita flexibilidade ao criar uma hierarquia visual em seu design. Tornando-a uma boa fonte para estruturar conteúdo, como postagens de blogs.

Combine com: Neuton, Libre Baskerville, Public Sans.

9. Leitor de notícias

Newsreader é uma fonte serifada exclusiva projetada pela Production Type. O Google Fonts o encomendou para ser usado para leitura contínua na tela em ambientes ricos em conteúdo, como sites de notícias. O Newsreader é altamente versátil e vem em vários estilos, do Extra Light ao Extra Bold. Destina-se principalmente à leitura mais longa, o que o torna uma excelente escolha para blogs, artigos e livros digitais.

Ideal para: postagens longas em blogs, estudos de caso, relatórios ou qualquer coisa que exija muita leitura.

Combine com: Arimo.

10. Noto Serif

Noto Serif é uma família de fontes versátil e abrangente desenvolvida pelo Google. Esta fonte serifada modulada (o que significa que a espessura do traço varia ao longo de cada caractere) suporta escritas latinas, cirílicas e gregas, tornando-a adequada para vários idiomas e aplicações. Noto Serif é conhecido pela sua adaptabilidade, proporcionando um sistema tipográfico harmonioso.

Melhor para: corpo do texto e títulos, oferecendo boa legibilidade e apelo estético. Se você tem um site multilíngue com um público que fala grego ou cirílico, esta é uma escolha sólida.

Combine com: Noto Sans JP, Open Sans, Source Sans 3, Bebas Neue, Lato e Oswald.

11. Nunito

Nunito é uma superfamília de fontes sem serifa bem equilibrada criada por Vernon Adams. Ele apresenta um terminal arredondado sem design e é conhecido por suas larguras de traços finas e uniformes, tornando-o altamente legível e adequado para cópia corporal e de exibição.

Melhor para: exibir texto e títulos - como citações, comentários ou sinopses em uma página de destino. Também é bom para sites de portfólio de design, finanças, desenvolvimento e agências.

Combine com: Asul, Domine, Teko, Vampiro One, Montserrat, Marcellus, Oswald.

12. PT Sans

PT Sans é uma fonte universal sem serifa projetada por Alexandra Korolkova, Olga Umpeleva e Vladimir Yefimov. Lançado pela ParaType em 2009, foi desenvolvido como parte do projeto “Tipos Públicos da Federação Russa”. PT Sans é útil em muitas aplicações, desde web até impressão, devido à sua alta legibilidade e design limpo.

Melhor para: materiais de leitura longos, como postagens de blogs, estudos de caso ou relatórios. Seus vários pesos também permitem flexibilidade na criação de uma hierarquia visual em seu web design.

Combine com: Rubik, Playfair Display, Lato, Inconsolata, Poppins, Tenor Sans, IBM Plex, Vollkorn SC e Nunito.

13. Questão

Questrial é uma fonte sem serifa desenhada por Joe Prince. Oferece um estilo moderno complementado com características de fontes clássicas. Questrial tem letras curtas e estendidas, que podem ser úteis em vários contextos de design.

Melhor para: texto e títulos de postagens ou páginas. Sua estética limpa e neutra o torna ideal para projetos de web design que precisam comunicar elegância, classe e um toque de capricho. (Basta olhar para aquele “Q” enganosamente brincalhão!)

Combine com: Quattrocento.

14. Recursivo

Recursivo é um tipo de letra único e versátil criado pela Arrow Type. Ele oferece uma ampla gama de estilos predefinidos, inspirando-se no casual de traço único, um estilo de escrita com pincel usado na pintura de sinalização, mas foi projetado principalmente para atender às necessidades das telas digitais.

Ideal para: elementos de design da interface do usuário, texto de exibição, trechos de código, infográficos e títulos. Os exemplos incluem menus, trilhas de navegação, trechos de código em postagens de blog, estudos de caso, avaliações de clientes e muito mais.

Combine com: Nunito, Rubik e IBM Plex Sans.

15. Vollkorn

Vollkorn é uma fonte serifada projetada por Friedrich Althausen. Foi uma das primeiras fontes a ser incluída no Google Fonts em 2010. Vollkorn, que significa “grão integral” em alemão, pretende ser uma fonte silenciosa, modesta e funcional para uso amplo.

Ideal para: corpo de texto, títulos, sinopses e CTAs. É uma fonte que pode fazer tudo. Suas características sutis a tornam uma ótima escolha quando você precisa de uma fonte que seja legível e prática, mas que ainda injete um pouco de personalidade em seu site.

Combine com: PT Sans, Poppins, Lato, Montserrat, Source Sans 3.

Menções Honrosas

Ao lidar com centenas de fontes, pode ser um desafio determinar as “melhores”. As fontes abaixo entraram na minha lista de finalistas deste post. Se você não encontrou a fonte que procurava acima, vale a pena conferir.

• Arimo
• Inconsolada
• Rosário
• Signika
• Espectral
• Ubuntu

Dicas e práticas recomendadas para usar fontes Divi

Depois que sua (s) fonte (s) forem selecionadas, recomendamos algumas dicas e práticas recomendadas para aproveitá-las ao máximo no Divi.

Carregar fontes personalizadas arrastando e soltando

Se você não encontrar uma fonte nas extensas opções de fontes do Divi, você sempre pode usar a funcionalidade Arrastar e Soltar do Divi para fazer upload de suas fontes personalizadas.

Tudo que você precisa fazer é arrastar o arquivo de fonte OTF ou TTF para uma página onde o Divi Builder está habilitado. Uma caixa de diálogo aparecerá automaticamente, solicitando que você carregue a fonte. Ele ainda permitirá que você substitua fontes existentes por fontes recém-carregadas!

Adicione designs de gradiente de texto com Divi AI

Divi AI abre possibilidades aparentemente infinitas para efeitos de design personalizados. Por exemplo, você pode usar Divi AI para adicionar CSS personalizado a elementos tipográficos. Neste exemplo, usamos Divi AI para adicionar uma sobreposição de gradiente a este título por meio de um prompt simples: “Gere uma sobreposição de fundo gradiente no título h1 usando as duas cores vermelhas neste layout”.

Habilite o Divi Builder em qualquer página para experimentar você mesmo. Em seguida, selecione um módulo de texto com um título, navegue até a guia Avançado > CSS personalizado e clique no botão AI. Depois disso, digite seu prompt na nova caixa de diálogo e observe o Divi AI começar a funcionar.

Ativar cache de fontes do Google

Por fim, para garantir que seu site esteja operando com o nível de desempenho ideal, você deve garantir que ativou o cache de fontes do Google nas opções de tema do Divi. Para fazer isso, navegue até Divi Theme Options > General > Performance . Em seguida, certifique-se de ativar o botão de alternância ao lado de “Melhorar o carregamento de fontes do Google”.

Melhores fontes Divi: resumo e conclusão

Divi vem carregado com mais de 800 fontes, configurações de design de texto fáceis de usar e ferramentas avançadas como Divi AI que abrem infinitas possibilidades de design. Neste post, cobrimos quinze das melhores fontes disponíveis no Divi e algumas menções honrosas, todas que valem a pena considerar em seu próximo projeto.

Você também pode querer ver o que mais é possível com Divi e designs baseados em texto. Estes tutoriais são um ótimo lugar para começar:

• Como criar designs de texto curvo em Divi
• Como criar designs de texto impressionantes usando divisores de seção em Divi
• Como animar letras para designs de texto exclusivos no Divi
• Como usar o texto como um elemento de design abstrato no Divi
• O guia completo para criação de tipografia fluida em Divi (6 métodos)

Você pode ir ainda mais longe com extensões baseadas em texto do Divi Marketplace.

Imagem em destaque via Vladimir Ivankin / shutterstock.com