Tipografia

Sistema tipográfico da IARA usando as famílias Funnel Display para títulos e Nunito Sans para corpo de texto.

Famílias Tipográficas

Duas famílias complementares formam o sistema tipográfico.

Display

Funnel Display

Utilizada para títulos, cabeçalhos e elementos de destaque. Transmite modernidade e sofisticação.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Body

Nunito Sans

Utilizada para corpo de texto, parágrafos e elementos de interface. Oferece excelente legibilidade.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Pesos - Funnel Display

Variações de peso disponíveis para a fonte de display.

Funnel Display Lightfont-weight: 300
Funnel Display Regularfont-weight: 400
Funnel Display Mediumfont-weight: 500
Funnel Display SemiBoldfont-weight: 600
Funnel Display Boldfont-weight: 700
Funnel Display ExtraBoldfont-weight: 800

Hierarquia de Texto

Escalas de tamanho para criar hierarquia visual clara.

H1text-5xl md:text-7xlfont-display

Título Principal

H2text-4xl md:text-5xlfont-display

Subtítulo Grande

H3text-2xl md:text-3xlfont-display

Título de Seção

H4text-xl md:text-2xlfont-display

Subtítulo de Seção

Body Largetext-lgfont-body

Texto de corpo grande para destaques e introduções.

Bodytext-basefont-body

Texto de corpo padrão para parágrafos e conteúdo geral da interface.

Smalltext-smfont-body

Texto pequeno para legendas e informações secundárias.

Captiontext-xsfont-body

TEXTO MUITO PEQUENO PARA LABELS E METADADOS

Tokens CSS

Variáveis CSS para uso no código.

/* Fontes */
--font-display: "Funnel Display", system-ui, sans-serif;
--font-body: "Nunito Sans", system-ui, sans-serif;

/* Tamanhos Fluidos */
--f-h1: clamp(2.5rem, 0.5rem + 6.4vw, 7.5rem);
--f-span-hero: clamp(1.25rem, 1rem + 0.8vw, 1.875rem);
--f-pag: clamp(1rem, 0.805rem + 0.625vw, 1.313rem);
--f-titulo-plano: clamp(3.125rem, 2.841rem + 0.909vw, 3.75rem);
--f-btn01: clamp(1rem, 0.688rem + 1vw, 1.313rem);

/* Tailwind Classes */
.font-display { font-family: var(--font-display); }
.font-body { font-family: var(--font-body); }

Boas Práticas

Diretrizes para uso correto da tipografia.

✓ Faça

  • • Use Funnel Display para títulos e CTAs
  • • Use Nunito Sans para corpo de texto
  • • Mantenha contraste adequado (4.5:1 mínimo)
  • • Use hierarquia visual clara
  • • Prefira tamanhos fluidos (clamp)

✗ Evite

  • • Misturar muitos pesos diferentes
  • • Usar texto menor que 12px
  • • Longos blocos de texto em display
  • • Texto todo em maiúsculas (exceto labels)
  • • Espaçamento de linha muito apertado

Downloads

Baixe os arquivos das fontes.

Funnel Display (.ttf)Nunito Sans (.ttf)