CSS - Fontes

Famílias de Fontes Genéricas

No CSS, existem cinco famílias de fontes genéricas que podem ser usadas para especificar a aparência do texto em uma página da web:

1. Serifada: Fontes serifadas têm pequenas linhas ou traços nas extremidades das letras. São frequentemente usadas para o corpo do texto em mídia impressa e podem dar uma aparência formal ao texto. Exemplos de fontes serifadas incluem Times New Roman, Georgia e Garamond.

2. Sem serifa: Fontes sem serifa não têm linhas nas extremidades das letras. Elas têm uma aparência limpa, tornando-as populares para telas digitais. Fontes sem serifa são frequentemente usadas para títulos, menus e corpo de texto em sites. Exemplos de fontes sem serifa incluem Arial, Helvetica e Verdana.

3. Monoespaçada: Fontes monoespaçadas têm caracteres que ocupam a mesma largura fixa. Cada caractere ocupa a mesma quantidade de espaço horizontal, o que as torna ideais para exibir trechos de código ou dados tabulares. Exemplos de fontes monoespaçadas incluem Courier, Courier New e Lucida Console.

4. Cursiva: Fontes cursivas imitam texto manuscrito e têm uma aparência informal. São frequentemente usadas para títulos especiais ou citações, mas devem ser usadas com moderação, pois podem ser mais difíceis de ler em grandes quantidades. Exemplos de fontes cursivas incluem Brush Script, Lucida Handwriting e Comic Sans.

5. Fantasia: Fontes fantasia são decorativas e imaginativas que não se encaixam em outras categorias. Podem ter formas ou designs únicos, mas devem ser usadas com cuidado, pois podem ser difíceis de ler em passagens longas. Exemplos incluem Impact, Papyrus e Chiller.

Pilhas de Fontes

Uma pilha de fontes é uma lista de fontes especificada na propriedade font-family do CSS. Ela permite que você defina várias opções de fallback caso a fonte principal não esteja disponível no dispositivo do usuário. Para criar uma pilha de fontes, você lista os nomes separados por vírgulas. O navegador tentará a primeira, depois passará para a próxima até encontrar uma disponível.

body {
  font-family: Arial, Helvetica, sans-serif;
}

O navegador primeiro tentará Arial. Se não estiver disponível, ele recorre à Helvetica. Se ambas não estiverem disponíveis, ele usa a família genérica sans-serif. Ao criar pilhas, considere estas práticas:

1. Comece com a opção preferida e depois adicione fallbacks.
2. Use a família genérica por último para que o texto permaneça legível mesmo se nenhuma das fontes especificadas estiver disponível.
3. Escolha tipos semelhantes (por exemplo, serifadas, sem serifa) para manter uma aparência consistente.
4. Limite o número, pois cada adicional pode diminuir o tempo de carregamento da página.
5. Teste as pilhas em diferentes dispositivos e navegadores para alcançar a exibição desejada.

Tamanho da Fonte

A propriedade font-size no CSS define o tamanho do texto. Você pode usar várias unidades para especificar o tamanho da fonte, como pixels (px), em e rem.

1. Pixels (px): Definir o tamanho da fonte em pixels oferece controle preciso sobre o tamanho do texto. No entanto, usar pixels pode dificultar a redimensionamento do texto pelos usuários em seus navegadores.

font-size: 16px;

2. Em (em): A unidade em é relativa ao tamanho da fonte do elemento pai. Se o tamanho da fonte do elemento pai for 16px, definir o tamanho da fonte do elemento filho como 1.5em resultaria em um tamanho de fonte de 24px (16px * 1.5). Usar em permite tamanhos de fonte mais flexíveis e escaláveis.

font-size: 1.2em;

3. Rem (rem): A unidade rem é semelhante ao em, mas é relativa ao tamanho da fonte do elemento raiz (html) em vez do elemento pai. Isso facilita a manutenção de tamanhos consistentes em todo o documento, com um padrão de 16px, então definir um valor como 1.5rem resulta em um valor equivalente ao visto com valores baseados em pixels, sendo igual a cerca de vinte e quatro pixels (24 px).

font-size: 1.2rem;

Ao decidir entre tamanhos absolutos e relativos, considere:

• Tamanhos absolutos oferecem controle preciso, mas podem não ser facilmente redimensionáveis pelos usuários.
• Tamanhos relativos permitem mais flexibilidade e responsividade, pois se adaptam com base nas propriedades de dimensionamento dos elementos pai ou raiz, respectivamente.

Para criar fontes responsivas que se adaptem a diferentes larguras de tela, use media queries CSS, ajustando de acordo com a largura da viewport:

body {
    font-size: 16px;
}

@media screen and (min-width: 768px) {
    body {
        font-size: 18px;
    }
}

@media screen and (min-width: 1200px) {
    body {
        font-size: 20px;
    }
}

Peso da Fonte

A propriedade font-weight define quão grossos ou finos os caracteres aparecem usando valores de palavras-chave/numéricos:

• Palavras-chave: normal(padrão), bold, lighter, bolder
• Numéricos: 100, 200, 300, 400(normal), 500, 600, 700(bold), 800, 900

Nem todos os pesos estão disponíveis para todas as famílias ao usar valores numéricos. Considere estas práticas recomendadas:

Use quatrocentos (400) para textos normais e setecentos (700) para textos em negrito, garantindo resultados consistentes em diferentes fontes. Evite pesos extremos como cem (100) ou novecentos (900), pois podem não ser legíveis em contextos de tamanho menor. Mantenha-se nos pesos comuns (quatrocentos/setecentos) para textos do corpo, utilizando pesos adicionais, se necessário, dentro de títulos contextualmente falando.

body {
    font-weight: 400;
}

h1 {
    font-weight: 700;
}

Estilo da Fonte

A propriedade font-style define estilos normal/itálico/oblíquo. O itálico inclina a versão cursiva, enquanto o oblíquo inclina a versão normal. Evite grandes blocos, reduzindo a legibilidade. Contextualmente falando, enfatizar palavras, títulos, termos técnicos, frases em outro idioma são usos mais adequados para formas em itálico.

p {
    font-style: normal;
}

em {
    font-style: italic;
}

Variante da Fonte

A propriedade font-variant permite definir small-caps, exibindo letras minúsculas como versões menores das maiúsculas. Isso é útil para abreviações e siglas, fazendo-as se destacar sem usar maiúsculas, adicionando interesse visual a títulos e subtítulos contextualmente falando.

h2 {
    font-variant: small-caps;
}

abbr {
    font-variant: small-caps;
}

Altura da Linha

A propriedade line-height define o espaço entre as linhas. Unidades de comprimento (px/em/rem) ou valores sem unidade são recomendados para escalar proporcionalmente. Um bom ponto de partida está na faixa de 1,2 a 1,6, dependendo da família e do contexto de tamanho.

body {
    line-height: 1.5;
}

h1 {
    line-height: 1.2;
}

O que são Fontes Web?

Fontes web são fontes personalizadas que podem ser carregadas e usadas em um site. Elas permitem que os designers vão além do conjunto limitado de fontes do sistema disponíveis nos dispositivos dos usuários. Elas possibilitam um design tipográfico mais diversificado, melhorando o apelo visual e a identidade da marca de um site.

As principais vantagens de usar fontes web incluem:

1. Maior flexibilidade de design: As fontes web oferecem muitos estilos e opções, permitindo que os designers escolham fontes que correspondam ao visual desejado e à identidade da marca.

2. Consistência entre dispositivos: Ao usar fontes web, os designers podem garantir que a tipografia permaneça consistente em diferentes dispositivos e plataformas, já que as fontes são carregadas de um servidor remoto, em vez de depender das fontes do sistema do usuário.

3. Melhor experiência do usuário: As fontes web podem melhorar a legibilidade, tornando o conteúdo mais atraente para os usuários lerem.

Como Usar Fontes Web

Existem várias maneiras de usar fontes web em um site:

1. Importando fontes web usando @font-face: A regra CSS @font-face permite que você especifique um arquivo de fonte personalizado para ser baixado e usado em seu site. Você pode hospedar os arquivos de fonte em seu próprio servidor ou usar um provedor de serviço de fontes.

@font-face {
  font-family: 'CustomFont';
  src: url('path/to/font-file.woff2') format('woff2'),
       url('path/to/font-file.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

2. Hospedando fontes web localmente: Você pode baixar os arquivos de fonte e hospedá-los em seu próprio servidor, dando-lhe controle total sobre eles, mas exigindo mais configuração e manutenção.

3. Usando serviços de fontes web: Muitos provedores como Google Fonts e Adobe Fonts oferecem várias fontes web que podem ser facilmente integradas ao seu site sem necessidade de hospedagem própria.

Formatos de Fontes Web

Existem vários formatos de fontes web disponíveis, cada um com suas próprias características e suporte de navegador:

1. TTF (TrueType Font): TTF é um formato antigo suportado pela maioria dos navegadores, mas tem tamanhos de arquivo maiores em comparação com formatos mais recentes.

2. WOFF (Web Open Font Format): WOFF é projetado para a web com recursos de compressão; é amplamente suportado por navegadores modernos.

3. WOFF2: WOFF2 oferece melhor compressão do que WOFF, resultando em tamanhos de arquivo menores e tempos de carregamento mais rápidos; tem bom suporte de navegador, mas pode não funcionar em navegadores mais antigos.

4. EOT (Embedded OpenType): EOT era usado pelo Internet Explorer; tem suporte limitado em navegadores modernos, então geralmente não é recomendado para novos projetos.

5. Fontes SVG: As fontes SVG são baseadas em vetores e podem ser escaladas sem perder qualidade. No entanto, elas têm suporte limitado de navegador e não são amplamente usadas.

Ao usar fontes web, é uma boa prática fornecer múltiplos formatos para maximizar a compatibilidade com os navegadores. Você pode usar a regra @font-face para especificar diferentes formatos de arquivo, e o navegador escolherá o mais adequado que ele suporta.

O que são Ícones de Fonte?

Ícones de fonte são símbolos que fazem parte de uma fonte. Eles podem ser usados como ícones em sites e estilizados com CSS, como texto normal. Ícones de fonte são baseados em vetores, então podem ser redimensionados sem perder qualidade e se adaptam a diferentes tamanhos de tela.

As principais vantagens de usar ícones de fonte incluem:

1. Flexibilidade: Você pode facilmente estilizar ícones de fonte usando propriedades CSS como cor, tamanho e sombras para combinar com o design do seu site.

2. Desempenho: Ícones de fonte carregam mais rápido em comparação com ícones de imagem tradicionais porque fazem parte de um arquivo de fonte.

3. Escalabilidade: Por serem baseados em vetores, ícones de fonte permanecem nítidos em qualquer tamanho sem pixelização ou perda de qualidade.

4. Acessibilidade: Você pode tornar ícones de fonte acessíveis a leitores de tela usando marcação semântica adequada e fornecendo texto alternativo.

Como Usar Ícones de Fonte

Para usar ícones de fonte em um site, você pode importar uma biblioteca existente ou criar seus próprios ícones personalizados:

1. Importando bibliotecas: Existem muitas bibliotecas populares disponíveis como Font Awesome, Material Icons e Ionicons. Essas bibliotecas oferecem ícones pré-projetados que você pode incluir facilmente em seu projeto, vinculando ao arquivo CSS da biblioteca e usando os nomes de classe fornecidos.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<i class="fas fa-home"></i>

2. Criando fontes personalizadas: Se as bibliotecas existentes não atendem às suas necessidades, você pode criar fontes personalizadas usando ferramentas como Icomoon ou Fontello, que permitem selecionar ou fazer upload de SVGs e gerar um arquivo de fonte personalizado junto com o código CSS necessário.

Ao usar ícones de fonte:

1. Escolha uma biblioteca confiável.
2. Use marcação semântica como elementos <i> ou <span> para exibir o ícone.
3. Otimize o arquivo de ícones incluindo apenas os glifos necessários.
4. Forneça opções de fallback para usuários que desativaram fontes personalizadas.
5. Use CSS para dimensionamento e alinhamento consistentes do ícone.

Ícones de fonte oferecem uma maneira eficiente de adicionar símbolos escaláveis e elegantes ao seu site, mantendo boas práticas de desempenho.