Design SystemFundamentos

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 TailwindTamanhoUso recomendado
text-xs12pxMetadados, timestamps, badges discretos
text-sm14pxTexto secundário, legendas, helper text
text-base16pxTexto principal da interface
text-lg18pxIntroduções curtas, destaques leves
text-xl20pxSubtítulos e cabeçalhos menores
text-2xl24pxTítulos de seção
text-3xl30pxTítulos de página
text-4xl36pxDestaques editoriais, hero titles
text-5xl48pxHeadlines e chamadas principais
text-6xl60pxTítulos de landing pages
text-7xl72pxCampanhas visuais e banners
text-8xl96pxPeças promocionais e capas
text-9xl128pxPosters 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 TailwindPesoUso recomendado
font-thinThinDetalhes visuais e peças decorativas
font-extralightExtra LightTexto editorial delicado
font-lightLightConteúdo leve e secundário
font-normalRegularTexto principal da interface
font-mediumMediumÊnfase sutil em trechos importantes
font-semiboldSemi BoldTítulos, labels e chamadas de atenção
font-boldBoldDestaques e hierarquia forte
font-extraboldExtra BoldHeadlines e chamadas impactantes
font-blackBlackPeças promocionais e hero sections