 |
2,018 word length |
 |
15-20 minute reading time |
 |
Us & Jasper.ai wrote this |
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.
Introduction
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.
Font vs Font-Family vs Typeface
Let’s clear things up right now, the word Font is a synonym for Typeface.
All fonts belong to a Font-Family = A Typeface.
In typesetting, a font is a particular size, weight and style of a typeface. Since we’ve been publishing using Computers, we all just say font but that’s not really correct.
Here’s a visual example:
A Quick Bit of History
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.
Photo by Scottsdale Mint on Unsplash
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.
Photo by Scarbor Siu on Unsplash
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.
Beauty and form now influenced the written word. But typefaces were slow and hard to read with their thick black letter marks printed close together on paper. Style in type took on a huge transformation. This gave way to the need for more utalitarian, easy to read type face designs. Nicolas Jenson, a French Engraver was the first to create a usable and readable Roman typeface.
Photo by Brett Jordan on Unsplash
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.
Here are two videos that will get your conversation knowledge up to good enough level in one quick sitting.
[ux_html label=”A Brief History of Type”]
[/ux_html] [gap height=”60px”] [ux_html label=”History of Typography Video”]
[/ux_html] [gap height=”60px”]
Linotype & Monotype
Photo by Drew Beamer on Unsplash
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.
[gap]
Different Kinds of Fonts
There are a variety of different fonts, each with its own unique characteristics. Some blogs say five – some say six – so we’ll outline seven:
| Serif | Typefaces recognised by their tiny lines or feet coming off the character or letter. A serif font was the first to be created and they give a feeling of history, tradition, honesty and integrity. |
| Sans-Serif | These typefaces do not have the tiny lines or feet. Sans-Serif typefaces tend to have less stroke width variation. |
| Slab Serif | Also called Egyptian, Clarendon or Slab – are a typeface charaterised by thick, block-like strokes with serifs. |
| Hand Written | Typefaces and fonts designed to closely mimick the unique hand writing by us… humans. |
| Script | A class of fonts designed to resemble cursive handwriting like realistic pen pressure and sensitivity. Can include texture to replicate natural inconsistencies found in ink on paper. |
| Monospace | Also called a fixed-pitch, fixed-width font has letters and characters that each occupy the same amount of horizontal space. |
| Display | Typefaces intended for use at large sizes like headings or signage. |
TTF and OTF
What’s the difference between TTF & OTF font files and which one is the best one to use?
| Postscript | 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. |
| TTF | 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. |
| OTF | 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:
Using Typography in Design aka Type Rules
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
- Prioritise readability
- 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
Hierarchy in Setting Type
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:
[ux_html label=”Typography Video”]
[/ux_html]
[gap height=”60px”]
How to install and use fonts
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.
- Make sure you are logged in to Adobe Creative Cloud
- Open a tab in your browser and go to fonts.adobe.com
- Search and find fonts and activate them
- When you come back to your software, they’ll be ready to use
Winding Up
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.
Here’s a bonus help video below.
[ux_html label=”Typography Video”]
[/ux_html]
[/col] [/row]
