Gerenciando fontes e tamanhos de fontes com divi 5

Fontes e tipografia definem o tom do seu site. Acertar pode ajudar sua marca e melhorar a legibilidade. O Divi 5 torna o trabalho com fontes rápidas e fáceis. Com os novos recursos da Divi, como variáveis ​​de design e as predefinições do grupo de opções, a configuração de fontes se torna fácil.

Este post ensina como gerenciar fontes e tamanhos de fontes no Divi 5, criando tipografia responsiva que escala lindamente entre os dispositivos.

O Divi 5 está pronto para novas construções de sites, mas estamos dando os retoques finais no sistema de compatibilidade com versões anteriores. Enquanto isso, adie os sites de atualização criados no D4. Avisaremos você quando essa mudança acontecer.

Considerações ao pensar em fontes para um novo site

Ao iniciar um novo site, as opções de fonte moldam a primeira impressão do usuário. Considere esses pontos para garantir que sua tipografia suporta seu conteúdo:

• Legabilidade : Escolha fontes claras, especialmente para texto corporal.
• Consistência : limite suas fontes - dois ou três funcionam melhor, com pelo menos um para títulos e outro para o texto do corpo.
• Responsabilidade : Verifique se as fontes se adaptam a diferentes tamanhos de tela (idealmente de 320px a 1440px).
• Compatibilidade : opte por fontes populares ou seguras da Web para evitar problemas de exibição.

Como gerenciar fontes e tamanhos de fontes no divi 5

Vamos usar um layout pré -fabricado da Biblioteca da Divi. Escolheremos o layout da página de destino do pacote “Business CV” e reformular a tipografia usando os novos recursos do Divi 5. Se você possui um site Divi 5 existente, mas deseja melhorar sua tipografia, poderá seguir essas mesmas etapas sem usar esse layout.

Etapa 1: Escolha de combinações de fontes

Bons combinações de fontes misturam estilo e legibilidade. As fontes do Google também são uma aposta segura, pois são incorporadas ao Divi e fáceis de usar.

Nos exemplos abaixo, seguiremos o uso de poppins do pacote de layout para os títulos e o texto do corpo. Você pode tentar emparelhar Lora e Roboto também.

Etapa 2: Configurando fontes para cabeçalho e corpo primário

Agora que você escolheu fontes, podemos adicioná -las ao site usando o Divi. No editor visual, abra o gerenciador de variáveis ​​no canto superior esquerdo. As variáveis ​​de design da Divi permitem controlar globalmente fontes em seu site.

Existem duas variáveis ​​de fonte padrão para o seu cabeçalho principal e fontes corporais. Vá para a seção de fontes e defina " Poppins " como a fonte do cabeçalho e " Roboto " como a fonte do corpo.

Defina suas fontes para qualquer que corresponda ao seu design e requisitos de marca

Neste ponto, também pode ser uma boa idéia garantir que as cores da sua marca sejam definidas como variáveis ​​de design, especialmente se você planeja usar algumas dessas cores no texto.

Certifique -se de salvar suas variáveis ​​quando tocá -las

Etapa 3: Criando tamanhos de fonte

Agora para a parte mais envolvida. É melhor pensar em como fazer sua tipografia ficar bem em cada tamanho de dispositivo. Com o Divi 5, você tem duas opções. A primeira e preferida opção é usar o Clamp (), e a segunda é definir a fonte várias vezes em vários pontos de interrupção.

Como você constrói seu tamanho de fonte para cada nível de cabeçalho, texto corporal e outras situações de texto depende inteiramente de você.

Typeogphy de fluido com grampo ()

CLAMP () permite definir um valor mínimo, um valor preferido e um valor máximo. Em outro post, aprofundamos o CLAMP () e fornecemos uma maneira fácil de descobrir esses valores. Mas aqui está um exemplo:

Esse layout possui um tamanho H1 padrão e um tamanho H1 único (e maior) para o nome da pessoa na primeira seção. Carregamos o mesmo princípio no gráfico de dimensionamento acima e adicionamos uma variação menor da fonte corporal.

Você pode testar seu dimensionamento de fontes em um documento HTML simples para ver as coisas isoladamente (isso também pode ser feito dentro do Divi). Aqui está a aparência da fonte acima da fonte com o emparelhamento de fontes.

Depois de se sentir confortável com os tamanhos das fontes, você pode adicioná -las como variáveis ​​de design. Dê a cada um nome discernível e cole o valor à direita.

Unidades fixas com pontos de interrupção

CLAMP () é a opção mais versátil para o dimensionamento de fontes, mas muitos usuários ainda usam valores fixos como pixels ou REM. Você pode usá -los juntamente com os pontos de interrupção personalizáveis ​​da Divi para ampliar sua fonte para cima e para baixo, conforme necessário.

Como seu número de valores para um efeito semelhante triplica ao usá -lo dessa maneira (em vez de 10 valores de clamp () acima, esses serão 30 valores individuais). Não é necessariamente recomendado preencher o gerente variável com esses valores, mas você pode se quiser,

Você pode construir sua estrutura de dimensionamento para cada ponto de interrupção e levá -lo para a próxima etapa. Em vez de colocá -los como variáveis ​​de design, você pode aplicá -las diretamente às predefinições de grupo e elementos de opções.

Etapa 5: Adicionando tamanhos de fontes do Variable Manager a Presefet

Com o seu número variável definido (ou pelo menos formulado), é hora de aplicá -las às predefinições. Um dos melhores casos de uso para predefinições de grupo de opções é a tipografia. Você pode criar sete (7) predefinições do grupo de opções de título/título que você pode usar para qualquer módulo que use os módulos de título/título (como título, sinopse, acordeão e módulos de pessoa, por exemplo).

O mesmo vale para o grupo de opções de texto. Eu posso definir duas (2) predefinições (uma para o meu normal e outra para o meu pequeno texto do corpo), e qualquer módulo que use o grupo de opções de texto pode usar esses estilos. Para estilos de cabeçalho e texto, isso é muito mais eficiente do que aplicar esses estilos como predefinições de elementos a todos os vários módulos que você pode usar em todo o seu site.

Atribuindo valores fixos a pontos de interrupção

O vídeo abaixo mostra as etapas básicas se você optar pelos valores fixos em vários pontos de interrupção. Clique em um módulo de texto, vá para a guia Design , passe o mouse sobre o grupo de opções de texto, clique no ícone OG , crie uma nova predefinição e aplique seus estilos a cada ponto de interrupção. Role até o fundo da barra lateral direita e salve sua predefinição ( muito importante ). Repita isso para tantas variações de texto quanto você criou (como opções pequenas, regulares e grandes).

Atribua a predefinição do OG que você espera mais como sua predefinição padrão para esse grupo de opções. Se você vir uma estrela ao lado, esse é o seu padrão atual (isso será aplicado em todo o site, assumindo que nenhum outro estilos de módulo ou predefinições de elementos sejam aplicadas por toda parte).

Atribuindo funções Clamp () (mais fácil)

O processo é semelhante ao usar a variável de design com a função Clamp (), mas muito mais fácil. No exemplo de vídeo abaixo, definimos dois tamanhos de cabeçalho no nível do grupo de opções. A única diferença acima é que não estamos colando os valores, mas usando as variáveis ​​que configuramos anteriormente. Ao configurar suas predefinições OG, verifique se as fontes padrão são escolhidas e defina as cores como você deseja. Algumas pessoas gostam de definir cores no nível do módulo, mas depende de você.

Você definirá cada nível de título H1-H6 como uma nova predefinição de grupo de opções personalizadas .

Aplique essas predefinições aos títulos do seu layout usando as predefinições do grupo de opções que você criou. A beleza das predefinições do grupo de opções é que eles trabalham nos módulos nesse grupo de opções, como os módulos de texto, sinopse e cabeçalho.

Melhores práticas para fontes no divi 5

Para maximizar sua tipografia, lembre -se das dicas:

• Sempre defina variáveis ​​globais de fonte mais cedo.
• Use espaçamento e tamanhos consistentes (sim, você pode definir o espaçamento das letras e a altura da linha como variáveis ​​de design também).
• Visualize regularmente as visualizações responsivas entre tamanhos de tela.
• Evite muitas fontes ou pesos de fonte.

Tipografia no Divi 5 é uma lufada de ar fresco

Agora você possui um sistema de tipografia completo, graças aos recursos mais recentes da Divi.

Fontes vivem como variáveis ​​de design. O mesmo com os tamanhos das fontes quando você usa Clamp (). Ou se você deseja exercer todos os sete desses pontos de interrupção personalizáveis, também pode seguir esse caminho.

Predefinições de grupo de opções aplicam essas opções sem esforço em todo o site. Tamanhos de fonte de ajuste em uma construção é mais fácil, pois são definidos como variáveis ​​de design. Não importa o quê, seus designs permanecerão nítidos, e seu tempo de construção diminuirá.

O Divi 5 lançou muitos novos recursos que atualizam seu sistema de design. Comece a criar novos sites no Divi 5 hoje para aproveitar todos os recursos mais recentes. Recomendamos esperar um pouco mais para migrar sites existentes para o Divi 5.