Unidades de viewport: controle de tipografia em web design responsivo

Neste artigo, saiba como ter controle absoluto de tipografia em web design responsivo através de unidades de viewport.

É possível ter um controle preciso sobre a tipografia em web design responsivo. Usando calc() e unidades de viewport, é possível criar tipos fluidos que se adaptam perfeitamente entre valores específicos de pixels dentro de um intervalo de exibição específico. Apesar de serem tecnologias relativamente recentes, é curioso não se ver unidades de viewport mais amplamente usadas em projetos com tipografia responsiva — para mais informações, leia o artigo sobre unidades de CSS moderno.

Contribui para este “espanto” unidades de viewport (viewport units) existirem desde 2012 e serem razoavelmente bem suportadas. Na verdade — e surpreendentemente –, até o Internet Explorer deu um passo rumo a este suporte bem cedo e suporta unidades de viewport desde o IE9!

Elas também são muito fáceis de entender. Uma unidade de exibição é simplesmente 1% da janela de exibição e existem 4 tipos:

• vw: largura da viewport
• vh: altura da viewport
• vmin: altura ou largura, o que for menor
• vmax: altura ou largura, o que for maior

Então, a razão pela qual unidades de viewport não são utilizadas mais amplamente, provavelmente não se dá pela falta de suporte dos navegadores ou entendimento dos desenvolvedores; um palpite seria que isso está mais relacionado à falta de controle preciso que designers têm em relação ao font-size em projetos web.

Designers que amam tipografia — e aqueles que dão um passo além, planejando profissionalmente nos projetos em que participam — geralmente gostam de ter o planejamento e controle preciso sobre line-height, font-size, letter-spacing e outras propriedades de tipografia que a maioria dos reles mortais sequer sabemos que existem.

Este “desejo” de controle preciso é a razão pela qual alguns designers ainda preferem declarar essas propriedades usando pixels. Mas realmente não importa se eles usam ems, rems ou percentagens; a verdade é que todos são apenas abstrações de um tamanho de fonte base que, normalmente, é 16px. Então, não é preciso realmente “desistir” de ter o controle completo sobre a tipografia — não é difícil descobrir o porquê de um tamanho de fonte de um elemento quando se conhece seu tamanho-base.

Mas unidades de viewport são diferentes: elas representam uma mudança fundamental na abordagem de tipografia em web design responsivo. Ao contrário de todas as outras unidades, as viewport units não são relativas ao tamanho da fonte-base; ao invés disso, como sugere o próprio nome, são relativas à viewport! E há vantagens em usar unidades de viewport, como o fato de um font-size declarado com viewport units ser fluido, o que significa que ele será ampliado sem problemas — esta é claramente uma estratégia melhor do que as técnicas de tipografia que requerem múltiplas media queries.

Tipografia responsiva com unidades de viewport é realmente fácil de implementar: é simplesmente declarar o tamanho-base de font-size usando unidades vw. Contanto que você não esteja usando pixels em outras regras no CSS, outras unidades são relativas ao tamanho-base de font-size — que agora é uma unidade de viewport — para que todos eles escalem em conformidade.

Como limitar escalonamento de fontes com calc()

Embora o uso de unidades de viewport como tamanho-base de fonte seja uma técnicas bastante útil e eficiente, ainda existem alguns casos extremos em que alguns problemas podem acontecer. Por exemplo, o tamanho da fonte numa viewport muito pequena é problemático. Felizmente, existem algumas boas técnicas para evitar isso.

Se for preciso definir um font-size mínimo exato em pixels, é possível usar calc(), como em:

Neste exemplo, o tamanho padrão da fonte é especificado para 16px + 3vw.

Como limitar escalonamento de fontes com media queries

É possível impedir que o texto escale abaixo de um certo limite específico simplesmente usando uma media query e aplicando unidades de viewport somente acima de um determinado ponto. Por exemplo:

Também é possível parar o escalonamento acima de determinado font-size específico, mas, para isso, primeiro é preciso descobrir qual será o tamanho da viewport será no font-size que se quer deixar de escalar. Para isso, um pouco de matemática é necessário:

Por exemplo:

Com este resultado, resta apenas definir outra media query para mudar o font-size raiz de volta para uma unidade fixa.

Os cálculos não são difíceis, mas aqui está uma tabela simples para ajudar a visualizar a mudança no font-size em diferentes resoluções:

Unidades de viewport:	1vw	2vw	3vw	4vw	5vw
Tamanho da viewport	font-size em pixels
400px	4px	8px	12px	16px	20px
500px	5px	10px	15px	20px	25px
600px	6px	12px	18px	24px	30px
700px	7px	14px	21px	28px	35px
800px	8px	16px	24px	32px	40px
900px	9px	18px	27px	36px	45px
1000px	10px	20px	30px	40px	50px

Olhando a tabela, é possível ver que existem limitações. Tem-se pouco controle sobre o “ritmo” em que as unidades de viewport muda e, de certa forma, há limitação quanto às opções disponíveis na tabela.

Controle preciso com calc()

Trent Walton, em seu artigo de 2012, “Fluid Type“, disse:

Tem sido difícil deixar de definir um font-size estático para um site e considerar as coisas como prontas. Estou percebendo que a previsibilidade e controle que tivemos ao longo do tipo na web está se tornando uma coisa do passado.

Mas, talvez, nem toda a previsibilidade e controle estejam perdidos.

Imagine que, como um nerd da tipografia com um olho de precisão absoluta, você queira o font-size de uma viewport de largura de 600px seja 12px. Olhando para a tabela, estabelecendo um font-size de 2vw, é possível conseguir isso. Mas também é preciso que o tamanho da fonte em 800px seja 32px. Parece que não é possível conseguir isso sem alterar a partir 2vw para 4vw, e isso significa um “ponto de quebra” que não permite que o escalonamento de fonte seja fluido. Esta é uma limitação bastante significativa. Mas existe uma solução para isso!

Não é exatamente uma solução bonita e elegante, mas funciona — pelo menos em navegadores modernos. Como afirmado anteriormente, existe a possibilidade de acontecer erros ao usar calc() junto com unidades de viewport, de modo que isso pode ser complicado em alguns navegadores mais antigos. — atualmente, isso não é realmente uma preocupação, bastando definir tamanhos de fonte padrão sensíveis antes de declarar uma expressão para tipos fluidos com calc().

Parece que, usando calc() e vw, é possível ter tipografia responsiva que se adapta perfeitamente entre os valores de pixels específicos dentro de um intervalo de exibição específico. Isto significa que se pode obter escalonamento fluido perfeito entre quaisquer 2 tamanhos de fontes em qualquer intervalo de exibição. A fonte vai começar a escalar e parar de escalar exatamente onde for preciso!

Veja a demo no CodePen. Na demo, usa-se SASS para que seja fácil alterar os tamanhos mínimo e máximo de font-size e media queries.

Mas a parte importante é essa:

No trecho de código, 12px é o font-size mínimo e 24px o máximo. 400px é o início do intervalo de viewport e 800px é onde ele deve parar de escalar. A inclusão ou ausência das unidades após cada valor é importante. Simplificando, é uma função que recebe um valor dentro de um intervalo e trabalha o que o novo valor seria se aplicado um intervalo diferente. É possível tomar a largura atual da viewport (100vw) como entrada para a “função”.

Por exemplo, se se tivesse um intervalo de largura de viewport de 500px a 1000px e, imaginando que o tamanho atual é 750px, aplica-se isso a um intervalo de font-size. Se a faixa de font-size foi 20px a 30px, é porque a entrada de 750px fica bem no meio de 500px e 1000px e a nova font-size também será bem no meio, 25px. Simples, certo?

Conclusão sobre controle de tipografia em web design responsivo com unidades de viewport

Como visto, atualmente é possível obter um controle bem preciso sobre o tamanho de fontes em web design responsivo usando unidades de viewport — embora, curiosamente, estas ainda não estejam sendo amplamente utilizadas em projetos web desta natureza.

É possível fazer outras coisas interessantes, como inverter o intervalo, por exemplo, para ser possível que se tenha tamanhos de fonte que ficam menores à medida que a viewport fica maior. Talvez haja um projeto por aí em que isso seja útil. Por que não?

PS: Cada uma dos técnicas acima usou pixels para controle “preciso”; no entanto, isso pode substituir as preferências das pessoas de tamanho da fonte padrão. Todas as técnicas mostradas também funcionam com unidades “rem” ou qualquer outro tipo de unidade.