If there’s one topic that all designers should be curious about right now, it’s typography design.
Now, you may have heard that curiosity killed the cat, but did you know that satisfaction brought them back?
Well, now you know! wink
So come on, all you cool, creative cats! It’s time to satisfy your typography curiosity with the answers to the most frequently asked questions we get.
In a literal sense, typography is the appearance and style of text.
The typeface, style, color, and size of the font you’re reading right now, the shapes of the paragraphs on this page, the background colors and contrasts… all of these are basic parts of typography design.
Figuratively though? Typography is so much more than that. It is text and visual working together in harmony to enhance and elevate the message being communicated.
From ensuring basic readability to building brand credibility, typography goes a long way. Imagine a webpage full of pixelated, overly stylized, and faint text on a busy background.
At best, it would be annoying and give the reader negative feelings about the brand. At worst, it might be disorienting or headache-inducing enough to make them give up on reading the content, click away, and find another “better” brand.
Having legible text isn’t enough, though. Good typography is also vital to capture attention, establish a brand voice, and ultimately influence a reader.
There are so many small changes that we make in design, which result in big differences in mood and message. You might favor “cooler” colors to evoke a “refreshing” or “calm” vibe.
It’s the same with typography. The colors, shapes, contrasts, weights, spacing, and pretty much everything about text can shift the way we interact with it and interpret it. Let’s consider the 2021 rebrand of Burger King:
JKR Global, the creative agency behind the rebrand, had a lot to say about BK’s first rebrand in over 20 years:
“We set out to make the brand feel less synthetic and artificial, more real, crave-able and tasty.”
They also mentioned that the new font, Flame Sans “...evokes the natural, organic shapes of food.” All of that sounds like a lot to expect from typography, but it’s completely reasonable to expect that influence, aaaand now we’re hungry!
If you’re on the hunt for a unique font style that is tailored to your client’s needs and/or you have to design a whole new typeface from scratch, you’re gonna need to know the lingo.
From ascenders to gadzooks(!), we’ve got you covered.
Ooh, great question! It can feel a little bit like a logic puzzle trying to work this out, but once you get it, you’ll really get it!
Character - a broad term that covers letters, numbers, punctuation, accent marks, and other symbols.
Letter - covered under “character,” a letter is… a letter! Not a number, punctuation, or any other symbol; the letter is strictly A-Z.
Glyph - the visual representation of a character – each shape and design is a different glyph, even if it’s the same character.
Below are several different glyphs representing the same character. In this example, the character happens to be a letter.
If you’re looking at new fonts, font foundries and resellers do tend to list that there are alternate glyphs available with the download and may even display them alongside the other examples or include an additional .pdf.
You should be able to do this easily with most professional software.
Open up the glyphs panel within the software that you’re using and review the glyphs available by type, either for every font, or a specific selection that you’ve made.
You can apply these changes individually by inserting the glyph where you need it, or you can select however much of your text you want and apply the changes globally.
These terms are often used interchangeably, but font and typeface are actually different. If you’re going to be talkin’ type as a designer, you’re going to need to understand the difference and use these terms correctly.
It’s really not all that complex– time for a little show-and-tell! Here’s your visual guide:
And here’s what we have to say about it:
A typeface is a style of lettering.A font is a variation of a typeface.
Bada bing (and we cannot stress this enough) BADA BOOM! You’re practically an expert!
The short answer:
If you want the longer answer and have absolutely no idea what a serif is or what we’re talking about here, make sure you check out our short guide to essential typography terminology.
If we’re on the same page with what a serif is, please proceed! If not, please go back to the typography terminology guide linked above– do not pass go, do not collect $200 until you check it out!
So where do those funky little letter lines come from? Originally, physically, serifs were just a “happy little accident” in a way. They were running starts and resting stops for calligraphers.
Neat! So how did we end up with them in print?
Well, people were… less than keen on fancy new technologies like the printing press back in the day. The goal was often to make the lettering look handwritten and not printed by a big scary machine.
This explains why we didn’t really have the term “serif” until we had “sans-serif.” Basically, we didn’t know what we had until it was gone. single tear for the serifs
Script typefaces bring us back to handwriting again! Some are extravagant and elegant, others are cute and playful.
They should be used sparingly and never for “body” text because they can hurt legibility. They do come in handy for extra fancy occasions like weddings or extra informal occasions like a bake sale:
You want the basics? You got it!
We can do so much more than the basics, though! Check out this guide to improving your layout when you’re ready to really get into it. And for a really solid foundation for your layout, check out our grids (we really, really love grids)!
Oh, we could go off on these – and we did!
It’s a broad, broad category that includes anything and everything that:
a. messes with the harmony of your text and therefore screws up the readability
b. scrambles your message, or
c. breaks rules carelessly (instead of on purpose-ly)
Here’s an example of some of the worst type crimes:
1. Using far too many fonts
You really don’t need more than one font, especially when you’re starting out. Maybe we could agree to two different fonts, but don’t push the maybe, baby.
2. Giving too many signals
Are you sensing a theme here? We want a good, clean type. Too many signals throw off the hierarchy and draw a reader out of the experience and make them pay too much attention to HOW they’re reading instead of WHAT they’re reading.
3. Bad spacing- between letters, between lines, and even between paragraphs
This is a crime because it affects the legibility and readability of your text. If we can’t pick out individual letters or know which letters belong to which words, we get frustrated and stop reading. If paragraphs are stacked too closely, we get bored and stop reading.
On the flip side, if paragraphs are too far apart, we can’t figure out what ideas are related to each other, we misunderstand, and yep, we probably… stop reading.
The “best” font size is going to depend on the purpose, the medium, and the audience, but in general, body text in print is between 9-12px and for screens, it should be between 16-12px.
Learn more about how and why size matters here: Typography for Beginners.
This is another question that has no single perfect answer. The human brain tends to be most comfortable with lines made up of about 40 to 60 characters. Any shorter and the eye jumps around too quickly. Any longer and our attention fades.
They’re almost like cousins! Leading refers to the spacing between individual lines of text. If you’ve ever had to “double-space” an essay, congratulations- you have adjusted leading!
Kerning, on the other hand, refers to the spacing between individual letters. Kerning can be adjusted to move specific letters further away from each other without affecting the others. If you need more context or are a visual learner, definitely check out this cool kerning game!
Just like leading and kerning, tracking has to do with spacing. Unlike leading and kerning, though, tracking manipulates the spacing between all of the letters in your text equally. It’s more like scrunching up or stretching out the letters.
Very important side note: “Stretching” your text is both a design and type crime! Please don’t “stretch” when you have perfectly good “tracking” at your disposal! Well, you can stretch (and probably should, little computer goblin), but please don’t ever stretch your text!
This is a fancy name for “moving text.” And to be quite honest, it deserves a fancy name! It’s a pretty fancy thing, which brings design and text into the fascinating world of animation.
Our favorite example of this just so happens to be one of our videos!
An accessible typeface is easily readable by most people and assistive technology. In general, it should be sans-serif, with letters that don’t blend into each other or get mistaken for one another (like the classic lowercase “L” vs uppercase “i” dilemma).
The typeface we use for all of the lovely text you see here is a pretty good example of that accessibility at work!
Ideally, your typography should also be responsive to be completely accessible.
Responsive typography “responds” to the size of the device it’s being displayed on and adjusts accordingly so that the user continues to get legible and readable text no matter what device or browser they use to access the page.
This is one of the many, many reasons we demand, uh, encourage you to test your content across all browsers and all platforms before publishing. You don’t have to do this individually– there are nifty tools online that will do it for you!
Whew. We’ve just been through a lot together. Glad you stuck it out with us!
Still have questions? Don’t sweat it! Check out the free typography resources on our blog and YouTube channel and consider signing up for our typography course online, and joining our Pro Group to hang with a super cool community of designers.
If there’s one topic that all designers should be curious about right now, it’s typography design.
Now, you may have heard that curiosity killed the cat, but did you know that satisfaction brought them back?
Well, now you know! wink
So come on, all you cool, creative cats! It’s time to satisfy your typography curiosity with the answers to the most frequently asked questions we get.
In a literal sense, typography is the appearance and style of text.
The typeface, style, color, and size of the font you’re reading right now, the shapes of the paragraphs on this page, the background colors and contrasts… all of these are basic parts of typography design.
Figuratively though? Typography is so much more than that. It is text and visual working together in harmony to enhance and elevate the message being communicated.
From ensuring basic readability to building brand credibility, typography goes a long way. Imagine a webpage full of pixelated, overly stylized, and faint text on a busy background.
At best, it would be annoying and give the reader negative feelings about the brand. At worst, it might be disorienting or headache-inducing enough to make them give up on reading the content, click away, and find another “better” brand.
Having legible text isn’t enough, though. Good typography is also vital to capture attention, establish a brand voice, and ultimately influence a reader.
There are so many small changes that we make in design, which result in big differences in mood and message. You might favor “cooler” colors to evoke a “refreshing” or “calm” vibe.
It’s the same with typography. The colors, shapes, contrasts, weights, spacing, and pretty much everything about text can shift the way we interact with it and interpret it. Let’s consider the 2021 rebrand of Burger King:
JKR Global, the creative agency behind the rebrand, had a lot to say about BK’s first rebrand in over 20 years:
“We set out to make the brand feel less synthetic and artificial, more real, crave-able and tasty.”
They also mentioned that the new font, Flame Sans “...evokes the natural, organic shapes of food.” All of that sounds like a lot to expect from typography, but it’s completely reasonable to expect that influence, aaaand now we’re hungry!
If you’re on the hunt for a unique font style that is tailored to your client’s needs and/or you have to design a whole new typeface from scratch, you’re gonna need to know the lingo.
From ascenders to gadzooks(!), we’ve got you covered.
Ooh, great question! It can feel a little bit like a logic puzzle trying to work this out, but once you get it, you’ll really get it!
Character - a broad term that covers letters, numbers, punctuation, accent marks, and other symbols.
Letter - covered under “character,” a letter is… a letter! Not a number, punctuation, or any other symbol; the letter is strictly A-Z.
Glyph - the visual representation of a character – each shape and design is a different glyph, even if it’s the same character.
Below are several different glyphs representing the same character. In this example, the character happens to be a letter.
If you’re looking at new fonts, font foundries and resellers do tend to list that there are alternate glyphs available with the download and may even display them alongside the other examples or include an additional .pdf.
You should be able to do this easily with most professional software.
Open up the glyphs panel within the software that you’re using and review the glyphs available by type, either for every font, or a specific selection that you’ve made.
You can apply these changes individually by inserting the glyph where you need it, or you can select however much of your text you want and apply the changes globally.
These terms are often used interchangeably, but font and typeface are actually different. If you’re going to be talkin’ type as a designer, you’re going to need to understand the difference and use these terms correctly.
It’s really not all that complex– time for a little show-and-tell! Here’s your visual guide:
And here’s what we have to say about it:
A typeface is a style of lettering.A font is a variation of a typeface.
Bada bing (and we cannot stress this enough) BADA BOOM! You’re practically an expert!
The short answer:
If you want the longer answer and have absolutely no idea what a serif is or what we’re talking about here, make sure you check out our short guide to essential typography terminology.
If we’re on the same page with what a serif is, please proceed! If not, please go back to the typography terminology guide linked above– do not pass go, do not collect $200 until you check it out!
So where do those funky little letter lines come from? Originally, physically, serifs were just a “happy little accident” in a way. They were running starts and resting stops for calligraphers.
Neat! So how did we end up with them in print?
Well, people were… less than keen on fancy new technologies like the printing press back in the day. The goal was often to make the lettering look handwritten and not printed by a big scary machine.
This explains why we didn’t really have the term “serif” until we had “sans-serif.” Basically, we didn’t know what we had until it was gone. single tear for the serifs
Script typefaces bring us back to handwriting again! Some are extravagant and elegant, others are cute and playful.
They should be used sparingly and never for “body” text because they can hurt legibility. They do come in handy for extra fancy occasions like weddings or extra informal occasions like a bake sale:
You want the basics? You got it!
We can do so much more than the basics, though! Check out this guide to improving your layout when you’re ready to really get into it. And for a really solid foundation for your layout, check out our grids (we really, really love grids)!
Oh, we could go off on these – and we did!
It’s a broad, broad category that includes anything and everything that:
a. messes with the harmony of your text and therefore screws up the readability
b. scrambles your message, or
c. breaks rules carelessly (instead of on purpose-ly)
Here’s an example of some of the worst type crimes:
1. Using far too many fonts
You really don’t need more than one font, especially when you’re starting out. Maybe we could agree to two different fonts, but don’t push the maybe, baby.
2. Giving too many signals
Are you sensing a theme here? We want a good, clean type. Too many signals throw off the hierarchy and draw a reader out of the experience and make them pay too much attention to HOW they’re reading instead of WHAT they’re reading.
3. Bad spacing- between letters, between lines, and even between paragraphs
This is a crime because it affects the legibility and readability of your text. If we can’t pick out individual letters or know which letters belong to which words, we get frustrated and stop reading. If paragraphs are stacked too closely, we get bored and stop reading.
On the flip side, if paragraphs are too far apart, we can’t figure out what ideas are related to each other, we misunderstand, and yep, we probably… stop reading.
The “best” font size is going to depend on the purpose, the medium, and the audience, but in general, body text in print is between 9-12px and for screens, it should be between 16-12px.
Learn more about how and why size matters here: Typography for Beginners.
This is another question that has no single perfect answer. The human brain tends to be most comfortable with lines made up of about 40 to 60 characters. Any shorter and the eye jumps around too quickly. Any longer and our attention fades.
They’re almost like cousins! Leading refers to the spacing between individual lines of text. If you’ve ever had to “double-space” an essay, congratulations- you have adjusted leading!
Kerning, on the other hand, refers to the spacing between individual letters. Kerning can be adjusted to move specific letters further away from each other without affecting the others. If you need more context or are a visual learner, definitely check out this cool kerning game!
Just like leading and kerning, tracking has to do with spacing. Unlike leading and kerning, though, tracking manipulates the spacing between all of the letters in your text equally. It’s more like scrunching up or stretching out the letters.
Very important side note: “Stretching” your text is both a design and type crime! Please don’t “stretch” when you have perfectly good “tracking” at your disposal! Well, you can stretch (and probably should, little computer goblin), but please don’t ever stretch your text!
This is a fancy name for “moving text.” And to be quite honest, it deserves a fancy name! It’s a pretty fancy thing, which brings design and text into the fascinating world of animation.
Our favorite example of this just so happens to be one of our videos!
An accessible typeface is easily readable by most people and assistive technology. In general, it should be sans-serif, with letters that don’t blend into each other or get mistaken for one another (like the classic lowercase “L” vs uppercase “i” dilemma).
The typeface we use for all of the lovely text you see here is a pretty good example of that accessibility at work!
Ideally, your typography should also be responsive to be completely accessible.
Responsive typography “responds” to the size of the device it’s being displayed on and adjusts accordingly so that the user continues to get legible and readable text no matter what device or browser they use to access the page.
This is one of the many, many reasons we demand, uh, encourage you to test your content across all browsers and all platforms before publishing. You don’t have to do this individually– there are nifty tools online that will do it for you!
Whew. We’ve just been through a lot together. Glad you stuck it out with us!
Still have questions? Don’t sweat it! Check out the free typography resources on our blog and YouTube channel and consider signing up for our typography course online, and joining our Pro Group to hang with a super cool community of designers.
Before you hit the “Send” button on your next logo submission, give your work that last, hard look to make sure you've checked off all your client's needs with a concise questionnaire we created from the hundreds of hours we’ve spent critiquing other logos.