Aprenda como criar uma tipografia personalizada para seu projeto. Do sketch à tela do seu computador, explico o passo-a-passo da criação e desenvolvimento de uma fonte.

A Tipografia está ao nosso redor, nas placas das ruas, livros, telas, muros, cartões de visita, entre muitos outros. Ela mostra o caminho, indica o que fazer e estamos tão acostumados com isso que nem percebemos ou paramos para pensar sobre ela.

A maior parte dos designers tem interesse em criar a sua própria Fonte e, particularmente, esta é uma das áreas do design que mais me prende a atenção, em todas (ou quase todas) as marcas em que trabalho procuro criar a própria tipografia para compor o projeto.

A ideia aqui é ensinar como criar uma tipografia ou fonte. Não vou aprofundar muito na história, porque existem diversos livros sobre isso, mas é importante que além desse post você procure estudar mais sobre o assunto.

+ Entenda também: A diferença entre Tipografia e Lettering

Tipografias devem ser bem pensadas

Cada tipografia tem a sua própria característica e é pensada para atender uma determinada demanda.

Por exemplo, as Letras em placas de trânsito, que estão por todas partes do mundo, possuem uma boa legibilidade com o intuito de garantir que você consiga ler a sinalização mesmo que dirigindo a 90km por hora.

A legibilidade é o ponto mais importante em uma tipografia — o tamanho, peso, espaçamento, contraste, e tipo de fonte,— tudo contribui para que o texto seja legível e que gere identificação com o público alvo, que é um fator importante a considerar.

Para cada situação existe um tipo específico de fonte. Cada letra transmite uma sensação diferente, possui um tom específico de voz, e pode manipular a maneira como percebemos a mensagem.

A ideia aqui é ensinar ou ajudar a como criar uma tipografia, mas é importante considerar o que foi dito antes.

Considere se sua fonte será com ou sem serifa

Fontes serifadas são mais utilizadas em textos longos como livros. A característica que do corpo da fonte conduz a visão de uma letra para outra, deixando mais confortável a leitura.

Fontes aserifadas (sem serifa) são normalmente mais usadas em títulos, subtítulos, ou em situações que seja preciso chamar mais atenção. E também são mais indicados para aplicações em telas digitais.

Antes de começar a criar uma tipografia, estude também a estrutura que a compõe. Estude a anatomia da fonte.

Como criar uma tipografia: o começo

Para começar, recomendo que comece pelos caracteres de controle (são as letras que servirão de base para o resto do alfabeto) que geralmente são o “H” e “O” em maiúsculo, e o “n”, “o” e “y” em minúsculo. Eles apresentam várias características diferentes que podem ser usadas posteriormente na construção de outras letras.

O “H” possui duas hastes verticais e uma barra transversal além de marcar a largura e a altura média das letras, a letra “O” marcará as curvas longas.

Já o “n” possui uma abertura na parte inferior e em alguns casos a serifa na sua parte superior, a letra “o” por ser totalmente fechada ajuda a definir as curvas em minúsculo e o “y” pois, possui os dois braços em diagonal, e a calda na parte que desce.

Desenhe as linhas de base

Comece desenhando o grid de linhas que vai sevrir como base para as letras.

1. Faça uma linha base (baseline).
2. Faça outra linha 50 mm acima da linha base, chamada altura-x.
3. Faça duas linhas 20 mm acima da altura-x e 20 mm abaixo da linha base, formando assim a linha de caixa alta e a linha descendente.
4. Faça a última linha 10 mm acima da linha da caixa alta, chamada linha ascendente.

Veja a imagem abaixo:

Caso queira desenhar no computador, segue o vídeo abaixo demonstrando a construção das linhas no Adobe Illustrator, usando grids.

Desenhe os Caracteres de Controle

Agora, comece desenhando os caracteres de controle. Não se preocupe em deixar perfeito de primeira, mas observe os ângulos e as proporções de cada letra.

Dica: procure utilizar uma régua e um compasso, pois irão auxiliar bastante com os ângulos.

Procure deixar as hastes da mesma largura. Este é o traço principal na vertical ou diagonal de uma letra.

Se você deixar todas as letras na mesma altura irá parecer que as letras “n” e “o” são mais baixas que as demais (pela curvatura). Então desenhe a curvatura um pouco acima da altura-x e um pouco abaixo da linha base.

Dica: caso não tenha ideia de como desenhar o seu tipo, procure uma fonte pronta de preferência com serifa, e tente copiar a sua estrutura. MAS NÃO COPIE TUDO. Observe as características do seu corpo e tente aprender com elas, isso vai ajudá-lo a destravar.

Desenhe todas Letras do Alfabeto

As demais letras seguirão o padrão já desenhado até então. Por exemplo, o estilo da serifa deverá ser reaproveitado nas demais letras como a largura da haste, a altura das ascendentes, etc.

Não pense nos tipos isoladamente, a tipografia é formada pelo conjunto de caracteres que compõem o alfabeto.

Caracteres que compõem uma tipografia completa:

• O alfabeto em maiúsculas e minúsculas de A a Z.
• Os números de 0 a 9.
• Sinais:
  • Ponto final (.)
  • Vírgula (,)
  • Dois pontos (:)
  • Ponto e vírgula (;)
  • Ponto de exclamação (!)
  • Ponto de interrogação (?)
  • Apóstrofo (‘)
• Acentos:
  • Til (~)
  • Acento Agudo (´)
  • Acento Grave (`)
  • Acento Circunflexo (^)
• Expressões numéricas:
  • Parênteses ()
  • Colchetes []
  • Chaves {}
  • Divisas ,
• Barras:
  • Barra (/)
  • Barra invertida (\)
  • Barra vertical (|)
• Símbolos básicos de matemática e equação (=, +, -, ×, ÷)
• Outro símbolos:
  • Hashtag (#)
  • Asterisco (*)
  • Cifrão ($)
  • Porcentagem (%)
  • Trema (¨)
  • E comercial (&)
  • Indicador ordinal (º, ª)
  • Arroba (@)
  • Grau (°)
  • Aspas (“”)

Bastante itens né? Mas como disse, a criação da tipografia deve ser pensada em conjunto, para facilitar quando criar uma tipografia você pode usar algo de outra tipo. As letras em maiúsculas seguem as proporções do “H” e as minúsculas as do “n”, esse é outro motivo pelo qual são as primeiras letras a serem desenhadas.

Por exemplo se girarmos o “n”em 180 graus, você terá um “u”. Se for uma fonte serifada, precisaria apenas de pequenos ajustes nesta serifa para se adequar.

Outro exemplo é o “p” em minúsculo, que girando-o em 180 graus você obtém o “b”, se refletí-lo você terá o “d”, e se girá-lo novamente em 180 graus, você terá um “q”.

Digitalização e Vetor

Depois de desenhar todas as letras, é hora de digitalizá-las.

Você pode escancear ou tirar foto dos desenhos. Então em um programa que trabalhe com formas vetoriais —por exemplo, Adobe Illustrator, Corel Draw, Inkscape ou Figma (free)—, redesenhe todas as suas letras.

Para transformar esses arquivos em fontes você precisara de um programa próprio para isso. Basta copiar do os vetores do Illustrator, por exemplo, e colar no FontLab.

Utilizo o FontLab porque tive mais afinidade com a interface, mas existem outros programas como Fontark, Fontstruct, entre outros.

Regras de Espaçamento entre Letras

Depois de digitalizar todas as formas e passá-las para um programa de fontes, você terá que se preocupar com o espaçamento entre as letras.

Existem algumas regras que devemos seguir, por exemplo:

• Letras com linhas redondas devem ficar mais próximas de letras com linhas retas,
• Letras com diagonais devem ficar ainda mais próximas.

Esse espaçamento vai muito do seu gosto pessoal e você terá que ir ajustando até que fique agradável e que dê continuidade na leitura.

Outro fator a se preocupar é o Kerning. O objetivo é ajustar o espaçamento entre dois caracteres que parecem muito abertos ou muito apertados.

Um ótimo exemplo é o espaçamento entre as letras ‘A‘ e ‘V‘. Tanto o ‘A’ quanto o ‘V‘ devem ser espaçadas de modo que as extremidades de seus traços quase toquem o traço vertical da próxima letra.

Exporte sua fonte

Depois de todo esse processo é só exportar a fonte no formato que você queira, seja em Open type ou True type. Eu recomendo o Open type que pode ser utilizado tanto em sistemas Mac quanto Windows.

Durante todo esse processo você vai avançar e voltar várias etapas. Mas não tenha pressa, é assim mesmo.

Não esqueça de fazer impressões para testar a legibilidade da fonte e, se possível, mostre para pessoas próximas, ou o cliente, caso você julgue necessário.

Por último, siga meu instagram @SAMUELSANTOSDG, onde eu posto dicas sobre tipografia! Espero que eu consiga ter ajudado de alguma forma. Caso tenha qualquer dúvida ou sugestão comente abaixo.

The post Como criar uma Tipografia ou Fonte (Passo-a-passo) appeared first on Des1gnON.