Escala Modular: a hierarquia correta para seus textos
Aprenda a como construir níveis de texto, e a definir valores de tamanho, altura de linha, e outros.
Afinal, o que são escalas modulares?
Eu já li vários artigos por aí que trazem explicações pouco aprofundadas sobre o conceito “escala modular”, e de certa forma, não vejo problema no profissional não saber a teoria que vem por trás disso, mas saber o que é torna essa pessoa muito mais rica de informações.
Escalas modulares são um sistema harmônico que, por meio da matemática, busca trazer uma sequência numérica que faça sentido, em vez de valores definidos aleatoriamente. A utilização desse simples processo, além dos ganhos de uma interface condizente, colabora na agilidade de produção, reduzindo o tempo que você levaria pensando e calculando algo, quando pode conseguir de uma maneira muito mais prática.
Esse tema começou a ser bem discutido no universo da web em 2011, numa publicação feita por Tim Brown no A List Apart, em que o autor retratou o sistema da seguinte forma:
Uma escala modular é uma sequência de números que se relacionam uns com os outros de maneira significativa. Usando a proporção áurea, por exemplo, podemos produzir valores para uma escala modular multiplicando por 1,618 para chegar ao próximo número mais alto ou dividindo por 1,618 para chegar ao próximo número abaixo.
Aplicando as escalas modulares
A premissa é bem simples, como você pode ver. Dois valores multiplicados aumentam o nível da escala, e quando divididos, diminuem. Mas vamos por partes para que você entenda melhor.
Tamanho do texto
A primeira coisa que é importante entender, sobre questões de acessibilidade, é que 16 pixels é o tamanho mais recomendado para leitura quando se trata do texto de corpo, que pode ser um parágrafo, por exemplo. E isso não sou eu quem está dizendo, e sim as grandes referências que temos em usabilidade digital hoje, como o artigo Font Size on the Web, da Universidade da Pensilvânia.
Considerando que temos 16 pixels como o tamanho base do nosso produto, é com ele que vamos gerar todos os outros níveis, como títulos, subtítulos e legendas. Esse valor vai ser multiplicado ou dividido por um nível de proporção, como a famosa proporção áurea. Caso você não saiba, proporção áurea é equivalente ao valor 1,168, é a partir desse valor (ou do valor da proporção que você escolher) que você irá definir os próximos tamanhos. Dessa forma, começamos a definir os tamanhos da seguinte maneira:
16 ÷ 1,168 = 9.889px
16 × 1,168 = 25.888px
25.888 × 1,168 = 41.887px
41.887 × 1,168 = 67.773px
Nesse ponto, definimos um valor abaixo do tamanho base, e três valores a cima, e você conseguiu perceber que todos os números vieram quebrados, com casas decimais, e isso é mega comum, você não precisa se preocupar, mas caso você queira arredondar para o valor arredondado mais próximo, como 42px em vez de 41,887, fique à vontade.
Altura de linha
Da mesma forma que temos um tamanho ideal para seus textos, também há recomendações para alturas de linha, que melhora a legibilidade principalmente de textos com muitas linhas. Imagina que triste ter que ler um texto grande, em que todas as linhas estão tão próximas, que quando você vai pular pra próxima, você acaba se enganando e começando a ler a mesma linha novamente. Erros que parecem bem bobos, mas que incomodam o usuário.
Esse fator da altura de linha acontece de uma forma bem fácil: multiplicando o tamanho do texto por um valor específico. É extremamente comum ver produtos digitais utilizando uma altura de linha que é até 1,5x maior que o tamanho atual, e inclusive, isso é uma recomendação da própria W3C, que você pode conferir na página Adapting Text.
Seguindo o exemplo que fizemos para gerar o tamanho dos textos, tudo o que precisamos fazer agora é multiplicá-las por um valor que crie uma altura de linha agradável, e esse é um procedimento comum de testar, validar, e se for necessário, corrigir e testar novamente. O cálculo é extremamente simples:
Tamanho do texto × Proporção = Altura de linha
Seguindo essa fórmula, pegamos então os tamanhos do texto que acabamos de criar, e multiplicamos eles por, por exemplo, 1,5.
10 × 1,5 = 15px
16 × 1,5 = 24px
26 × 1,5 = 39px
Apesar de 1,5 ser uma grande referência, e estar presente em muitas interfaces, é importante ressaltar que quanto maior o tamanho da fonte, maior será a altura de linha, o que faz com que precisemos diminuir esse valor de proporção para criar um espaçamento mais adequado. Da mesma forma que textos com pouquíssimo espaçamento causam dificuldades de leitura, as alturas de linha muito grandes também causam frustrações, porque criam uma leitura com pausas excessivas de uma linha para outra.
Considerando os dois tamanhos maiores da escala criada, que são 42 e 68 pixels, poderíamos fazer uma multiplicação pelo valor 1,2, e validar o resultado disso em uma interface.
42 × 1,2 = 50,4px
68 × 1,2 = 81,6px
Ferramentas
É importante saber a teoria, os cálculos por trás de toda essa formulação de tamanhos e alturas de linha, simplesmente para ter noção de como isso acontece, e que nada é por acaso. Caso você trabalhe com UI Design, isso é algo que você deve e irá vivenciar em todos os seus projetos, e claro que pra facilitar isso, existem ferramentas que criam todo esse cálculo para nós:
