Tipografia fluida

Quando o termo capacidade de resposta entrou pela primeira vez no vocabulário de profissionais de marketing e web designers, nós o usamos para descrever o futuro do design de e-mail e website. Os designers da Web, em particular, enfrentaram um grande desafio - criar sites que oferecessem aos usuários de dispositivos móveis, tablets e desktops um site que não apenas se ajustasse às telas, mas proporcionasse uma experiência agradável.

Responsividade não é uma tendência nova, mas é muito importante. A experiência do usuário é um fator primordial em como o Google classifica seu site e se ele aparecerá ou não nos resultados de pesquisa. É tão importante para o Google que eles fornecem um serviço de consultoria gratuito.

Mesmo para aqueles que se esforçaram para tornar seus sites responsivos, ainda há trabalho a ser feito para proporcionar uma melhor experiência ao visitante. Mas o que realmente mudou é a definição do significado real do termo “todos os dispositivos”.

Alguns anos atrás, quando alguém dizia 'responsivo em todos os dispositivos' provavelmente significava 3 dispositivos:

• Área de Trabalho
• Tablet
• Smartphone

Embora esses sejam os 3 tipos de dispositivos mais comumente descritos, devemos estar cientes de que os visitantes do nosso site podem estar visualizando nosso site em uma ampla variedade de tamanhos de tela, desde Apple Macs grandes até laptops leves com telas menores. A tecnologia continua avançando e devemos estar preparados para novos e empolgantes tipos de dispositivos, como tecnologias vestíveis e realidade virtual.

Vamos nos concentrar em um elemento do design responsivo - texto. Conforme você muda de um dispositivo para outro, o tamanho da fonte no site deve mudar. Mas, como você consegue isso? Simples: ao codificar o site, você define diferentes tamanhos de fonte em pixels (px) para diferentes tamanhos de tela.

Quando você abre o site em seu tablet de 9 polegadas, o tamanho da fonte salta para um tamanho menor.

Mas e os tablets de 7'' ou 12''? O tamanho da fonte permanecerá o mesmo? Aqui estamos abordando o conceito de tipografia fluida.

Imagine a grande variedade de aparelhos e tamanhos de tela não só entre as diversas marcas, mas também entre diversos modelos de uma mesma marca de celulares, tablets ou notebooks, sem esquecer das grandes telas de TV.

Você concorda comigo quando digo que definir o tamanho da fonte para cada um desses dispositivos seria impossível.

Na verdade, seria uma loucura se alguém tentasse fazer isso. É por isso que algumas mentes inteligentes criaram uma tipografia fluida, para que as fontes possam ser redimensionadas por conta própria. Como? Definindo o tamanho relativo da fonte com base no tamanho real da tela.

Em vez de definir o tamanho exato da fonte, você pode usar unidades REM, que são relativas ao tamanho da fonte do elemento raiz (parece complicado, mas vamos tentar não colocá-lo para dormir (trocadilho REM? Não. Ok vamos continuar).

A maioria dos navegadores tem o valor padrão de tamanho de fonte 16px para que possamos ler o texto facilmente. Portanto, usando REM, se você deseja ter uma fonte de 16px em seu site, diga que o tamanho da fonte é 1rem. Você também pode usar isso para alterar o tamanho da fonte relativamente, por exemplo, 0,75 rem (12px) ou tamanho maior ou 1,25 rem (20px) etc.

As unidades EM funcionam de forma semelhante, você define seu próprio tamanho de fonte base para todos os outros cálculos de tamanho de fonte.Você pode ler mais sobre as unidades EM aqui.

As unidades REM e EM são frequentemente usadas na tipografia de salto. Você pode criar sites legais e responsivos com eles, mas a transição de um tamanho de fonte menor para um maior (e vice-versa) não será tão suave quanto poderia ser com unidades ainda mais relativas, como Vh e Vw.

Vh representa a altura da janela de visualização e Vw a largura da janela de visualização. Portanto, em vez de observar o tamanho da fonte raiz no navegador como faria nas unidades REM e EM, o tamanho ideal da fonte é calculado com base na altura e na largura da tela em que você está exibindo seu site. Agora, este é um hocus pocus no estilo IA do próximo nível!

Para usar Vh e Vw, você só precisa definir o maior e o menor tamanho de fonte que deseja para garantir que a fonte seja fácil de ler em todos os casos e obtenha um site com uma tipografia verdadeiramente fluida. Ta-da! Felizes visitantes do site. Além disso, você parece um gênio de otimização de site à prova de futuro.

Portanto, se você está prestes a criar um novo site, analise mais a fundo o código e descubra como o tamanho da fonte é definido. A tipografia de salto garantirá que seu site seja responsivo.

Mas, se você quiser se preparar para o futuro, escolha as unidades de tamanho de fonte Vh e Vw. Quando seu site usa a tipografia fluida, ele sempre parecerá organizado e legível.

Esta é uma postagem de convidado de JarinkaBalcova, profissional de marketing experiente e entusiasta do WordPress no Ait-Themes.club . Ait Themes é uma empresa de desenvolvimento web com mais de 9 anos de experiência no mercado e 85 mil clientes satisfeitos em todo o mundo. O nicho principal são os temas WordPress multilíngues. Especializando-se também em diretórios e listas de temas WordPress e plugins avançados.