📘 Aula 11 MD-2: Tamanho de Fonte e Medida em CSS 📘
Introdução
A propriedade font-size controla o tamanho do texto em CSS. As unidades usadas definem como esse tamanho é interpretado — se fixo (absoluto) ou relativo (dinâmico).
Medidas absolutas
-
cm — centímetros.
-
mm — milímetros.
-
in — polegadas.
-
px — pixels.
-
pt — pontos tipográficos.
-
pc — picas.
Dica: para web, use px. As demais são mais adequadas para impressão.
Medidas relativas
-
em — relativo ao tamanho do pai.
-
rem — relativo ao tamanho da raiz (
html). -
ex — relativo à altura-x da fonte.
-
% — percentual do pai.
-
vw — 1% da largura da viewport.
-
vh — 1% da altura da viewport.
Dica: prefira rem e em para textos acessíveis.
Comparação visual
14px
1rem (≈16px)
1.5em (≈24px se pai for 16px)
3vw (varia com largura da tela)
Tabela comparativa de unidades
Abaixo uma tabela comparativa resumida para consulta e impressão:
| Unidade | Tipo | Descrição | Uso recomendado |
|---|---|---|---|
| px | Absoluta | Pixels fixos de tela | UI, elementos precisos |
| cm / mm / in | Absoluta | Medidas físicas | Impressão |
| pt / pc | Absoluta | Pontos tipográficos / picas | Editoração impressa |
| em | Relativa | Relativo ao pai | Componentes escaláveis |
| rem | Relativa | Relativo ao html | Tipografia global |
| % | Relativa | Percentual do pai | Layouts fluídos |
| vw / vh | Relativa | 1% da viewport | Títulos responsivos |
O que é o pai?
Em CSS, o “pai” de um elemento é o contêiner ou bloco que envolve esse elemento diretamente. As propriedades relativas, como em ou %, dependem do tamanho ou estilo definido no elemento pai. Por exemplo, se um parágrafo está dentro de uma <div> com font-size: 20px, um texto definido com 1em dentro desse parágrafo terá exatamente 20px, pois está tomando como referência o tamanho do pai.
Entender o conceito de pai é essencial para controlar corretamente unidades relativas e criar layouts escaláveis e consistentes.
Painel interativo: veja unidades em tempo real
Redimensione a janela e observe como os valores de rem,
em e vw se comportam.
Modo Real
Largura da viewport: px
1rem: px
1em (pai 120%): px
5vw: px
Modo Simulado
Largura da viewport: px
1rem: px
1em (pai 120%): px
5vw: px
Talvez o redimensionamento em dispositivos moveis não seja visto a diferença no painel interativo acima.
Boas práticas
Prefira rem para escalas globais e em para componentes. Use px quando precisar de precisão. Evite cm/mm/in em web.
Quando evitar
Evite cm/mm/in em telas, ex pela inconsistência, e vw para textos longos.
Resumo
-
px — fixo e previsível.
-
rem/em — recomendados para acessibilidade.
-
vw/vh — bom para títulos, use com cuidado.