Tipografia | DS CANTA.

Montserrat - Display

Fonte principal para titulos, headlines e elementos de destaque. Sempre em uppercase com letter-spacing negativo para impacto visual maximo.

CANTA. CANTA. CANTA. CANTA. CANTA. CANTA.

HEADLINE HEADLINE HEADLINE HEADLINE HEADLINE HEADLINE

Montserrat Alternates - Display

Variante alternativa para diferenciar headlines secundarias ou elementos especiais. Mesma escala da Montserrat principal.

CANTA. CANTA. CANTA. CANTA. CANTA. CANTA.

HEADLINE HEADLINE HEADLINE HEADLINE HEADLINE HEADLINE

Inter - Texto

Fonte para corpo de texto, descricoes, labels e conteudo geral. Altamente legivel em todos os tamanhos.

Regular 1.125rem (18px) - O sistema tipografico CANTA. garante legibilidade e consistencia visual. Medium 1.125rem (18px) - O sistema tipografico CANTA. garante legibilidade e consistencia visual. Bold 1.125rem (18px) - O sistema tipografico CANTA. garante legibilidade e consistencia visual.

Regular 1rem (16px) - O sistema tipografico CANTA. garante legibilidade e consistencia visual. Medium 1rem (16px) - O sistema tipografico CANTA. garante legibilidade e consistencia visual. Bold 1rem (16px) - O sistema tipografico CANTA. garante legibilidade e consistencia visual.

Regular 0.875rem (14px) - O sistema tipografico CANTA. garante legibilidade e consistencia visual. Medium 0.875rem (14px) - O sistema tipografico CANTA. garante legibilidade e consistencia visual. Bold 0.875rem (14px) - O sistema tipografico CANTA. garante legibilidade e consistencia visual.

Regular 0.75rem (12px) - O sistema tipografico CANTA. garante legibilidade e consistencia visual. Medium 0.75rem (12px) - O sistema tipografico CANTA. garante legibilidade e consistencia visual. Bold 0.75rem (12px) - O sistema tipografico CANTA. garante legibilidade e consistencia visual.

Fira Code - Monoespaco

Fonte monoespacada para blocos de codigo, tokens, badges tecnicos, breadcrumbs e valores numericos.

const theme = 'brutal'; // Regular 400 const theme = 'brutal'; // Medium 500 $color-brand-blue: #0050F2; Design System v1.0.0 // caption mono

Escala de Headings

Os headings h1 a h6 seguem uma escala progressiva usando Montserrat. Todos em uppercase com letter-spacing negativo.

h1 - Titulo Principal h2 - Titulo Secao h3 - Subtitulo h4 - Subtitulo Menor h5 - Label Grande h6 - Label Pequeno

Heading	Tamanho	Peso	Line-height
h1	`4rem` (64px)	`800` ExtraBold	`1.1`
h2	`2rem` (32px)	`700` Bold	`1.25`
h3	`1.5rem` (24px)	`700` Bold	`1.3`
h4	`1.25rem` (20px)	`700` Bold	`1.3`
h5	`1rem` (16px)	`700` Bold	`1.4`
h6	`0.875rem` (14px)	`700` Bold	`1.4`

Variaveis SCSS

Tokens tipograficos para uso consistente em todo o sistema.

$typography-font-family-display:  'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
$typography-font-family-display-alt: 'Montserrat Alternates', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
$typography-font-family-text:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
$typography-font-family-mono:    'Fira Code', 'Courier New', monospace;

var(--canta-font-family-display)
var(--canta-font-family-display-alt)
var(--canta-font-family-text)
var(--canta-font-family-mono)

Pesos Tipograficos

Os pesos disponiveis e seus usos recomendados no sistema.

Token	Valor	Nome	Uso
`$typography-weight-regular`	`400`	Regular	Corpo de texto (Inter)
`$typography-weight-medium`	`500`	Medium	Texto enfatizado, labels, links
`$typography-weight-semibold`	`600`	SemiBold	Sidebar links ativos, botoes
`$typography-weight-bold`	`700`	Bold	Headings h2-h6, titulos de secao
`$typography-weight-extrabold`	`800`	ExtraBold	h1, hero titles, logo, marca

$typography-weight-regular:   400;
$typography-weight-medium:    500;
$typography-weight-semibold:  600;
$typography-weight-bold:      700;
$typography-weight-extrabold: 800;