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.