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