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:

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.

Ainda há problemas em alguns navegadores ao usar unidades de viewport e calc() juntos, então, por enquanto, usar media queries é provavelmente mais seguro.

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:

font-size / ( número de unidades de viewport / 100 )

Por exemplo:

24 / ( 3 / 100 ) = 800px

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.

Para mais informações sobre Sass, veja o livro “CSS Eficiente“.

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.