Vantagens que você pode obter com fontes de alta qualidade

• Recursos ocultos das fontes: eixos variáveis, glifos alternativos, alternâncias estilísticas, swashes, numerais, versaletes (Small Caps), substituições contextuais

Eixos variáveis

• Fontes OpenType podem ter um ou mais eixos, e é possível mudar a aparência da fonte alterando os valores desses eixos
• O eixo mais comum é wght, que ajusta o peso da fonte
• Outros eixos comuns incluem wdth (largura), slnt (inclinação), ital (itálico) e opsz (tamanho óptico)
• É possível manipular os eixos usando propriedades CSS
• A propriedade font-variation-settings pode causar problemas de herança, então, quando possível, é melhor usar propriedades CSS específicas

Glifos alternativos

• Uma fonte pode incluir glifos alternativos para determinados caracteres
• Os glifos alternativos podem incluir vários estilos, como numerais, swashes e ligaturas

Alternâncias estilísticas

• Alternâncias estilísticas são um recurso que ativa formas alternativas para caracteres específicos
• salt ativa alternâncias estilísticas para todos os caracteres
• Conjuntos estilísticos como ss01, ss02 etc. substituem conjuntos específicos de caracteres
• Variações de caractere como cv01, cv02 etc. substituem um único caractere
• É possível ativar glifos alternativos com as propriedades CSS font-feature-settings e font-variant-alternates

Swashes

• Algumas fontes incluem swashes que podem ser usados para dar um pouco mais de personalidade aos títulos
• Swashes são elementos decorativos que podem acrescentar personalidade aos títulos
• É possível ativar swashes com font-feature-settings e font-variant-alternates

Numerais

• Uma fonte pode incluir diferentes conjuntos de glifos numéricos
• Os numerais se dividem em lining ou old-style, tabulares ou proporcionais
• Numerais tabulares têm a mesma largura, enquanto numerais proporcionais têm larguras diferentes
• Numerais lining têm a mesma altura das letras maiúsculas, enquanto numerais old-style têm altura semelhante à das minúsculas
• É possível definir o estilo numérico desejado com a propriedade font-variant-numeric

Versaletes

• Versaletes são variantes em maiúsculas que substituem letras minúsculas
• É possível ativar versaletes com a propriedade font-variant-caps
• Se a fonte não tiver versaletes, o navegador pode sintetizá-los

Substituições contextuais

• Substituições contextuais são um recurso que troca glifos automaticamente com base nos caracteres ao redor
• Por exemplo, podem substituir -> por uma seta ou ajustar a posição de @ quando ele aparece entre letras maiúsculas
• Substituições contextuais vêm ativadas por padrão e podem ser desativadas com a propriedade font-variant-ligatures

Resumo do GN⁺

• Fontes de alta qualidade oferecem diversos recursos e, ao aproveitá-los, é possível melhorar bastante a qualidade da tipografia
• Os recursos de eixos variáveis e glifos alternativos das fontes OpenType são especialmente úteis
• Recursos como substituições contextuais são convenientes tanto para desenvolvedores quanto para usuários

[halfenif]

Fico me perguntando por que é tão difícil oferecer suporte correto aos recursos de fontes

É um problema que acompanha toda a história da humanidade... quanta coisa não haveria para fazer!

[seunggi]

A renderização de fontes é difícil

https://faultlore.com/blah/text-hates-you/

[wedding]

Nunca consegui me acostumar com ligatures...

[GN⁺]

Comentários do Hacker News

• Útil quando números precisam ficar alinhados em várias linhas
• Também é útil para coisas como relógios ou contagens regressivas
• É muito irritante quando a hora fica pulando na tela
• Se quiser inspecionar arquivos de fonte, recomendam usar Wakamai Fondue
• Números tabulares são um recurso muito útil
• O Google Fonts remove quase todos os recursos avançados do OpenType para reduzir o tamanho do arquivo
  • Ex.: a versão do Inter no Google oferece 11 recursos, enquanto a versão completa oferece 44
• A tipografia da página é bonita
• O uso de versaletes (small caps) é legal, gostaria que mais sites usassem isso
• Verificaram se o Berkeley Mono v2 já foi lançado, ainda não foi
• O comportamento do eixo wght (peso) é estranho: ao deslizar para abaixo de 400, o texto fica mais fino e comprimido, mas acima de 400 ele só fica mais grosso
• Para usar uma fonte diferente no VSCode e dar suporte a comentários, JSDoc e outros destaques de sintaxe, é preciso usar a extensão vscode-custom-css
  • Exemplo:

    .mtki {
      font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important;
      font-style: italic !important;
      color: #757575 !important;
    }
    .comment {
      font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important;
      font-style: italic !important;
      color: #757575 !important;
    }
    .comment:not(.punctuation) {
      font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important;
      font-style: italic !important;
      color: #757575 !important;
    }
    

  • O tratamento de fontes no VSCode tem muitos bugs, então é preciso experimentar bastante
• Ficam se perguntando por que é tão difícil dar suporte correto aos recursos de fontes
• Se você se interessa por tipografia, recomendam Butterick's Practical Typography
  • Está cheio de conselhos práticos para deixar documentos impressos e digitais bonitos
  • A licença das fontes dele é muito generosa, sem limite de visualizações de página
  • As fontes dele não são open source, mas são bonitas
  • Compraram as fontes Valkyrie e Concourse, e a Concourse é muito flexível com alternativas contextuais