30/01/2023 00:58 Unidades de medida CSS: entenda o que são e quando utilizá-las

UNIDADES DE MEDIDA CSS

Por Brunno Kriger 27/10/22 8 min de leitura

Início » CSS

Em nossa vida, utilizamos diversas unidades de medida em várias situações. Ao

medirmos o nosso tamanho, por exemplo, utilizamos metro. Quando queremos
referenciar alguma distância entre cidades, utilizamos quilômetro.

Na programação não é diferente. Ao posicionarmos os elementos do nosso site em

tela, podemos definir uma largura, uma distância e, até mesmo, uma altura.

Nesse artigo, abordaremos sobre CSS e como utilizar essas unidades de medida
para estilizar a nossa aplicação web. Bora lá?

O que é CSS?

https://kenzie.com.br/blog/unidades-de-medida-css/ 1/19
30/01/2023 00:58 Unidades de medida CSS: entenda o que são e quando utilizá-las

O CSS, ou Cascading Style Sheets, é uma linguagem de estilo. Através dela, é

possível posicionar e estilizar os elementos em nosso site. Enquanto o HTML fica
responsável pela estruturação da página, o CSS torna a aplicação visualmente mais
agradável e interativa para o usuário.

O que são unidades de medida no CSS?

Ao usarmos o CSS para estilizar os elementos do nosso projeto, sentimos a

necessidade de utilizar valores numéricos em diversas propriedades, como, por
exemplo, ao definir uma largura (width), uma altura (height), o tamanho de uma
fonte (font-size), entre muitas outras.

Para que essas propriedades recebam corretamente os seus valores e,

consequentemente, alcancem a estilização desejada, é necessário a utilização das
unidades de medida.

Quais as unidades de medida do CSS?

Existem diversas opções de unidades de medida disponíveis no CSS, divididas em

dois grupos: as medidas absolutas e as medidas relativas. As mais conhecidas são
os píxeis e a porcentagem. Porém, existem situações onde essas unidades de
medida não são as mais adequadas para serem utilizadas.

https://kenzie.com.br/blog/unidades-de-medida-css/ 2/19
30/01/2023 00:58 Unidades de medida CSS: entenda o que são e quando utilizá-las

A seguir entenderemos qual a diferença entre esses grupos e quais as unidades

disponíveis no CSS.

Medidas Absolutas

São medidas fixas, que não se alteram de acordo com o dispositivo onde o site está
sendo exibido. Não existe nenhum elemento ou referência que influencie no seu
tamanho. Ou seja, ao declararmos um valor em medida absoluta, o tamanho final
da propriedade será o mesmo declarado.

Esse tipo de medida é utilizado quando temos conhecimento pleno do tamanho e

das características físicas de onde nosso site será exibido. Mas será que é possível
sabermos o tamanho ou a largura da tela de todos os dispositivos existentes no
mundo? Difícil, né?

Lembre-se: como Pessoa Desenvolvedora Frontend é necessário tornar as

nossas aplicações responsivas e acessíveis em qualquer tamanho de tela. Portanto,
muito cuidado ao utilizar essas medidas e quebrar por completo o layout do seu
site.

Píxeis (px)

https://kenzie.com.br/blog/unidades-de-medida-css/ 3/19
30/01/2023 00:58 Unidades de medida CSS: entenda o que são e quando utilizá-las

Tenho certeza que em algum momento da sua vida como programador(a), você
já escutou falar ou, até mesmo, utilizou os píxeis em suas estilizações. É uma
unidade de medida muito famosa e utilizada como unidade principal nos projetos
de grande parte da comunidade de desenvolvedores.

Mas, afinal, o que é píxel? Basicamente, é um ponto luminoso em nosso monitor.

Junto com os outros pontos do mesmo tipo, formam a imagem que vemos em
nossa tela.

Porém, na programação, o píxel utilizado pelo CSS não é o mesmo píxel da tela do
nosso dispositivo. Este é conhecido como píxel de referência, e possui um tamanho
maior que o píxel real. Isso torna essa medida ainda mais abstrata.

Sua utilização é bem comum por trazer uma proximidade do tamanho dos
elementos entre telas diferentes. Mas não se esqueça, precisamos estar sempre
atentos a questão da responsividade.

Points (pt)

O ponto é usado para medir o tamanho da fonte e os espaçamentos entre os itens

de uma página impressa.

https://kenzie.com.br/blog/unidades-de-medida-css/ 4/19
30/01/2023 00:58 Unidades de medida CSS: entenda o que são e quando utilizá-las

Essa unidade é raramente utilizada, e, até mesmo, não recomendada, para

estilização de uma aplicação web. Seu uso está diretamente relacionado com a
tipografia. Por isso, é mais conhecida entre os designers.

in (inches/polegadas)

As polegadas, apesar de existirem no desenvolvimento web, são pouco

utilizadas para estilização. A sua principal funcionalidade é medir objetos, como,
por exemplo, a televisão que você tem aí na sua casa. Já reparou que medimos o
tamanho da tela utilizando as polegadas?

Centímetro e Milímetro (cm / mm)

Essa unidade de medida é muito conhecida e utilizada por nós no nosso dia-a-dia
no mundo real. Porém, ao trazer para o mundo da programação, seu uso não
costuma ser frequente e nem recomendado para projetos web.

Paica (pc)

A paica, assim como os points, são unidades de medidas utilizadas para

padronização do tamanho das fontes e espaçamentos em folhas impressas. Seu
uso está diretamente relacionado à tipografia e não é muito comum no CSS.

Medidas Relativas
https://kenzie.com.br/blog/unidades-de-medida-css/ 5/19
30/01/2023 00:58 Unidades de medida CSS: entenda o que são e quando utilizá-las

As medidas relativas são unidades flexíveis e que sofrem alterações conforme o

dispositivo ou preferências do usuário. Essas unidades aparecem com um certo
domínio quando o assunto é estilização de páginas na web, principalmente, por se
adaptar a diferentes tamanhos de tela e tornar o nosso site responsivo.

Ems (em)

Essa, sem dúvidas, é uma das unidades mais utilizadas no CSS. Sua funcionalidade
está relacionada à mudança do tamanho dos elementos filhos conforme o
tamanho da fonte do elemento pai. Ou seja, 1em significa que o tamanho desse
elemento é uma vez o font-size do pai.

Vamos ver na prática como funciona, o entendimento será melhor.

Digamos que em nosso HTML, exista uma tag div, contendo um parágrafo.

https://kenzie.com.br/blog/unidades-de-medida-css/ 6/19
30/01/2023 00:58 Unidades de medida CSS: entenda o que são e quando utilizá-las

Agora, vamos estilizar os nossos elementos, colocando um font-size de 32px no

elemento pai e um font-size de 2em no elemento filho.

https://kenzie.com.br/blog/unidades-de-medida-css/ 7/19
30/01/2023 00:58 Unidades de medida CSS: entenda o que são e quando utilizá-las

Dessa forma, estamos dizendo que o font-size do parágrafo será 2 vezes o

tamanho da fonte da div, por ser o seu elemento pai. Ou seja, nesse exemplo, 2em
seria a mesma coisa que 64px.

Rems (rem, "root em")

O rem surgiu a partir do em, que acabamos de ver anteriormente. As suas

utilizações são bem semelhantes, porém, ao utilizarmos o rem, estamos dizendo
que o valor é igual ao tamanho da fonte da raiz do documento. Geralmente, como
padrão dos navegadores, esse font-size do root é de 16px. Logo, 1rem é igual a
16px.

Porém, isso pode ser facilmente alterado pelo usuário, de acordo com as suas
preferências. Caso isso aconteça, todos os elementos que possuírem essa unidade
de medida como valor de suas propriedades, também sofrerão essas modificações.

Faça o teste no seu navegador. Estilize algum elemento do seu HTML com os
valores em rem. Feito isso, abra as configurações de aparência, altere o tamanho
da fonte padrão e veja o resultado em tela.

Porcentagem (%)

https://kenzie.com.br/blog/unidades-de-medida-css/ 8/19
30/01/2023 00:58 Unidades de medida CSS: entenda o que são e quando utilizá-las

Trabalhando com o desenvolvimento front-end, será muito comum utilizar as

porcentagens ao definir valores de uma propriedade no CSS. Isso se dá graças a
sua flexibilidade em relação ao elemento pai, fazendo com que o elemento filho se
adapte melhor a diferentes situações e tamanhos de tela.

Vamos ver na prática como funciona!

Em nosso HTML, vamos criar duas divs.

Já em nosso CSS, vamos estilizar definindo uma largura (width), uma altura (height)
e um background-color para visualizarmos esses elementos em tela.

https://kenzie.com.br/blog/unidades-de-medida-css/ 9/19
30/01/2023 00:58 Unidades de medida CSS: entenda o que são e quando utilizá-las

Em nosso navegador, teremos o seguinte resultado:

Repare que o elemento filho ocupou 30% do tamanho máximo do elemento pai.
Caso visualizássemos essa aplicação em outros tamanhos de tela, esses elementos
se adaptariam e sofreriam alterações em seus valores.

https://kenzie.com.br/blog/unidades-de-medida-css/ 10/19
30/01/2023 00:58 Unidades de medida CSS: entenda o que são e quando utilizá-las

Ex

Essa unidade é raramente utilizada no CSS. Diferente do em e rem, vistos

anteriormente, essa unidade não está relacionada ao tamanho da fonte (font-size),
mas sim, ao tamanho do caractere do estilo de fonte (font-family) que está sendo
utilizado em nosso elemento.

Ch

O ch (character unit) é uma unidade de medida utilizada para definir, geralmente, a

largura de uma frase ou palavra em nosso documento. Ou seja, se estipularmos
um valor de 20ch na width de um parágrafo, este só comportará 20 caracteres por
linha. Simples assim.

Vejamos um exemplo utilizando 100ch e depois 20ch. Repare na diferença como os

parágrafos irão se comportar em nossa tela.

https://kenzie.com.br/blog/unidades-de-medida-css/ 11/19
30/01/2023 00:58 Unidades de medida CSS: entenda o que são e quando utilizá-las

Vw (viewport width)

Para entendermos essa unidade de medida, basta traduzirmos o seu nome.

Viewport é janela de exibição, e width é largura. Ou seja, essa medida está
relacionada com a largura da tela dos nossos dispositivos. Ao definirmos um valor
como 1vw, significa que aquele elemento está ocupando 1% da largura da janela
do nosso navegador. Caso o nosso elemento possua 100vw como valor,
consequentemente, ele estará ocupando toda a largura da tela.

Esse valor se altera entre dispositivos, sendo, por exemplo, maior no desktop se
comparado ao mobile.

https://kenzie.com.br/blog/unidades-de-medida-css/ 12/19
30/01/2023 00:58 Unidades de medida CSS: entenda o que são e quando utilizá-las

Vh (viewport height)

Essa unidade funciona da mesma forma que o vw, que acabamos de abordar.
Porém, ao invés de utilizarmos a largura das telas como referência, utilizaremos a
sua altura (height).

Vmin (viewport minimun)

Essa unidade também está relacionada as dimensões de uma tela, porém, a

diferença se comparada as anteriores, é que esta utilizará como referência a
menor dimensão da viewport, sendo ela, largura ou altura.

Por exemplo, digamos que estamos criando um projeto numa tela de 1024px de
largura e 852px de altura. Nesse caso, ao utilizarmos o vmin, o seu valor será de
1% da altura, ou seja, 8.52px.

Vmax (viewport maximum)

Assim como vmin, essa unidade se relaciona com as dimensões da viewport. A

diferença, como o próprio nome já sugere, é que o vmax utiliza como referência a
maior dimensão.

Utilizando o exemplo anterior de uma tela de 1024px de largura e 852px de altura,

ao utilizarmos o vmax, o seu valor será de 1% da largura, ou seja, 10.24px.
https://kenzie.com.br/blog/unidades-de-medida-css/ 13/19
30/01/2023 00:58 Unidades de medida CSS: entenda o que são e quando utilizá-las

Conclusão

Com diversas unidades de medidas à nossa disposição no CSS, surge aquela

famosa dúvida: qual devo utilizar em meus projetos?

A resposta é simples: depende. Será necessário avaliar o seu objetivo com

determinado elemento na tela, assim como os padrões já utilizados pela equipe,
caso você faça parte de uma.

Porém, para que você esteja preparado para enfrentar qualquer situação, é
importante conhecer todas as unidades de medida. Aumentar o nosso leque de
ferramentas e possibilidades de estilização nos torna uma pessoa desenvolvedora
mais preparada para o mercado de trabalho.

Aqui na Kenzie Academy Brasil, ensinamos aos nossos alunos a melhor forma de
utilizar o CSS, usando, como exemplo, projetos reais do mercado. Conheça mais
sobre a nossa formação de Desenvolvimento Full Stack.

    

https://kenzie.com.br/blog/unidades-de-medida-css/ 14/19