Typography Do's and Dont's

Using typography properly can take your designs from amateur to professional. Typography is a huge skill set that graphic designers spend years studying, so knowing how to use type to enhance your designs can put you one step closer to looking like a pro. Often there are more rules you need to know other than to never use Comic Sans, so I am here to help a brotha out. Here are a few typography do's and dont's that I see misused most frequently among bloggers, business owners and marketing managers:

typography do's and dont's typography do's and dont's typography do's and dont's
Is your typography helping or hindering your designs? Check out these top rules to follow and mistakes to avoid in order to unify your graphics, look professional and attract your target audience.

DO: ONLY Use 2-3 Fonts within One Brand Identity

This is a huge pet peeve of mine. If you want your brand to be recognizable, make it consistent. A huge part of your visual identity is the fonts you use. So pick a font to use for your heading, another for your body text, and maybe one more for taglines or to use as an accent. Once you have 2 or 3 nailed down, use them every time in the ways they should be used. This will immediately pull your brand together to make it consistent across all platforms and make it recognizable to your clients. 

Header typography example
Body typography example
Accent typography example
Example of consistent typography in social media and blog graphics

DO: Play with the Tracking of Your Title Text 

Some of you might be saying, Mariah… what the heck is tracking and why do I need to pay attention to it? Tracking is the spacing between the letters of the text. It is the difference between: MARIAH and M A R I A H. Why is this something to pay attention to? Because it adds character to your text. This is not something that should be used all the time, but when used properly, can take your design skills to the next level. Increasing the tracking in your title or header images is a nice way to make an impact or demand more attention in a subtle way. Play around with it next time you are using your favorite design program. You can see for yourself how the tracking can change the personality of the text.

Example of tracking with typography

DONT: Use Too Tight of Spacing Between the Lines of Text 

Although you may feel artsy by having your two lines of text touch, more than likely it's actually just breaking a lot of design rules and you should just not. The fancy term for this is leading. You don’t want your lines of text to be too tight, as it makes your text much harder to read. Plus it's ugly. So like tracking, play around with the leading of your text too! 

Examples of typography leading

DO: Use a Legible Font for your Heading Typeface 

Don’t get me wrong, I love a good handwritten script font. However, often those don’t look great if they are the only font used. They are much more effective (both visually and legibly), if they are used one or two times per instance as more of an accent or attention grabbing element. I have seen bloggers use a script font for every header and sub header on their website, which makes it hard to read. If I can’t easily read something I will skim right over it. Make your information easy for your audience to read. Use a fun font to grab their attention at the beginning, but keep it clean and simple.

Example of header text legibility based on choice of typography

DONT: Add Drop Shadows Behind your Text

Drop shadow effects should be used sparingly as is. In fact I wrote an entire post on when it's actually okay use them because I hate them so much. Drop shadows can easily take your design from current and sleek, to cheap and DIY. Drop shadows make makes your text harder to read, which goes back to my previous point. If your text is hard to read I am not going to read it because I am lazy and don’t like reading. Make your text easy for people like me to read. 

Example of ugly drop shadow and when not to use it.

DO: Give your Text Enough Padding

Cramped text that goes from edge to edge feels suffocating and tight. By adding enough whitespace around all four sides of a block of text gives it room to breathe and is therefore visually pleasing and easier to read. Whether it is email newsletters, webpages or individual graphics, they should all have a proper amount of padding on every side of blocks of text.  

Example of padding around blocks of text.