Typography · Casa Hacker DS

famílias

01 · 3 fontes

ibm plex mono · 6 pesos · 1 itálico

// hack the future

Plex Mono carrega a identidade técnica. Usada em labels, código inline, metadados e qualquer momento "terminal". Disponível em Light · Regular · Italic · Medium · SemiBold · Bold.

roboto flex · variable · 13 eixos

casa hacker

Roboto Flex é variable: 1 arquivo, 1000 pesos, 13 eixos de customização. Body de texto, títulos de página, copy longa. font-weight: 100 a 1000.

vt323 · pixel · 1 peso

retrowave 80s

VT323 é um specimen de terminal antigo. Usar com parcimônia, em momentos festivos: badges de evento, contadores, easter eggs. Não usar em corpo de texto.

escala tipográfica

02 · 14 tokens

Cada nível tem token CSS (var(--heading-04)) que aplica peso, tamanho e line-height numa única declaração via font.

code-01

12 / 16 · mono

labels secundários

code-02

14 / 20 · mono

code inline · meta

label-01

12 / 16 · 500

eyebrow uppercase

label-02

14 / 18 · 500

botões, abas

helper-01

12 / 16 · mono

helper de form

body-01

14 / 20 · sans

corpo compacto

body-02

16 / 24 · sans

corpo padrão

heading-01

14 / 18 · 600

label de card

heading-02

16 / 22 · 600

h3 dentro de seção

heading-03

20 / 28

subseção

heading-04

28 / 36

h2 de seção

heading-05

32 / 40

h2 de página menor

heading-06

42 / 50 · 300

h1 médio

heading-07

54 / 64 · 300

h1 página

pesos

03 · plex mono

IBM Plex Mono tem 6 pesos. Roboto Flex é variable, qualquer valor entre 100 e 1000.

Light · 300

titles pesados que pedem leveza visual.

Regular · 400

peso default · corpo.

Italic · 400i

ênfase · termos estrangeiros.

Medium · 500

labels de botão · destaque sutil.

SemiBold · 600

títulos de seção compactos.

Bold · 700

máxima ênfase · usar com parcimônia.

playground variável

04 · roboto flex

Roboto Flex expõe 13 eixos. Os 5 mais úteis estão no playground abaixo. Tente combinar weight alto com width condensado, ou slant negativo pra um itálico técnico.

hack a casa

weight (wght) 300

width (wdth) 100

slant (slnt) 0

optical (opsz) 64

font-size (px) 64

tracking & line-height

05 · regras

contexto	line-height	letter-spacing
corpo de texto (body-01, body-02)	1.5 (20/14, 24/16)	0
títulos pequenos (heading-01 a 03)	~1.3	0
títulos médios (heading-04, 05)	~1.25	-0.015em
display (heading-06, 07)	~1.15	-0.025em a -0.035em
label uppercase (label-01)	1.33	0.08em a 0.15em
code/mono	1.4 a 1.5	0

quando usar cada uma

06 · diretrizes

use

Plex Mono pra labels, code, meta, eyebrow
Roboto Flex pra body, títulos, lead text
VT323 só em momentos celebrativos (badges, easter eggs)
1 família por elemento — não misturar mono+sans no mesmo botão

não use

Plex Mono em parágrafos longos — fica cansativo
VT323 em corpo de texto ou áreas legibilidade-crítica
4+ pesos diferentes na mesma tela
tamanhos fora da escala (ex: 17px arbitrário)

acessibilidade

07 · wcag aa

Tamanho mínimo de 12px (label-01) — abaixo disso fica ilegível em mobile
Line-height nunca inferior a 1.2 em texto corrido
Letter-spacing positivo (≥0.08em) em texto uppercase pra preservar leitura
Suporte a zoom 200% sem quebra de layout — usar rem/em onde possível
Sem texto em imagem — sempre HTML semântico pra leitura por SR
Pesos extremos (100, 1000) só em uso pontual, nunca em corpo

código

08 · css

/* uso direto via token */
.page-title { font: var(--heading-07); }
.body-text  { font: var(--body-02); }
.eyebrow    { font: var(--label-01); text-transform: uppercase; letter-spacing: 0.08em; }

/* roboto flex variable */
.display {
  font-family: 'Roboto Flex', system-ui, sans-serif;
  font-variation-settings: 'wght' 300, 'wdth' 100, 'opsz' 96;
  font-size: 64px;
  letter-spacing: -0.025em;
}