Ao fazer um site, é fácil ficarmos presos quando trabalhamos com técnicas CSS que conhecemos bem, inclusive, unidades CSS. Mas isso nos coloca em desvantagem quando novos problemas vem à tona. À medida que a web evolui, a procura por novas soluções segue o mesmo caminho.
Então, web designers e desenvolvedores front end não têm escolha: é preciso conhecer bem o conjunto de ferramentas e possibilidades disponíveis para criar sites. Isso significa conhecer, inclusive, as ferramentas “especiais”, as que não são utilizados tão frequentemente, mas, quando necessárias, mostram-se as ferramentas certas para tarefas particulares da criação de sites.
Algumas dessas “ferramentas” CSS são cada uma das unidades de medida existentes. Já estamos habituados com px
e em
, mas existam outras mais para usar na hora de criar CSS. É hora de conhecer unidades de CSS moderno: rem, vh, vw, vmin, vmax, ex e ch!
rem
Começando com algo similar ao que a maioria já conhecemos, a unidade em
é definida como o font-size
atual. Assim, por exemplo, se se definir um tamanho de fonte no elemento <body>
, o valor de em
de qualquer elemento-filho dentro de <body>
será igual àquele tamanho de fonte.
1 2 3 |
<body> <div class="test">Test</div> </body> |
1 2 3 4 5 6 7 |
body { font-size: 14px; } div { font-size: 1.2em; /* calculado como 14px * 1.2, ou 16.8px */ } |
A div
terá um font-size de 1.2em
, Isto é, 1,2 vezes o tamanho da fonte que herdou — neste caso, 14px
. O resultado é 16.8px
.
Entretanto, o que acontece quando se tem um elemento com valor em
dentro de outro elemento com valor em
? No trecho a seguir, foi aplicado o mesmo CSS acima; cada div
herda a font-size
de seu elemento-pai, permitindo aumentar gradualmente os tamanhos de fonte.
1 2 3 4 5 6 7 8 9 10 11 |
<body> <div> Test <!-- 14 * 1.2 = 16.8px --> <div> Test <!-- 16.8 * 1.2 = 20.16px --> <div> Test <!-- 20.16 * 1.2 = 24.192px --> </div> </div> </div> </body> |
See the Pen Cascading em Values by snaptin (@snaptin) on CodePen.
Embora isso possa ser desejado em alguns casos ao criar CSS, muitas vezes é possível simplesmente confiar em uma única métrica para o dimensionamento. Neste caso, usa-se rem
(o “r” significa “root”: “root em”), que é igual ao tamanho da fonte fixada ao elemento-raiz (quase sempre <html>
).
1 2 3 4 5 6 7 |
html { font-size: 14px; } div { font-size: 1.2rem; } |
Em qualquer uma das div
s aninhadas do exemplo anterior de codigo CSS, a fonte terá o tamanho equivalente de 16.8px
.
rem
é bom para grids
rem
não é útil apenas para dimensionamento de fontes. Por exemplo, é possível basear um sistema de grids inteiro ou uma biblioteca de estilos tomando por base o tamanho de fonte do elemento raiz <html>
usando em
, utilizando em para escalar em locais específicos.
Isto confere um dimensionamento de fonte mais previsível e escalável ao criar CSS para fazer um site.
vh
e vw
Muitas técnicas de web design responsivo dependem muito de regras percentuais. No entanto, medidas CSS percentuais nem sempre são a melhor solução para todos os problemas. width
em CSS é relativo ao elemento-ancestal mais próximo.
Mas e se fosse preciso usar a largura ou a altura da viewport ao invés da largura do elemento-pai? Isso é exatamente o que as unidades vh
e vw
proporcionam com CSS.
A medida vh
é igual a 1/100 da altura da viewport. Então, por exemplo, se a altura do navegador é 900px
, 1vh
equivale a 9px
e, analogamente, se a largura da viewport é 750px
, 1vw
equivale a 7.5px
.
Há infinitas possibilidades de uso com essas unidades de CSS moderno em uma folha de estilos. Por exemplo, um slider de altura total (full-height) poderia ser conseguido com uma única linha de CSS:
1 2 3 |
.slide { height: 100vh; } |
Imagine que seja preciso de um título que preencha a largura da tela. Como fazer CSS para isso? Para conseguir, é possível definir um tamanho de fonte com vw
, que vai escalar segundo a largura do navegador.
See the Pen Demo of vw Unit by snaptin (@snaptin) on CodePen.
vmin
e vmax
Enquanto vh
e vw
estão sempre relacionados com a altura e largura da viewport, respectivamente as unidades de CSS moderno vmin
e vmax
estão relacionados com o valor máximo e mínimo destas larguras e alturas, dependendo de qual é a menor e a maior.
Por exemplo, se o navegador foi ajustado para 1100px
de largura e a altura 700px
, 1vmin
seria 7px
e 1vmax
seria 11px
. Contudo, se a largura foi ajustada para 800px
e a altura definida para 1080px
, vmin seria igual a 8px
e vmax 10.8px
.
Mas quando usar estes valores de medidas em códigos CSS para fazer um site?
Imagine que seja preciso um elemento sempre visível na tela. Usar uma altura e largura ajustada para um valor abaixo de 100vmin
permitiria isso. Por exemplo, um elemento quadrado que sempre toca pelo menos 2 lados da tela pode ser definido assim:
1 2 3 4 |
.box { height: 100vmin; width: 100vmin; } |
Se for preciso uma caixa quadrada que sempre cobre a viewport visível (tocando todos os 4 lados da tela o tempo todo), basta usar as mesmas regras com vmax
.
1 2 3 4 |
.box { height: 100vmax; width: 100vmax; } |
Combinações dessas regras fornecem maneiras muito flexíveis para utilizar o tamanho da viewport de maneiras novas e emocionantes em códigos de CSS! :-)
ex
e ch
As unidades ex
e ch
, semelhante a em
e rem
, contam com a fonte e tamanho da fonte atuais. No entanto, ao contrário de em
e rem
, essas unidades também contam com font-family
como são determinados com base em medidas específicas de cada fonte.
A unidade ch
(“character unit” ou “unidade-caractere”) é definida como sendo a “medida avançada” da largura do caractere zero (“0”). Algumas considerações muito interessantes sobre o que isso significa podem ser encontradas no blog de Eric Meyers, mas o conceito básico é que, dada uma fonte com espaçamento uniforme, uma caixa com uma largura de “N” unidades-caractere, como width: 40ch;
, sempre pode conter uma string com 40 caracteres nesta determinada fonte — enquanto usos convencionais de esta regra são relacionados a braille, as possibilidades de criatividade aqui certamente se estendem para além deste tipo de aplicação.
A unidade ex
é definida como “a altura-x da fonte atual ou a metade de 1em”. A “altura-x” de uma determinada fonte é a altura do caractere “x” em minúsculo dessa fonte. Muitas vezes, trata-se da marca do meio da fonte.

Há muitos usos para este tipo de unidade em código CSS, sendo a maioria relacionada a micro-ajustes tipográficos. Por exemplo, o elemento sup
pode ser empurrado para cima na linha usando posição relativa e um valor inferior do 1ex
. Similarmente, é possível puxar um elemento sub
para baixo.
Os navegadores já têm seus padrões para estas tags, mas se um controle mais granular é preciso, você pode lidar com a situação de uma maneira mais explícita, como:
1 2 3 4 5 6 7 8 9 |
sup { bottom: 1ex; position: relative; } sub { bottom: -1ex; position: relative; } |
Conclusão sobre unidades de CSS moderno
Ficar atento sobre o desenvolvimento contínuo e expansão das CSS é extremamente importante para que você tenha ciência de todas as ferramentas e possibilidades disponíveis para fazer um site. Talvez você encontre um problema específico, que exija uma solução inesperada utilizando uma dessas unidades de medida menos conhecidas.
Não é sempre que essas unidades de CSS moderno serão usadas (certamente, quase nunca todas de uma vez), mas conhecer e saber quando aplicar rem
, vh
, vw
, vmin
, vmax
, ex
e ch
abre uma gama de possibilidades e contingências possíveis para quaisquer situações que apareçam ao criar CSS.
E você, já passou por alguma situação ou teve que usar as unidades de CSS moderno para criar sites? Comente!