Tipografia é a forma como o texto aparece e se comporta visualmente. No CSS, ela influencia diretamente a legibilidade, a estética e a experiência do usuário.

Nesta aula, você vai aprender os principais controles tipográficos do CSS e como usá-los com bom senso.

A propriedade font-family

A propriedade font-family define a fonte do texto. 

 body { font-family: Arial, Helvetica, sans-serif; }

É comum definir uma lista de fontes, caso a primeira não esteja disponível, o navegador tentará carregar as seguintes, da esquerda para a direita.

Sempre termine a lista com uma família genérica, como sans-serif.

Fontes serifadas e sem serifa

Existem dois grupos principais de fontes:

  • Serifadas — possuem pequenos “detalhes” nas letras
  • Sem serifa — letras mais limpas e modernas

Na web, fontes sem serifa são mais comuns por serem mais legíveis em telas.

Tamanho do texto com font-size

A propriedade font-size define o tamanho da fonte. 

 p { font-size: 16px; }

Unidades comuns:

  • px — tamanho fixo
  • rem — relativo ao tamanho base do documento
  • em — relativo ao elemento pai
rem é a unidade mais usada em projetos modernos.

Por que rem é a unidade mais usada em projetos modernos?

No CSS, existem várias unidades para definir tamanhos de fonte, mas nem todas se comportam bem em projetos reais.

Entre elas, o rem se tornou a escolha padrão em projetos modernos — e isso não é por acaso.

O que é rem?

A unidade rem significa root em.

Ela é baseada no tamanho da fonte do elemento raiz da página, normalmente o <html>. 

 html { font-size: 16px; }

Nesse caso:

  • 1rem = 16px
  • 2rem = 32px
  • 0.875rem ≈ 14px

Por que não usar só px?

Pixels são unidades fixas.

Isso significa que:

  • Não respeitam preferências do usuário
  • Dificultam escalabilidade
  • Tornam ajustes globais mais trabalhosos
Interfaces feitas só com px envelhecem mal.

O problema do em

A unidade em também é relativa, mas funciona diferente.

Ela se baseia no tamanho da fonte do elemento pai. 

 .card { font-size: 1.2em; }

.card p {
font-size: 1.2em;
}

Aqui ocorre um efeito cascata:

  • O parágrafo cresce sobre o tamanho da `.card`
  • O cálculo fica menos previsível
em pode ser útil, mas exige mais cuidado.

A grande vantagem do rem

O rem resolve esse problema.

Ele sempre se baseia no mesmo ponto: o tamanho da fonte do <html>. 

 html { font-size: 16px; }

h1 {
font-size: 2rem;
}

p {
font-size: 1rem;
}

.small {
font-size: 0.875rem;
}

Tudo cresce ou diminui de forma previsível.

Escalabilidade e acessibilidade

Usuários podem aumentar o tamanho da fonte no navegador.

Quando você usa rem:

  • O layout se adapta automaticamente
  • O texto continua legível
  • A experiência melhora para todos
rem respeita as configurações do usuário.

Exemplo prático de ajuste global

Imagine um site inteiro feito com rem.

Para aumentar todo o texto, basta mexer no valor do seletor html: 

 html { font-size: 18px; }

Sem mexer em mais nada:

  • Títulos aumentam
  • Parágrafos aumentam
  • Espaçamentos baseados em rem acompanham

Quando usar rem, em e px?

  • rem → tipografia e layout base
  • em → ajustes locais e componentes específicos
  • px → detalhes muito precisos (bordas, ícones)
Nenhuma unidade é “errada”. O erro está em usar sem entender.

Peso da fonte com font-weight

O font-weight controla o “peso” da fonte. É quase como se controlasse o nível de negrito dela. 

 h1 { font-weight: 700; }

Valores comuns:

  • 400 — normal
  • 700 — negrito

Nem toda fonte suporta todos os pesos.

Estilo do texto com font-style

A propriedade font-style define variações como itálico. 

 em { font-style: italic; }
Evite usar itálico em textos longos.

Altura da linha com line-height

O line-height controla o espaçamento entre linhas. 

 p { line-height: 1.6; }

Uma boa altura de linha melhora muito a leitura.

Valores entre 1.4 e 1.8 são comuns para textos longos.

Fontes externas (Google Fonts)

Também é possível usar fontes externas, como as do Google Fonts. 

 <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet"> 
 body { font-family: 'Open Sans', sans-serif; }
Use poucas fontes por projeto para manter consistência.

💾🧠 Resumo da aula para nunca mais esquecer

  • font-family define a fonte do texto
  • font-size controla o tamanho
  • font-weight define o peso
  • line-height melhora a legibilidade
  • Tipografia bem feita melhora a experiência do usuário

Na próxima aula, vamos aprender sobre espaçamento e o box model — como o CSS realmente mede e organiza os elementos 📐✨

HARDWARE

Entendendo o seu computador

O que há dentro do meu computador?

Existem alguns componentes fundamentais presentes dentro do seu computador e é muito importante que você conheça um pouco sobre eles, seja para argumentar com algum vendedor durante a compra de um novo PC ou para identificar alguma atitude desleal de algum técnico que esteja te passando um orçamento para reparo. Na seção Raio-X aqui do Contém Bits você pode conhecer e entender mais detalhadamente sobre cada componente, ou também pode clicar abaixo no componente que deseja, para conhecê-lo melhor.

  • Gabinetes

  • Placas-Mãe

  • Processadores

  • Memória

  • Fontes

  • Drives Ópticos

  • Discos Rígidos

  • SSD

  • Placas de Som

  • Placas de Vídeo

Você Sabia?

Tetris

O título Tetris detém o recorde de jogo mais adaptado de todos os tempos. No total foram mais de 60 plataformas diferentes que receberam alguma versão do quebra-cabeças criado por Alexey Pajitnov. Conheça mais sobre este incrível jogo clicando aqui.

PC com barulho?

Excesso de barulho dentro do seu gabinete, principalmente logo que você o liga, pode ser sintoma de problemas nas ventoinhas, que podem precisar ser limpas ou trocadas. Entre em contato com um técnico de sua confiança e verifique isso o quanto antes.

Final Fantasy X

O jogo Final Fantasy X para o Sony Playstation 2 vendeu, apenas no dia do seu lançamento, 1.455.732 cópias, estabelecendo um recorde de vendagem para as primeiras 24 horas de um game. Méritos da SquareSoft, que desenvolveu um excelente produto!

Galaxy Game

As primeiras máquinas de fliperama do mundo a utilizarem moedas, chamadas de Galaxy Game, custavam mais de 20 mil dólares para serem produzidas. Saiba mais sobre elas aqui.

Inteligência artificial

O primeiro jogo a fazer uso de uma Inteligência Artificial foi o Mouse in the Maze, criado em 1955, na União Soviética. Você pode saber mais sobre ele clicando aqui.