Quem acompanha o blog O Tipo da Fonte desde o seu início, já deve ter percebido que recentemente ele ganhou um logotipo exclusivo, deixando de lado o antigo nome com a fonte padrão do wordpress. Já estava na hora do nosso querido blog começar a ter uma identidade própria. Mas como ele foi desenvolvido? Qual foi o processo de criação? A resposta para essas e outras perguntas, você confere no decorrer desse post. Ficou curioso?

Introdução

Bom, geralmente a criação de um logotipo não acontece da noite para o dia. Como todo processo criativo, dificilmente se consegue pensar em algo já pronto, alcançando um bom resultado com pouco tempo e esforço. Não é tão simples assim. A criação de um logotipo é um processo que exige bastante dedicação por parte do designer, principalmente para aqueles menos experientes.

Modelo de design utilizado

Normalmente, a criação de um logotipo é um processo que passa por algumas etapas que são necessárias para um bom desenvolvimento. Existem diversos modelos de design, e esse utilizado no projeto foi uma adaptação do Design Thinking, sendo excluídas algumas etapas. Abaixo será explicado o processo de criação.

Definição

Antes de colocarmos a mão na massa, definimos alguns objetivos à serem contemplados pelo logotipo, que são listados abaixo:

• Ter um aspecto moderno, devido à linguagem levemente informal utilizada nos posts;
• Ter um design minimalista e limpo, predominando o preto e branco, já que se trata de um blog de tipografia;
• Mesmo o blog tendo essa característica um pouco informal, o logotipo não pode deixar de passar seriedade;
• O logotipo deve ser preferencialmente tipográfico, e caso tenha algum símbolo, que esse seja formado por letras.

Esboços

Essa etapa utilizou as definições dos objetivos para irmos soltando a criatividade através de esboços. Mas antes, procuramos elencar adjetivos ou termos que identificassem o blog para facilitar a geração de ideias. Dentre essas palavras, estavam: tipografia, moderno, sério, informativo, monocromático, geométrico. Os sketches eram feitos no papel mesmo, e isso é importante, pois propicia a criatividade à medida que se tem mais liberdade para rabiscar.

Prototipação e Seleção

Selecionamos os melhores sketches para fazer a prototipação, ou seja, basicamente íamos desenvolver as melhores ideias vetorizando-as digitalmente. As ideias escolhidas foram essas três abaixo.
Ao mesmo tempo em que os protótpos eram implementados, a equipe já escolhia e ia refinando aquele que mais se adequava à ideia do blog.

Implementação

Como não se tratava de uma identidade visual completa, sendo simplesmente o logotipo, o protótipo escolhido já era praticamente o produto final, e só foi preciso fazer pequenos ajustes.

Tá tudo muito bom, tá tudo muito bem. Mas, cadê os conceitos de tipografia? É sobre isso que vamos falar agora!

Uma fonte criada do zero

Desde o início do processo já era fato sabido que a fonte utilizada deveria ser regular, limpa, geométrica, e que uma letra cursiva e muito orgânica não seria uma boa escolha. Também tínhamos em mente que a fonte deveria ser personalizada e única, ou seja,  criada do zero.
A criação dessa fonte não foi muito complicada já que ela é toda regular, seus pesos são todos iguais, e as curvas são feitas através de círculos perfeitos.

A fonte do logotipo foi feita baseada em círculos, como podemos ver na imagem abaixo, seguindo a proporção áurea entre eles, e com larguras constantes. Devido à isso, muitos elementos tipográficos não estão presentes nela, como o eixo de contraste ou a serifa.

Todos os caracteres possuem a mesma altura X, exceto o “f”.  Isso se deve ao fato de que, a linha de base e a linha dos ascendentes são fixas para todos os caracteres. Assim, foi necessário aumentar o ascendente da letra “f”. Mas porque? Porque se fosse do mesmo tamanho do ascendente da letra “t”, a barra da do “f” ficaria colada no terminal, como mostra a imagem abaixo:

Olhando para a imagem acima, também percebe-se que as letras “t” e “f” foram feitas através do mesmo elemento base, composto pela haste. O que muda, é que essa base foi invertida, e a barra do “f” é mais baixa que a do “t”. Esse aproveitamento de forma foi feito para que houvesse uma padronização visual. Há padronização também no restante das letras, onde todas foram feitas a partir da letra “o”.

Espaçamentos

Os espaçamentos, tanto o kerning, quanto a distância entre as palavras superiores e inferiores do logotipo, seguiram uma proporção, derivada da proporção áurea. Olhando para a imagem abaixo podemos ver que a distância entre o “a” e o “f” é de 2 cm, e o espaçamento entre as 4 letras que formam o quadrado imaginário “po” e “da”, que é 0,5 cm, a metade de 1 cm.

Houve um ajuste no kerning entre os caracteres de forma a deixá-los com uma distância aparentemente semelhante. Apesar de na prática a distância ser diferente, o efeito visual nos proporciona o contrário. Por exemplo, a distância entre o “i” e o “p” de “tipo” é de 0,75 cm, enquanto a distância entre o “o” e o “n” de “fonte” é 0,5 cm. Esse último espaçamento é menor, pois as faces dos caracteres que estão voltadas entre si, são irregulares, variando as distâncias, como podemos ver na imagem abaixo. No outro caso, o kerning pode ser maior, pois as distâncias são regulares e constantes.

Para quem procura a fonte que é o seu tipo

A fonte utilizada foi a Etelka Light Pro com 21pt. Uma sans serif com altura X alta, elegante, e com formas mais “quadradas”, se pegarmos como base a letra “O” ou a “B”. A escolha de uma fonte com essa característica deu-se com objetivo de diferir e contrastar com as letras do logotipo, já que são bem arredondadas.

Foi mantido o posicionamento da frase, seguindo a posição de “da fonte” em relação à “o tipo”, para que houvesse uma dinâmica, ao mesmo tempo em que traz um padrão harmônico. A frase começa a partir da metade da letra “o”, e o espaçamento entre a frase a palavra “fonte” é de 0,5 cm, seguindo a expessura dos caracteres, assim como o espaçamento entre alguns deles.

Cor

A cor utilizada no logotipo não é um preto 100%. Seguindo o padrão RGB, temos o código hexadecimal sendo #191919. Isso foi feito para que houvesse uma suavização, mesmo que sutil, não deixando a fonte tão pesada, e consequentemente, não havendo um contraste total em relação ao background do blog que é 100% branco.
E tchan ran! O resultado final pode ser visto no cabeçalho do blog e na imagem abaixo.
E aí? Gostaram? 🙂

Referências

http://tipografos.net/glossario/anatomia
http://pessoa.fct.unl.pt/p110371/nuno/category/typography/
http://marinadelfreo.wordpress.com/tag/tipografia/