Medidas de texto com font-size do CSS - parte 2

Fala aí, honorável visitante! Turu bom? Essa é a continuação do post sobre o atributo font-size do CSS. Caso você ainda não tenha lido a primeira parte, recomendo clicar aqui.

Bem, no texto anterior eu comentei sobre as unidades de medida de fontes em pixel, porcentagem, "em" e "rem". Agora nessa continuação eu pretendo abordar medidas voltadas para impressão de páginas em papel, tais como centímetro, milímetro e points. Além disso, também falaremos de view width e view height. Então bora!

• Centímetros (cm) e Milímetro (mm)

Acho que não preciso explicar essas unidades de medida, né? Apenas saiba que você pode definir o tamanho das suas fontes como centímetro ou milímetro, dependendo da sua necessidade. Sendo assim, 1cm equivale a 37.8px e 1mm representa 3.78px. Contudo, essas são medidas usadas apenas em contextos em que você precisa imprimir a página.

• Points (pt)

A próxima medida, que também serve bem no contexto de impressão, é o points. Desse modo, podemos dizer que 1pt equivale a aproximadamente 1.3333px. Na real, essa unidade não é muito usada por aí, sabe? Ela é uma das medidas mais "misteriosas" (tal como o "pc", "ex", "ch" e "in"), que você não vai encontrar tão fácil em projetos.

• View Width (vw)

Agora temos um tipo de medida bastante útil para construir páginas responsivas, que se adaptam a telas diferentes. View Width é uma unidade que representa 1% da largura da viewport, ou seja, 1vw equivale a 1% em largura da área visível da página. Sendo assim, temos a seguinte fórmula matemática:

  Fonte ≅ X * Viewport / 100  

Sendo que:

• Fonte → é o tamanho da fonte em pixel;
• X → é o view width que definimos no font-size;
• Viewport → é a largura da área visível da tela em pixel, que varia dependendo do dispositivo usado.

Com isso, e para ficar mais claro, considere o seguinte código:

<p style="font-size: 1.5vw;">
   Lorem ipsum dolor sit amet,
   consectetur adipiscing elit,
   sed do eiusmod tempor incididunt
   ut labore et dolore magna aliqua.
</p>

Caso a gente abra esse HTML em um computador cuja tela seja de 1920px em largura, o tamanho da nossa fonte seria:

Fonte ≅ 1.5 * 1920 / 100

  Fonte ≅ 28.8px  

Mas calma! Você não precisa se preocupar em calcular nada. Essa matemática é feita pelo próprio navegador, e eu só quis mostrar no detalhe como as coisas funcionam. Basta entender que quanto menor a tela do dispositivo for, menor a fonte será, e vice-versa.

• View Height (vh)

A medida view height segue a mesma lógica da view width, com a diferença que utilizaremos a altura da página no cálculo em vez da largura. A fórmula é exatamente a mesma que apresentei na seção anterior, porém a viewport representa a altura do dispositivo em pixel.

Observe o exemplo abaixo, que considera o font-size de 1.5vh em uma tela com altura de viewport igual a 1080px:

Fonte ≅ 1.5 * 1080 / 100

  Fonte ≅ 16.2px  

Sendo assim, note que 1vh equivale a 1% da altura do da área visível da página. Dessa forma, podemos dizer que em uma tela Full HD (1920x1080), se considerarmos o font-size de 1.5vh, a fonte terá aproximadamente 16.2px. Enquanto que se definirmos 1.5vw, a fonte passará a ser aproximadamente 28.8px.

Concluindo esse rolê!

As unidades de medida que apresentei nesses dois posts são as mais usadas, mas ainda existem outras medidas que nunca vi ninguém usando. Creio que o importante aqui é você entender que existem duas possibilidades: as fontes estáticas com valores fixos (px, cm, mm, pt) e as fontes dinâmicas que variam de tamanho (%, em, rem, vw, vh).

Cada um desses dois grandes grupos possui uma finalidade diferente, pense neles como ferramentas que podem ser usadas de acordo com o contexto e a necessidade do seu projeto, ou seja, não há forma melhor e forma pior de fazer as coisas. Espero que esse texto tenha ajudado! Bons estudos e até a próxima.