Guia de estilo//Tipografia
Hierarquia de tipos
A hierarquia é estabelecida por meio de tamanho, peso e espaçamento, não por meio de várias fontes. Um sistema. Uma voz.
As manchetes lideram. O texto de apoio explica. Os metadados permanecem silenciosos.
Título H1
- Altura da linha: 1,1x
- Recuo de texto: sem ajuste
- Uso: seções de cabeçalho em tela cheia (ou seja. Portfólio (páginas)
Padrão H1
- Altura da linha: 1x
- Recuo de texto: sem ajuste
- Uso: Seções mínimas de cabeçalho (ou seja. Guia de estilo, currículo, etc.)
Título padrão H2
- Altura da linha: 1,1x
- Recuo de texto: sem ajuste
- Uso: Normalmente, isso é usado nos componentes “Título” (exceto nas versões extra grandes)
Outro título: Título H2
- Espaçamento entre letras: padrão
- Altura da linha: 1x
- Recuo de texto: sem ajuste
- Uso: Isso é usado no componente de título do Works e no componente de título usado nas páginas do Portfólio.
Padrão h3
- Espaçamento entre letras: 0,01em
- Altura da linha: 1,3x
- Recuo de texto: .01em
- Uso: Isso não é muito usado no sentido tradicional. Idealmente, isso é usado em componentes hierárquicos, como cabeçalhos de listas ou títulos de cartões.
Famílias e pares de fontes
Use somente a fonte primária aprovada. O emparelhamento é obtido por meio de peso e escala, não por alterações de fonte.
Várias fontes introduzem ruído e reduzem a coesão.
Títulos
Família de fontes: Playfair Display
Cartas: AABBccddeeffgghhiijjkkllmmnnooppqqrrssttuuvvwwxxyyzz
Números: 1234567890
Pesa: Bold, Demi-bold
Alturas de linha: 1x—1,3x
Corpo
Família da fonte: Titillium Web
Cartas: AABBccddeeffgghhiijjkkllmmnnooppqqrrssttuuvvwwxxyyzz
Números: 1234567890
Pesa: Bold, Demi-bold
Alturas de linha: 1,4x—1,5x
Uso por contexto
Os cabeçalhos estabelecem a estrutura. Os parágrafos comunicam substância. Suporta legendas, nunca concorra.
Cada estilo de texto tem uma função. Não reutilize estilos casualmente.
Escalabilidade responsiva
Cada estilo de texto tem uma função. Não reutilize estilos casualmente.
A tipografia deve ser dimensionada de forma fluida em todos os pontos de interrupção. Sem saltos abruptos. Nenhum caso extremo é ignorado.
| Tamanho da fonte base | Ponto de interrupção | Exemplo |
|---|---|---|
| 16px | ≥ 1920px | Este é um exemplo do tamanho do texto base |
| 14px | < 1920 px ≥ 1440 px | Este é um exemplo do tamanho do texto base |
| 1vw | < 1440px ≥ 992px | Este é um exemplo do tamanho do texto base |
| 12px | < 992 px ≥ 768 px | Este é um exemplo do tamanho do texto base |
| 11px | < 768 px | Este é um exemplo do tamanho do texto base |
Padrões de legibilidade
Se o texto quebrar em um dispositivo, o sistema está quebrado.
A legibilidade sempre supera a estética. O comprimento, o espaçamento e o contraste da linha devem facilitar a leitura.
Se isso exigir esforço, ele falha.
- O tamanho do corpo do texto varia entre 16px e 11px no ponto de interrupção mais baixo. (veja acima para obter mais detalhes)
- As alturas das linhas também se ajustam com base na finalidade do elemento. Por exemplo, a maioria dos títulos ou cabeçalhos opera com uma altura de linha de 1x a 1,1x, enquanto a maioria das cópias do corpo opera na faixa de 1,3x a 1,5x.