Nossas tipografias equilibram funcionalidade e estilo, proporcionando uma experiência fluida e agradável.
Poppins &
Open Sans
Poppins
O Poppins é a fonte principal da SULTS, escolhida por sua estética geométrica e precisão visual, refletindo os valores de inovação e simplicidade da marca. Sua versatilidade a torna ideal para títulos e comunicações impactantes, alinhando-se perfeitamente à identidade visual da SULTS.
Open Sans
Open Sans é a fonte secundária da SULTS, utilizada somente na plataforma por sua legibilidade excepcional e design amigável. Suas formas abertas e grande clareza garantem uma leitura fácil em telas e tamanhos pequenos, tornando-a ideal para conteúdos funcionais e textos de apoio.
Hierarquia visual
Os tamanhos de texto são definidos com base no ponto do título principal. Por exemplo, se o título for 64px, o subtítulo terá 32px (64/2), etc. Se o resultado do cálculo for um número decimal, arredonde para o número inteiro mais próximo, garantindo consistência visual.
O título é o elemento principal e mais destacado no material de design. A fonte Poppins Bold, é a recomendada para garantir impacto e ênfase visual.
O subtítulo é uma extensão concisa das informações do título. A fonte Poppins Semibold, é a recomendada para manter o equilíbrio entre destaque e legibilidade.
O botão de ação, ou call to action, é um elemento chave para direcionar o usuário. A fonte Poppins Bold, é recomendada e pode ser utilizada em caixa alta.
O texto de destaque, como elemento central na hierarquia visual, pode ser combinado com as cores do brandbook. A fonte Poppins Semibold, é recomendada para assegurar ênfase.
O corpo do material, como parte fundamental da hierarquia visual. A fonte Poppins Regular, é recomendada para garantir uma leitura fluida e consistente.
Alinhamentos
Você pode alinhar os textos à esquerda ou centralizá-los usando a fonte Poppins, mas nunca justificados. Alinhamento à direita é reservado apenas para idiomas que seguem essa direção.
Alinhado na esquerda
Lorem impsu dolor sit amet.
Integer feugiat a erat fermentum.
Vestibulum id nibh.
Texto à esquerda
Alinhado no centro
Lorem impsu dolor sit amet.
Integer feugiat a erat fermentum.
Vestibulum id nibh.
Texto centralizado
Alinhado na direita
تعزيز
الإدارة
بالتميز
Texto à direita para idiomas que seguem essa direção
Isso é justificado
Lorem impsu dolor sit amet.
Integer feugiat a erat fermentum.
Vestibulum id nibh.
Não justifique os textos
Casos de uso
A seguir, apresentamos dois exemplos que aplicam os princípios de hierarquia visual e alinhamento, ajudando a organizar o conteúdo de forma clara e conforme as melhores práticas de design da SULTS.
