Tableless

Busca Menu

Fontes fluidas com jQuery

Seja o primeiro a comentar por

No desenvolvimento para web existem alguns problemas já conhecidos: suporte a múltiplos navegadores, múltiplas resoluções de tela, dispositivos diversos e etc. Neste cenário uma das formas mais eficazes (no meu ponto de vista 😉 ) é desenvolver layouts fluidos, com versões responsivas para tablet e mobile. Criar um site em medidas relativas (%) facilita muito a adaptação dos sites para múltiplos tamanhos de tela. É mais difícil de fazer, por que o site “flui” conforme o tamanho da janela muda e muito por isso o planejamento do design deve ser bem feito.

Mas embora você consiga controlar a largura, margem e padding dos elementos usando porcentagens ou qualquer outra unidade flexível, o tamanho das fontes continuam sendo um problema. As fontes não se adaptam em relação ao tamanho dos elementos ou ao tamanho da tela. Você precisa marcar breakpoints para que isso seja feito. As fontes são relativas ao elemento pai, e não ao tamanho do navegador/monitor.

Já que usuários de celular e tablets não irão navegar com as janelas dos seus navegadores em tamanho reduzido, as media queries do CSS são bastante eficientes para adaptar os layouts para esses aparelhos. Nos desktops já não acho tão eficiente, já que um usuário pode navegar com a janela em qualquer medida, tornando praticamente impossível criar break points para todos os tamanhos.

Tentarei mostrar como faço quando preciso que as fontes se adaptem proporcionalmente ao tamanho da janela do usuário.

Primeiro precisamos definir o tamanho da fonte no elemento body:

body{font-size: 10px;}

Utilizo sempre 10px pois fica fácil calcular as medidas em “em”. Há um artigo aqui mesmo no Tableless que fala sobre essa história de EM e PX.
Imaginando que temos um layout desenhado em 1920px e a fonte do menu está com 25px no Photoshop, basta declarar:

.menu{font-size:2.5em;}

todas as outras fontes do site devem também estar definidas em medida relativa e portanto, bastando alterar a medida da fonte no body para que todas as outras mudem na mesma proporção.

Vamos usar o jquery para torná-las fluidas:

$(document).ready(function{
	var tamanho_janela = $(document).width(),
	    calc_text = tamanho_janela * 0.0052;
	$('body').css('font-size', calc_text);
	
});

e

$(window).resize(function{
	var tamanho_janela = $(document).width(),
	    calc_text = tamanho_janela * 0.0052;
	$('body').css('font-size', calc_text);
	
}); 

No primeiro bloco calculamos o tamanho da fonte ao ser carregada a página. Pegamos o tamanho da janela e multiplicamos por 0.0052 que é o resultado da conta 10 / 1920 (tamanho da fonte de 10 pixels para uma tela de 1920px). Aplicamos o resultado dessa multiplicação na propriedade CSS font-size do elemento body. Como resultado teremos as fontes proporcionais a esse tamanho de tela.

O segundo bloco garante que essa proporção se manterá mesmo que a tela seja redimensionada sem que haja o recarregamento da página.

O método .resize do jquery pode causar alguns problemas de performance já que a ação é disparada sempre que o navegador for redimensionado, portanto para cada pixel diminuído ou aumentado do navegador ele executará o bloco de código.

Minimizando o problema:

A um tempo atrás li um tutorial que ajuda muito a reduzir este problema de performance do resize.
Deixarei aqui o link para que possam implementar :

http://gomakethings.com/javascript-resize-performance/

o tutorial está em inglês mas é bem tranquilo de entender!

Resolvendo o problema do tamanho mínimo para o texto:

Por estar calculando o tamanho do texto baseado na largura da janela, esse texto tende a diminuir até ficar invisível, já que não é possível definir um min-font-size no css. Não queremos que a fonte fique pequena demais ou que ela fique invisível, queremos que ele fique sempre com uma boa leitura, por isso é importante que em tablets e celulares(principalmente), essa proporção baseada no body não seja respeitada, ou que a medida proporcional aumente. Para isso basta utilizarmos as media queries para tornar as medidas estáticas(px), ou aumentar o tamanho relativo delas(o menu que antes tinha o font-size:2.5em agora passa a ter 5em, por exemplo).

É isso pessoal, espero ter ajudado os que não sabiam como fazer!

Abraços a todos!

Publicado no dia