Tipografia UI Design: Escalas Modulares

• Publicado em: February 21, 2017

Umas das minhas dificuldade em UI Design é encontrar uma harmonia entre os tamanhos das tipografias e criar uma tamanho que seja agradável, chegando a uma escala de forma consciente e não em um segmento usando valores aleatórios.

Foi ai que pesquisei e encontrei Modular Scale (Escala Modular), onde é criado proporções relativa desde de um primeiro tamanho de fonte estabelecido. No caso em que seu projeto exige uma boa dose de variedade tipográfica (talvez você está usando todos os 6 níveis de cabeçalho), você provavelmente vai querer escolher uma escala que permite mais subtileza entre as etapas.

Escolhendo um tamanho importante

O valor do seu “Número Importante” – o que é efetivamente o agente principal de sua escala modular – não pode ser negligenciado. Cada número gerado pela escala escolhida será baseado nele. Eu particularmente gosto muito de 16px e geralmente é quase uma regra em meus projetos, mas isso vai depender da tipografia escolhida, já que muitas vezes temos fontes que com a mesma medida em pixel podem varias de tamanho quando visualizamos. Então, a sua percepção é muito importante nesse caso.

Temos três preocupações, podemos usar a nossa escala para implementar algumas alterações de projeto, como:

Escolhendo uma medida;
Escolhendo um line-height (linha de altura);
Escolhendo tamanhos do heading (título);

É importante ter em mente que uma escala modular não é uma garantia. É uma ferramenta de design. E, como qualquer ferramenta, é apenas um auxílio.

Um projeto de sucesso ainda precisará, em grande medida, do olho de um designer e de sua sensibilidade estética e sensibilidade das necessidades do projeto.

Se você sentir que há uma necessidade de quebrar da escala. A improvisação pode emprestar (ou reintroduzir) o orgânico de volta em seu projeto e ao permitir que você crie tensões, assimetria e originalidade.

Bom, a matemática é a seguinte, multiplicando 16px por 1,618 para determinar o próximo tamanho, ou dividir pelo mesmo número para determinar o valor anterior. Aonde chegamos no valor 1,618? É o valor da escala desejada que queremos no nosso projeto, basicamente a escala padrão de todas as fontes, 1:1,618.

Conta para encontrar o próximo tamanho:

10.000 * 1.618 = 16.180
16.180 * 1.618 = 26.179
26,179 * 1,618 = 42,358
42.358 * etc.

Conta para encontrar o tamanho anterior:

10.000 / 1.618 = 6.180
6,180 / 1,618 = 3,819
3,819 / 1,618 = 2,360
2.360 / etc

O glorioso Tim Brown desenvolveu uma ferramenta que já faz esses cálculos e ajudam na matemática de uma forma prática e rápida, onde você pode verificar algo que mais se adequa a seu projeto escolhendo o tamanho base e vários tipo de escala, não só a de 1:1618. Nele também já dá as variáveis para SASS, caso você o use e pode ser adicionando um plugin feito para SASS já fazendo essa relação em seu CSS.
Link: http://www.modularscale.com/

Temos essa outra ferramenta que faz a mesma coisa com outra apresentação feito por uns finlandeses:
Link: https://www.gridlover.net/try

Estou aplicando Modular Scale no novo design da Romae. Logo, colocarei no ar.