Estilize Texto com CSS: Fontes, Tamanhos e Estilos para Web

Introdução

Neste laboratório, os alunos aprenderão a estilizar texto usando as propriedades de fonte CSS, explorando técnicas fundamentais de tipografia em design web. O tutorial abrangente guia os alunos através da criação de um documento HTML e da aplicação de vários métodos de estilização de fonte, incluindo família de fontes (font family), tamanho (size), altura da linha (line height), estilo (style) e espessura (weight).

Os participantes começarão configurando uma estrutura HTML básica e, em seguida, aprimorarão progressivamente suas habilidades de tipografia implementando propriedades CSS que controlam a aparência do texto. Através da prática, os alunos descobrirão como criar conteúdo web visualmente atraente e legível usando diferentes técnicas de fonte, ganhando experiência prática em design de tipografia web.

Crie o Arquivo HTML e Configure a Estrutura Básica

Nesta etapa, você aprenderá como criar um arquivo HTML e configurar sua estrutura básica para estilizar texto com CSS. Usaremos o WebIDE para criar um novo documento HTML que servirá como base para o nosso exercício de estilização de tipografia.

Primeiro, navegue até o diretório ~/project no WebIDE. Crie um novo arquivo chamado typography.html clicando com o botão direito no explorador de arquivos e selecionando "New File" (Novo Arquivo).

Aqui está a estrutura HTML básica que você criará:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Typography Styling</title>
    <style>
      /* Adicionaremos nossos estilos CSS aqui em etapas posteriores */
    </style>
  </head>
  <body>
    <h1>Welcome to CSS Typography</h1>
    <p>This paragraph will demonstrate various text styling techniques.</p>
  </body>
</html>

Vamos detalhar os componentes-chave desta estrutura HTML:

<!DOCTYPE html> declara este como um documento HTML5
<html lang="en"> define o idioma do documento
<head> contém metadados sobre o documento
<meta charset="UTF-8"> garante a codificação de caracteres adequada
<meta name="viewport"> ajuda com o design responsivo
<title> define o título da página
<style> tag é onde adicionaremos nosso CSS (expandiremos isso em etapas posteriores)
<body> contém o conteúdo visível da página

Exemplo de saída quando você abre este arquivo em um navegador:

[Uma página simples com um título "Welcome to CSS Typography"
e um parágrafo abaixo dele]

Aplique a Família de Fontes aos Títulos

Nesta etapa, você aprenderá como aplicar diferentes famílias de fontes aos títulos usando CSS. A família de fontes (font family) é uma propriedade crucial que determina a tipografia do texto, permitindo que você crie tipografias visualmente atraentes e legíveis.

Abra o arquivo typography.html no WebIDE e modifique a seção <style> para adicionar propriedades de família de fontes:

<style>
  h1 {
    font-family: Arial, sans-serif;
  }

  h2 {
    font-family: "Times New Roman", serif;
  }

  p {
    font-family: Verdana, sans-serif;
  }
</style>

Vamos explorar os conceitos-chave da família de fontes:

Fontes Web Seguras (Web Safe Fonts): Estas são fontes que estão comumente disponíveis em diferentes dispositivos e navegadores.
- Fontes Sans-serif (como Arial): Aparência limpa e moderna
- Fontes Serif (como Times New Roman): Aparência tradicional e formal
Fontes de Reserva (Fallback Fonts): Sempre forneça uma família de fontes genérica como backup
- sans-serif
- serif
- monospace
Múltiplas Opções de Fonte: Liste as fontes em ordem de preferência
- A primeira fonte é a escolha primária
- As fontes subsequentes são reservas se as fontes anteriores não estiverem disponíveis

Expanda seu HTML para demonstrar diferentes títulos:

<body>
  <h1>Main Heading (Arial)</h1>
  <h2>Subheading (Times New Roman)</h2>
  <p>Paragraph text in Verdana</p>
</body>

Exemplo de saída em um navegador:

[Uma página mostrando:
- Título Principal em Arial
- Subtítulo em Times New Roman
- Parágrafo em Verdana]

Defina o Tamanho da Fonte e a Altura da Linha

Nesta etapa, você aprenderá como controlar a legibilidade e a aparência do texto definindo o tamanho da fonte e a altura da linha usando CSS. Essas propriedades são cruciais para criar tipografias visualmente atraentes e fáceis de ler.

Abra o arquivo typography.html e atualize a seção <style> com o seguinte CSS:

<style>
  h1 {
    font-family: Arial, sans-serif;
    font-size: 36px;
    line-height: 1.5;
  }

  h2 {
    font-family: "Times New Roman", serif;
    font-size: 24px;
    line-height: 1.4;
  }

  p {
    font-family: Verdana, sans-serif;
    font-size: 16px;
    line-height: 1.6;
  }
</style>

Vamos detalhar os conceitos-chave:

Tamanho da Fonte (Font Size):
- Medido em pixels (px), em, ou rem
- Controla a altura do texto
- Tamanhos típicos:
  - Títulos: 24-36px
  - Texto do corpo: 14-16px
Altura da Linha (Line Height):
- Controla o espaço vertical entre as linhas de texto
- Melhora a legibilidade
- Normalmente definido entre 1.4 e 1.6
- Pode ser sem unidade (recomendado) ou em pixels

Expanda seu HTML para demonstrar diferentes tamanhos de texto:

<body>
  <h1>Main Heading (36px)</h1>
  <h2>Subheading (24px)</h2>
  <p>Paragraph text with increased line height for better readability.</p>
</body>

Exemplo de saída em um navegador:

[Uma página mostrando:
- Título principal grande
- Subtítulo menor
- Parágrafo com espaçamento de linha confortável]

Adicione Estilo e Espessura da Fonte

Nesta etapa, você aprenderá como usar o estilo e a espessura da fonte para adicionar ênfase e variedade ao seu texto usando CSS. Essas propriedades ajudam a criar hierarquia visual e melhorar o design geral da sua tipografia.

Abra o arquivo typography.html e atualize a seção <style> com o seguinte CSS:

<style>
  h1 {
    font-family: Arial, sans-serif;
    font-size: 36px;
    font-style: italic;
    font-weight: bold;
  }

  h2 {
    font-family: "Times New Roman", serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
  }

  p {
    font-family: Verdana, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
  }

  .highlight {
    font-style: italic;
    font-weight: bold;
  }
</style>

Vamos explorar os conceitos-chave:

Estilo da Fonte (Font Style):
- normal: Aparência de texto padrão
- italic: Texto inclinado
- oblique: Semelhante ao itálico, mas menos comum
Espessura da Fonte (Font Weight):
- normal: Texto regular (400)
- bold: Texto mais espesso e proeminente (700)
- Valores numéricos: 100-900 (incrementos de 100)
  - 400: Normal
  - 600: Semi-bold
  - 700: Bold

Modifique seu HTML para demonstrar essas propriedades:

<body>
  <h1>Main Heading (Italic and Bold)</h1>
  <h2>Subheading (Semi-Bold)</h2>
  <p>
    Regular paragraph text.
    <span class="highlight">This text is highlighted</span>.
  </p>
</body>

Exemplo de saída em um navegador:

[Uma página mostrando:
- Título principal em itálico e negrito
- Subtítulo em semi-negrito
- Parágrafo com um span destacado]

Combine Propriedades de Fonte Usando Shorthand

Nesta etapa, você aprenderá como usar a propriedade shorthand font do CSS para combinar múltiplas propriedades relacionadas à fonte em uma única declaração concisa. Essa abordagem torna seu CSS mais legível e eficiente.

Abra o arquivo typography.html e atualize a seção <style> com o seguinte CSS:

<style>
  h1 {
    font:
      bold italic 36px Arial,
      sans-serif;
  }

  h2 {
    font:
      600 24px "Times New Roman",
      serif;
  }

  p {
    font:
      normal 16px/1.6 Verdana,
      sans-serif;
  }

  .highlight {
    font:
      bold italic 16px Verdana,
      sans-serif;
  }
</style>

Vamos detalhar a sintaxe da propriedade shorthand font:

Sintaxe Básica: font: [font-style] [font-weight] [font-size] [line-height] [font-family]
- A ordem importa!
- Nem todos os valores são obrigatórios
Padrões Comuns de Shorthand:
- font: style weight size family
- font: size/line-height family
- font: weight size family

Modifique seu HTML para demonstrar as propriedades shorthand:

<body>
  <h1>Main Heading (Shorthand)</h1>
  <h2>Subheading (Compact Syntax)</h2>
  <p>
    Paragraph with line height. <span class="highlight">Highlighted text</span>.
  </p>
</body>

Exemplo de saída em um navegador:

[Uma página mostrando:
- Título principal com estilo negrito e itálico
- Subtítulo com declaração de fonte compacta
- Parágrafo com altura de linha integrada]

Resumo

Neste laboratório, os participantes aprendem os fundamentos da estilização de texto usando as propriedades de fonte CSS através de uma abordagem passo a passo. A fase inicial envolve a criação de um arquivo HTML com uma estrutura básica, a configuração de metadados essenciais e a preparação de uma tela para experimentação tipográfica. Os alunos são introduzidos a elementos e atributos HTML-chave, incluindo a declaração DOCTYPE, configurações de idioma e configuração da viewport.

O laboratório progride para técnicas práticas de estilização CSS, com foco na manipulação de fontes. Os participantes exploram métodos para aplicar famílias de fontes a títulos, ajustar tamanhos de fonte e alturas de linha, e modificar estilos e espessuras de fonte. Ao trabalhar diretamente no WebIDE e construir incrementalmente seu código HTML e CSS, os alunos ganham experiência prática na transformação da aparência do texto e na compreensão de como diferentes propriedades de fonte contribuem para uma tipografia web eficaz.

Estilize Texto com Propriedades de Fonte CSS

Introdução

Crie o Arquivo HTML e Configure a Estrutura Básica

Aplique a Família de Fontes aos Títulos

Defina o Tamanho da Fonte e a Altura da Linha

Adicione Estilo e Espessura da Fonte

Combine Propriedades de Fonte Usando Shorthand

Resumo