Para melhorar a performance de carregamento das aplicações e reduzir o delay de renderização de fontes, utilizamos a família de fontes padrão para cada sistema, ou seja, a fonte exibida em um dispositivo IOS será diferente da exibida em sistemas Windows, Android, etc…
A escala tipográfica é utilizada principalmente para hierarquizar o conteúdo na estrutura página. A utilização dos títulos deve seguir a ordem lógica começando com H1 até H6 de acordo com a relevância do título em questão.
Body text | 16px 1rem
O título, ou h1, é utilizado 1 vez somente para marcar o título da página.
Os headings são utilizados para marcar os títulos das demais seções da página, cards, etc...
O body text é utilizado em parágrafos e textos longos. Sua utilização primária segue o alinhamento padrão ocidental à esquerda. Pode ser utilizado também com alinhamento ao centro desde que o conteúdo não ultrapasse 3 linhas de conteúdo.
Utiliza a variável darker(#1D2027) em backgrounds claros ou white (#FFFFFF) em backgrounds escuros.
Exemplo:
São links de texto internos ao conteúdo das páginas. Possui 2 possíveis estados para identificar se já foi, ou não visitado. O texto deve apresentar o sublinhado em todos os casos para indicar que é um link seguindo o padrão web para hiperlinks e o tamanho de de acordo com o conteúdo onde está aplicado.
Os links não visitados utilizam a cor #0066CC e os links visitados utilizam a cor #660099
Exemplo:
O contraste entre os pesos da fonte é utilizado para dar mais destaque a determinadas informações.
Utilizamos apenas 2 pesos de fonte: 400 e 600.
Peso 400 *é utilizado como padrão para itens como parágrafos, listas e tabelas;
Peso 600 *é utilizado para certos títulos, menus, e informações que merecem mais destaque.
Os textos não devem ter tamanhos menores que 16px, ideal para a leitura na web e mobile. Tamanhos menores que esse prejudicam a leitura para os usuários e mais ainda para os com baixa visão ou idosos.
Referência