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?

Senhas

Digitar senhas em computadores de uso coletivo é extremamente perigoso, pois além de softwares de monitoramento, existem dispositivos de hardware que podem capturar suas senhas. Evite ao máximo acessar sites de bancos a partir destes computadores. Veja mais aqui.

Muitos aplicativos

Instalar vários aplicativos com o mesmo propósito, como editores de texto, reprodutores de músicas ou vídeos e até programas antívirus sobrecarregam o seu sistema operacional e ainda ocupam espaço desnecessário em seu HD. Tenha apenas um bom programa para cada função.

Mega Man

A primeira versão do clássico Mega Man, para Nintendo 8 bits, tem seu recorde de pontos estabelecido em 03/11/2006, por David Archey, que cravou 2.396.700 pontos, terminando o jogo.

Final Fantasy

O famoso título Final Fantasy, da Square Enix, tem este nome exatamente porque se tratava da última esperança da empresa, que estava à beira da falência quando o lançou. Clique aqui e conheça detalhes dessa história.

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.