Tamanho de fonte para sites: Pixel (px), porcentagem, EM ou REM — qual o melhor tipo?

Está iniciando sua carreira de desenvolvedor web e está procurando saber mais sobre tamanho de fontes, qual o melhor formato para estilizar o tamanho das letras no site? Então siga nossas dicas.

Padrão Pixel

O primeiro modelo padronizado — e talvez ainda o mais usado até hoje — é o do Pixel. Um pixel é o menor ponto de luz exibido na tela.

Imagine que uma imagem exibida no monitor é formada por uma tabela de milhares de pontos de luz (pixels), como num mosaico, numa tabela numerada na horizontal e na vertical.

Então você preenche essa tabela, pintando cada pixel (cada quadradinho da tabela) para criar a ilusão de uma imagem montada pelo contraste das cores. Logicamente, quanto maior a tabela, melhor será a definição da figura montada.
Quando a resolução é baixa, é possível notar a montagem. Daí se diz que a imagem ficou pixerizada.

Da mesma forma são formadas a imagem dos textos. A letra (fonte) é montada também em pixels.

O tamanho da fonte dos principais programas digitais são previamente configurados em pixels, inclusive os navegadores de internet. Se você abrir as configurações avançadas do Google Chrome (computadores), na guia Conteúdo da Web, verá que o tamanho da Fonte padrão é de 16px — ou seja, 16 pixels de altura.
Se, ao escrever uma página de internet, você não atribuir uma configuração diferente para o tamanho da fonte, o browser vai exibir o texto com a fonte padrão (16px). Por conseguinte, se o usuário alterar o tamanho da fonte padrão no navegador, então este modifica o tamanho da fonte das páginas sem pré-formatação. Essa mudança pode deformar o layout do site. Por isso, é importante sempre especificar o font-size, que, para tal, basta escrever o seguinte script:

body{
    font-size: 25px;
}

Padrão EM

Um padrão que ganha adeptos diariamente é o EM, baseado na porcentagem do tamanho da letra M normal (16px). Assim, 1em equivale a 16 pontinhos.
Funciona assim: você atribui um valor em pixel para a fonte padrão do site (por exemplo, 16px mesmo) e estiliza outras classes (título, subtítulo, parágrafo etc.) com tamanhos relativos.
Digamos que o parágrafo deva ter o tamanho padrão (16px), basta então atribuir 1em para ele — o que equivaleria a 100% do padrão.

.paragrafo{
    font-size: 1em;
}

Agora vamos pensar que queira criar uma classe para um título que deva ficar enorme, quem sabe o dobro do tamanho da fonte do parágrafo. Logo, 2 x 16px = 32px ou 2 x 1em = 2em — o que equivaleria a 200% do padrão.

.titulo{
    font-size: 2em;
}

E além dessas classes, vamos dizer que queira criar outra para subtítulo, que deva ser um pouco maior que o parágrafo e um pouco menor que o título, combinemos então 24px: então vamos calcular 24 ÷ 16 = 1.5em — o que equivaleria a 150% do padrão (lembre-se que na contagem em inglês, a vírgula é substituída pelo ponto para separar as frações).

.titulo{
    font-size: 1.5em;
}

Digamos ainda que queira formatar uma classe com um texto menor para legendas de fotos, equivalente a 12px. Assim, vamos calcular 12 ÷ 16 = 0.75em — o que equivaleria a 75% do padrão.

Dessa maneira então, você faz o cálculo e vai atribuindo as porcentagens nas classes do seu site.

Mas há alguma vantagem de usar EM ao invés de usar diretamente Pixel?

Sim!

É que se você formatar todas as classes em EM e depois o padrão for alterado (e os diversos tipos de dispositivos de navegação fazem isso), tudo vai se arranjar muito bem, porque as suas formatações estarão em acordo com a porcentagem do padrão e não com valores específicos.

E tem mais: caso queira você mesmo alterar o padrão, basta atribuir um valor a classe principal body, em porcentagem.

body{
    font-size: 120%;
}

No exemplo acima, atribuímos o tamanho da fonte para 120%, o que equivale a mais ou menos 19px, pois 120% de 16 é 19,2.

Padrão REM

A questão é que, a porcentagem de um elemento sempre fica sujeito ao cálculo do elemento onde está inserido — por exemplo, o parágrafo dentro da div pai. Assim, o cálculo das porcentagens segue uma hierarquia e não diretamente do padrão raiz da página, que é a body.

Para resolver isso, convencionou-se criar o padrão REM, em que R vem de root (raiz).

Portanto, a estilização uniforme fica assim:

body{
    font-size: 120%;
}
.paragrafo{
    font-size: 1rem;
}
.titulo{
    font-size: 2rem;
}
.subtitulo{
    font-size: 1.5rem;
}

Para prevenir que um dispositivo não possa compreender o padrão REM (e as versões antigas dos browsers não o reconhecem mesmo), por via das dúvidas, você pode atribuir um valor em Pixels antes de cada formatação em REM. Veja:

body{
    font-size: 100%;
}
.paragrafo{
    font-size: 16px;
    font-size: 1rem;
}
.titulo{
    font-size: 32px;
    font-size: 2rem;
}
.subtitulo{
    font-size: 24px;
    font-size: 1.5rem;
}

Agora é só gastar a criatividade nos scripts!