Typography Fundamentals

Typography can be a bit of a mystery for beginners and design enthusiasts alike.

Digital Design JMC Academy student Jay Murrin talks you through the fundamentals of Typography. 

Given that there is so much choice out there, particularly in the digital age, it can quickly become overwhelming. However, the reason why some websites, magazines, blogs etc. type looks so good can quite easily be explained by a few easy to understand fundamental considerations. In this article, I am going to try to outline these considerations and give a little bit of insight into why your favourite websites and magazines look so awesome. 

Now to get some of the technical stuff out of the way, I’m going to start with the anatomy of type. And don’t worry you don’t need to know all the terminology like the back of your hand to be able to make type look good, but it’s important to have a rough understanding in order to move on to some of the other things discussed later in this article. 

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 fonts are generally used in the body of a printed work. Sans serif is much cleaner and simpler and therefore used more for headlines and titles as well as for putting emphasis on words. 

*note: Although generally more readable, Serif fonts don’t retain detail well in very small font sizes and for that reason sans serif fonts 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” 

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 due to 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. 
Image by: urbanfonts.com

An average computer screen is about 100 DPI; that's ten times less than a typical printer. This is why, when you send an image off to be professionally printed, they need an incredibly large file, 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. What this all means is that in the digital age, serif fonts are being used less and less and sans serif are much more appropriate for the screen. If you were to browse many of the online sources of typefaces, you’ll find the majority web and digital fonts are sans serif. 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. 

This brings me to my next point. Readability is not the only consideration that must be made when choosing type for the web, compatibility is equally as important. Given that there is such a large multitude of devices that have inbuilt web browsers capable of accessing any website on the internet, fonts need to be compatible across all these different devices and different browsers. Using web fonts is the best way to do this as they are designed specifically to be compatible with a wide range of devices and browsers. Using a Web font service such as Adobe Typekit 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 

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 


One For Your Sub headings 

And another for your body. 

Elements 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 a 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 Typekit, 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 your working on that could use some great typography. 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 Typography and studying Digital Design, click here.