2.1 Propriedade font-family
As fontes são super importantes no web design, influenciando a legibilidade e a aparência visual do texto.
Famílias de fontes definem o estilo geral e as características das fontes que podem ser usadas nas páginas da web.
No CSS, as fontes geralmente são divididas em três famílias principais: serif, sans-serif e monospace. Vamos dar uma olhada em cada uma delas mais de perto.
Propriedade font-family
A propriedade font-family é usada para especificar a família de fontes. Você pode indicar várias fontes,
separando-as por vírgulas, para que o navegador use a próxima fonte da lista se a primeira não estiver disponível.
Exemplo de uso de várias fontes
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
Exemplo de uso:
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
<body>
<p>Este texto é exibido usando as fontes Helvetica Neue, Helvetica ou Arial.</p>
</body>
2.2 Família de fontes serif
As fontes com serifa (serif) são caracterizadas por pequenas linhas ou traços adicionados às extremidades das letras e símbolos.
Essas fontes dão ao texto um visual mais tradicional e formal.
Exemplos de fontes serif:
- Times New Roman
- Georgia
- Garamond
- Baskerville
Exemplo de uso:
body {
font-family: 'Times New Roman', serif;
}
<body>
<h1>This is a heading</h1>
<p>This is a paragraph using a serif font.</p>
</body>
2.3 Família de fontes sans-serif
Fontes sem serifa (sans-serif) não têm pequenas linhas nas extremidades das letras e símbolos. Essas fontes têm uma aparência mais
moderna e minimalista e costumam ser usadas no web design por serem bem legíveis nas telas.
Exemplos de fontes sans-serif:
- Arial
- Helvetica
- Verdana
- Open Sans
body {
font-family: 'Arial', sans-serif;
}
<body>
<h1>This is a heading</h1>
<p>This is a paragraph using a sans-serif font.</p>
</body>
2.4 Família de fontes monospace
Fontes monoespaçadas (monospace) têm a mesma largura para todos os caracteres. Essas fontes são frequentemente
usadas para exibir código, documentação técnica e tabelas, onde é importante que os caracteres estejam alinhados verticalmente.
Exemplos de fontes monospace:
- Courier New
- Consolas
- Monaco
- Lucida Console
Exemplo de uso:
body {
font-family: 'Courier New', monospace;
}
<body>
<h1>This is a heading</h1>
<p>This is a paragraph using a monospace font.</p>
<pre>
function helloWorld() {
console.log("Hello, world!");
}
</pre>
</body>
Para melhorar a percepção e a diversidade estilística nas páginas da web, é comum usar uma combinação de diferentes
famílias de fontes. Por exemplo, títulos podem ser estilizados com fontes serif, enquanto o texto principal pode usar
fontes sans-serif. E o código sempre monospace.
GO TO FULL VERSION