Tipografia Fluida

Quando o termo responsividade entrou pela primeira vez no vocabulário dos profissionais de marketing e designers web, usávamos para descrever o futuro do design de e-mails e sites. Os designers web, em particular, enfrentaram um grande desafio - criar sites que proporcionassem aos usuários de dispositivos móveis, tablets e desktops um site que não apenas se ajustasse às suas telas, mas também oferecesse uma experiência agradável.

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

Mesmo para aqueles que fizeram esforços 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 que o termo “todos os dispositivos” realmente significa.

Há alguns anos, quando alguém dizia ‘responsivo em todos os dispositivos’, provavelmente significava 3 dispositivos:

• Desktop
• Tablet
• Smartphone

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

Vamos focar em um elemento do design responsivo - o texto. À medida que você alterna 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 no seu tablet de 9 polegadas, o tamanho da fonte será reduzido.

Mas e quanto aos tablets de 7’’ ou 12’’? O tamanho da fonte permanecerá o mesmo? Aqui estamos nos aproximando do conceito de tipografia fluida.

Imagine a grande variedade de dispositivos e tamanhos de tela não apenas entre as diferentes marcas, mas também entre vários modelos da mesma marca de telefones, tablets ou laptops, sem esquecer as grandes telas de TV.

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

Na verdade, seria loucura se alguém sequer tentasse fazer isso. É por isso que algumas mentes brilhantes criaram a tipografia fluida, para que as fontes possam redimensionar por conta própria. Como? Definindo tamanhos de fonte relativos 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 aguente firme, tentaremos não te fazer dormir (uma piadinha com REM? Não. Ok, vamos continuar).

A maioria dos navegadores tem um valor padrão de tamanho de fonte de 16px para que possamos ler o texto facilmente. Então, usando REM, se você quiser ter uma fonte de 16px no seu site, você diz que o tamanho da sua fonte é 1rem. Você também pode usar isso para mudar o tamanho da fonte relativamente, por exemplo, 0.75rem (12px) ou um tamanho maior, como 1.25rem (20px), etc.

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

Unidades REM e EM são frequentemente usadas em tipografia dinâmica. Você pode criar sites responsivos com elas, 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 significa altura da janela de visualização e Vw largura da janela de visualização. Então, em vez de olhar para o tamanho da fonte raiz no navegador como você faria com unidades REM e EM, o tamanho ideal da fonte é calculado com base na altura e largura da tela em que você está exibindo seu site. Agora isso é um truque de mágica ao estilo IA de outro nível!  

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

Então, se você está prestes a criar um novo site, olhe mais a fundo no código e descubra como o tamanho da fonte é definido. Tipografia ajustável garantirá que seu site seja responsivo.

Mas, se você quer se preparar para o futuro, opte pelas unidades de tamanho de fonte Vh e Vw. Quando seu site usar a tipografia fluida, ele sempre parecerá organizado e será legível.

Este é um post de convidado por Jarinka Balcova, experiente profissional de marketing e entusiasta do WordPress na 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 principal nicho são Temas Multilíngues para WordPress, especializando-se também em Temas de Diretório & Listagens para WordPress e plugins avançados.