Since we started our poison blogs, I’ve been making an effort to gain a level up in visual design skills. One of my bald spots is typography. This is an area I’ve never had any intuition for… As a kid my handwriting was pretty horrid and it hasn’t really improved much since. I think the latent SHAME might be part of the reason I’ve generally avoided thinking about text and form together.
As a step towards rehabilitation 😛 I have been working through Designing with type – The Essential Guide to Typography by Craig, Scala and Bevington. It’s organised like a textbook so it works well as an introduction. I’m only about a quarter of the way through but I feel like it’s time to break things up with a mini project.
A visual interface for eBooker
This continues from the last post on eBooker UI. eBooker is a project Min’an was working on a some time ago. For more background info see the original post. This isn’t meant to be a pure typography project but hopefully I’ll be able to put some new knowledge to use.
Typography can get overwhelming. There are so many choices with such subtle variations that it’s quite tricky to figure out where to start. Whenever I’ve tried to make font choices in the past I just find myself constantly going back and forth comparing one to another. So to avoid drowning in choices, I’m going to limit myself to considering a few fonts for now. Designing with Type has a Chapter early on about five classic fonts which I’m going to use as an anchor.
Garamond – Old style
Baskerville – Transitional style
Bodoni – Modern style
Century Expanded – Slab serif /Egyptian style
Helvetica – Sans serif style
Each was developed at a different time (Garamond as early as the 1600s) and it’s pretty cool to see how the iconic styles evolved. For example, Garamond was created when the paper and printing technologies were still quite primitive. The strokes are relatively thick and it looks kind of flowy due to its sloping serifs.
In contrast, when Bodoni was created, improved paper and printing technologies meant that there could be more contrast between thick and thin strokes. The resulting look is very sleek and dramatic.
If you’re curious, this article summarises the story of these classic fonts quite well. There is also a neat little eBook on the basics of typography with all the jargon explained in a fun and cheeky way.
A note on names: I thought it was odd that eBooker sounded more like an app that helps you make bookings than something to do with books. I quite liked Calibre’s name in that it doesn’t have anything to do with books necessarily but it’s still quite memorable and has the right feel to it. So, while doing the designs I also rounded up a few alternative names.
Brainstorm results – Type, colour and concepts.
More fleshed out VI designs
The interface was fleshed out using the wireframes from the previous post as a base. I spent most of the time playing with alternative looks and layouts and didn’t get a chance to do a complete set of screens. There are still lots of things bothering me about these attempts but no point being a perfectionist now. Hoping that when I look back on this after a few more months I will be able to see why certain things look a bit off.