Fontes

Disponível

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:

CSS
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
HTML
<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:

CSS
body {
  font-family: 'Times New Roman', serif;
}
HTML
<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
CSS
body {
  font-family: 'Arial', sans-serif;
}
HTML
<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:

CSS
body {
  font-family: 'Courier New', monospace;
}
HTML
<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.

1
Tarefa
Frontend SELF PT,  nível 14lição 1
Bloqueado
Família de fontes
Família de fontes
1
Tarefa
Frontend SELF PT,  nível 14lição 1
Bloqueado
Fontes Monoespaçadas
Fontes Monoespaçadas
Comentários
  • Populares
  • Novas
  • Antigas
Você precisa acessar para deixar um comentário
Esta página ainda não tem nenhum comentário