The Basics of Typography Theory: What every Designer needs to know to set type more easily
Welcome to the wonderfully strict world of Typography. As designers we need to have a strong understanding of this multi-faceted discipline if we want to create beautiful and legible designs. Typography is the art of arranging type to make our languages legible in print or on screen, not only can it make or break a design, it can make or break a career. We’ll talk about the different parts of letters, how to choose the right fonts, and how to use typography to create hierarchy and emphasis in your designs. We won’t be able to cover every aspect around Typography Theory in our ‘short article series’ but we can get you into the conversation.
This post was never intended to be lengthy or a deep-dive. In fact, this series of posts are part of what we label ‘short article series’. But this one is different. She’s not like the others. Typography might be the longest-short-article and perhaps the most important post so far. So strap yourself in and let’s get started.
Characters & Letters
The first thing to understand about typography are the different parts of letters. Each letter of a word is called a character. If we draw a line at the bottom of the characters, not including the little hanging descenders, this would be called the words baseline. If you were to draw another baseline at the top of the letters, not including the little parts sticking up called ascenders, what is inside would form the core of your word and this is what helps create balance in your type.
Let’s run clockwise from left to right: uppercase character, lowercase character, ear, terminal, ascender, point size (type), x-height, terminal, bracket, serif, link, counter, bowl, descender, stem, basline and cap-height.
Let’s clear something up quickly. Humans… that’s us, have been carving and scratching out shapes and letters for thousands of years using many materials from sticks and rocks on cave walls to stone tablets, onto trees and even into the earth. We’ve been banging out symbolic shapes and patterns into metal for 700-800 years to make punches, dies, seals and currency.
When we discuss the history and origins of typography we’re pointing to ‘movable type’ invented during the eleventh century Song Dynasty in China by Bi Sheng (990-1051). The materials used were ceramic. Later, metal moveable type was invented in Korea during the Goryeo Dynasty around 1230. These Eastern languages had thousands of characters which made typesetting a difficult and tedious job.
Meanwhile but a little later in the west (like 200 years or so) with much less characters and symbols, Johannes Gutenberg, a German inventor and printer originated a method of printing from moveable type and went on to create the first mass-produced book (The Gutenberg Bible) in 1450, which lead the way for the Renaissance and the Reformation. We launched from Graphic Artists hand forging script into print publishing.
Printing became a viable industry. Print transformed the page.
The page transformed the world. Literature became available to everyone.
Fast forward to The Industrial Revolution which brought the printing press mechanism and hunger for more stories, news and publications to the masses. World events brought the need for faster communication and more wider spread. Very soon, publications were competing for new ways of drawing attention of patrons.
Advertising was born.
The History of type is much older and you can enter into many discussions from the Greeks and their Philosophical scriptures, through to Roman inscriptions on stone, brick stamps in Mesopotamian cities second millennium B.C, Babylonian cylinder seals rolled into wet clay to make an impression, and the famous Phaistos Disc from the Minoan civilisation from Crete during the Bronze Age created around 1850 and 1600 B.C. Let’s also make mention of the medievil Latin print artifacts that have been discovered over the years and you can geek out more on wikipedia here.
Linotype is/was a machine used in printing and typesetting, it consists of a keyboard that you type which casts an entire line of metal type at once. This was common back in the day before computers were widely used for design. Read more here.
Monotype is/was a type of printing machine that uses a single block for each letter, number, or symbol. This method was also common before the widespread use of computers and printers. Read more here.
What’s the difference between TTF & OTF font files and which one is the best one to use?
Postscript came before TTF & OTF. They are font files encoded in outline font specifications developed by Adobe. They are no longer supported but you can still find them and use them.
True Type Font was a collaborative effort between Apple and Microsoft in the late 1980’s. They needed a format that could be read by both systems and read by printers. TTF included both the necessary data for print and screen in a single format and it was easy to install and were usable by everyone.
Open Type Font was a collaborative effort between Adobe and Microsoft. Similarly, OTF was cross-platform and included both print and screen data but that’s it. OTF extended the capabilities by a lot. It allowed for the storage of up to 65,000 characters. This is great for font creation as they could include ligatures, glyphs, small caps, alternate characters and old-style figures. The benefits being in the advanced type setting features.
So… OTF is the best font format for us to use with all of its extended & advanced extras. Here’s an over the top example using a script font called Bickham just to drive the point home:
The first thing you might notice about the above script font is it’s hard to read and it strains the eyes, so that brings us to a hard-puncher list on how to use typography effectively in your designs.
Select the right font to begin with
The right font is what communicates with your audience – not you personally
Immediately modify the font size from the default output
Scale your headings
Set the line-spacing – also called leading
Add tracking and kerning to make the text spacious
Add white space between headers and body text
Use a line-length of 45-90 characters
Practice correct alignment – in English that’s top to bottom, left to right
Work with the right tools and software
Never ever stretch fonts – you’re fired
Learn and use measurements
Try not to use more than two fonts
Practice smart pairing
Work with grids
We don’t do typography, we practice typography – it’s ongoing
Pro Tip #1: Never put wide kerning on small caps – only capitals
Pro Tip #2: White space is key to readability
Pro Tip #3: Learn to use metric and optical in the tool palette
One of the most important things to keep in mind when using typography is hierarchy. This is its own post but remember we’re getting you into the conversation to start using templates.
You want to use typography to create a hierarchy of information, so that the viewer knows what is most important and what they should focus on first. You can create hierarchy by using different font sizes, weights, and styles.
Then there’s alignment and spacing, justification, widows, orphans, rivers and rags.
For example, you might use a larger, bolder font for headlines and smaller, lighter fonts for body copy. You can also use typography to create emphasis. For instance, you might use all caps or italics to highlight certain words or phrases.
When using typography for emphasis, be sure not to overdo it; too much emphasis can make your design look busy and cluttered.
Here’s a short video, a spring board into using hierarchy:
Sure… you can find fonts online for free or for purchase from many different websites. You’ll need to check if they are TTF or OTF and that they match your project. Then follow these steps to get using them straight away:
Download the package – they’ll probably be compressed
Unzip or unpack the zip
Select the fonts and right-click install, or you can also
Open explorer or finder and drag the fonts into the font folder
Then open the software you want to use them in and go
If your software eg. Illustrator was opened and in use when you installed the fonts, you might need to close the program and reopen so it will recognise the change.
Another way Designers integrate fonts is through the software which is highly usefull and effective with Adobe Creative Cloud.
Typography is a powerful tool that every designer should master. By understanding the basics of typography, you can create stunning designs that are easy to read and communicate your message effectively. So get out there and start experimenting with fonts!
Thanks for reading and I hope this long short article was helpful. Keep reading.