Fundamentos — 02

Tipografia

Trio tipográfico: Barlow Condensed para display, Barlow para body e JetBrains Mono para elementos técnicos e código.

02.1

Famílias de Fonte

Três famílias com papéis bem definidos. Nunca intercambie os papéis.

--font-displayDisplay / TítulosBarlow Condensed

MISSÃO CUMPRIDA

Condensada e impactante. Usada em headings, labels de seção em caixa alta e elementos de identidade. Weights: 300, 400, 600, 700, 900.

--font-bodyBody / InterfaceBarlow

Prepare-se para a sua aprovação com método e disciplina.

Legível e versátil. Usada em parágrafos, botões, inputs e qualquer texto de interface. Weights: 300, 400, 500, 600, 700, 900.

--font-monoMonospace / Código / Labels técnicosJetBrains Mono

01 — var(--text-base) · 16px

Monospace de alta legibilidade. Usada em tokens, código, labels técnicos com tracking alto e numeração sequencial.

02.2

Escala Tipográfica

Escala construída em progressão. Use os tokens CSS, não os valores px diretamente.

--text-6xl120px · w900
6XL / Display Hero
--text-5xl80px · w900
5XL / Display Grande
--text-4xl64px · w700
4XL / Heading 1
--text-3xl48px · w700
3XL / Heading 2
--text-2xl36px · w700
2XL / Heading 3
--text-xl28px · w600
XL / Heading 4
--text-lg22px · w600
LG / Lead / Subtítulo
--text-md18px · w400
MD / Body grande
--text-base16px · w400
BASE / Body padrão
--text-sm13px · w400
SM / Auxiliar / Label
--text-xs11px · w700
XS / Caption / Badge
02.3

Exemplos de Uso

Padrões tipográficos mais comuns. Use como referência ao compor novos elementos.

Título de seção — caixa alta, condensed, bold

Cursos Militares

font: 900 48px/1.05 'Barlow Condensed';
text-transform: uppercase;
Label de seção — monospace, tracking largo
01 — Fundamentos
font: 700 11px 'JetBrains Mono';
letter-spacing: 0.15em;
text-transform: uppercase;
Parágrafo — body regular

O EuMilitar prepara candidatos para concursos das Forças Armadas e corporações militares com método de estudo comprovado e alto índice de aprovação.

font: 400 16px/1.6 'Barlow';
color: var(--text-secondary);