What is Typography?
Content from: https://blog.hubspot.com/marketing/typography-terms-introduction
Before taking this course, typography -- to me, at least -- was more the art of scrolling through a dropdown menu until I found a font that looked like it could work. But it turns out there's a lot more to it than that.
Typography is the art and technique of arranging type, type meaning letters and characters.
Notice that it's about more than just the design of letters and characters; the arrangement of those letters and characters is just as big a part of it all. That refers to the selection of point size, line length, and spacing, both on a single line and throughout an entire page or piece of work.
Image Credit: Designspiration
To understand where the importance of arrangement comes in, I like to think back to Johannes Gutenberg's printing press. At one point in time, people practiced typography using printed materials -- meaning they were literally taking letters and characters and arranging them in physical space.
Today, thanks to computers, open source fonts, and scalable computer typography, it's a lot easier to arrange letters and characters. But that physical piece remains important, even in the digital sphere.
Why is Typography important?
Typography is absolutely everywhere. Just look at your phone, a billboard, your coffee cup, or even the different styles used in this blog post. Every font, letter, and character arrangement plays a part in determining how a message is conveyed.
Sure, it might seem trivial at times, but even the smallest of type adjustments can impact the look and feel of your work. For example, back in June, Facebook tested a new font on its users called Geneva. While the new font was only slightly thinner and lighter than the original, Helvetica, it made a noticeable difference to some.
"The overall effect is a lighter, more modern looking block of text," explained Chris Mills for BGR.
In fact, one of the only college courses Steve Jobs took was on calligraphy and typography, which he believed played a critical role in the success of Apple. As he once said in a Stanford University commencement speech, "If I had never dropped in on that single course in college, the Mac would have never had multiple typefaces or proportionally spaced fonts." Can you imagine a world where Apple products didn't have a focus on beautiful design? I certainly can't.
Once you realize how much thought goes into carefully selecting a typeface, it becomes much easier to recognize the differences between typefaces and understand why they might’ve been chosen in the first place. Take a look at some of the examples below to get a better sense of what I mean ...
Typography Definitions & Terms
Typefaces vs. Fonts
If you thought these two words were interchangeable, you're not alone. But they actually mean two different things.
Typographer, Nick Sherman, once used a great analogy to explain the differences between the terms “typeface” and “font.” He suggested comparing these typography terms to the musical terms “song” and “mp3.” When you’re explaining how much you enjoy a particular tune, you say, “I love this song!” You wouldn’t say, “I love this mp3!” The song is the work of art, whereas an mp3 file is just the delivery mechanism.
The same rules apply in typography. You should use the word “typeface” when describing the creative work (i.e., what you see). This is a more abstract design term used when referring to the way a specific collection looks or feels. For example, Helvetica is a typeface.
If you’re describing the physical embodiment of the collection of letters and characters, you should use the term “font." It refers to what you use -- whether that’s a file on your computer or a case full of metal letters. This is the tangible representation of that collection of letters and characters. For example, Helvetica Bold and Helvetica Light Oblique are fonts.
Here's how you could use these two terms in a sentence:
-
“Wow. The typeface you chose really pulls this design together.”
-
“I’ll change the font size to 12pt so it fits in the box.”
The Anatomy of a Typeface
It’s way easier to communicate with designers when you actually speak their language, which is why it's important to understand the anatomy of a typeface.
Each part of a letter has its own special term, similar to bones in a human body. Below, you’ll see three diagrams that explain the makeup of individual letters, how these elements interact with each other, and how they sit on a line.
For example, let's take with the word "Faulty" as it's shown in the picture below.
Here's how each of the terms here are defined:
-
Baseline: The line where the letters sit.
-
Cap height: The distance from the baseline to the top of the capital letter.
-
X-height: Located in between the baseline and the cap height, it's the height of the body of the lowercase letter. (In this case, it's the letters ‘a,' ‘u,' and ‘y.')
-
Bowl: The curved part of the character that encloses the circular or curved parts of some letters, like 'd,' 'b,' 'o,' 'D,' and 'B.' (In this case, it's that round shape sticking off the letter ‘a.')
-
Serif: The slight projection finishing off a stroke of a letter in certain typefaces. (In this case, it's that little foot sticking off the letter ‘l.')
-
Descender: The longest point on a letter that falls beyond the baseline.
Kerning
Kerning is the modification of the space between two letters. For example, check out the image BATTLE:
Here, I used Franklin Gothic Medium to showcase the natural space you see between two letter T’s. It looks a little too snug, right? By customizing the spacing between just these two letters, you'll be able to increase readability.
Tracking
Similar to kerning, tracking deals with a modification to letter spacing. However, instead of adjusting the spacing between just two letters, tracking is an adjustment to the spacing between all letters an entire word. See the difference here:
For this example, I chose to make an extreme adjustment to the tracking. Typically, you’d want to apply tracking in small increments to avoid causing readability issues.
Leading
Remember in high school when you had to double-space your essays? Well, the terms “single-space” and “double-space” can also be called “leading,” which is the distance between the baselines. See leading in action:
Hierarchy
As you read through this blog post, you'll notice certain words stand out more than others. That's what designers would call creating a hierarchy. You can use different weights (bold, regular, light), styles (italic), and sizes to create a sense of order within your text. Not only does this help create a legible flow, but it helps the reader see what the most important points are.
Here's an example of what hierarchy looks like:
Type Classifications
The two main type classifications you see are called serif and sans serif. Other classifications include slab serif, blackletter, script, modern, and decorative. Let's start with the most common two, and then touch on just a few others to give you an idea of what they're all about.
Serif
Remember when I pointed out the little foot in the word “Faulty?” Typefaces with feet like that are called serif. You can see where I highlighted these little feet:
Common serif typefaces include Times New Roman, Georgia, and Garamond. If you’re reading a novel, you might notice the body text is a serif. That’s because a serif is much easier to read in long, printed works due to the distinctiveness between letters.
Sans Serif
In French, the word “sans” means “without.” So the term “sans serif” literally means “without serif.” In the image below, you’ll notice the words lack serifs, as I pointed out with the red arrows.
Common sans serif typefaces include Arial, Verdana, and Futura. You’ll see a lot of sans serifs being used in blog posts and documents on the web because it feels more modern and looks great even at lower screen resolutions.
Blackletter
Blackletter typefaces, also referred to as Gothic, Fraktur or Old English, are known for its dramatic thick and thin strokes and its elaborate swirls on the serifs. These typefaces are based on early manuscript writing -- in fact, blackletters were used in Gutenberg's Bible, one of the first books ever printed in Europe. They were much more popular before 1500 than they are today.
As you can tell, blackletters are pretty hard to read, which is why they're not typically used for body type. You'll usually see them in headers, logos, posters, and signs -- like on newspaper nameplates (New York Times' logo, anyone?), or on the headers of certificates, diplomas, or degrees. Common blackletter fonts include Cloister Black, Deutsche Zierschrift, and Germanica.
Script
Script typefaces are based upon the varied and often fluid strokes created by handwriting. As scalable computer typefaces, characters in these scripts can now string together with one another automatically so they convincingly mimic handwriting, rather than users having to manually pick and choose which letters go after which -- which you can imagine was a painstaking process.
Under the umbrella of a script typeface, there are two basic classifications: formal and casual. Formal scripts are often reminiscent of the handwritten letterforms common in the seventeenth and eighteenth centuries, and they’re used for elegant designs like invitations and diplomas, not for body copy.
Casual scripts, or informal scripts, are just that: less formal script typefaces that look more like everyday handwriting
Decorative
These are also known as Ornamental or Display fonts. This font can be very eye catching. However, it can also be very hard to read and should be left for headings.
Modern
Modern fonts are more clean or unique versions of serif and sans serif fonts. Such designs can have a super thin font, or a grunge font. View the sites below to see a wide variety.
These websites have some great free modern fonts.
https://www.canva.com/learn/sans-serif-fonts/
https://1stwebdesigner.com/best-modern-fonts/
Image Credit: SitePoint
Image Credit: Deciduous Press
Image Credit: Font Haus
Type Families
The term “type family” or “typeface family” is used to describe a range of designs that are all variations of one basic typeface.
For example, you’ll see that Proxima Nova has variations such as bold, extra bold, black, regular, light, light italic, and regular italic:
Sticking to a single type family will help add variation to your designs, while keeping it consistent and uniform.
Designers might use various fonts within one family to create a sense of hierarchy -- designing so that the most important elements, such as headlines and quotes, stand out above the rest of the text.
