A Font Guide for your Website

Setting Up Clean Typography

Making Easy and Clean Typography for your Website

When I got serious about web design and started my studies, at first I didn’t understand why Typography was a more advanced lesson and not for beginners in the design courses I was taking. Then I took a look at my first websites, and their designs were all over the place. Yep, I was a newbie for sure. I remember a site, one I built for practice that had about 8 different fonts! Just imagined how that looked!

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:

  • My color pallet hex codes. Makes it easy to copy and pastes.
  • My font families. I keep the number of fonts I use less than 3. I hold firm to that. One primary font for body text, one for headers, and occasionally, I’ll have a 3rd for a ‘Highlight’ font that would be used rarely. I also write out my CSS – font-family: ‘font-name’; code to copy and paste if needed.
  • My line-height. I never use individual line heights for single text except on rare occasions. I set my p, a, and h tags to be the same line height. This was a game changer for me when I started this system. I set my line-heights based on the font so my body line-height and header line-height will be different if they are different fonts. I do set them to be the same line-height spacing as possible. This makes the site so much cleaner and easier on the viewer’s eyes.
  • And last, this the most recent and proving so effective! I set my guide for font sizes, with letter-spacing. I keep it at around 5-6 different font sizes.

The Conclusion

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!

We are always working hard to bring more useful articles. Sign up to have the first look.

Leave a Comment