A Font Guide for your Website
Setting Up Clean Typography
Making Easy and Clean Typography for your Website
Then I learned the fundamentals of typography and font pairings. Still, after learning the basics, I was making rookie mistakes. The hardest part was looking at the design, knowing something was off, and not being able to put my finger on it. Such a thing happened on one of my biggest sites when I was new. So much detail and time went into the design. And my client loved his website! But still, I knew better. Something was off.
Fixing bad typography
So…after taking a couple months off from looking at that site, and working on new ones, I found the new ones were coming out better. Simple yet sharp, and I was not overcomplicating the design and customizations. Basically, I was avoiding all the things I did while making that last site, and I was doing it really to save time! As well, I’m always reading design blogs and trends and catching errors that I made and things were starting to make sense. And when my client asked me to add something to his website and I went back, I saw it. What was wrong with his design made sense!
The fonts and spacing were all over the place! So many different sizes and top/bottom paddings. Every font weight that can be used. Letter spacing all the way from 0 to 6px. And all Random! The one good thing that I did do was use just 2 fonts, one title and one for the body. Well, that wasn’t enough. Now I understand why there are classes just on typography like by Design Lab.
How to build and easy font system and guide
Now for my projects, I create a sort of font system or font guide. It takes me about 30 minutes to set up, but when it’s done, it makes my life so much easier and saves a lot of time working on a website. Here’s is an actual font guide that I am using for a project I’m working on now and what it looks like –
My Font System
For all my projects I use Evernote and I love it! It has been a valuable asset to my workflow. With Evernote, I create a notebook and it syncs with everything so wherever I am at, my notes are there and organized. For each project, I create a guide and I stick to my guide. In my guide I have:
Building these guides has saved me so much time and no more scratching my head, trying to figure out what went wrong with my designs. And my sites have been looking more consistent and clean.
I hope this could help others and I would love to hear your thoughts and experiences! And if you have your own system that can help others out, please share in the comments. Thanks!