Qual unidade de font-size usar: px, rem, em, vw?

Olá! Sem muita enrolação e direto ao foco: conhecimento!
Qual unidade de font-size usar: px, rem, em, v
Quando estamos criando nossos sites, uma das coisas mais importantes é o tamanho da fonte dos textos.

E hoje, eu vim aqui pra descomplicar essas unidades que muitas vezes vamos testando, testando, testando, inspecionar elemento, até dar certo e ficar de um tamanho agradável sem entender de fato as implicações da unidade que escolhemos.

Sem mais delongas, vamos começar a aprender!

A unidade Pixel (px)

A unidade Pixel (px) aquela que nós instintivamente usamos, mas para font-size ela não é a melhor escolha devido a acessibilidade.

Os Pixels são unidades absolutas, o que significa que 16px serão sempre 16px, independente da tela que o usuário estiver usando.

Isto nos dá um controle mais preciso, mas nós também devemos dar ao usuário a habilidade de aumentar o tamanho da fonte do texto. E se ele não tiver uma visão muito boa? Já pensou?

Usando unidades absolutas, como os pixels, previnimos que o font-size mude se um zoom ou caso o tamanho de fonte padrão do navegador seja mudado.

A unidade Em

A unidade Em é uma unidade relativa, o que significa que o seu tamanho final depende de outros fatores. O tamanho da fonte no caso do Em, é baseado no elemento Pai ou em seu “antecedente” direto que tenha um font-size definido explicitamente.

Por exemplo, um elemento definido com 2em, com um Pai definido em 16px, terá como resultado um font-size de 2 * 16px, ou seja, 32px.

Essa dependência pode ser incrível, mas também pode trazer complicações se você tiver múltiplas camadas, isto é, múltiplos elementos Pai ou Antecedentes com um font-size definidos.

A unidade Rem (Root Em)

A unidade Rem é similar à Em no fato de ambas serem relativas, mas ao invés da Rem se basear em seus elementos Pais, elas se baseiam no elemento Raiz: o elemento HTML.

Normalmente isso funciona da seguinte forma: você define um font-size: 100% para o seu elemento HTML (que corresponde a 16px, já definido na maioria dos navegadores).
Então, “setando” um elemento para ter 1.5rem de font-size resultará em 1.5*16px = 24px.

A Rem é a minha unidade preferida de fonte, porque ela é amigavel quando se trata da acessibilidade do seu site, embora você tenha que usar um pouquinho de matemática para calcular e chegar ao tamanho de fonte desejado.

A unidade Viewport Width (vw)

A unidade Viewport Width (e Height, representada por vh) é baseada na largura e altura do dispositivo do usuário. Uma unidade de Viewport é igual a 1% do total da janela de exibição do dispositivo. Então, 1vw de um telefone com 375px de tela será o mesmo que 3.75px, e 10.24px em um computador em tela com 1024px de largura.

A unidade de Viewport está intimamente ligada a responsividade, mas ela é uma unidade absoluta, o que significa que o seu tamanho não depende de um elemento Pai ou qualquer ancestral.

Além disso, elas não são amigáveis a acessibilidade, e seu uso não é recomendado diretamente para font-size.

De qualquer forma, você pode usá-la em uma função de calc() em conjunto com uma unidade relativa, como Rem. Isso irá fazer com que o font-size responda parcialmente a ações que ajudam na acessibilidade, como o zoom.

Bom, por hoje é tudo! Espero ter colaborado com você na sua jornada. Se você notou a falta de algo, deixe seu comentário abaixo, quero aprender com você também ?