It Starts founders, Mark & George first learnt about practising good typography back at university many years ago. In the years since, we certainly haven’t forgotten these essential principles.

8 typography design elements to consider for print and web

It Starts founders, Mark & George first learnt about practising good typography back at university many years ago. In the years since, we certainly haven’t forgotten these essential principles.

Typography has always been the foundation of good design. Whether you’re designing for print or web, typography is key in communicating a clear message to the user. A clear visual structure or path can be obtained through the use of text and supporting images, which when done in harmony, will balance the page perfectly. To show you what we mean, here at eight things to consider when using typography. Enjoy.

1. Colour Contrast

Colour contrast may seem like a minor thing, however contrast between text and the background is really important. It’s often overlooked, and in many ways is very easy to get wrong. Here are a few tips to note when selecting colours for your typography and overall design.

A common mistake is placing black text on a white background. This results in too much contrast for the eyes. If you look at some of the best work in the industry, you will notice that well designed websites may look like they have black text on a white background. In reality, they actually use a dark grey which looks similar to black but not as harsh on the eye.

2. Font Size

Such a crucial part of typography is the size of the text you are placing on the page or screen. Print and web design does differ here due to their respective mediums, however the rules are still very similar.

If you’re working in print, don’t go much smaller than 10pt for the body copy, as this is a generally accepted industry standard. However, pt size is not used in web. Instead the measuring format is pixels, so the equivalent size of 10pt for web is 13px. Like print, this is a good size for body copy for the web. If you use anything smaller it may look pretty or neat, but the legibility would be severely affected, and you risk people not taking in the information as easily.

The key thing to remember is, what your audience wants. You can effectively use different font sizes to aid the information intake by the intended user. For example, older users like bigger text, so they are not straining to read.

3. Leading

So what is ‘leading’? This is the negative space between lines of text, which for web is referred to as height.

The name ‘leading’ originated when type was set out by hand in original typographic printing presses. They used lead strips between the lines to space out the text heights from one another. That was how the name ‘leading’ was born.

In print design you will find that standard leading is 120% of the character size. This is often the auto leading rule taht most design software applies. So for the pt size of 10, you would have a rule that the ‘leading’ would be set to 12pt. You can make the text easier to read or cleaner by adding more space between the lines depending on the font size, family and of course, the user.

Using ‘leading’ correctly can produce beautiful typography but should be reserved for small amounts of text, not large blocks of copy.

4. Kerning

Kerning is the process of adjusting the space between individual characters within a word or sentence.

The absolute goal of kerning is to achieve more balanced type – equalising the appearance of whitespace between characters. This is especially important in headers and large type. While not as important in paragraphs of small text, kerning can be quite functional when you’re attempting to avoid line breaks in your design. It is so important to think about not only in text on page or screen but also in logo design and something we consider in great depth.

5. Hierarchy

When we talk about hierarchy, we are talking about a clear order. Defining the path you want the user to take, a journey if you like.

It is crucial you achieve this in an approachable manner, allowing the information you want to communicate to be read in a certain order, with parts of text being more impacting than others. Web and print design follow the same rules and often achieving a good hierarchy approach starts out with sketching the overview of your design layout. You can differentiate the title, body copy and captions etc by different fonts, sizes, colours and weight etc.

There are so many ways to create an effective page paths and it really is worth the time researching and getting the journey right. We know it pays off at the end, when we produce our design work.

The most important element doesn’t have to be the largest. It just needs to take more prominence over the other elements on the page. Just ask yourself what would a viewer read first, second, third, fourth and so on. Construct the hierarchy of your design with this in mind.

6. Whitespace

White space or what can be referred to as negative space is the space given between element to aid in its composition.

If your text and other design elements on the page are dense and too close together, your content will probably become difficult to read. This is where whitespace comes in to save the day.

Many people are afraid to allow for whitespace. Clients often urge designers to get as much content on that designs as they can, however too much content can make any information intimidating and daunting to read. We always advise our clients at ‘It Starts’ to trust us that we can make the information they want to communicate to their audience digestible with the use of simple white space.

It can be used to create balance in the design and like the above with hierarchy it can aid the user’s journey through the design.

7. Serif vs Sans Serif

Which is better, Serif or Sans Serif? And which font is easier to read?

We can’t answer, but we agree there is a time and place for each font, and they should be used correctly depending on the user the material is intended for.

The real truth is, there’s no evidence to support that either one is more legible than the other. Some say sans serif fonts should be reserved for titles and headers, and serif fonts should be used for body copy, while just as many say the exact opposite.

When dealing with web design or any kind of on­screen design, it is generally agreed upon that sans serif fonts are easier to read on screen. They should be used for the majority of text on screen while serif fonts should be primarily used for small sections of copy such as titles and headers.

Typetester.org is a great tool to compare typefaces you’re considering for your website. We use this tool all the time when considering our typographic fonts to use for both print and web.

8. Using Webfonts

This is something to get very excited about. In the past fonts were very limited with their use online and to use individual bespoke typography on your websites was near to impossible. However with the rise of web type foundries such at Typeset and Google fonts accommodating for designers online, a whole array of well designed fonts have now exploded onto the online market, allowing for creative well thought out typography on a web page. We take in careful consideration when applying branding to a company to make sure we have a web friendly font that can be used to carry on that brand’s core values online.

We hope you liked our eight typographic elements, if you have any you like then please contact us at studio@it­starts.com and let us know your favourites.

Tell us your favourite

About it starts

It Starts provides business strategy, design, marketing and technology services to some of the world’s largest businesses and best-known brands. The company is known for successfully harmonizing user needs and business goals to create industry-changing digital experiences for its clients.