Tipografia responsiva

Introdução

Projetar sites e aplicações web que se adaptem a qualquer tamanho de tela é, nos dias atuais, uma premissa mandatória de um projeto web.

Ethan Marcotte, o pai do design responsivo, usou o termo "ingredientes técnicos" para designar as três tecnologias fundamentais para o desenvolvimento do design responsivo. São elas:

• Grid fluído
• Imagens e mídia flexíveis
• Media queries

O design responsivo nasceu de um artigo escrito por Ethan no site Alistapart em 25/05/2010. Àquela época não se falava de tipografia responsiva.

Com a introdução nas especificações do W3C e consequente adoção pelos navegadores das unidades de medidas CSS baseadas nas dimensões da viewport e da função CSS calc() foram criadas as funcionalidades CSS que possibilitaram projetar-se tipografia responsiva de uma maneira muito fácil.

O próprio Ethan ao promover o redesign do seu site em 2016 usou aquelas funcionalidades para criar tipografia responsiva.

Funcionalidades CSS para tipografia responsiva

Se você conhece e sabe usar as unidades de medidas baseadas nas dimensões da viewport: vw, vh, vmin e vmax, bem como a função calc(), pule para o título seguinte, caso contrário siga lendo.

Unidades de medida relativas a viewport

As unidades de medidas CSS baseadas nas dimensões da viewport são tomadas como uma porcentagem da largura ou da altura da viewport. Em consequência, tais unidades de medidas variam de acordo com o tamanho da viewport (vale dizer, tamanho da tela do usuário).

A sintaxe e valores destas unidades de medida são conforme mostradas a seguir:

• 1vw - 1% da largura da viewport
• 1vh - 1% da altura da viewport
• 1vmin - 1% da menor dimensão da viewport
• 1vmax - 1% da maior dimensão da viewport

Assim, um elemento qualquer da marcação HTML cuja largura tenha sido definida com a declaração:

seletor { width: 50vw; }

terá sua largura igual à metade da largura da viewport. Para efeito de cálculo das dimensões, eventuais barras de rolagem não são consideradas.

Convém notar que esses valores de medida são válidos para qualquer propriedade CSS que admita unidade de medida CSS, tais como as propriedades margin, padding, border e font-size entre outras.

Para detalhes sobre a função calc() consulte este tutorial (link abre em nova janela).

Como funciona a tipografia responsiva?

Vamos criar um caso prático para explicar.

Considere um site responsivo com as seguintes características:

1. largura máxima das páginas: 1200px,
2. breakpoint para fontes: 500px,
3. tamanhos das fontes:
   • viewport < 500px — font-size: 16px;
   • viewport > 500px — font-size: 24px;

• Para viewport maior que 500px tamanho da fonte deverá variar de 16px até 24px ou seja uma variação de 8px.
• A taxa de variação do tamanho da fonte é de 8/1200 = 0,66667%
• Assim, para viewport maior que 500px devemos declarar um tamanho de fonte igual a: calc(16px + 0.6667vw)

E a fórmula para tipografia responsiva:

font-size = calc( [font-size-min] + ( ([font-size-max] - [font-size-min]) / [max-width-pag] ) * 100vw

Criei uma Pen mostrando este caso prático. Visite, faça suas alterações e observe

See the Pen Tipografia responsiva by Maujor (@Maujor) on CodePen.

Compartilhe essa matéria com seus amigos