Tipografia
Noto Sans como tipografia principal.
Noto Sans
A Noto Sans é a tipografia oficial do Design System. Ela foi escolhida por um motivo simples: legibilidade máxima em contextos complexos.
Estamos falando de uma plataforma usada por gestores públicos, técnicos e analistas, muitas vezes em telas densas, cheias de dados, mapas, tabelas e formulários longos. A tipografia precisa se manter legível em qualquer contexto.
Por que Noto Sans
-
Alta legibilidade em telas Desempenha bem em resoluções baixas e altas, com ótima distinção entre caracteres semelhantes.
-
Neutralidade funcional Não carrega personalidade excessiva.
-
Cobertura extensa de idiomas A família Noto foi criada para suportar praticamente todos os alfabetos modernos, garantindo escalabilidade institucional e inclusão.
-
Compatibilidade técnica total Funciona de forma previsível em navegadores, sistemas operacionais e ambientes de renderização distintos.
Escala tipográfica
É utilizada a escala tipográfica do Tailwind CSS garantindo alinhamento entre design e código.
Escala utilizada
| Classe Tailwind | Tamanho | Uso recomendado |
|---|---|---|
text-xs | 12px | Metadados, timestamps, badges discretos |
text-sm | 14px | Texto secundário, legendas, helper text |
text-base | 16px | Texto principal da interface |
text-lg | 18px | Introduções curtas, destaques leves |
text-xl | 20px | Subtítulos e cabeçalhos menores |
text-2xl | 24px | Títulos de seção |
text-3xl | 30px | Títulos de página |
text-4xl | 36px | Destaques editoriais, hero titles |
text-5xl | 48px | Headlines e chamadas principais |
text-6xl | 60px | Títulos de landing pages |
text-7xl | 72px | Campanhas visuais e banners |
text-8xl | 96px | Peças promocionais e capas |
text-9xl | 128px | Posters digitais e materiais gráficos |
Pesos tipográficos
Todos os pesos da Noto Sans estão disponíveis e podem ser usados conforme a hierarquia semântica.
| Classe Tailwind | Peso | Uso recomendado |
|---|---|---|
font-thin | Thin | Detalhes visuais e peças decorativas |
font-extralight | Extra Light | Texto editorial delicado |
font-light | Light | Conteúdo leve e secundário |
font-normal | Regular | Texto principal da interface |
font-medium | Medium | Ênfase sutil em trechos importantes |
font-semibold | Semi Bold | Títulos, labels e chamadas de atenção |
font-bold | Bold | Destaques e hierarquia forte |
font-extrabold | Extra Bold | Headlines e chamadas impactantes |
font-black | Black | Peças promocionais e hero sections |