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?

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!

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.

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.

Mortal Kombat - O Filme

O filme Mortal Kombat, inspirado no jogo de mesmo nome, faturou 23 milhões de dólares apenas no fim de semana de estreia nos EUA. Ainda sobre este título de sucesso, outra cifra que impressiona é o faturamento ao longo do primeiro ano: 1 bilhão de dólares no mundo todo.

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.