Equação do font-size
Dúvida terrível! Como usar font-size? Pixels(px) ou viewport width (vw)?
Pode ser os dois?
Estávamos discutindo o redesign do Descomplica e chegamos nessa clássica discussão, mas dessa vez o resultado foi um ponto de vista novo.
Tradicionalmente usamos pixels e ajustamos os tamanhos com media query, algo assim:
Chegando a um gráfico assim:
Mas e se utilizarmos os novos recursos de viewport unit (unidades vw e vh) será que conseguimos ter uma medida que consegue redimensionar a tipografia em escala de acordo com o tamanho do navegador?
Em uma primeira sugestão, utilizamos os valores dos breakpoints e os tamanhos sugeridos pelo designer, então chegamos a isso:
Percebemos que, embora os valores aumentem de forma gradual, eles ultrapassam os limites desejados e nos obrigara a criar mais breakpoints para resolver este problema.
Como segunda tentativa optamos por apostar na maior largura de viewport antes de haver um breakpoint, assim nos certificaremos que nenhum valor irá ultrapassar o desejado.
Agora nos deparamos com outro problema, as medidas ficam muito pequenas e ultrapassam os menores limites, resultando em font-size com apenas 6.6px!
Poderíamos testar valores medianos para tentar achar um equilíbrio, porém foi hora de pensar pelo outro lado. Geramos um gráfico que atenda as nossas expectativas e, a partir dele, investigamos como resolver essa questão. Então desenhamos assim:
E notamos que na verdade são utilizadas 3 retas, uma para cada intervalo de breakpoint. Lembrando da escola e da querida (sqn) equação da reta, que é:
y = a*x + b
Agora desmembrando os elementos para a realidade do css, podemos pensar assim:
font-size = a*x (largura do navegador variável) + b (constante em pixels)
E para nossa felicidade, os navegadores mais modernos já aceitam o seguinte estilo de valor como font-size:
font-size: calc(2vw + 10px);
Opa! Hora de juntar os pontos e fazer uma pequena matemática para resolver o nosso problema. Se utilizarmos os seguintes valores:
Vamos ter o seguinte gráfico:
Problema resolvido, css de primeira linha!
Quem ficou interessado em saber como chegamos nesses valores, pode conferir esse script abaixo ou usar nossa versão beta de calculadora http://descomplica.github.io/css-size-calculator/
UPDATE
Uma function deixa esses números mais humanos
