Easily Navigate Your Typography Adventures with Typoguide

Typography on the web is becoming more and more important each year. As screen resolutions increase, the quality of the type in your app or website becomes much more noticeable. However, it becomes even more noticeable when you don’t follow the basic rules of typography.

Typoguide, a simple one page site created by Benedikt Lehnert of 6Wunderkinder, is a great resource which explains the basic rules of typography in an easy-to-read format, ensuring that you won’t make simple mistakes when designing readable content. In it you can find useful tidbits such as advice on which kinds of typefaces work well together, an easy to understand explanation on the difference between a font and a typeface, as well as the proper way to style punctuation marks. Even if you consider yourself relatively experienced when it comes to typography, you’ll probably learn some interesting things you hadn’t considered before by checking out Typoguide.

Since the launch of Typoguide in mid-December, the site has received much praise from renowned typographers such as Erik Spiekermann, and numerous design and typography blogs. I asked Lehnert a few questions about the creative process behind Typoguide, and if he has any plans for the future of it.

Processed with VSCOcam with f2 preset

What motivated you to create Typoguide?

Besides the fact that I am in love with typography and its huge impact on how we perceive information, the original idea for Typoguide dates back to roughly six months ago. At that time I planned to release a small internal website for our team at 6Wunderkinder in order to help them use the right characters on their keyboard. But as the daily business kept me quite busy until the end of the year, I never really got to the point to actually build it.

So, over the Christmas holidays I felt the urge to create something—a small project just for fun. I remembered that there still was the idea of Typoguide, and while thinking about it, I figured that everyone—from students, teachers, authors and journalists to engineers and designers—should know how to write things the right way. More so, by mastering some of the basic rules everyone would be able to produce better, more beautiful and convincing content. I launched Typoguide on New Year’s Eve and the site attracted more than 30,000 visitors in less than two weeks—which was incredible to me. I definitely want to thank everyone who supported Typoguide by spreading the word or contributing on GitHub.

How did the creative process flow from start to finish?

The most important point was that I wanted to create something that’s not only for designers. There are enough design books and article about Typography already written, by people that are much more eloquent than I am. But what was missing, was a place, where everyone could easily access and learn the most important rules and guidelines. Something that they could apply in their daily lives, no matter if they are writing an essay, designing a website or preparing a set of presentation slides.

I imagined a “pocket guide” that you can bookmark and access wherever you need it. So, I knew that I wanted to build a responsive website, write copy that was easy to understand for everyone and present it in a way that was motivating for people to read through.

I started with an outline of the content, did some research on the shortcuts for US and German keyboard and created some examples to illustrate the rules. Since most of the site is actual content, I started writing the english copy first and thanks to my significant other Cat I got that done quite quickly.

Building the website was fairly easy, since I didn’t use fancy JavaScript or anything like that and stay within simple HTML/CSS (although I use a small script for the smooth scrolling). I invested quite a bit of time in finding the right typeface (obviously!) and getting the hierarchy right. Compared to my first draft, the final version has a lot less styles and is therefore much more focused and easier to follow. The beauty of designing in the browser is you can see the final result immediately, and it is so much quicker. Most of the time I had the iOS Simulator open alongside my browser, so I could easily check how everything looked on different screen sizes.

I knew from the beginning that I wanted to use illustrations as the introduction for each chapter. Since I wanted to play around with some things that I had not used before, I decided to create vector illustrations (using Adobe Illustrator) and embedded them as SVG graphics into the site. Together with the web font I use, this guarantees full scalability on all screen resolutions.

One last word about the typeface on the site. When I launched Typoguide, I used “Source Sans Pro” served by Google Webfonts. It’s a great typeface, but it has some limitations. Fortunately I got a message from Jürgen Siebert from Fontshop two days after launch, offering to sponsor a proper web font from their collection. That was like a second round of Christmas presents! So, I browsed the amazing FontFont & Fontshop library and finally decided for FF Kievit as the new typeface. The advantages of a professional and well-drawn typeface are just immense. FF Kievit reads incredibly well in all weights and sizes, provides beautiful ligatures and the italic style is not just tilted, but actually drawn by the designer.

All in all the project took me roughly 3 days from start to initial launch. Since then I have been investing a bit of time every day to improve and update Typoguide.

Processed with VSCOcam with f2 preset

Since it’s launch, Typoguide has been getting a lot of attention from the design community. What were expectations going in? Were you caught of guard?

I was really surprised to see the number of visitors, shares and tweets increase as quickly as they did. Having the site reach 25,000 in less than a week was awesome, and seeing Typoguide being retweeted by Erik Spiekermann, Fontblog, Adobe, and others in the community made me smile with every notification I received. Since my own expectations were really low, I am more than humbled seeing all these people liking Typoguide and recommending it to their peers. That’s fantastic!

Do you have any plans to expand Typoguide in the future?

I just launched a German version of Typoguide and I plan to allow people to translate the site into their language with their shortcuts so that Typoguide might become a global site, for everyone who wants to learn the basic rules for their daily typographic adventures. Since I received many requests, I am also working on a printed version of Typoguide as well as an eBook, that I plan to release as soon as possible. Let’s see how that goes, but I am definitely really excited!

Jumpstarting a Design Community

Understand Your Compensation

Designer Monoculture

The State of Design Leadership

The Science of Product Design

Interview with Michael Flarup: Co-Founder and Lead Designer at Robocat

The Importance of Design Conventions