A escolha de fontes é uma das partes mais importantes do design de um site. As fontes podem transmitir a personalidade da marca, melhorar a legibilidade e criar uma experiência visual única para o usuário. Você tem o poder de customizar fontes em CSS de várias maneiras, desde o tipo de fonte até o espaçamento e estilo. Vamos explorar como trabalhar com fontes em CSS de forma eficiente e criativa.
Como definir fontes no CSS
A propriedade básica para definir fontes em CSS é o font-family. Esta propriedade permite que você escolha uma fonte específica para seus textos. Geralmente, você fornece uma lista de fontes como “fallback”, no caso de o navegador não conseguir carregar a primeira opção.
body {
font-family: 'Arial', 'Helvetica', sans-serif;
}Aqui estamos definindo que, se “Arial” não estiver disponível, o navegador tentará usar “Helvetica”. Se ambas não estiverem disponíveis, ele usará uma fonte genérica sans-serif.
Fontes seguras para a web
Existem algumas fontes que são consideradas “seguras para a web”, ou seja, elas estão disponíveis na maioria dos sistemas operacionais e navegadores. Alguns exemplos incluem:
- Arial
- Verdana
- Times New Roman
- Georgia
- Courier New
Essas fontes são ótimas para garantir que seu site seja exibido corretamente em diferentes dispositivos.
Fontes personalizadas com @font-face
Se você quiser usar uma fonte diferente das disponíveis nos sistemas operacionais, pode carregar fontes personalizadas com a regra @font-face. Com essa técnica, você pode incorporar fontes diretamente no seu site.
Aqui está um exemplo de como usar o @font-face:
@font-face {
font-family: 'MinhaFontePersonalizada';
src: url('fonts/minha-fonte.woff2') format('woff2'),
url('fonts/minha-fonte.woff') format('woff');
}
body {
font-family: 'MinhaFontePersonalizada', sans-serif;
}Com essa regra, você pode carregar arquivos de fontes diretamente no seu site, garantindo que o design seja exibido conforme planejado, mesmo que o usuário não tenha a fonte instalada localmente.
Usando fontes do Google fonts
Outra maneira fácil de usar fontes personalizadas é através do Google Fonts, um serviço gratuito que hospeda uma vasta coleção de fontes que você pode incorporar ao seu site com apenas uma linha de código.
Para usar uma fonte do Google Fonts, basta acessar Google Fonts, escolher a fonte desejada, e copiar o link fornecido. Por exemplo:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">Depois, no seu CSS, você pode usar a fonte assim:
body {
font-family: 'Roboto', sans-serif;
}Estilos de fontes no CSS
Além de escolher a família da fonte, você pode personalizar outros aspectos com propriedades específicas do CSS:
- font-size: Define o tamanho da fonte.
h1 {
font-size: 2em;
}font-weight: Define a espessura da fonte (ex: normal, bold, 100, 200, 300…).
p {
font-weight: bold;
}font-style: Define se a fonte será normal, itálica ou oblíqua.
em {
font-style: italic;
}line-height: Define o espaçamento vertical entre as linhas de texto.
p {
line-height: 1.5;
}letter-spacing: Ajusta o espaçamento entre as letras.
h1 {
letter-spacing: 0.1em;
}Fontes responsivas
Para tornar suas fontes mais responsivas e escaláveis em diferentes tamanhos de tela, você pode usar unidades relativas como em, rem, ou vw (viewport width). Isso garante que as fontes se ajustem automaticamente com base no tamanho da janela do navegador.
body {
font-size: 1.2rem; /* Tamanho relativo à fonte do root (<html>) */
}Dicas para escolher fontes
- Considere a legibilidade: Fontes limpas e de fácil leitura são essenciais, especialmente em textos longos;
- Equilíbrio visual: Combine fontes serifadas e sans-serif para criar contraste e harmonia;
- Use no máximo duas ou três fontes: Misturar muitas fontes pode tornar o design confuso. Tente manter o uso de fontes simples e consistente.
Dominar o uso de fontes em CSS é muito importante para criar um site atraente e legível. Desde a escolha da família de fontes até os ajustes de espaçamento e tamanho, há muitas maneiras de usar as fontes para melhorar a experiência do usuário e a estética geral do seu design.
Aprenda através de projetos reais e aulas práticas. São 20 cursos completos + cursos bônus. Grupos privados exclusivos, atualizações constantes e lives semanais.
Python, PHP, Java Script, CSS, Node, Angular JS, MySQL, Photoshop, Flutter, AWS, Apache e muito mais!
CLIQUE NA IMAGEM ABAIXO E CONFIRA MAIS DETALHES:
Dúvidas ou sugestões sobre fontes em CSS? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits
Quer receber GRÁTIS o e-book "Como Formatar um Computador em 5 Minutos"?
Artigos Relacionados
Sobre o Autor
Bacharel em Sistemas de Informação pelo Instituto Paulista de Pesquisa e Ensino IPEP. Apaixonado por tecnologias e games do tempo da vovó!
0 Comentários