Caso de estudo de Criação de Fontes: Joules

Andas sempre à procura por inspiração tipográfica, trago uma caligrafia barata orientada no Verão, convencido que os meus gatafunhos fariam letras mágicas.
Uma semana e dezenas de páginas depois, não tinham nada interessante ou vagamente artístico. Depois, uma noite, cansado e desesperado, e não tendo tinta preta, tapei com cartucho vermelho, e esbocei o alfabeto que brevemente se iria tornar a família Joules. Pensei que talvez fosse interessante para alguns de vós se eu documenta-se o processo de criação com este caso de estudo.

Aqui está uma das páginas que esbocei naquela noite:

Joules initial drawing

Um pormenor:

Joules initial drawing, closeup

Um super pormenor do A maiúsculo que eu usei:

Joules A closeup

Do esquiço à fonte

O processo que eu usei para criar a Joules a partir dos meus esboços é o mesmo que tracei nos meus artigos anteriores em criação de fontes. Fiz uma digitalização da página, e aqui está o resultado em Photoshop depois de mudar a digitalização para um bitmap preto/branco.

Joules A black-and-white

Nota como os pontos toscos aparecem na imagem bitmap:

Joules A rough spots

Joules A black-and-white rough spots

Geralmente limpo a imagem em bitmap antes de a importar para Fontlab, mas não neste caso. Aqui está o primeiro passo para importar o bitmap para Scanfont:

Initial pass in ScanFont

E um pormenor do Scanfont:

A in ScanFont

Copiei a nova forma e colei na abertura apropriada no Fontlab. Para te dar um gostinho da artimanha do Fontlab, aumentei o “A” tosco. Seleccionei um ponto problemático:

Closeup in FontLab

E comecei a artimanha apagando alguns nós ofensivos:

Closeup in FontLab

Uma das grandes coisas para balançar quando artimanhas formas em Fontlab é a tentação de amaciar todos os contornos versus a tentação de deixar muitos pontos toscos para manter a fonte interessante. Descobri da pior maneira que com fontes de escrita manual não deves amaciar todos os pontos toscos, assim que isso começa a roubar alguma da emoção da escrita manual.

Formas compostas em nosso auxilio

Uma das boas características que nos poupa tempo no Fontlab é a composição de caracteres automática. Neste caso, criei um “A”, e um “acento grave (`)”:

A plus Grave

E agora duplo-clic na célula de “A-Grave”…

A plus Grave double click

…e o Fontlab cria uma forma composta:

A plus Grave composite

A partir de agora, se editas o “A” ou o “acento grave (`)”, as alterações vão automaticamente reflectir-se no “A-Grave” composto.

Distâncias laterais (Sidebearings)

Como mencionado nos meus artigos anteriores em criação de fontes, formar boas distâncias laterais é um passo importante. (Por uma boa razão, boas distâncias laterais facilitam o kerning!) Inicialmente para as artimanhas das formas, geralmente crio distâncias laterais toscas, pequenas e positivas. As distâncias laterais do “y” inicialmente são algo assim:

y sidebearings

O problema com estas distâncias laterais pode ser ilustrado olhando par o kerning inicial do par “ay”:

a-y sidebearings with kerning

Posso deixar as distâncias laterais como estão e fazer o kerning do “y” próximo do “a” (e, depois, fazer o kerning do “y” próximo de qualquer outro caractere), mas é mais fácil (e saudável) criar distâncias laterais negativas para o lado esquerdo do “y”:

y negative sidebearings

Aqui está o kerning inicial com as distâncias laterais melhores:

a-y negative sidebearings with kerning

Kerning

As horas de diversão que eu tive com o kerning desta fonte! Vou te livrar dos detalhes chatos. Mas aqui está um exemplo de kerning a funcionar. Antes:

A V pre kerning

Depois:

A V post kerning

Ligaduras

Criei uma série de ligaduras para a Joules que se pode seleccionar manualmente e aplicar num projecto tipográfico:

Joules ligatures

E aqui está como criei uma. Primeiro, como o “z” e o “a” assentavam normalmente um a seguir ao outro:

z and a

Podia ter feito o kerning ao par para que eles ficassem sobrepostos numa moda esteticamente agradável, mas o mais responsável foi criar uma ligadura “z-a”. Passo 1, criar uma forma vazia, e copiar o “z” e o “a” nele:

z and a, pre-ligature

Passo 2, cortar os contornos para que eles se possam juntar no sítio apropriado:

z and a, pre-ligature ...

Passo 3, remover o excesso:

z and a, pre-ligature...

Passo 4, aproximar as formas:

z and a, pre-ligature...

Passo 5, conectar os pontos:

z and a ligature

Ligaduras inteligentes

Uma das coisas que não deu para o meu primeiro lançamento da Joules são as ligaduras inteligentes: tecnologia que eu recentemente aprendi como criar. (Quer dizer o fim das Truetype como as conhecemos, já que as ligaduras inteligentes requerem o uso da tecnologia das OpenType ). Vou te poupar dos detalhes, mas envolve abrir um painel especial Opentype no Fontlab, e basicamente fazer algum scripting para que as formas da ligadura que criaste ganharem vida num software ligadura-aware. É algo assim:

Ligature definitions

Etc

Aqui está o resultado, depois de todas as artimanhas e kerning:

Joules

E meti-me a fazer uma versão em itálico (era mais uma versão oblíqua, para os puristas que por aí andam), e depois uma bold, bold itálica, e black. Se alguém está interessado, eu posso detalhar como fiz este processo.

[Alec Julien é um web developer e um tipógrafo amador que vive em Vermont, USA. Sonha um dia viver num local quente, e escrever um novela.]

Translated by Miguel Batista.


Tags:       

  1. Wow! Pretty cool that you’re reaching out to other audiences, John! And thanks to Miguel for the translation (even though I can’t read it!).

  2. Lauren
    You never cease to amaze me! How did you know of this article’s existence, as I didn’t make it part of the RSS feed? Or are you just psychic? :) I can’t read a word of Portuguese either, but there are a growing number of iLT readers from Brazil.

  3. I got a trackback for it as I was checking and writing back to my comments this morning :D Does that kill my rep as a psychic? That’s really cool that you are getting your articles translated. Interesting that you have a large number of readers from Brazil! Do you ever look at where your traffic is coming from through Google Analytics (I see you have the JS at the bottom)? What are the top three countries, out of curiosity? My guesses would be…. 1. USA 2. UK and 3. Canada. Where do Brazil and Japan fall in?

    WHOA! Did you see iLT made it on the blogroll of Smashing Magazine?! Hooray!

  4. Lauren
    I’ll settle on psychic trackback :)

    I use Google Analytics infrequently (for day to day stat’s I use Askimet). Yes, you’re right for the top three. Brazil is in 9th position, but still quite a large number. Japan is quite a bit further down the list, but the language is definitely more of a barrier in Japan, so I thought I’d translate one article into Japanese and see how it’s received.

    Similar for your blog?

    This far I have translations of Spanish and Portuguese. The next to follow this month are Japanese (as I mentioned) and French.

  5. Yes, very cool, even if I can’t read it either. Huzzah for diversity!

  6. leah
    Translation into Huzzah will follow shortly ;)

  7. Marcelo Rainho

    Thx! Portuguese is very beatiful. Bravo for diversity!

  8. Interested in the beauty of portuguese? You should read this book: http://www.amazon.com/Night-Train-Lisbon-Pascal-Mercier/dp/0802118585

    It’s just a novel, but it was the best book i have read in the last year. An international bestseller.

    Night Train to Lisbon is an astonishing novel, a compelling exploration of consciousness, the possibility of truly understanding another person, and the ability of language to define our very selves. Raimund Gregorius is a Latin teacher at a Swiss college who one day—after a chance encounter with a mysterious Portuguese woman—abandons his old life to start a new one. He takes the night train to Lisbon and carries with him a book by Amadeu de Prado, a (fictional) Portuguese doctor and essayist whose writings explore the ideas of loneliness, mortality, death, friendship, love, and loyalty.

    Can’t be more off topic, but i had to get it out :D

  9. I’ll read to check if the translationis ok… :)

    In Portuguese we say: Eu amo tipografia.

  10. Felipe
    Thank you. There’s another article here:

    Terminologia de Tipos: Humanista. Thanks too for translating i love typography.

  11. Hola:
    navegando por la red he visto tu blog, me he parado para descansar y lo he explorado, me gusta mucho. Ahora continuo mi viaje. Cuando quieras ven a ver mi blog.
    Ciao.

previous post: Type Snippets

next post: Sunday Type: Potato Type

October Fonts September Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February Fonts January Fonts January Fonts November Fonts October Fonts September Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February Fonts January Fonts december Fonts October Fonts September Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February Fonts January Fonts December Fonts November Fonts October Fonts September Fonts August Fonts July Fonts May Fonts April Fonts March 2011 Fonts February 2011 Fonts January 2011 Fonts December 2010 Fonts November 2010 Fonts October 2010 Fonts September 2010 Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February 2010 featured fonts December Fonts November Fonts October Fonts September Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February Fonts January Fonts December Fonts November Fonts October Fonts September Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February Fonts January Fonts December Fonts November Fonts