A Arte da Tipografia Web: Deixe seu Site Bonito com Fontes e Cores

 Olá, equipa! Sejam bem-vindos de volta ao nosso laboratório de código.

Até agora, focámo-nos muito na estrutura e na organização das "caixas" do nosso site. Mas um bom design não é feito só de caixas e layouts. As letras, as cores e o espaçamento do texto são a alma de um site. Um texto bem trabalhado pode tornar a leitura agradável e prender a atenção do visitante. Um texto mal formatado pode fazer o melhor conteúdo do mundo parecer amador.

Hoje, vamos aprender a arte da tipografia web. Vamos deixar de usar as fontes padrão e aborrecidas do sistema e aprender a usar qualquer fonte da internet com o Google Fonts, além de dominar as propriedades CSS para estilizar os nossos textos como verdadeiros profissionais.

Parte 1: A Escolha da Fonte - Apresentando o Google Fonts

O Google Fonts é uma biblioteca gigantesca com centenas de fontes de alta qualidade, gratuitas e otimizadas para usar na web. É a ferramenta número um de qualquer web designer.

Vamos escolher e instalar a nossa primeira fonte personalizada:

  1. Abre uma nova aba no teu navegador e vai para https://fonts.google.com/.

  2. Vais ver um catálogo enorme. Para começar, recomendo duas fontes muito populares e legíveis: Roboto e Montserrat. Pesquisa por "Roboto" na barra de pesquisa.

  3. Clica no resultado da fonte. Agora, seleciona os "estilos" que queres usar. Recomendo escolher Regular 400 e Bold 700. Clica no sinal de + ao lado de cada um. `

4. No menu lateral direito que aparece, o Google vai dar-te o código para usar. Na secção "Use on the web", copia o código que está dentro da tag<link>.

5. Agora, vai ao teu ficheiro **index.html** (e aos outros, sobre.html, etc.) no VS Code e cola estas linhas dentro da tag <head>, de preferência antes do teu link para o estilos.css. 6. De volta ao site do Google Fonts, um pouco mais abaixo, ele dá-te a regra de CSS para aplicar a fonte. É algo como: font-family: 'Roboto', sans-serif;`.

Parte 2: Propriedades Essenciais de Estilo de Texto

Agora que temos a nossa fonte, vamos ao nosso ficheiro estilos.css para a aplicar e dominar outras propriedades.

CSS
body {
  font-family: 'Roboto', sans-serif; /* A nossa nova fonte! */
  font-size: 16px; /* Tamanho base do texto */
  line-height: 1.6; /* Espaço entre as linhas de texto. Essencial para leitura! */
  color: #333333; /* Uma cor de texto escura, mas não preto puro */
  background-color: #f0f2f5;
}

h1, h2 {
  font-family: 'Montserrat', sans-serif; /* Podemos usar outra fonte para os títulos! */
  font-weight: 700; /* Texto a negrito (bold) */
  color: #0056b3; /* Um azul mais escuro e profissional */
}

/* ... resto do css ... */

(Nota: Para usar a Montserrat nos títulos, terias que adicioná-la também no Google Fonts, tal como fizemos com a Roboto).

Outras propriedades úteis:

  • text-align: Alinha o texto. Valores: left, right, center, justify.

  • text-decoration: none;: Usamos isto nos nossos links (nav li a) para remover o sublinhado padrão.

Conclusão

Que diferença! Com apenas algumas linhas de código, o nosso site passou de genérico a elegante. Hoje aprendeste como controlar um dos aspetos mais importantes do design de um site: a forma como o texto se parece e se sente.

Lembrete: Usar o Google Fonts para escolher fontes bonitas e legíveis e depois usar as propriedades CSS como font-size e line-height para garantir uma boa experiência de leitura.

O nosso site está cada vez mais bonito! Mas os nossos elementos ainda se comportam de forma muito básica, um em cima do outro. Na próxima aula, vamos entrar no mundo dos layouts modernos e aprender a ferramenta mais poderosa para alinhar elementos lado a lado: o Flexbox! Prepara-te para a revolução.

Comentários

Enviar um comentário

Mensagens populares deste blogue

O Box Model do CSS: O Guia Definitivo de Margin, Border e Padding

 Olá, equipa! Preparados para desvendar um dos maiores segredos do CSS? Tudo o que vemos numa página web — um parágrafo, uma imagem, um título — é, para o navegador, uma caixa retangular . Entender como essa caixa funciona, como podemos controlar o seu tamanho e o espaço à sua volta, é o segredo para controlar o layout de qualquer site. Hoje, vamos desvendar o famoso (e por vezes temido) Box Model do CSS . Prometo que, no final desta aula, vais dominar os conceitos de margin , border e padding de uma vez por todas. Os 4 Componentes da Caixa Imaginem um quadro com uma fotografia na parede. O Box Model funciona exatamente da mesma forma. ` ` Content (Conteúdo): É a fotografia em si. O teu texto, a tua imagem. Padding (Preenchimento): É o espaço em branco (passe-partout) entre a fotografia e a moldura. É o espaço interno da caixa. Border (Borda): É a moldura do quadro. A linha que fica à volta do conteúdo e do padding. Margin (Margem): É o espaço vazio na parede à volta do qua...
Ler mais

Formulários Bonitos com CSS: O Guia para Estilizar Inputs

 Olá, equipa! Na aula passada, construímos a estrutura do nosso formulário de contato. Ele funciona, mas sejamos honestos: é feio. Ninguém se sente inspirado a preencher um formulário com a aparência dos anos 90. A boa notícia é que não precisa de ser assim. Hoje, vamos pegar nesse esqueleto HTML e vesti-lo com o poder do CSS. Vou mostrar-vos como estilizar cada parte do nosso formulário — os campos de texto, as etiquetas e os botões — para que ele fique limpo, moderno e convidativo. Parte 1: A Estrutura Base e o Espaçamento Primeiro, vamos dar ao nosso formulário um contentor e algum espaço para respirar. No nosso estilos.css , vamos adicionar o seguinte: CSS form { max-width : 600px ; /* O formulário não ficará demasiado largo em ecrãs grandes */ margin : 40px auto; /* Centra o formulário na página com margem em cima/baixo */ padding : 20px ; background-color : #ffffff ; border-radius : 8px ; box-shadow : 0 4px 8px rgba ( 0 , 0 , 0 , 0.1 ); } form ...
Ler mais

Crie sua Primeira Página Web em 30 Minutos Usando Apenas HTML e CSS

 Olá e bem-vindo ao Código do Zero MZ ! Sempre teve curiosidade em saber como os websites são feitos? Parece magia, mas garanto que não é. Hoje, juntos, vamos desvendar o primeiro segredo da internet. Neste guia passo a passo, vamos criar a sua PRIMEIRA página web do absoluto zero. E o melhor de tudo? Faremos isso em menos de 30 minutos, usando apenas ferramentas que você já tem no seu computador. Pronto para se tornar um criador da web? Vamos a isso! O Que Você Vai Precisar? Não se preocupe, a lista é muito curta: Um computador ( Windows , Mac ou Linux ). Um editor de texto simples. Vamos usar o Bloco de Notas (Notepad) que já vem instalado no Windows. Um navegador de internet como o Google Chrome ou Firefox . É só isso! Não precisa instalar nada. Parte 1: O Esqueleto da Página (HTML) Toda página web precisa de uma estrutura, um esqueleto. Essa linguagem de estruturação chama-se HTML ( HyperText Markup Language ). Passo 1: Criar o nosso ficheiro Abra o Bloco de Notas no s...
Ler mais