Getting Type Right in Design

The most important skill to master in design is working with copy and typography. The reason for this is because the text is a primary way that designers communicate to their users or viewers. Quite honestly, learning how to use type effectively and efficiently is primitive in master the core concepts of design

01. Set a Typeface Limit

Let us start by talking about why we, as the designers or visual communicator, should indeed limit our typeface choices during the design process. Firstly working with more than 3 typefaces can come off to the potential viewer or client that we do not know what we are doing. As our layout seems to be messy, lacks cohesion, and lacks control. If we limit our design typefaces to only two pairing fonts it gives our layout some structure and control. While being very readable and balanced at the same time.

The Medium blog does a phenomenal job with line length:

02. Limit Line Length

Also when you have found two typefaces that pair well together it can outweigh the use more than 3 fonts any day. Figuring out the purpose of your design can also help out during the process of finding the right typeface for the project.

As a general rule of thumb when limiting the line length of your body copy or copy, in general, is that you want your user to have an easy time reading what you have to say or offer. Plus when we are talking about web design or app design you want your content to follow this idea. As a good practice when writing small portions of copy you should limit it to 40 characters per line, whereas longer content like blog posts, the target you want to hit is 60 characters. This makes easier for the user to be able to read long or short copy in a small amount of time while it being easy on the eye.

03. Use Size Contrast

Another way to strengthen your typographic layout is by establishing contrast in the mix. There are many different ways to establish a sense of contrast in your layout. Like for instance, you use the design principle of proximity or grouping within the layout. This can be demonstrated by creating rules to group copy within the layout. Or you could also skip weight within the typeface between your headings, subheadings, and body copy. One thing that I know that has never let me down is to play around with the kerning and tracking of your headings and subheadings within the layout.

Defining a Modular Type Scale for Web UI – Prototypr

04. Build a Typescale

Before even laying out your copy it could be beneficial to layout a type scale that you can adhere to during the duration of the design process. Why you may ask? Well having a set scale for how big or small your different type components will be can establish a good hierarchy right off the back. No need to figure what the font size should be as you already have figured out from the beginning. During this process it would be helpful to use a font that scales well on desktop and mobile but if its a print project then this can be still useful for legibility sake.

Check out this in-depth guide on “Defining a Module Type Scale.

05. Utilize Whitespace

Whitespace is a highly effective design element, yet so many people in the design world are afraid to use this concept. It balances typography within the layout of the design. Utilizing whitespace can efficiently create contrast in the hierarchy of the design. Ways to use whitespace would be like adjusting the line-height of your copy allowing it to breathe. Also, spacing out the body copy and the heading a little bit.


Let us know what you think about Getting Type Right in Design!

Leave A Comment

Your email address will not be published. Required fields are marked *