Pular para o conteúdo

Uma família, cinco degraus, e o itálico que já estava no wordmark.

Esta página renderiza em BR Omny. Uma família com faixa ampla de pesos sustenta toda a hierarquia sozinha, sem precisar de uma segunda fonte: menos arquivo para carregar e mais coesão, porque todos os pesos compartilham a mesma estrutura de letra.

Faces carregadas
Retirada em 8 minutosRegular · 400
Retirada em 8 minutosMedium · 500
Retirada em 8 minutosBold · 700
Retirada em 8 minutosBlack · 900
Retirada em 8 minBlack Italic · 900

Cinco das catorze faces instaladas. Thin, Light, SemiBold e os demais itálicos não têm papel definido no sistema; carregá-los seria peso morto. A Black normal existe como defesa: sem ela, um peso 900 sem itálico cairia no Bold sem ninguém perceber.

Carregamento
Formato.otf · opentype
Texto (400/500/700/900)font-display: swap
Black Italicfont-display: block
FallbackHelvetica Neue, Arial

A face de display usa block em vez de swap de propósito: um flash de Helvetica Bold Italic num título de 64px em caixa alta é dano de marca visível. No corpo de 16px, o mesmo flash não é.

Baixar Família BR Omny (.zip)
Para produção: woff2 e subset

As fontes estão em .otf, cerca de 75KB por face. Para produção, converter para woff2 e subsetar para latim com diacríticos de pt-BR derruba isso para perto de 25KB por face.

Não bloqueia nada: .otf é suportado por todos os navegadores atuais, e cinco faces são aceitáveis numa documentação servida localmente. Em site público, a conversão é obrigatória (fontTools, brotli ou woff2_compress).

Cinco degraus, e nada entre eles.

A escala é fechada de propósito. Sem uma escala formal, cada tamanho novo vira uma decisão isolada e o sistema se fragmenta tela a tela, que é exatamente o problema que este documento existe para resolver.

Display64 / 60900 itálicocaixa alta-0.03em
Seu carro já tá te esperando

O H1 da página e a capa de peça. É o Registro 1: com o preço e a placa de número, é um dos três únicos lugares onde ele vive. Em número grande (a placa de 4,7 e 9,4), o tracking fecha para -0.05em e a entrelinha cai para 0.8.

Título32 / 36700caixa baixa-0.01em
Dentro do saguão, aberto 24 horas.

Título de seção (H2) e de bloco, sempre em Registro 2: caixa baixa, peso 700. O Registro 1 fica só no H1, no preço e na placa; oito títulos em caixa alta itálica numa página viram grito contínuo e apagam o H1. Quando a seção pede assinatura, uma palavra, e só uma, vai em vermelho de ação, via <em> dentro do h2. Nunca sobre amarelo: 2,94:1 reprova, e ali a ênfase herda a cor do título.

Destaque20 / 28700caixa baixa0
Ideal para Jericoacoara e Canoa Quebrada

Título de card de conteúdo e chamada curta. Mesmo Registro 2 do Título, um degrau abaixo. O card de veículo fala da viagem, não da ficha técnica.

Corpo16 / 26400caixa baixa0
Pode deixar comigo: seu carro já tá te esperando. Chegando 22h? Deixo a chave separada, é só me chamar aqui. A gente responde todas as reclamações, e resolve.

Texto corrido. Limitado a 640px de largura, que é onde a linha fica em torno de 65 caracteres.

Etiqueta12 / 16500caixa alta+0.1em com fundo · +0.2em sem fundo
Sem taxa de aeroportoPreferido do públicoDiária de 27 horas

Só a etiqueta de benefício (.asa-tag, e o raro .asa-label--caps sem fundo); rótulo de campo e legenda são 14px caixa baixa. Com o H1, o preço e a placa, é a única caixa alta do sistema. E é o piso da escala: nenhum texto fica abaixo de 12px em tela.

Escala de UI · a válvula de escape com nome
Lide18 / 28400--asa-fs-lead
O balcão fica dentro do saguão, aberto 24 horas. Chegou, retirou: oito minutos.

A frase sob o H2. Fica entre o Destaque e o Corpo porque precisa ser lida como continuação do título, não como parágrafo, e porque o H2 em caixa baixa já não grita a ponto de pedir um corpo de 16px logo abaixo.

Subtítulo17 / 24700--asa-fs-subtitle
Kwid · Grupo A · ar e direção

Título de card de produto. O Destaque de 20px é para card de conteúdo; dentro da vitrine, 20px em seis cards lado a lado briga com o preço.

Corpo denso14 / 20500--asa-fs-body-dense
Ver carrosLocal de retirada5 lugares · 2 malas · manual

Botão, rótulo de campo, especificação de veículo e qualquer texto de componente denso. O rótulo é caixa baixa, Medium: nunca mono, nunca caixa alta.

Preço de card24 / 24900 itálico--asa-fs-price-card
R$ 189por dia

O preço é Registro 1 na densidade do card: valor fixo onde o preço de página usa clamp(). Registro de numeral: nunca uma frase nesse corte.

Escala paralela à de conteúdo, com o mesmo piso de 12px. Existe porque componente de produto tem densidade que o conteúdo não tem, e cada tamanho dessa densidade precisa de nome. Mapa completo em 10 · Tokens.

Entrelinha inverte a intuição
Display 64pxfator 0,94
Título 32pxfator 1,13
Corpo 16pxfator 1,63

Quanto menor a fonte, maior o multiplicador. Em tamanho grande as letras já ocupam altura, e um fator alto abriria vãos estranhos entre linhas de título; em tamanho pequeno, pouca entrelinha aperta o parágrafo e cansa a leitura.

Rótulo mono
RES-7F3K2 REC · FOR --asa-fs-mono
Pilhaui-monospace, SF Mono, Menlo
Métrica11px · 500 · 0.14em

Só metadado de produto: código de reserva, IATA do aeroporto, nome de token nesta documentação. Nunca acima de um título: o título carrega o próprio peso, e um sobretítulo em mono só rouba dele. É o único lugar onde o sistema sai da BR Omny, e o único abaixo de 12px; por isso texto de produto (tag, contagem, atributo) nunca usa esta métrica.

Nota sobre a escala

A escala não é 8pt puro nem modular de razão fixa: 64→32 é razão 2, mas 20→16 é 1,25.

É uma escala editada à mão, ajustada a necessidades reais de peça. Os valores são finais, e por isso a escala de conteúdo é fechada: não se estende por fórmula, e um sexto degrau quebra o sistema em vez de completá-lo. A válvula de escape tem nome: é a escala de UI acima. Se o tamanho que falta não está nela, o problema é o layout.

A marca anuncia de um jeito e atende de outro, nunca ao mesmo tempo.

A diferença está em quem fala. O registro de anúncio fala para uma plateia; o de balcão fala para uma pessoa. Misturar os dois na mesma frase é o erro que mais rápido faz a comunicação parecer de outra marca.

Registro 1 · Anúncio
Seu carro já tá te esperando. Retirada em 8 minutos, no saguão do aeroporto. Dentro do saguão. Aberto 24 horas.
Onde viveH1 da página, preço, placa de número
Onde nunca aparecetítulo de seção, rótulo, corpo de texto

Caixa alta, itálico, Black, entreletras negativa: o mesmo corte do wordmark. Três lugares, e só eles. Nunca usado para falar com uma pessoa individual, e nunca num H2: quando ele aparece em todo título, deixa de ser assinatura.

Registro 2 · Balcão
Pode deixar comigo: seu carro já tá te esperando. Chegando 22h? Deixo a chave separada, é só me chamar aqui. A gente responde todas as reclamações, e resolve.
Onde vivecampo claro, WhatsApp, formulário
Onde nunca aparecesobre vermelho, título de campanha

Caixa baixa, sem itálico e sem exclamação, do título de seção em 700 ao corpo em 400. É a voz de quem atende. Também é o registro obrigatório dos textos de consentimento: é ali que a promessa de "sem letra miúda" é testada de verdade.

Fatos operacionais que aparecem sempre
Balcão dentro do saguão
Recife e Fortaleza, 24 horas.
Retirada em 8 minutos
Sem transfer, sem fila em locadora fora do aeroporto.
Diária de 27 horas
Três horas de folga sobre a diária padrão do mercado.
Sem taxa de aeroporto
E sem letra miúda. Não use emoji: não faz parte do sistema.

Quatro fatos, uma lista. Em cards separados, cada um pede um ícone para não parecer vazio, e o trio ícone-título-texto é justamente o que o sistema não faz.

Anterior← 03 · Cor Próxima seção05 · Ícones →