Fontes mistas visualmente estáveis

Ao misturar diferentes famílias de fontes, por exemplo, ao inserir snippets de código inline ou trocar famílias de fontes para temas diferentes, as diferenças na "altura x" (a altura das letras minúsculas) podem fazer com que uma fonte pareça muito menor ou maior do que a outra. Isso pode prejudicar a legibilidade e causar mudanças de layout.

A propriedade font-size-adjust permite normalizar o tamanho visual do texto ajustando o tamanho da fonte com base em uma métrica específica (geralmente, a altura x).

Etapas de implementação

1. OBRIGATÓRIO: aplique font-size-adjust a elementos em que a consistência da fonte é essencial, como contêineres que usam fontes da Web ou blocos com famílias de fontes mistas.
2. OBRIGATÓRIO: use a palavra-chave from-font em elementos para que o tamanho da fonte em elementos aninhados corresponda automaticamente às proporções da fonte principal.
3. OBRIGATÓRIO: use um valor numérico específico de substituição da proporção para font-size-adjust (por exemplo, font-size-adjust: 0.5) para normalizar as proporções de forma independente quando as proporções da fonte forem de temas diferentes.

Exemplo: normalização automática da altura x

Usar from-font é a abordagem mais robusta. Ele extrai a proporção da altura x da primeira fonte disponível e a aplica às fontes nos elementos filhos.

.content-area {
  font-family: "MyCustomWebFont";
  /* Automatically extract and apply x-height ratio from MyCustomWebFont */
  font-size-adjust: from-font;
}
.content-area span{
  font-family: "MyOtherCustomWebFont"
}

Exemplo: especificar uma altura x específica

Quando a fonte a ser ajustada não é filha da fonte em que o tamanho é baseado, especifique um valor para ajustar a altura x.

.theme{
  font-family: Verdana, sans-serif;
}
.theme.alternate{
  font-family: Times;
  /* Set to the aspect ratio (x-height / font-size) of the primary font */
  font-size-adjust: 0.51;
}

Estratégias de fallback

OBRIGATÓRIO: em navegadores que não são compatíveis com font-size-adjust, as fontes serão renderizadas com o valor natural de font-size. Você precisa fornecer uma estratégia de substituição válida para navegadores incompatíveis usando um bloco @supports para mitigar isso:

• Use @supports not (font-size-adjust: from-font) para detectar a compatibilidade com font-size-adjust e fornecer estilos substitutos (por exemplo, altura da linha ou tamanho da fonte ajustados).
• Escolha fontes com altura de x semelhante à da fonte principal.
• Aplique substituições específicas de font-size e line-height para famílias de fontes alternativas e aninhadas.

/* Feature detection for font-size-adjust */
@supports not (font-size-adjust: from-font) {
  .content-area {
    /* Manual adjustment for browsers without support (if needed) */
    line-height: 1.6;
    font-size: 1.2rem;
  }
}