Esta é uma tradução. Ela pode conter erros ou estar desatualizada em relação à versão original em inglês. Tradutor(a): Tárcio Zemel
Veja, também, o Índice com todas as dicas.
Nesta página:
em, px, pt, cm, in…CSS oferece um número de unidades diferentes para a expressão de
comprimento. Algumas têm sua história em tipografia, como o ponto
(pt) e a paica (pc), outros são conhecidos
devido a seu uso diário, como centímetro (cm) e
polegada (in). E há, também, uma unidade "mágica" que
foi inventada especificamente para CSS: px. Isso
significa que diferentes propriedades precisam de diferente
unidades?
Não, as unidades não têm nada a ver com as propriedades, mas têm tudo a ver com a mídia de saída: tela ou papel.
Não há qualquer restrição sobre quais unidades podem ser usada em
qual lugar. Se uma propriedade aceita um valor em px
('margin: 5px') ela também aceita o valor em polegadas ou
centímetros ('margin: 1.2in; margin: 0.5cm') e vice-versa.
Mas, em geral, você deve usar um conjunto diferente de unidades para exibição em tela do que para a impressão em papel. A tabela abaixo apresenta o uso recomendado:
| Recomendado | Uso ocasional | Não recomendado | |
|---|---|---|---|
| Tela | em, px, % | ex | pt, cm, mm, in, pc |
| Impresso | em, cm, mm, in, pt, pc, % | px, ex |
A relação entre as unidades absolutas é: 1in = 2,54cm = 25,4mm = 72pt = 6pc
Se você tiver uma régua pode checar o quão preciso seu
dispositivo é: aqui está uma caixa com altura de 1in (2,54cm) ↑
72pt
↓
As assim chamadas medidas absolutas (cm,
mm, in, pt e pc)
significam o mesmo em CSS como em qualquer lugar. Uma medida
expressa em qualquer uma dessas aparecerá exatamente do tamanho que
é (dentro da precisão do hardware e do software). Elas não são recomendadas para uso em tela
porque tamanhos de tela variam muito. Uma tela grande pode ter 60cm
(24in); uma pequena e portátil, talvez apenas 8cm. E você não olha
pra elas a partir da mesma distância.
As unidades em e ex dependem da fonte e
podem ser diferentes para cada elemento no documento. em é, simplesmente, o tamanho da fonte. Em um elemento com a fonte de
2in, 1em será, portanto, 2in. Empressando tamanhos, como margins e paddings, com em significa que eles são relativos ao tamanho da fonte e se
o usuário tem uma fonte grande (ex. uma tela grande) ou uma fonte
pequena (ex. dispositivo handheld) , os
tamanhos serão proporcionais. Declarações como 'text-indent: 1.5em' e 'margin: 1em' são
extremamente comuns em CSS.
A unidade ex é raramente usada. Seu propósito é
expressar tamanhos relacionados à "altura do x" de uma fonte. A
altura do x é, grosso modo, a altura de letras em mínusculo como a, c, m, ou o. Fontes que têm o mesmo tamanho (e,
portanto, o mesmo em) podem variar muito o tamanho de
suas letras em minúsculo, e, quando é importante que alguma imagem,
por exemplo, se iguale à altura do x, a unidade ex está
disponível.
A unidade px é a unidade mágica das CSS. Ela não é
relacionada ao tamanho da fonte atual nem a unidades absolutas. A
unidade px é definida para ser pequena, mas visível, e
tal como uma linha de 1px de largura, pode ser apresentada com
"serrilhamento" (sem anti-aliasing). O quão
nítida, pequena e visível será, depende do dispositivo e da maneira
como ele está sendo usado: você o está segurando perto de seus
olhos, como em um celular, no comprimento dos braços, como num
monitor de computador ou alguma coisa entre um e outro, como se
fosse um livro? O px, portanto, não é definido como uma
medida constante, mas algo que depende do tipo de dispositivo e o
uso típico deste.
Para ter uma idéia da aparência do de um px, imagine
um monitor CRT de 1990: o menor ponto nele consegue exibir medidas
de 1/100 de polegada (0,25mm) ou um pouco mais. A unidade px tem esse nome em função dos pixels
da tela.
Atualmente, existem dispositivos que podem, a princípio, exibir
pontos menores (embora você possa precisar de uma lupa para vê-los).
Mas documentos do século passado que usaram px em CSS
continuam sendo exibidos da mesma forma, não importando o
dispositivo. Impressoras, especialmente, conseguem mostrar linhas
com muito mais detalhes que 1px, mas, até nas impressoras, uma linha
de 1px parece muito com como sua exibição ficaria em um monitor de
computador. Dispositivos mudam, mas o px tem sempre a
mesma aparência.
CSS também define que imagens rasterizadas (como fotos) são, por
padrão, exibidas com um mapeamento de pixels de
1px. Assim, uma foto de resolução 600 por 400 será 600px comprida e
400px alta. Os pixels na foto, portanto, não
mapeiam os pixels do dispositivo de exibição
(que pode ser bem pequeno), mas mapeia para unidades em px. Isso torna possível fazer alinhamentos precisos de
imagens com outros elementos do documento, desde que você use
unidades em px em sua folha de estilos ao invés de
pt, cm, etc.
em ou px para tamanhos de fonteCSS herdou as unidades pt (ponto) e pc
(paica) da tipografia. Impressoras têm, tradicionalmente, usado
essas e unidades similares, com preferência a cm ou
in. Em CSS, não há razão para usar pt, use
qualquer outra unidade que preferir. Mas existe uma boa
razão para não usar nem pt nem outra unidade
absoluta e usar somente em e px.
Aqui estão algumas linhas com diferentes espessuras. Algumas ou todas elas podem ser nítidas, mas, pelo menos as linhas de 1px e 2px devem ser nítidas e visíveis:
0,5pt, 1px, 1pt, 1,5px, 2px
Se as quatro primeiras linhas parecerem todas iguais (ou se a linha de 0,5pt estiver faltando), provavelmente você está olhando para um monitor de computador que não consegue exibir pontos menores do que 1px. Se as linhas parecem aumentar de espessura, provavelmente você está olhando para esta página em uma tela de computador de alta qualidade ou papel. E se a de 1pt parece mais espessa que a de 1,5px, você, provavelmente, tem a tela de um dispositivo móvel.
A unidade mágica de CSS, o px, frequentemente é uma
boa unidade para se usar, especialmente se o estilo requer
alinhamento do texto com imagens ou, simplesmente, porque tudo o que
tem 1px ou é múltiplo de 1px de largura é garantido de parecer
nítido.
Mas, para tamanhos de fonte, é ainda melhor usar em.
A ideia é (1) não especificar o tamanho de fonte do elemento BODY (em HTML), mas usar o
tamanho padrão do dispositivo porque esse é um tamanho que o leitor
consegue ler confortavelmente; e (2) expressar o tamanho da fonte de
outros elementos em em: 'H1 {font-size: 2.5em}' para fazer o H1 2½ vezes maior que o
normal.
O único lugar que você pode usar pt (ou cm ou in) para especificar o tamanho da fonte é
em folhas de estilo para impressão, se você precisar ter certeza de
que a fonte impressa será, exatamente, de um certo tamanho. Mas,
mesmo assim, usar o tamanho de fonte padrão é, geralmente, melhor.
Para tornar ainda mais fácil de fazer as regras de estilo que
dependem somente do tamanho de fonte padrão, uma nova unidade está
em desenvolvimento: a rem. A rem
("root em") é o tamanho de fonte do
elemento-raiz do documento. Diferentemente do em, que
pode ser diferente para cada elemento, o rem é
constante em todo o documento.
Outras unidades em desenvolvimento permitem especificar tamanhos
relativos à janela do leitor. São a vw e vh. A vw é 1/100 da largura da janela e vh
é 1/100 da altura da janela.
Criado em 12 de janeiro de 2010;
Última atualização qui 02 out 2025 06:40:52