Tipografia

O sistema tipografico da SYSLED e construido sobre duas familias complementares que trabalham em harmonia: Montserrat para titulos, destaques e elementos de navegacao, e Inter para corpo de texto e interfaces. Essa combinacao garante contraste hierarquico claro, alta legibilidade em telas e uma identidade visual coesa em todos os pontos de contato da marca.

Montserrat traz personalidade e impacto com suas formas geometricas e pesos expressivos, enquanto Inter oferece neutralidade otimizada para leitura em telas, com metricas pensadas especificamente para interfaces digitais. Juntas, formam um sistema que funciona desde grandes hero banners ate microcopy em dashboards.

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');

/* CSS Variables */
:root {
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;
}

Montserrat e a fonte principal para titulos, headings, botoes, labels e elementos de destaque. Suas formas geometricas transmitem modernidade e solidez, ideais para a identidade SYSLED. Utilizamos os pesos de Light (300) a Black (900) para criar hierarquias visuais claras.

Pesos Disponiveis

Specimen

Inter e a fonte para textos de corpo, paragrafos, formularios e elementos de interface. Projetada especificamente para telas de computador, oferece legibilidade superior em todos os tamanhos, com formas claras e abertas que funcionam igualmente bem em alta e baixa resolucao.

Pesos Disponiveis

Specimen

Paragrafo Specimen

A escala tipografica define tamanhos, pesos e espacamentos padronizados para cada nivel hierarquico. Seguir essa escala garante consistencia visual em todas as telas e componentes do sistema.

Specimens ao Vivo

A hierarquia tipografica organiza a informacao em niveis de importancia, guiando o olhar do usuario do conteudo mais relevante ao mais detalhado. Abaixo, todos os niveis empilhados para demonstrar a progressao visual.

O contraste entre Montserrat (geometrica, impactante) e Inter (humanista, legivel) cria combinacoes equilibradas para diferentes contextos. Abaixo, exemplos de pareamentos recomendados.

Os tamanhos tipograficos devem se adaptar ao viewport para manter legibilidade e proporcao em todos os dispositivos. Utilize clamp() para transicoes fluidas entre breakpoints.

/* Tipografia Responsiva com clamp() */
.display-hero {
  font-size: clamp(2.5rem, 6vw, 4rem);
}

.heading-h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.heading-h2 {
  font-size: clamp(1.375rem, 3vw, 2rem);
}

.body-text {
  font-size: clamp(0.875rem, 1.5vw, 1rem);
}

Diretrizes essenciais para manter a consistencia e legibilidade do sistema tipografico em todos os produtos e interfaces SYSLED.

Em dashboards e tabelas, a apresentacao correta de numeros e fundamental. Utilize font-variant-numeric: tabular-nums para garantir alinhamento vertical perfeito em colunas de dados. Montserrat e usada para KPIs em destaque, enquanto Inter e preferida para tabelas e dados inline.

Tabular Nums em Tabelas

Use font-variant-numeric: tabular-nums para que digitos ocupem o mesmo espaco, garantindo alinhamento perfeito em colunas.

/* Numeros em tabelas e dashboards */
.data-value {
  font-variant-numeric: tabular-nums;
  font-family: 'Inter', sans-serif;
}

/* KPI em destaque */
.kpi-number {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}