Como usar tipografia de forma eficiente no css
Bem-vindo(a) ao post no blog.
Nesse Post você vai aprender a usar tipografia, aplicar fontes externas (Google Fonts); Trabalhar com cores, gradientes e transparências; Manipular fundos com imagens e múltiplas camadas e criar uma página visual elegante e equilibrada.
🧠 O Poder da Tipografia no CSS
A tipografia é responsável por 90% da experiência visual de um site.
É ela que define a identidade visual, a legibilidade e o estilo.
Imagine o CSS como a "voz" do seu conteúdo. Uma escolha errada de fonte ou espaçamento, e a mensagem perde força.
🧩 As principais propriedades tipográficas: Propriedade Função
font-family → Define a fonte usada
font-size → Tamanho da fonte
font-weight → Espessura da fonte (normal, bold, 300, 700 etc.)
font-style → Define estilos como itálico
text-transform → Transforma texto (uppercase, lowercase, capitalize)
text-decoration → Sublinhado, linha sobre o texto etc.
line-height → Altura da linha (espaçamento vertical entre linhas)
letter-spacing → Espaçamento entre letras
word-spacing → Espaçamento entre palavras
text-shadow → Cria sombras no texto
🎨 Exemplo de uso:
h1 {
font-family: 'Segoe UI', Arial, sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
💬 Isso cria um título elegante, com letras maiúsculas e uma leve sombra que dá profundidade visual.
🔤 Usando Fontes Personalizadas
Nem todas as fontes estão instaladas no computador do usuário.
Por isso, usamos fontes web, que vêm de servidores da internet — geralmente do Google Fonts.
Exemplo:
No seu index.html:
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
No style.css:
body {
font-family: 'Poppins', sans-serif;
}
💡 Usar Google Fonts é gratuito, rápido e personaliza o design de forma profissional.
🎨 Cores no CSS
O CSS permite trabalhar com cores em diferentes formatos.
Você já viu hex e rgb, mas agora vamos detalhar:
🔹 Formatos de cores: Tipo Exemplo
Nomeado → red, blue, green
Hexadecimal → #ff0000
RGB → rgb(255, 0, 0)
RGBA (com transparência) → rgba(255, 0, 0, 0.5)
HSL → hsl(0, 100%, 50%) (Hue, Saturation, Lightness)
🔸 Dica profissional — Cores suaves e modernas
Use tonalidades neutras com cores vibrantes de destaque, por exemplo:
body {
background-color: #f7f9fb;
color: #333;
}
a {
color: #0a84ff;
}
💙 Tente evitar o preto puro (#000000) e o branco puro (#ffffff) — tons cinzas suaves e brancos quebrados tornam a leitura mais agradável.
🌈 Gradientes (Degradê)
Gradientes são transições suaves entre duas ou mais cores.
Existem lineares e radiais.
Exemplo linear:
body {
background: linear-gradient(135deg, #6a11cb, #2575fc);
}
Exemplo radial:
div {
background: radial-gradient(circle, #ff758c, #ff7eb3);
}
💡 Você pode usar o gradiente como fundo de qualquer elemento — inclusive botões!
🖼️ Fundos Avançados com background
O CSS permite misturar imagens, gradientes e cores em camadas de fundo.
🔹 Fundamento:
body {
background-image: url('fundo.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
Explicando:
● no-repeat: evita repetição da imagem
● cover: cobre todo o espaço visível (sem distorcer)
● center: centraliza o ponto focal da imagem
🔸 Múltiplos Fundos
Podemos combinar várias camadas:
body {
background:
linear-gradient(135deg, rgba(0,0,0,0.6), rgba(255,255,255,0.2)),
url('imagem.jpg') center/cover no-repeat;
}
💡 O gradiente fica por cima da imagem, criando um efeito de sobreposição elegante (muito usado em hero sections e landing pages).
🔸 Fundos Fixos (Parallax básico)
section {
background-image: url('paisagem.jpg');
background-attachment: fixed;
background-size: cover;
background-position: center;
}
👉 Isso faz o fundo ficar fixo durante o scroll, criando um efeito moderno de parallax simples.
💡 Texturas, Transparência e Overlays
Você pode combinar transparências (rgba) com camadas de cor e imagem para criar contraste.
.banner {
background-image:
linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
url('banner.jpg');
background-size: cover;
background-position: center;
color: #fff;
}
O gradiente preto semi-transparente escurece a imagem e melhora a leitura do texto em cima — uma técnica de design muito usada.
📘 Para um melhor Aprendizado 🎯 Pratique com exercícios, desafios e projetos
🧩 Projeto Prático — Página de Perfil Elegante
Hora de construir algo completo e bonito. 💅
📄 index.html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Perfil Elegante</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="perfil">
<div class="foto"></div>
<h1>Mariana Duarte</h1>
<p class="cargo">Designer UX/UI ✨</p>
<p class="bio">Apaixonada por design centrado no usuário e interfaces que contam histórias.</p>
<button>Ver Portfólio</button>
</section>
</body>
</html>
📄 style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #74ABE2, #5563DE);
color: #333;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.perfil {
background: linear-gradient(rgba(255,255,255,0.95), rgba(255,255,255,0.9));
padding: 40px;
border-radius: 16px;
text-align: center;
width: 320px;
box-shadow: 0 6px 24px rgba(0,0,0,0.2);
}
.foto {
background-image: url('foto.jpg');
background-size: cover;
background-position: center;
width: 120px;
height: 120px;
border-radius: 50%;
margin: 0 auto 20px auto;
border: 4px solid #0077ff;
}
h1 {
color: #0077ff;
font-size: 24px;
font-weight: 600;
margin-bottom: 5px;
}
.cargo {
font-size: 14px;
color: #666;
margin-bottom: 15px;
}
.bio {
font-size: 14px;
color: #444;
line-height: 1.5;
margin-bottom: 25px;
}
button {
background: linear-gradient(135deg, #0077ff, #00b4ff);
color: white;
border: none;
padding: 10px 24px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: transform .2s ease, background .3s ease;
}
button:hover {
transform: scale(1.05);
background: linear-gradient(135deg, #005fd4, #0099dd);
}
💎 Resultado:
Um cartão de perfil com:
● Tipografia moderna, leve e equilibrada;
● Fundo em degradê elegante;
● Foto circular com borda colorida;
● Botão degradê com transição suave.
Um layout visualmente harmônico e refinado — ideal para portfólios e perfis profissionais.
Comentários
Postar um comentário