Tamanho da Fonte em CSS - font-size: pixel, em, % e keyword Tutorial

Neste tutorial simples de CSS, iremos aprender como definir o tamanho de uma fonte qualquer, fazendo uso da propriedade font-size, que pode receber uma variedade de valores bem interessantes, como em pixel, porcentagem, palavras chave e tamanhos relativos de texto.

• Fazer download da Apostila de HTML + CSS

Tamanho de Fonte em pixels: font-size: px

Como dissemos em outros tutoriais, o CSS nos permite alterar o tamanho de uma fonte de diversas maneiras, que podem ser dividas em medidas absolutas e relativas.

Sem dúvidas, a maneira mais comum de se definir o tamanho de um texto, é através de pixel, através da abreviação "px", por exemplo: 10px, 12px, 18px, 20 px.

A sintaxe para definir o tamanho da fonte em pixels no CSS é:

font-size: NUMEROpx;

Onde "NUMERO" é um valor qualquer, como 6, 7, 8, 11 etc.
Por exemplo, se quisermos definir que todos os parágrafos tenham tamanho 14 pixels:

p{
   font-size: 14px;
}

Dizemos que essa maneira de definir o tamanho (que é a altura) da fonte é absoluta, pois uma vez dito que é 14 pixels, esse tamanho será sempre o mesmo, independente da configuração da tela do usuário, browser, se estar em um computador, celular ou tablet, pois pixel é uma medida fixa de tamanho, para mensurar distâncias na tela.

Por exemplo, os seguintes códigos CSS e HTML:

<p style="font-size: 12px">Esta fonte tem tamanho 12px</p>
<p style="font-size: 14px">Esta fonte tem tamanho 14px</p>
<p style="font-size: 16px">Esta fonte tem tamanho 16px</p>

Ocasionam os seguintes resultados:

Esta fonte tem tamanho 12px

Esta fonte tem tamanho 14px

Esta fonte tem tamanho 16px

Tamanho da Fonte com keywords - font-size: small, medium, large

Saber inglês é meio caminho andado pra se dar bem no mundo da tecnologia, principalmente em programação e codificação.

Mais um exemplo disso, é a seguinte maneira de definirmos o tamanho de uma fonte em CSS, usando o atributo font-size e valores que são nomes em inglês:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

Em inglês, small quer dizer pequena, medium é média e large é larga ou grande.
Assim, fica óbvio perceber como usar a propriedade font-size com estes valores em keywords:

O resultado do código CSS/HTML acima é:

<div style="font-size: xx-large">Tamanho da fonte: xx-large</div>
<div style="font-size: x-large">Tamanho da fonte: x-large</div>
<div style="font-size: large">Tamanho da fonte: large</div>
<div style="font-size: medium">Tamanho da fonte: mediume</div>
<div style="font-size: small">Tamanho da fonte: small</div>
<div style="font-size: x-small">Tamanho da fonte: x-small</div>
<div style="font-size: xx-small">Tamanho da fonte: xx-small</div>

Tamanho da fonte: xx-large

Tamanho da fonte: x-large

Tamanho da fonte: large

Tamanho da fonte: mediume

Tamanho da fonte: small

Tamanho da fonte: x-small

Tamanho da fonte: xx-small

Este tipo de valor para o atributo font-size é relativo, pois vai depender do browser, sistema operacional e configuração da pessoa que usa.

O tamanho "medium" é o tamanho padrão da fonte do seu browser.

Porém, não temos um controle mais específico do tamanho somente pelas keywords, pois só existem os 7 valores apresentados.

Para ser mais específico em relação ao tamanho, podemos utilizar o tamanho em pixel, ou em porcentagem como iremos estudar agora.

Tamanho de Fonte em Porcentagem - font-size: %

Uma maneira mais precisa de se controlar o tamanho da fonte, mas de uma maneira relativa, é através da porcentagem, e a sintaxe para este uso é:

font-size: NUMERO%;

Onde "NUMERO" é um valor qualquer, como 50, 60, 120 etc.

Como dissemos, o seu navegador tem um tamanho de fonte padrão, ou seja, se você Webmaster não alterar o código em CSS ou HTML e o usuário não mudar as configurações, esse valor é definido automaticamente.

Esse tamanho de fonte equivale a 100%.
Ou seja, se colocar um número acima de 100%, vai aumentar o tamanho da fonte padrão.
Por exemplo, 200% é o dobro do tamanho normal.
Já se colocar menos de 100%, vai reduzir o tamanho da fonte padrão.

A vantagem é que essa porcentagem é em cima do tamanho natural da fonte, e isto varia de dispositivo para dispositivo.

Vejamos alguns exemplos de uso:

<div style="font-size: 100%">100%</div>
<div style="font-size: 200%">200%</div>
<div style="font-size: 50%">50%</div>
<div style="font-size: 10%">10%</div>

O efeito é:

100%

200%

50%

10%

Teste em seu celular, tablet, notebook etc. Verá que os tamanhos são diferentes.

Tamanho de fonte usando em - font-size: em

E por fim, vamos falar do uso da "em", que funciona exatamente como a porcentagem, mas de uma maneira mais abreviada.

A sintaxe do uso de "em" em CSS é:

font-size: NUMEROem;

O grande segredo é que 1em equivale a 100%, ou seja, ao tamanho padrão de fonte.
Então, 2em vale o dobro do tamanho, ou 200%.
Também podemos usar valores decimais, como 0.5em que vale 50%.

Só lembre de usar ponto (0.8em, 1.2em, 1.5em ) ao invés de vírgula, como fazemos no Brasil (0,8em 1,2em 1,5em).

O em é uma maneira mais rápida de usar a porcentagem, e seu uso surgiu da época das gráficas de jornais impressos, que definiram o valor 1em como sendo o tamanho da letra "M", em maiúscula.