Over the last year I’ve grown increasingly tired of the previous “dark” theme of my site; not that it was THAT bad, it actually did the job, but I felt it didn’t convey enough of what makes myself… well, myself. Wishing for something more light-hearted but still legible, and convinced these qualities were to come from a good choice of type, I started a quest for the perfect font, well before starting to code my new site.
I read a number of online resources on the matter, and a number of books as well, with The Anatomy of Type being probably my favourite; I also subscribed to Typecast (which comes with a subscription to Fonts.com) so that I could use not only very high quality fonts, but also those iconic fonts that have made history, like Helvetica, Gill Sans, or Futura.
One thing I’m sure I learnt is that there is no easy way or shortcut to choose fonts for a web project, although there are a number of guidelines and ideas that could be taken into consideration that can help you during your exploration. Here are a few:
During my adventures with type, I have realized that creating a font must be very much like creating music, as both arts require manual skills, inspiration, and a good inclination toward understanding those underlying “divine” mathematic rules (well, musicians might not think of it often, but they do lots of maths).
For this very site, I first chose the British Gill Sans as the main body font but after playing with it for a long while, I then settled for Camphor by Nick Job (also British). Why? Camphor is more readable, no question about it, while still retaining a playful soul.
I then chose the classic DIN (a german industrial typeface) in its heavy variant, because I like powerful headlines (and DIN can deliver that a lot), plus it sits very well with Camphor.
And it was to accomodate such headlines and body fonts, that the (admittedly simple) design of this personal site started to grow in an organic way, out of the “seeds” planted with my typefaces. First it was the font, then the font size for a paragraph, then the font sizes for headers, followed by margins and paddings and line-heights for my typographic elements. It was then time to define spacings and sizes for block elements, but at that point, the design was kind of done!
Fonts before design, that’s another tip worth trying out. I’ll try to keep it in mind.
(Header picture by Mr. Marco)