CSS Tamanho da fonte: Pixels vs Em vs Rem vs Percent vs Viewport Units

Much tem sido debatido sobre pixels vs em vs percent vs rem e qual a propriedade da fonte a usar e quando. Apesar de todos os mais de 100 artigos online, este tópico pode ser muito confuso dado como a utilização destas propriedades de fonte difere com base nas necessidades dos nossos projectos. Por exemplo, algumas pessoas sugerem não usar valores fixos de pixels no nível base (html e elementos do corpo), pois o usuário não terá a oportunidade de redefinir o tamanho da fonte para suas especificações. Mas, para pessoas como eu que dependem do bootstrap, isto não é aconselhável. Nós acabamos tendo um valor base fixo em pixels e temos que criar as propriedades da fonte de todo o nosso projeto em relação aos valores dos pixels base.

Este artigo explica a diferença entre estas propriedades da fonte e a melhor maneira de usá-las. É claro que não há uma maneira correta de fazer isso e uma grande parte dos tamanhos das fontes a serem usadas e como serão em grande parte determinísticas com base em nosso entendimento dessas unidades de tamanho de fonte e do projeto em questão.

Pixels: Antes do advento do design responsivo, o pixel era amplamente usado como O tamanho da fonte para tudo, desde tipografia até largura, estofamento e altura. Entretanto, os pixels são unidades de tamanho fixo e não mudam com base no tamanho do viewport ou são escaláveis. Se você quiser construir um site que responda usando pixels, pode ficar muito difícil acompanhar todos os valores baseados em pixels ao longo da folha de estilo CSS, incluindo os valores dentro das consultas de mídia. Então, que propriedade de fonte podemos usar que nos permitirá fazer alterações mínimas em nossa folha de estilos CSS, mas ainda assim ser escalável? É aí que as unidades em, rem, percent e viewport entram na imagem.

Em:Em é uma unidade flexível e escalável que é convertida pelo navegador em valores de pixel. Se o tamanho padrão da fonte em cromo é 16 px, 1 em = 16 pixels. Um grande equívoco sobre em é que ele é relativo ao tamanho da fonte do elemento pai. Conforme a especificação W3, em é relativo ao tamanho da fonte do elemento em que são usados. Este artigo aqui fez um trabalho maravilhoso explicando o conceito de em de uma maneira clara e detalhada. Se você realmente quer aprender como o em funciona, não pule o artigo acima mencionado. Ems são comumente usados para tipografia como cabeçalhos, textos, parágrafos e os elementos associados à tipografia, como margens, acolchoamento, etc. Se você definir o tamanho da fonte da sua base html e elementos de corpo em pixels e as propriedades do seu elemento de tipografia são definidas usando ems, para um design responsivo tudo que você precisa fazer é alterar o tamanho padrão da fonte no nível base, como

@media (max-width: 400px) {
html, body { font-size: 15px; }
}

e todos os valores em serão automaticamente recalculados para o nível base.

No entanto, ems tem uma grande ressalva, Herança! Por exemplo, um <div> com um tamanho de fonte de 16px contendo um <p> com um tamanho de fonte de 2em traduz para 32 px para o elemento <p>. Agora adicione um <div> dentro do elemento <p> com um tamanho de fonte de 0,5em também, o resultado do mergulho será 16px, metade de 32 px, e não 8px. É aqui que os rems entram na imagem.

Rem: Rem é relativo ao tamanho da fonte do elemento raiz (elemento html). Se o tamanho da fonte do elemento html é 16 px, então 1rem = 16 px. Rem SEMPRE será relativo ao elemento raiz, independentemente de como os elementos estão aninhados. No entanto, usando apenas rems e nenhum ems pode ter sua própria parcela de problemas, pois a tipografia pode se tornar muito grande ou muito pequena e isso pode levar a problemas de escala. Este artigo explica uma ótima maneira de resolver este problema.

Percentes: O valor percentual é sempre relativo a outro valor, seja o valor do elemento pai ou de outra propriedade do próprio elemento. As porcentagens são amplamente utilizadas no design responsivo. Um grande exemplo seria o framework Bootstrap do Twitter. O layout de 12 colunas do Bootstrap tem suas larguras definidas em porcentagens, então elas são sempre fluidas e dimensionadas em relação ao elemento pai
Percentagens são comumente usadas para largura e altura de containers, divs e para dimensionamento de imagens responsivas.

Visualizar unidades de relatório: As propriedades de largura e altura da viewport são relativas à largura/altura do tamanho atual da viewport.

1vw = 1% da largura da viewport
1vh = 1% da altura da viewport

Viewport aqui significa o tamanho da janela do navegador. Se você quiser dimensionar seu elemento com base na largura da viewport e não no elemento pai/root, então unidades viewport é a unidade de tamanho de fonte que você precisa usar. unidades vw/vh funcionam muito bem com tipografia e são comumente usadas para o mesmo.
Aqui está um ótimo artigo que explica como usar esta propriedade.

Verdito Final: Como eu uso bootstrap frequentemente, meu tamanho base padrão é em pixels. Eu uso percentagem para definir a largura e altura das imagens, containers e divs, ems e rems para tipografia e elementos relacionados à tipografia como margem, acolchoamento, etc. Atualmente estou jogando com unidades de viewport para tipografia responsiva e a acho fantástica. Experimenta muito com estas propriedades de fontes e em breve cairás num estilo feito à tua medida.