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?

Asteroids

O título Asteroids, do Atari, possui recorde de pontuação há 30 anos. Em 1982 um americano chamado Scott Safran atingiu a marca de 41.336.440. Atualmente ele faz parte de um minúsculo grupo de jogadores que conseguiram manter seus recordes por mais de 30 anos.

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.

Nintendo Entertainment System

O console Nintendo Entertainment System (NES), da Nintendo, detém o recorde de videogame mais clonado em todo o mundo. Já foram catalogados mais de 300 aparelhos diferentes capazes de reproduzir seus jogos! Saiba mais sobre ele aqui.

Tomb Raider - O Filme

Considerando todas as adaptações de jogos de videogame para o cinema, a mais bem sucedida foi Lara Croft: Tomb Raider, lançado em 2001 e que faturou 274 milhões de dólares. Ele foi dirigido por Simon West e estrelado pela bela Angelina Jolie.

Tetris

Desde o seu lançamento, em 1985, o fantástico jogo Tetris vende pelo menos 70 milhões de unidades por ano em todo o mundo! Os dados são oficiais e fornecidos pela THQ, uma das distribuidoras do título.