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-serifserifmonospace
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ãoitalic: Texto inclinadooblique: 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 familyfont: size/line-height familyfont: 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.
