Unidades CSS — Um Guia Completo

Vejo com muita frequência o pessoal não saber quais unidades CSS usar e em quais situações. Esse é um assunto quase abstrato pois não é claro cada caso meticulosamente explicado de quando usar cada unidade.

Sou frontend a um tempo e ao longo dos anos construí um padrão que funciona pra mim e que aplico em todo projeto que trabalho hoje. Vale reforçar que essa é a minha visão sobre o assunto, mas não é a única, existem vários meios de fazer um bom site.
Aqui vou falar de quase todas as unidades, seus usos e peculiaridades.

Unidades abordadas

Vou usar o w3schools como referencia para as unidades, mas antes vamos separar as unidades em 2 categorias:
absolutas com cm, mm, in, px, pt e pc;
relativas com em, rem, ex, ch e %;

Absolutas

Unidades absolutas são independentes de qualquer outra coisa, além da definição da própria unidade. Valendo apenas lembrar que algumas unidades aqui podem variar dependendo da precisão do seu hardware.

Características

Prós:

• Criar elementos puramente visuais
• Criar experiencias personalizadas para mídias especificas

Contras:

• CSS não é escalável
• Responsividade mais verbosa
• Páginas não são dinâmicas, mas sim adaptativas

px

Com certeza a unidade mais utilizada na web, não que seja a melhor opção, mas é com certeza a mais fácil de se aplicar em telas no geral.

px é uma unidade péssima pra trabalhar com responsividade de containers, exigindo usar muito mais media-queries do que de fato seria necessário se usasse uma unidade mais adequada.

Até pode usar px se responsividade de containers não for algo necessário na sua aplicação, porém é muito raro criar algo específico por dispositivo, logo é bem pouco comum esse ser o caso.

Use px quando trabalhar com

• Detalhes visuais como border-radius, border, box-shadow e etc
• Tamanhos (width/height) de elementos puramente visuais não-relativos. Esse tipo de elemento segue o mesmo princípio dos detalhes visuais, eles dependem apenas de si mesmos e não variam em tamanho de acordo com nada, mudam pouco entre resoluções e são muito usados quando trabalhamos com layouts que possuem detalhes nas páginas apenas para finalidade de preenchimento, veja a baixo

Não use px quando trabalhar com

• media-query , é basicamente a pior unidade pra se usar, traduzi esse artigo sobre esse assunto
• Containers responsivos pois usar pixels nesses containeres acaba exigindo muito mais media-querydo que de fato você iria precisar. Isso também deixa mais difícil de dar manutenção pois as coisas não fluem, são todas estáticas, exigindo mudanças manuais em cada nível dos elementos. Usar px nesse caso também torna seu site adaptativo e não responsivo o que não é um grande problema, mas pela minha vivencia acabo não concordando com a abordagem.
• Qualquer propriedade que afete fonte como font-size, letter-spacing, line-height e etc por razões de acessibilidade e respeito com o usuário. Quando você usa fontes em px você acaba ignorando completamente as preferencias de tamanho de fonte do usuário e força ele a ver as coisas da forma que você fixou, isso é péssimo pois penaliza pessoas com problemas ou até mesmo deficiências visuais. Para fontes prefiro rem, mas vamos discutir ela melhor na sessão de unidades relativas.
• Espaçamentos como padding e margin pois esses espaçamentos vão variar de acordo com outros elementos relativos na sua página, px nesse caso seria um elemento fixo num mar de relatividade o que acabaria variando muito a experiencia do site com variações principalmente de fonte, por isso não devemos usar px nesse caso, a unidade correta vamos abordar na sessão de unidades relativas.

cm, mm, in

Essas unidades não são tão usadas por serem muito mais úteis em impressão do que na tela de fato, mas é importante falarmos sobre elas.

Como já dito acima são unidades que não devem ser usadas para web, mas sim para gerar documentos impressos, quando for imprimir a tela em questão ou quando na impressão formos usar elementos estáticos na tela.

Antigamente essas unidades eram mais usadas, na época inicial do CSS, para criar documentos impressos, nessa época era MUITO mais frequente.

Nota: A pesar de que faz sim sentido usar essas unidades para impressão e eu ainda vejo valor nelas, hoje em dia não é algo tão usual assim e você poderia usar px normalmente.

Use cm, mm e in quando trabalhar com

• Elementos puramente visuais em impressão de papel por serem unidades físicas que vão ser traduzidas para coisas igualmente físicas.

Não use cm, mm e in quando trabalhar com

• Telas digitais, munitores ou qualquer coisa que for ser vista no âmbito digital.
• Fontes de impressão em papel, a pesar de que sim, essas são unidades boas para impressão física, existem unidades melhores pra esse fim que vamos discutir no próximo tópico.
• qualquer outro caso que não sejam os citados no tópico “use”

pt e pc

Quando falamos de unidades em impressões de texto precisamos falar, basicamente, a língua da impressora e essa língua é pt e pc.

Essas unidades nasceram pra trabalhar texto impresso especificamente, ou seja, elas devem ser usadas apenas para esse tipo de trabalho.

Use pt e pc quando trabalhar com

• Fontes em impressão em papel pois essas unidades nasceram exatamente para isso e as impressoras em geral não tem problemas de precisão para trabalhar com essas unidades.

Não use pt e pc quando trabalhar com quaisquer outra coisa que não seja impressão no papel.

Relativas

Unidades relativas são aquelas que os desenvolvedores front-end mais vão usar, são unidades dependentes de outros valores como tamanho da tela, configurações do usuário e etc.

Características

Prós:

• Responsividade mais manutenível
• Se adapta de acordo com a necessidade de usuário
• Maior escalabilidade para componentes

Contras:

• Exige devs mais experientes

em e rem

As unidades clássicas pra se trabalhar com fontes na web, diferente do pt e pc, em e rem são unidades feitas pra usar fora de impressão e é a unidade que vamos usar majoritariamente para fontes em nossas aplicações e sites.

A pesar disso existem peculiaridades dentro de cada unidade que me força a tratar cada uma em um tópico diferente!

em

Essa unidade deriva seu valor da font size do elemento pai, ou seja, se o pai possui 16px de font-size, 1rem vai ser 16px, 2rem vão ser 32px e assim sucessivamente.

Essa unidade é bastante útil quando não trabalhamos com layouts criados por designers decorrente de que em geral eles não pensam nessa propagação do font-size com em, tornando mais trabalhoso do que útil usar em como unidade nesses casos, para usar fontes na web rem acaba sendo melhor na minha opinião, mas vamos discutir melhor sobre isso no próximo tópico.

Além disso existe uma coisa muito importante sobre o uso de em, essa é com certeza a melhor unidade pra se usar com responsividade, fazendo com que troquemos o @media screen and (max-width: 1200px) por @media screen and (max-width: 120em) (considerando uma font-size base de 10px).

Existem os que defendam que é melhor utilizar os espaçamentos (como padding e margin) com em, mas eu discordo porque isso gera mais problemas do que soluções. Posso até, quando precisar alterar o tamanho de uma fonte, ter que me atentar a reajustar o espaçamento também uma vez que o espaçamento vai mudar com a fonte e isso quase nunca é o desejado.

Use em quando trabalhar com

• media-query, traduzi um artigo excelente sobre o assunto e você pode ler ele aqui
• Quando for trabalhar com fontes em aplicações web que não tenham sido idealizadas por designers. Na maioria dos casos os designers não fazem os layouts de uma forma que as fontes são relativas umas as outas de forma pensada, fazendo com que qualquer alteração simples de font-size em vire uma necessidade de alteração em cascata ao invés de ser uma simples alteração como deveria ser. Essa unidade é melhor quando não temos um layout pronto ou temos apenas um wireframe base, nesses casos faz sentido.

Não use em quando trabalhar com quaisquer outra situação que não sejam os casos citados a cima.

rem

Talvez a unidade mais negligenciada na minha visão, o rem tem o mesmo poder do em, mas não deriva da fonte pai e sim da fonte base da página, isso faz com que ela seja muito mais consistente pra se trabalhar com fontes na web!

Essa unidade é excelente para fontes por ser uma unidade acessível e não exigir quase nenhum esforço dos devs para fazer sua acessibilidade funcionar, o rem deriva da fonte root e faz com que, se ela for 16px, logo 1rem vai ser 16px e assim sucessivamente tal como o em e é dai que vem sua acessibilidade!

Existem pessoas com dificuldades visuais ou mesmo apenas pessoas com grau mais alto no óculos cujas, em geral, aumentam a fonte do celular ou dão zoom na página pra que seja mais fácil de enxergar.

Esses aumentos na web são traduzidos como o font root que por sua vez vão afetar diretamente tudo que tiver usando rem, fazendo no fim a fonte realmente aumentar e se adaptar a necessidade do usuário sem que ele precise dar zoom na tela apenas porque sua aplicação não suporta a necessidade dele.

Assim, para tudo que for derivado de fontes como font-size, letter-spacing e qualquer outro valor que em geral usaríamos px, use rem.

Mas não só isso, também é interessante usar rem para delimitadores. Um layout nem sempre deve esticar até o infinito e esse valor de limite, que pode ser na prática 1920px, pode ser traduzido em 192rem por exemplo.

Nota: Vale do adendo de que line-height acaba sendo melhor sem nenhuma unidade.

rem também é bastante útil pra criar espaçamentos de padding e margin pela sua consistência e fluidez com a fonte root, sendo essa na minha visão a melhor unidade pra isso também.

Nota: Prefiro usar rem alterando a fonte do html e do body para font-size: 62.5%; fazendo essa alteração fica mais fácil de trabalhar com rem já que ela é múltipla de 10, e não de 16. Os exemplos dados inclusive foram baseados nesse hack.

Use rem quando trabalhar com

• Para todas as propriedades derivadas de fonte na web pela sua consistência de manter o valor da unidade e acessibilidade escalando o valor de acordo com a necessidade do usuário.
• Espaçamentos gerais como padding e margin pois eles vão mudar de acordo com a fonte root da página, se adaptando de acordo com a alteração de fonte base o que deixa a página mais consistente em sua fluidez e evita que ela quebre quando usarmos fontes baseadas em rem.
• Delimitadores de tamanho de página já que como os espaçamentos e as fontes estão sendo derivadas da root font do usuário é interessante que os delimitadores sejam usados com rem também. Assim o tamanho máximo da página irá fluir de acordo com a root font, permitindo mais espaço para acomodar os demais elementos que cresceram junto com a alteração da root font do site.

Não use rem quando trabalhar com quaisquer outras situações que não sejam as citadas a cima.

Disclaimer

Usamos o rem para espaçamentos de não em pela natureza derivada do root do rem. O problema do em é que ele varia de acordo com a fonte do pai e isso gera side-effects geralmente indesejados. Em contra partida o rem deriva do root, o que não atrapalha enquanto trabalhamos, mas altera de acordo com a necessidade do usuário. Então usando rem para espaçamentos ganhamos a fluidez dos espaçamentos variarem com a fonte.

ex e ch

Essas unidades são meio novas e são relativas a caracteres na font-size atual, boas pra fazer coisas derivadas dos tamanhos dos textos.

ex: é a altura do caractere x na font-size atual
ch: é a largura do caractere 0 na font-size atual

Use ex quando trabalhar com

• Contêineres com altura relativa a quantidade de linhas, por exemplo quando você quer limitar uma quantidade de linhas visíveis no container sem precisar fazer algum hack

Não use ex quando trabalhar com qualquer outra situação que não seja ao menos semelhante a citada a cima.

Use ch quando trabalhar com

• Contêineres com largura relativa a quantidade de caracteres, por exemplo quando você quer limitar o tamanho de um texto no container sem precisar fazer algum hack

Não use ch quando trabalhar com qualquer outra situação que não seja ao menos semelhante a citada a cima.

Para ambos os casos pode ter alguma situação além dessas que o uso faz sentido e eu desconheça, mas via de regra é isso.

%

Essa é a unidade que deveria ser a mais utilizada na esmagadora maioria dos casos, mas infelizmente não é tão utilizada assim…

Essa unidade nos permite evitar um uso excessivo de media-query pela sua característica dinâmica com relação ao tamanho da página. Com isso você pode deixar seus contêineres fluidos e dinâmicos de acordo com a necessidade.

Existem também outros casos que podemos usar % a pesar de que sua principal função é determinar tamanhos de contêineres.

Use % quando trabalhar com

• Contêineres que fluem com o tamanho da página/container pai, quase todos os elementos de uma página devem ser construídos com % por ser uma unidade flexível. Essa unidade reduz consideravelmente a quantidade de media-query que sua página precisa sendo mais fácil de dar manutenção e manter no geral.
  • Adendo: Porcentagem deve ser usada em todos os contêineres, pai/filho não importa. Existe exceções já abordadas neste artigo, mas fora elas, via de regra, o resto TUDO é porcentagem.
• Posicionamento relativo pois quando você tem algo em algum posicionamento left/right/bottom/top que varia de acordo com o tamanho do container é interessante usar, por exemplo, um <code></code>right: 3%.
• Border Radius para atingir resultados ovalados quanto trabalhar com border-radius.

Não use % quando trabalhar com

• Fontes/Textos pois quase nunca você vai querer usar font-size relativa ao container pai, em geral a fonte varia em outra proporção oque faria fontes em porcentagem gerarem mais manutenção do que soluções.

Conclusão

Eu espero que não tenha esquecido nenhum caso de uso ou não-uso de algum unidade, aqui tentei compilar todas as regras que uso no meu processo de desenvolvimento e que veem funcionando pra mim a bastante tempo. Vale lembrar que esse não é o único jeito de usar as unidades, é apenas, o meu jeito de usar elas.

PS: Eu sei que ficou faltando falar de vh, vw, vmin, vmax e etc, mas essas unidades vou deixar para uma parte dois desse artigo pra manter esse aqui mais conciso no objetivo. Na minha visão também não tem tanto que essas unidades façam que as apresentadas aqui não, logo essas unidades seriam mais um adendo no conteúdo do que realmente algo diferente a ser trazido.