BEYOND WORDS: A Trip into Type Design
For me, Christmas time has always been a perpetual cycle of debauchery and recovery.
This year, I wanted it to be different.
I also wanted to make sure I was fit and limber for my return to work, so I thought I better set myself a challenge!
PICKING A CHALLENGE
A big part of what I do for a living is researching and designing commercial treatments. So, it’s pretty important that I keep on my toes, creating content that is fresh, visually appealing and stands out from the competition.
Admittedly, I don’t have any formal training in graphic design. But, I like to think that only gives me less laurels to rest on as I’m constantly hungry for new things to feed into my work. I find myself grabbing anything and everything I can lay my hands on to learn more about the art — looking at an old textbook in Oxfam or even just a page in a magazine that catches my attention with greedy eyes.
DRAWN TO TYPE
More and more, I find myself drawn to the usage of type. There’s something fascinating about typefaces and the subliminal effect they have on a reader. You see, the brain takes in an unbelievable amount of information, subconsciously, before a word is even read.
I mean, take a look at what you’re reading right now. This, here on the Medium website, is a font called ITC Charter. Even at a glance, it’s got a handsome quality that’s refined yet modern. Relatively new, (designed in ‘87), it draws influence from traditional, old style type and, for me, instantly suggests I am about to soak up some culture.
Buddying up with the smart Marat Sans headings gives the page a satisfying contrast. Together they make for a pretty laid back and well-designed reading experience. Thanks Medium.
In comparison, take a look at the use of the font GT-America on https://growx.co, an Amsterdam-based company in developing urban agriculture:
It looks clean, it feels forward-thinking and its wider setting really makes use of the space efficiently. A great example of demonstrating the ethos of a brand — even if you’re just scrolling through, taking no notice of the words.
Compared to Medium, the typography is very different. The main difference being that ITC Charter is classed as a serif font and GT-America is classed as a sans-serif.
A ‘serif’ refers to the little lines and notches at the end of each line in a letter. Like the extra little bits hanging off the top line of this capital T.
NO BRAINER
Finding the perfect font for a project is always difficult. Whole teams slave over making these decisions but, like them, I get a real kick out trying new typefaces and seeing what they bring to the page.
So, the picking a challenge was easy, really— I’d design a typeface.
My very own.
INITIAL RESEARCH
There he was again, the boy in my head, this time stomping around shouting, “I CAN DRAW THE ALPHABET!”.
Luckily, I knew full well that there was a hell of a lot more to it than that. So, I cracked onto doing some research.
When my eyes tired from reading articles, I jumped onto YouTube, scribbling note after note. The rabbit hole ran deep and deeper still. Each door I opened seemed to reveal a hundred more.
Two stand out resources that truly enlightened me are:
http://jessicahische.is/talkingtype — the designer behind the typeface used in Moonrise Kingdom tells us how to up our game.
And, https://fontforge.github.io/en-US/ — An open-source, font creation software that includes an online book detailing everything you need to get started in font design.
It turns out, there are thousands of decisions that go into designing a typeface. Each decision impacts the next and every creative choice has to be shaped by compromise. Because, ultimately, it all needs to be legible.
DECISION MAKING
Time was ticking on. I needed to kick it up a gear and make some decisions about my design.
Primarily, I needed to aim for achievable.
This inevitably meant I was aiming for simple. But, the last thing I wanted it to be was boring.
First things first, was it to be a serif or sans-serif typeface?
I couldn’t begin to imagine how fiddly those little serif buggers would be down the line, so I was steering well clear.
Sans-serif it is.
It wasn’t abundantly clear to me what else I should consider at this point, so I followed my instincts.
At the very least, I felt like I needed an anchor or a reference, something to keep me grounded while I ventured into this vastly complex world of type design.
SKETCHING OUT THE ALPHABET
Almost every description of a font that I’ve read includes the words ‘character’ and ‘personality’. So, I asked myself: what personality do I want to give my font?
Narcissist that I am, the answer was invariably going to be: mine.
So, I tried to put that into words.
Hmmm…
‘A simple, approachable and buoyant spirit’
I don’t think anyone would disagree with that…
And, I thought, what better way of imbuing a typeface with my personality, than to base it on my own handwriting?
So, I gave that kid a pen and let him draw the alphabet real quick.
Then I got excited and got the graph paper out…
Drew it all out, neat like…
The thinking being that I’d always have something to reference, should I ever get stuck on any particular letter.
This, in itself, took quite… some… time.
GETTING REALISTIC
26 letters. Each one an inevitable challenge in themselves.
Uppercase and lowercase.
Plus numbers.
And punctuation.
Not to mention the fine art of spacing (I’ll dig deeper into this topic for you in the next episode)
And that’s just English.
I hadn’t even got onto the computer yet!
Clearly, my naivety had got the better of me. Designing a font, part-time over a couple of weeks, was simply not do-able. It can take years to perfect such things and, at the end of the day, I wanted it to be good.
No… I wanted it to be great.
I needed focus.
A passage in the FontForge manual helped me gain that focus. The best springboard letters to start with when designing a font are a lowercase ’n’ and lowercase ‘o’.
Phew. Ok, let’s go with that…
LET’S GET DIGITAL
First, I set up the guides for my glyphs in Adobe Illustrator.
I took my lead from a font that’s a personal favourite — Gotham. Using the letters d, H, x and p, you can measure out each of the guidelines necessary to create the framework.
I deleted the Gotham letters from the template, leaving just the guides. Then, by eye, I translated my handwritten ’n’ into its digital self.
Then, I fleshed that baby out…
Look at me! I was cooking on gas!
But, from my research, I knew there was much more to it than this.
So, I took a closer look at some well-used examples to see how I could keep up with the game.
TAKING POINTERS
Here, I traced over the lines that form each letter with red, just to see what kind of alterations go into designing a letter:
As you can see, each of the letters roughly share the same basic skeleton. But if you look closely, I’m sure you could count a thousand differences between these letters.
But, I was keeping things simple, remember?
So, I identified a common denominator in all three: you’ll notice the link between the stem and the shoulder is somewhat pinched and tapered at the join.
You’ll see why, shortly. But for now, I followed suit.
HAPPY ACCIDENTS
As I was pinching my join, I came across this little bullseye-type icon…
Of course, I couldn’t help myself. I had to see what it did…
F**k yeah! Curved corners! Now that was interesting…
So, I did what came natural and had a play.
THINGS FALL APART
Somehow, it seemed that every following decision I made, created ten more harder challenges to overcome.
Every time I made a change here, something looked out of whack there. Moving anchors made the curves look wrong. Changing curves made the weight distribution uneven.
And, like whack-a-mole, the problems kept on coming. It was maddening.
Time conscious, I had to plough on. As much as I tried to remember and apply my learnings, I was equally trusting my gut.
THINGS COME TOGETHER
She’s by no means perfect, but I’m proud of her nonetheless.
After pursuing a lot of dead ends and reversing carefully back out of them, I eventually ended up with this…
She definitely feels in line with what I’m after. I guess we’ll just have to see how she fares later on.
OPTICAL ILLUSIONS
Moving onto my ‘o’, I thought I was on the home straight. Surely, creating a circle that simply looks normal sat next to my ’n’ would be a walk in the park.
Ever-dubious, however, I decided to trace a ring over Gotham’s equivalent to double check its anatomy.
What I found was far from a perfect circle.
Naturally, I thought any adjustment made to a circle, in making it into an ‘o’, would be an entirely stylistic one.
No, sir.
You see, there’s a thing called a scan path. It’s what your eyes do when they read any line of text. In short, your eyes scan and pause (referred to as saccades and fixations if you really wanna get into it).
A scan takes in the information and the pause allows for a fleeting micro-mili-nano-second in which the brain can compute what it has just seen.
This results in letters needing to be tweaked constantly throughout the design process in order to ensure a smooth reading experience.
And, for scan’s sake, the letterforms produced have incredibly intricate qualities.
You can see in this example of a bold ‘n’ in Helvetica, that the stem is ever so slightly thinner at the top to compensate for the weight at the join (Hence, the earlier pinching).
And you think an ‘x’ is just two straight lines that cross paths? Think again…
That’s the kind of level of detail it takes to design a font. You have to be a magician, specialising in the atomic-sized optical illusion.
And, the strangest thing of all is that the success of a type design hinges on one fact: that every laboured decision that’s gone into creating each letter is imperceptible to the swiftly moving eye.
So, unless you’re specifically looking, no one should ever notice.
TWEAKING MY ‘O’
In the hope of keeping up with my findings, I tweaked this simple circle…
For quite some time, which resulted in this ‘o’…
I know, right? Imperceptible.
You’re just going to have to trust me.
AND THERE YOU HAVE IT!
The first generation of glyphs that will pave the way for my very own typeface.
Is it any good, though?
Well, it’s pretty pleasing result for a first-timer at least.
HAPPY NEW YEAR
Once New Year’s Eve had come around, I‘d poured quite some time into my ‘n’ and my ‘o’, but the practical results were a little unsatisfying.
I could only spell ‘on’ and ‘no’.
And ‘noon’, I suppose.
But, with this article in mind, I wanted to present something with a bit more pizazz. And, having enjoyed a relatively quiet New Year’s Eve celebration, I found myself scratching a serious itch on the first day of 2018.
What was next in the FontForge manual? … ‘f’ and ‘g’ … Let’s get to it!
Extrapolating the shapes and characteristics of my ’n’ and my ‘o’, I developed the ‘f’ and the ‘g’. The result is a collection of letters that I’ll keep in mind for a font name down the road, I think.
So, without further ado…
Behold…
LANGFORD 1.0
I must say, I’m very happy with what’s happened there.
Even if the ‘f’ is a little out of whack spacing-wise and I’m pretending not to see the clumsy tail of the ‘g’.
I think a lot of the bumps like that will be ironed out with practice and I get the feeling that I will have to revisit every letter a fair few times when it comes to spacing and tweaking.
On the whole, I’m pretty confident that, in these letters, I have laid a pretty robust foundation to build my font upon.
The real question is: does it have ‘a simple, approachable and buoyant spirit’?
You know what? I think I’ll have to get back to you on that one.
LANGFORD 2.0?
All in all, my adventure into typeface design has been quite the incredible journey so far. My newfound abilities in the use of Adobe Illustrator alone are worth the time and effort put in.
I’m looking forward to bringing these new skills to my everyday work… hopefully, for no one to ever notice ;)
Perhaps, by next time, we can see how the rest of the lowercase letters turn out!
—
Nick Lewis is part of the Creative Development Studio The Late Misters & IN / DEVELOPMENT.
