Using the Rules of Typography to Improve Your Designs


Sam Pecard
Using the Rules of Typography to Improve Your Designs

Understanding type, fonts, and visual communication to create better results with your projects.

There’s nothing to it… Open a drop down menu, select a font that you think will work and type away, right?! It’s easy to think that because of all the tools and resources we have access to today. There is much more to understanding typography than we realize. I used to know nothing about it, so don’t feel like you’re alone.

Don’t you worry though. I’m here to share everything I’ve learned in bite-sized chunks so that you can make better creative decisions when you work with type on any project.

What is Typography and Why is It Important?

Typography is the art or procedure of arranging type. Every font and character arrangement plays a crucial part in how a message or brand is conveyed. Everywhere you look there is typography and it’s our job as designers to learn how to properly use typography to communicate the right message.

Let’s Start with the Basics: Typeface vs. Font

Originally, the typeface is a particular design of type, while a font is a type in a particular size and weight. In short, a typeface usually gathers many fonts. You’ll hear these terms used interchangable now a days, but if want to sound smart, you should know the difference.

Font: is a type in a particular size and weight.
Typeface: a set fonts.

Anatomy of a Typeface

Learning the anatomy will not only help you decide the appropriate use of fonts but it will help you communicate with other designers and ensure that everyone is on the same page.

Anatomy of Typography

Serif vs San Serif

Choosing the Right Font(s)

Not sure where to start? Typically the best place to start is by finding your main typeface or what you will be using for body text since that is what takes up the majority of your real estate. This is often referred to as your anchor typeface. This is important since it sets the tone and acts as a reference point for all other elements in your composition.

It’s important then to find additional typefaces that complement the anchor. There are a couple of really great resources that offer filters to search for fonts by weight, width, x-height, etc.:

Be sure to check them all out and learn which resources work best for you and your flow.

Pairing Fonts. Finding Fonts That Work Well Together

When done right, different fonts can really complement each other, create visual hierarchy and help elevate your brand and the message your are communicating. And just like most things, there are rules to keep in mind in order to choose fonts that complement each other.

Pairing Fonts that Work Well

Choose Complementary Fonts

This can at times feel like a guessing game, but remember that fonts communicate moods and personalities. And often, just like with people, opposites attract. So if you have a font with a strong personality it will pair well with something more neutral and conservative.

Choose Complimentary Fonts

Establish Visual Hierarchy

Once you have a good idea of the fonts that you will be using you need to think about how they are going to be used in size, weight, and spacing(kerning and leading) to guide the user as they navigate the page. Always be asking yourself, “What should attract the user first?”

Establish Visual Hierarchy
From Jack Daly on Dribbble

Consider Context

Knowing that your design needs to communicate a certain message and that all fonts carry a personality, it’s important to make sure that your sending the right message. In addition to communicating the right message you should always make sure that the fonts you are using are easily readable at the size they will be displayed in real time. It’s easy for designers to get caught in viewing their designs in the design program and on large monitors so it’s important to remember how it’s going to be viewed in the real world. If its an app, make sure to view it on your phone. If its a website or web app, make sure you change the dimensions of your view to get an understand how it’ll look on other monitor sizes.

Choose The Right Font with Context

Mix Serifs and San Serifs

An easy way to create visual interest is by combining a serif font with a san serif font. If used at same size, make sure they have the same x-height. Serifs and San Serifs also tend to work well at contrasting sizes.

Mix Serifs and San Serifs

Create Contrast

One of the main reasons that pairing serifs and san serif fonts work well is because they create contrast. Style, size, weight, spacing, color are also other ways to create contrast.

Create Contrast Between Your Fonts

Avoid pairing fonts that are too similar. When you have fonts that are too similar, it’s hard to establish hierarchy.

Use Font Families

Simply put, the fonts in a font family were created to work together. Use them together.

Introduction to Font Families

Limit the Number of Fonts Used

Try to keep your fonts to two or maybe even three different fonts. Limiting your fonts will prevent your user from becoming overwhelmed and allows you to create patterns and a sense of familiarity in your message.

Resources for font pairings:

Rhythm in Typography

There are two types of rhythm in typography; Horizontal and Vertical Rhythm. Horizontal Rhythm is the space between the letters. Tracking (or letter spacing) refers to the overall spacing of a word or block of text affecting its overall density and texture. Kerning is a term applied specifically to the spacing adjustment of two particular characters to correct for visually uneven spacing. Kerning adjusts the letters closer together (negative spacing), tracking adjusts the letters further apart (positive spacing).

What is Kerning
What is Kerning

Here is a sweet game to teach and learn best practices and balance with Kerning: http://type.method.ac/.

Another factor in Horizontal Rhythm is how the text alignment. Generally for the web, its best to avoid justification of text and stick to flush right, left or centered. Justification often creates irregular spacing between words which breaks the flow and rhythm of reading. These spaces can even form “rivers” in your copy block which is very distracting.

Vertical Rhythm refers to the space between each line of text (Also known as Leading). There is a pretty cool trick to help you mathematically figure out what your vertical rhythm should be.

You can figure out your line height by multiplying your text height by 1.5. So if your main body text of 16 the leading should be set at 24.

Tip: In Sketch, you can multiply right in the input field. 16*1.5 [enter]. It will automatically change your leading to 24.

So What About the Width of a Text Block?

Its suggested that the width of your text block should be 50-60 characters wide. This is the sweet spot and makes it the easiest for your reader to follow along. But let’s be honest, who is going to count the number of characters in each line to assure the optimal line length. There’s actually a pretty easy way to figure this out as well. Multiply your body copy text height with the line height (you find that with the trick discussed above). So using those same numbers 16 x 24 is 384 pixels wide.

Optimal Font, Spacing, and Text Block Width of Typography on a Page

Why the Vertical and Horizontal Rhythm Matters.

The right rhythm not only looks more professional but makes it easier to read and brings a sense of order to your designs. This eliminates distractions allowing you to clearly communicate the right message with your user. This

Modular Scaling

How do you go about picking your type sizes? When I first started in web design, it was a rather intimidating experience and honestly it was all pretty trial and error choosing a random font size and rolling with it until you came across an instance where there was a visual conflict and usually resulted in a lack of uniformity throughout the site. This was a nightmare for not only myself but for the developer that had to try and make sense of my size choices.

There is a system that brings method to the madness and is called Modular Scaling. You can find that resource here:

https://type-scale.com/

Additional Tips to Create Hierarchy

Use color and weight to achieve hierarchy. Avoid using font size to differentiate relatable text. If the text is more important make it bolder. If the text is secondary, user a lighter color. Try to limit your color palette. Use dark for primary and gray for secondary. Lighter color for accents.

Now That You Know The Rules, You Can Break ‘em!

As in everything, for every rule in place there are instances where it can be broken. Use the tips above as general guides and not the end all be all. Keep in mind that in order to effectively break a rule, you need to know it to begin with. The intention here was to lay out the very basics of typography and to provide you with some tips and general guides to strengthen your brand or product.


SIGN UP FOR OUR NEWSLETTER

The Weekly Manifest

Receive the latest design, development, and startup articles to stay updated!

Close

Inquiry Sent!

Thanks so much for your interest in working with us, and for your time to fill out the form. We're passionate about what we do and would love the opportunity to create a successful solution for you.

Expect to hear back from us within the next 3 business days.

Work With Us

We can take on any type of project, but we don’t work with everyone. We only partner with clients that align with our business values, honestly benefit from our expertise, and embrace the systems we build in.

Fill out the form below to start a conversation see if you’re the right fit for us.

What type of project would you like to partner with us on?