Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the acf domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/u810915952/domains/romulobrasil.com/public_html/wp-includes/functions.php on line 6121
Tipografia UI Design: Escalas Modulares - Rômulo Brasil

Tipografia UI Design: Escalas Modulares

• Publicado em: fevereiro 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:

  1. Escolhendo uma medida;
  2. Escolhendo um line-height (linha de altura);
  3. 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.