Tipografia textos, cabeçalhos, listas e mais
Tipografia
Open Sans
Para a apresentação dos elementos textuais do Design System, somente uma família de fonte é utilizada: a Open Sans. Sua escolha foi feita devido à diversidade de pesos da fonte que facilita o uso e a criação de hierarquias entre os textos, bem como a compreensão dos elementos da tela. A utilização da Rawline tem como objetivo facilitar o reconhecimento, pelos cidadãos, dos produtos do Governo, juntamente com o padrão de cores e elementos gráficos definidos no Design System. A Open Sans está disponível em https://www.cdnfonts.com/open-sans.font.
Fonte Base
Em um documento com uma definição de 72 dpi (ou 72 ppi ) dentro de um software gráfico (como Photoshop), pontos = pixels, mas isso não é verdade em um navegador (veja “Tabela de conversão PX, PT, EM e %”). Para uma boa comunicação, sempre indique os tamanhos em pixels para os desenvolvedores da Web que devem converter para em ou rem. Atualmente, uma prática recomendada é permitir que um dispositivo (como navegador web) tome as decisões baseadas no tamanho da fonte base. O padrão é que em uma janela com visualização de 96 dpi tenha a fonte base padrão de 16px, mas dificilmente essa regra se aplique em todos os casos (como um smart watch). No Design System do Governo optamos pela fonte base de 14 pixel por considerarmos que esse tamanho seja aplicável na maioria dos dispositivos e situações, porém essa escolha não é definitiva. Definir um tamanho de uma fonte base (juntamente com a referência do uso de unidades “em” ou “rem”) facilitará a hierarquia entre os textos, otimizando o efeito cascata (veja escala tipográfica).
Exemplo de tamanho dos textos:
Headings
h1. Heading 1
h2. Heading 2
h3. Heading 3
h4. Heading 4
h5. Heading 5
h6. Heading 6
Tamanho de fonte para textos simples
Lead body. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed ornare nulla.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
