Tipografia no Material: escala, token e entrelinha

Uma escala tipográfica responde a uma pergunta simples: qual tamanho cada texto recebe. Com ela, a mesma função tem a mesma cara em todas as telas, e ninguém precisa inventar tamanhos novos a cada tela. O guia do Material Design define 30 estilos de tipo em uma escala (em inglês), 15 baseline e 15 enfatizados. O guia também observa que nenhum produto vai usar todos eles (em inglês). Ou seja, a escala é um cardápio para escolher, não uma lista para preencher inteira.

Os papéis e onde eles aparecem

A escala organiza os estilos em cinco papéis que descrevem a função de cada um (em inglês): display, headline, title, body e label. Cada papel tem três tamanhos, large, medium e small. Os estilos de display são o maior texto da tela, reservado a textos curtos ou importantes em telas grandes (em inglês). Headlines marcam textos curtos de alta ênfase em telas menores (em inglês). Titles carregam textos de ênfase média que continuam curtos (em inglês). Body cobre os trechos mais longos (em inglês), e label faz o texto pequeno e utilitário dentro de componentes (em inglês), como um botão.

Do papel ao token

Cada um dos 30 estilos tem um único token que reúne todas as propriedades padrão (em inglês). Esse nome guarda fonte, entrelinha, tamanho, tracking e peso. O guia trata cada propriedade como um token próprio também (em inglês), para quem precisa de controle mais fino. Na prática, tamanho, peso e entrelinha andam juntos com um nome só. O componente pede body medium e recebe os três de uma vez.

Sua fonte sobre a escala do sistema

A escala separa duas fontes. Uma fonte de marca cobre os estilos maiores, como headline e display (em inglês), onde a expressão conta. Uma fonte simples cobre body e label (em inglês), onde a leitura conta. Roboto é o padrão para as duas. O guia sugere trocar Roboto para reforçar a expressão da marca (em inglês), e avisa para não mudar o tamanho do tipo, porque isso pode afetar como os componentes renderizam e refluem (em inglês).

Tratamento editorial

Um tratamento editorial é um momento autônomo conduzido pelo tipo (em inglês), em que tamanhos customizados chamam atenção e deixam o layout funcional de lado. O guia os usa para celebrar conteúdo, dar voz ao usuário ou destacar funções sob medida (em inglês). Os eixos variáveis fazem o trabalho: peso, grade, largura e tamanho óptico. A grade é o mais sutil. Ela muda a ênfase sem refluir o texto (em inglês), o que ajuda quando o mesmo texto fica mais pesado no modo escuro.

O erro comum

O erro mais comum é escolher o tamanho no gosto e nunca definir a entrelinha. Tamanho sem entrelinha é só meio estilo. O guia amarra os dois e pede uma entrelinha de cerca de 1,2 vez o tamanho nos estilos maiores (em inglês) e de cerca de 1,5 em body e label (em inglês). Se ela fica apertada, o texto perde o ritmo. Se fica solta, as linhas deixam de parecer um bloco só. O Nielsen Norman Group mediu que a velocidade de leitura pode variar 35% entre duas fontes igualmente legíveis (em inglês), É muita diferença para uma escolha que costuma ser feita no olho.

O que medir depois

Três checagens resolvem quase tudo. Contraste primeiro: o guia pede 3:1 no texto grande e 4,5:1 no texto pequeno (em inglês). Depois, o comprimento da linha, porque linha longa cansa a vista. Por fim, o salto entre níveis, porque a escala pede contraste real entre tamanhos, sem diferenças pequenas (em inglês).

Onde o guia deixa em aberto

O guia entrega a escala, os papéis e os tokens. Ele não decide quando uma marca é forte o bastante para sair dessa escala. Também não define regra para idiomas de palavra longa, em que um título pode estourar uma medida estreita. Ele também lembra que a pessoa lê cerca de 28% das palavras numa página média (em inglês). Esse número importa para uma escolha tipográfica, porque quem escaneia se apoia mais no salto visual entre níveis do que nas palavras. O NN/g acrescenta que bater o olho numa palavra favorece texto maior, mais largo e em caixa alta (em inglês). Só que a mesma caixa alta atrapalha num trecho longo, e a escala sozinha não resolve esse conflito.

Para o contexto desses papéis, veja o post sobre Material Design, o post sobre tokens e tema do Material e o post sobre papéis de cor.