Pinceladas da Web

Uma das coisas mais importantes no desenvolvimento web são as medidas, pois elas tem um grande efeito sobre a acessibilidade de um site web. Em CSS, o valor de uma propriedade, por exemplo, font-size, pode-se expressar em unidades de comprimento, ou em unidades de porcentagem. Vejam abaixo as unidades disponíveis:

Unidades de Comprimento

Unidades absolutas

• in (polegadas)
• cm (centímetros)
• mm (milímetros)
• pt (pontos)
• pc (picas)
• px (pixels)

Unidades relativas

• em
• ex

Unidades de Porcentagem

• %

De todas as unidades, as recomendadas são as relativas, em especial em, que anteriormente seu tamanho era equivalente a altura da letra M em maiúscula, mas hoje, é igual a altura da letra do elemento em que se usa. Com esse tipo de medida, o autor mantém um controle relativo em relação ao tamanho da fonte padrão do usuário, onde pode especificar quanto maior ou menor se vê o texto na página. VOcê pode utilizar a unidade em também em qualquer propriedade CSS que admita medidas (margens, paddings,…), o que permite um desenho proporcional ao sistema do usuário.

Mas por que não utilizar medidas absolutas? As unidades absolutas como px (pixel), cm (centímetros), pt (pontos), permitem um controle exato da aparência da página, sempre e quando, que seja vizualizada com o fim que ela foi projetada (onde se acaba a acessibilidade da página). Por exemplo, a unidade px tem um valor diferente dependendo da resolução da tela e do tipo de computador usuário. Assim, um sistema Windows mantém uma equivalência de 96px por polegada, e o Macintosh, 72 px por polegada. Se utilizarmos pt (pontos), no lugar de px (pixels) o tamanho dos pontos dependem da resolução do usuário.

Exemplos de Unidades de Medida

Utilizando em Texto normal: 3em, 2em,1em. Utilizando ex Texto normal: 3ex, 2ex,1ex. Utilizando px Texto normal: 20px, 15px,10px. Utilizando in Texto normal: 1in, 0.5in. Utilizando cm Texto normal: 2cm, 1cm. Utilizando mm Texto normal: 20mm, 10mm. Utilizando pt Texto normal: 18pt, 12pt. Utilizando pc Texto normal: 5pc, 3pc

Tabela de Equivalências

Abaixo você pode ver uma tabela equivalente as medidas e seus valores aproximados, pois tudo depende do Navegador utilizado e também do Sistema Operacional:

Esse artigo é uma tradução do artigo original de CarlosLeopoldo: Unidades de medida en CSS.