Tipo: mensagem ampla, notação exata.
Schibsted Grotesk conduz o discurso editorial. Xeque Mono registra índices, coordenadas, valores e código. A diferença de escala e ritmo permite ler a mensagem e conferir a medida sem misturar os dois registros.
Seis medidas de uma voz.
As linhas-guia separam altura, entrelinha, medida e alinhamento. Título, corpo e número ocupam papéis diferentes; a escala dramática fica no display, enquanto a leitura longa mantém 16 px e entrelinha 1,6.
-
Rótulo técnico
Caixa alta, mono e tracking 0,12 em. Use para coordenadas e classificação curta; rótulos não devem substituir um título claro.
-
Altura do display
--xq-display é fluido. O peso 700 e a entrelinha 0,96 criam contraste com o corpo; o título aceita quebra equilibrada sem altura fixa.
-
Tracking da mensagem
−0,04 em pertence ao display. Não copiar essa aproximação para mensagens de erro, controles ou parágrafos densos.
-
Corpo e entrelinha
16 px e 1,6 no registro de leitura. A classe limita a medida e mantém text-wrap: pretty; conteúdo mais longo continua seguindo o fluxo normal.
-
Valor tabular
Métricas usam Xeque Mono com números tabulares e zero cortado. A largura dos algarismos permanece estável quando um estado muda o valor.
-
Unidade e contexto
Unidade acompanha o número com escala menor, sem tomar seu lugar. Índices, tempos e coordenadas explicam o significado da medida.
Contratos de tokens CSS
Valor ou alias no tema claro, propriedade consumidora e limite de uso. Cores são apresentadas em RGB equivalente; a fonte continua no CSS de tokens. O inspetor mostra a resolução no tema escolhido.
| Token / expressão | Aplicação CSS | Regra |
|---|---|---|
--xq-font
'Schibsted Grotesk', Arial, sans-serif
|
.xq-display
font-family
|
Schibsted Grotesk variável local, pesos 100–900 disponíveis. |
--xq-display
clamp(48px, 7.2vw, 112px)
|
.xq-display
font-size
|
clamp de 48 a 112 px; as variantes compacto e amplo têm escalas explícitas próprias. |
--xq-peso-display
700
|
.xq-display
font-weight
|
700; a fonte mono permanece em 400, sem peso sintético para destaque. |
--xq-display-leading
0.96
|
.xq-display
line-height
|
0,96 para a mensagem display; não usar no corpo. |
--xq-display-tracking
-0.04em
|
.xq-display
letter-spacing
|
−0,04 em com leitura conferida na frase real. |
--xq-corpo
16px
|
.xq-corpo
font-size
|
16 px no texto de leitura; ampliar com zoom não pode cortar conteúdo. |
--xq-entrelinha
1.6
|
.xq-corpo
line-height
|
1,6; preservar espaço entre linhas nas descrições longas. |
--xq-mono
'Xeque Mono', monospace
|
.xq-metrica
font-family
|
Xeque Mono local para todas as métricas, não só os números de destaque. |
--xq-metric-size
clamp(32px, 4.8vw, 72px)
|
.xq-metrica
font-size
|
clamp de 32 a 72 px para o número; unidade usa escala relativa própria. |
--xq-metric-leading
1
|
.xq-metrica
line-height
|
1 para o valor isolado; evitar altura fixa no container da métrica. |
--xq-metric-tracking
-0.055em
|
.xq-metrica
letter-spacing
|
−0,055 em específico do valor monoespaçado, sem herdar no corpo. |
--xq-label-tracking
0.12em
|
.xq-rotulo
letter-spacing
|
0,12 em em rótulos técnicos curtos, com transformação uppercase da classe. |
Uso correto × uso incorreto
Compare a mesma intenção em duas composições. Os exemplos são amostras de leitura; os controles operáveis ficam no playground.
[XQ // D1-E3]
Feito para vender.
Uma mensagem direta. Um registro técnico com medida explícita.
64casas
01 / 06 · 240 ms
- O display concentra a mensagem sem transformar todo o texto em destaque.
- Mono e números tabulares estabilizam a leitura de valores.
- Unidade, índice e coordenada explicam cada medida.
Feito para vender.
Uma mensagem direta. Um registro técnico com medida explícita.
64 casas
01 / 06 · 240 ms
- A mesma escala para mensagem, apoio e valor esconde a prioridade de leitura.
- O valor usa o registro do corpo, sem a mono que estabiliza a comparação de algarismos.
- Unidade e índice disputam atenção com a mensagem por falta de papéis tipográficos.
Bancada dos dois registros.
Alterne estados e respiro com a mesma frase. O valor demonstrativo permanece em 64 nos estados pronto, sucesso e erro; carregamento e ausência recebem sinais textuais próprios. A amostra permite comparar quebra, unidade e hierarquia, sem simular uma medição.
Precisão
na leitura.
O título conduz a mensagem; a mono registra o valor e sua unidade.
64casas
0,96 / −0,04 em
16 px / 1,6
Pronto. Altere um controle para inspecionar o contrato.
Ensaio local e determinístico. A ação percorre carregamento → sucesso; movimento reduzido entrega o estado final imediatamente. Repetir preserva os controles.
Inspecionar tokens resolvidos
--xq-font- 'Schibsted Grotesk', Arial, sans-serif
--xq-display- clamp(48px, 7.2vw, 112px)
--xq-peso-display- 700
--xq-display-leading- 0.96
--xq-display-tracking- -0.04em
--xq-corpo- 16px
--xq-entrelinha- 1.6
--xq-mono- 'Xeque Mono', monospace
--xq-metric-size- clamp(32px, 4.8vw, 72px)
--xq-metric-leading- 1
--xq-metric-tracking- -0.055em
--xq-label-tracking- 0.12em
Aplicar o contrato
Separar número e unidade
A unidade permanece texto real. Evite pseudo-elementos para informação necessária à compreensão do valor.
<p class="xq-metrica">
64<span class="xq-metrica__unidade">casas</span>
</p>
<p class="xq-mono">01 / 06 · 240 ms</p>Usar escala sem fixar altura
O título ocupa a altura necessária. O corpo mantém outro ritmo e uma medida máxima independente.
<h1 class="xq-display">Feito para vender.</h1>
<p class="xq-corpo">
A Chesslab desenvolve o site, acelera as vendas
e faz quem já comprou voltar.
</p>Distinguir a métrica da legenda
Não reduza o número ao tamanho do parágrafo por um seletor amplo. A unidade relativa depende da escala da métrica; o contexto técnico usa outro elemento, fora do valor.
<div>
<p class="xq-metrica">
64<span class="xq-metrica__unidade">casas</span>
</p>
<p class="xq-mono">Referência de tabuleiro / 8 × 8</p>
</div>Critérios de aceite
- As duas fontes carregam de arquivos locais, sem pedido a CDN.
- Títulos quebram sem corte em 390 px e com zoom de 200%.
- Métricas, índices e coordenadas usam Xeque Mono e números tabulares.
- Entrelinha compacta não vaza para parágrafos, ajuda e mensagens de estado.