Como criar uma Tipografia ou Fonte (Passo-a-passo)

[Acre1 2.398]

 

 

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.

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

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.

 

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.

Video Player

 

00:00

 

01:07

---

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, 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

, Corel Draw, Inkscape ou 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 (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 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

.

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

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

, 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

, 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 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 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.