review-css-typography
Voltar à Trilha

Revisão de Tipografia CSS

Introdução à Tipografia

  • Definição: Tipografia é a arte de escolher as fontes e o formato certos para tornar o texto visualmente atraente e fácil de ler. "Type" refere-se a como os caracteres individuais são projetados e organizados.
  • Definição de Typeface: Um typeface é o design e estilo geral de um conjunto de caracteres, números e símbolos. É como um projeto para uma família de fontes.
  • Definição de Fonte: Uma fonte é uma variação específica de uma família tipográfica com características específicas, como tamanho, peso, estilo e largura.
  • Fonte Serifada: Esta fonte tem um estilo clássico com pequenas linhas no final dos caracteres. Fontes serifadas são comumente usadas para materiais impressos como livros.
  • Sans Serif Typeface: This typeface has a more modern look, without the small lines at the end of characters. As fontes Sans Serif são comumente usadas em design digital porque são fáceis de ler na tela. Alguns exemplos incluem Helvetica, Arial e Roboto.
  • Espessura da Fonte: Esta é a espessura dos caracteres, incluindo light, regular, bold e black.
  • Estilo da Fonte: Esta é a inclinação e orientação dos caracteres, como italic e oblique.
  • Largura da Fonte: Este é o espaço horizontal ocupado pelos caracteres, como condensado e expandido.
  • Baseline: Esta é a linha imaginária sobre a qual a maioria dos caracteres repousa.
  • Altura da Maiúscula: Esta é a altura das letras maiúsculas, medida da linha de base até o topo.
  • X-height: Esta é a altura média das letras minúsculas, excluindo ascendentes e descendentes.
  • Ascenders: Estas são as partes das letras minúsculas que se estendem acima da altura-x, como o topo das letras 'h', 'b', 'd' e 'f'.
  • Descenders: Estas são as partes das letras minúsculas que se estendem abaixo da linha de base, como as caudas de 'y', 'g', 'p' e 'q'.
  • Kerning: É assim que o espaço é ajustado entre pares específicos de caracteres para melhorar sua legibilidade e estética. Por exemplo, reduzir o espaço entre as letras A e V.
  • Tracking: This is how space is adjusted between all characters in a block of text. É essencialmente a distância entre os caracteres. Isso afeta quão denso e espaçado o texto será.
  • Leading: Este é o espaço vertical entre linhas de texto. É medido da linha de base de uma linha até a linha de base da próxima linha.
  • Best Practices with Typography: You should choose clear and simple fonts to make your designs easy to understand. Isso é particularmente importante para o texto principal do seu site. Os usuários têm mais probabilidade de interagir com seu conteúdo se a fonte for fácil de ler. Você deve usar no máximo duas ou três fontes para criar uma consistência visual. Using too many fonts can make the text more difficult to read and weaken your brand's identity. Isso também pode impactar a experiência do usuário ao aumentar o tempo de carregamento do site. Você pode usar o tamanho da fonte para criar uma hierarquia visual para títulos, subtítulos, parágrafos e outros elementos. Por exemplo, o título principal em uma página da web deve ter uma fonte maior, seguido por subtítulos com tamanhos de fonte menores. Isso dará a cada elemento na hierarquia um tamanho de fonte específico que ajuda os usuários a navegar pela estrutura visualmente.

Propriedade CSS font-family

  • Definition: A font family is a group of fonts that share a common design. All the fonts that belong to the same family are based on the same core typeface but they also have variations in their style, weight, and width. Você pode especificar múltiplas famílias de fontes em ordem de prioridade, da mais alta para a mais baixa, separando-as por vírgulas. Essas fontes alternativas funcionarão como opções de fallback. Você deve sempre incluir uma família de fontes genérica no final da lista de font-family.
font-family: Arial, Lato;
  • Famílias de Fontes Comuns: Aqui estão algumas famílias de fontes comuns usadas em CSS: serif, sans-serif, monospace, cursive e fantasy

Fontes Seguras para Web

  • Definition: These fonts are a subset of fonts that are very likely to be installed on a computer or device. Quando o navegador precisa renderizar uma fonte, ele tenta encontrar o arquivo da fonte no sistema do usuário. Mas se a fonte não for encontrada, geralmente será usada uma fonte padrão do sistema.
  • Fontes Web Safe:
  • Fontes sans-serif são comumente usadas para desenvolvimento web porque elas não têm pequenas "pés" ou linhas no final dos caracteres, então são fáceis de ler na tela. Alguns exemplos de fontes sans-serif seguras para web são: Arial, Verdana e Trebuchet MS.
  • Em contraste, fontes serifadas têm pequenos "pés" no final dos caracteres, então elas são comumente usadas para impressão tradicional. Fontes serifadas seguras para web incluem: Times New Roman e Georgia.

At-rules e o at-rule @font-face

  • Definição: At-rules são declarações que fornecem instruções para o navegador. Você pode usá-las para definir vários aspectos da folha de estilo, como media queries, keyframes, font faces e mais.
  • @font-face: Isso permite que você defina uma fonte personalizada especificando o arquivo da fonte, o formato e outras propriedades importantes, como peso e estilo. Para que a regra @font-face seja válida, você também precisa especificar a propriedade src. Essa propriedade contém referências aos recursos da fonte.
@font-face {
  font-family: "MyCustomFont"; 
  src: url("path/to/font.woff2"),
       url("path/to/font.woff"),
       url("path/to/font.otf");
}
  • Font Formats: For each font resource, you can also specify the format. Isto é opcional. É uma dica para o navegador sobre o formato da fonte. Se o formato for omitido, o recurso será baixado e o formato será detectado após o download. Se o formato for inválido, o recurso não será baixado. Os formatos de fonte possíveis incluem collection, embedded-opentype, opentype, svg, truetype, woff e woff2.
@font-face {
  font-family: "MyCustomFont"; 
  src: url("path/to/font.woff2") format("woff2"),
       url("path/to/font.otf") format("opentype"),
       url("path/to/font.woff") format("woff");
}
  • woff e woff2: woff significa "Web Open Font Format." É um formato de fonte amplamente utilizado desenvolvido pela Mozilla em colaboração com Type Supply, LettError e outras organizações. A diferença entre woff e woff2 é o algoritmo usado para comprimir os dados.
  • OpenType: Este é um formato para fontes de computador escaláveis desenvolvido pela Microsoft e Adobe que permite aos usuários acessar recursos adicionais em uma fonte. É amplamente utilizado nos principais sistemas operacionais.
  • tech(): Isso é usado para especificar a tecnologia do recurso de fonte. Isso é opcional.
@font-face {
  font-family: "MyCustomFont"; 
  src: url("path/to/font.woff2") format("woff2"),
       url("path/to/font.otf") format("opentype") tech(color-COLRv1),
       url("path/to/font.woff") format("woff");
}

Trabalhando com Fontes Externas

  • Definição: Uma fonte externa é um arquivo de fonte que não está incluído diretamente nos arquivos do seu projeto. Eles geralmente são hospedados em um servidor separado. To include these external fonts inside your project, you can use a link element or @import statement inside your CSS.
  • Google Fonts: Este é um serviço do Google que oferece uma coleção de fontes, muitas das quais são projetadas especificamente para desenvolvimento web.
Aqui está um exemplo usando o elemento link: 
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}
Aqui está um exemplo usando a declaração @import: 
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
  • Font Squirrel: Este é outro recurso popular que você pode usar para adicionar fontes externas personalizadas aos seus projetos.

Propriedade text-shadow

  • Definição: Esta propriedade é usada para aplicar sombras ao texto. Você precisa especificar o deslocamento X e Y, que representam a distância horizontal e vertical da sombra em relação ao texto, respectivamente. Esses valores são obrigatórios. Valores positivos do deslocamento X e deslocamento Y moverão a sombra para a direita e para baixo, respectivamente, enquanto valores negativos moverão a sombra para a esquerda e para cima.
<link rel="stylesheet" href="styles.css">
<p>Typography Shadow</p>
p {
    text-shadow: 3px 2px;
  }
  • Cor da Sombra: Você também pode personalizar a cor da sombra especificando este valor antes ou depois do deslocamento. Se a cor não for especificada, o navegador determinará a cor automaticamente, então geralmente é melhor defini-la explicitamente.
<link rel="stylesheet" href="styles.css">
<p>Colored Shadow</p>
p {
  text-shadow: 3px 2px #00ffc3;
}
  • Blur Radius: The blur radius is optional but will make the shadow look a lot smoother and more subtle. O valor padrão do radius blur é zero. Quanto maior o valor, maior o desfoque, o que significa que a sombra fica mais clara.
<link rel="stylesheet" href="styles.css">
<p>Blurred Shadow</p>
p {
  text-shadow: 3px 2px 3px #00ffc3;
}
  • Aplicando Múltiplas Sombras de Texto: O texto pode ter mais de uma sombra. As sombras serão aplicadas em camadas, da frente para trás, com a primeira sombra no topo.
<link rel="stylesheet" href="styles.css">
<p>Multiple Shadows</p>
p {
  text-shadow:
    3px 2px 3px #00ffc3,
    -3px -2px 3px #0077ff,
    5px 4px 3px #dee7e5;
}