21Feb
2016
Typography Fundamentals

Typography can be a bit of a mystery for beginners and design enthusiasts alike, so we cuaght up with Visual Communication Alumni Jay Murrin to talk us through the fundamentals of Typography! 

 

In our digital age we are spoiled for choice with how much different typography there is to choose from. There are a few easy-to-understand fundamentals that explain how digital and print media look so good.

Let’s get started with the technical stuff. I’m going to start with the anatomy of type. Don’t worry you don’t need to know all the terminology like the back of your hand. However, it’s important to have a rough understanding in order to move on to how to use typefaces.

Sans Serif Vs Serif

This is just a classification of fonts that have small lines or “tails” from the edges of letters and symbols and those that do not e.g., Times New Roman Vs Arial. Serifs are easier to read due to the tails acting as a cue to guide the eye from one character to the next and also define the spacing between different characters meaning we are able to recognise each character faster. This is why Serif typefaces are generally used in print. Sans serif typefaces s much cleaner and simpler and therefore used more for headlines and titles as well as for putting emphasis on words. Although generally more readable, Serif typefaces don’t retain detail well in very small font sizes and for that reason sans serif typefaces are used more often in small sizes.

Kerning and Leading

The distance between the baseline of the text above and the baseline of the text below is called the leading and the distance between two characters is called the kerning. 

Type Size

The measurements in points between the top of an ascending character such as a “b” or an “h” and the bottom of a descending character such as a “g” or a “p”.

Screen & Print 

Untitled.jpg

The next consideration to tackle is the difference between typography for the screen and typography for print. Traditionally print medium has used a combination of serif typefaces for the main body of text called the body copy, and a bolder attention-grabbing typeface for the headlines and titles. This is mainly for readability, but also because printed type is usually printed at 1000 dots per inch or “DPI” which is an incredibly high resolution compared to a desktop screen. This means that the detailed serifs that make serif fonts more readable can be produced with great accuracy, however a lower resolution medium such as an LCD screen will have trouble producing a readable representation of the typeface. 

Dots Per Inch

An average computer screen is about 100 DPI: that's ten times less than a typical printer. This is why, when submitting files to be professionally printed, they need high resolution, especially if it's going to be a large print. The more information contained in the digital file, the better the quality the print will be.

Serif fonts are being used less as sans serif are more appropriate for the screen. Many online sources have an abundance of sans serif web and digital typefaces. Designers have become very good at making these fonts emotive and giving them character, which is why there is so much choice when it comes to digital typefaces these days. 

Compatibility Across Platforms

Readability is not the only consideration that must be made when choosing typefaces for the web, compatibility is equally as important. Given that there are various devices that have their own web browsers, fonts need to be compatible across them all. Using web fonts is the best way to do this as they are designed specifically to work on a wide range of devices and browsers. Using a Web font service such as Adobe Fonts makes it even easier as compatibility is guaranteed, and it takes the guess work out of choosing the right fonts.

Some other popular web font services worth considering are:

  • Google Fonts 
  • Fontspring 
  • Webtype 
  • fonts.com 

Type Pallets

Moving on to the last consideration which is Type pallets. This is basically the idea that certain typefaces go well together, and others do not. Choosing a “pallet” of type for a project is actually very simple, it just revolves around a few simple rules. 

  1. No More than three different typefaces. This is because if you have lots and lots of different typefaces your website, magazine article, blog post etc will become confusing to look at. Clean and simple is the key here.
  2. Think about the tone of the project. This is where type becomes expressive, for e.g.. if you own a blog dedicated to parenting and your audience is primarily young mothers you wouldn’t use a heavy bold font like IMPACT. Instead you might use something softer, like Gill Sans. 
  3. Use Contrast. When selecting typefaces to make up your pallet make sure they all differ in one or two aspects. If we’re sticking to the no more than three rule, you might have one typeface 

FOR YOUR HEADINGS 

One For Your Sub headings

And another for your body text

Design Principles that can be used to create contrast might be size, stroke, colour and space. If your type pallet is too similar, it will make the whole project look dull or watered down so, to combat this, it's recommended you choose typefaces that are visually separate from one another. This can also be done without using separate typefaces however, for e.g. If you’ve decided to only use one typeface but need contrast in your project you could use the fonts within the family such as BOLD weight and large size for the heading an Italic light for the subheading and a regular for the body. 

Take your time choosing your type!

Don’t settle for the first place you look either, shop around and use the web to find typefaces that set the right tone and don’t be afraid to use font pairing sites and services such as Adobe Fonts, Type Wolf and Type Genius. If you take time to play around and experiment, you will be rewarded with a clean and consistent blog post, magazine article, website, birthday invitation, flyer or just whatever project you’re working on. Like anything, the more you practice, the easier it will be and the better you will become at choosing the right type for your work. 

To find out more about studying Digital Design, click here

To keep up to date with the latest from JMC, click here