FundamentosTipografia

Tipografia

Duas famílias tipográficas: uma para o produto, outra para a marca.

Velon Sans (Regular 400 / Medium 500 / SemiBold 600 / Bold 700; fallback Inter, Poppins / system-ui) é a face de UI. Tudo o que um cliente lê no produto é composto nela: o app, dashboards, docs, texto de corpo, dados, labels e títulos de UI. Ela é nossa: uma fonte open-source (OFL) construída sobre a Inter, com um a de andar único, um l com cauda e um t alternativo embutidos como padrão (os cv11 / cv05 / cv13 da Inter), para que o produto leia como Velon mantendo a legibilidade de tela da Inter. A Inter é sua origem e fallback nomeado.

VELON Display é a face proprietária da marca: uma geométrica monolinear com um único peso (400). Use apenas em momentos de marca, no hero da landing, em headlines de marketing, em números de display grandes e na marca d’água. Nunca em texto de corpo, formulários, dados densos, títulos pequenos de UI ou legendas. Como ela vem com um único peso, headings compostos nela usam font-synthesis: none para que uma solicitação de peso maior nunca renderize um bold falso.

Uma família monospace fica reservada apenas para código e IDs técnicos (por exemplo, um end-to-end id de Pix). Ela não é uma fonte de marca. A Poppins é mantida apenas como fallback para ambas as faces.

A escala tipográfica é fixa: display 40px, h1 30 (SemiBold), h2 24 (SemiBold), h3 20 (Medium), body 16 (Regular), small 14 (Medium). Não introduza novos tamanhos. Se uma tela precisa de algo que a escala não tem, a tela está errada, não a escala.

Legibilidade é Verdade: tipografia que lê de forma limpa é a forma mais básica de dizer a verdade na tela. A voz da marca (VELON Display) fala alto apenas nos poucos momentos grandes de marca; em todo lugar onde um cliente lê números e labels, a Inter mantém tudo honesto e claro.

Display
text-display · 2.5rem (40px) · weight 500 · line-height 3rem
Heading 1
text-h1 · 1.875rem (30px) · weight 600 · line-height 2.25rem
Heading 2
text-h2 · 1.5rem (24px) · weight 600 · line-height 2rem
Heading 3
text-h3 · 1.25rem (20px) · weight 500 · line-height 1.75rem
Body. the default reading size for content.
text-body · 1rem (16px) · weight 400 · line-height 1.5rem
Small. used for labels and UI captions.
text-small · 0.875rem (14px) · weight 500 · line-height 1.25rem
Micro. minimum readable size.
text-micro · 0.75rem (12px) · weight 500 · line-height 1rem
E1820087420250616_PIX_a1b2c3d4
font-mono · system monospace · for code and technical IDs only (not a brand font)

Não faça

  • Não use text-[10px], text-[9px] ou outros tamanhos ad-hoc. text-micro (12px) é o piso.
  • Não componha corpo, formulários, dados ou títulos de UI em VELON Display. Ela é a face da marca, só para momentos grandes de marca; texto de produto é Inter.
  • Não carregue outras fontes de marca. Velon Sans (produto) e VELON Display (marca) são as duas faces; monospace é só para código e IDs técnicos.
  • Não reestilize a wordmark “VELON”. Ela é sempre composta como foi desenhada; nunca aplique transformações próprias.

No código

import { fontSize } from '@velon-finance/tokens'
 
const heading = fontSize.h2
// → { rem: '1.5rem', px: '24px', weight: 600, lineHeight: '2rem' }

A Inter é o padrão. Recorra à face da marca explicitamente com font-display, e só para um momento grande de marca:

<h2 class="text-h2 font-semibold">Section title</h2>
<!-- ↑ Inter (UI) · ↓ VELON Display (brand) -->
<h1 class="font-display text-display">Verdade. Vantagem. Valor.</h1>
CorEspaçamento