12 min read
Any designer that’s been around the block once or twice knows the importance of typography. They know that it’s more than just the design of those letters. Typography is about the arrangement of the letters, how they fit with the rest of your particular design, how they work with your brand, and they can help you attract the right audience.
Like any aspect of design, good typography should feel effortless. A reader shouldn’t see the tedious process of tracking and kerning that went into making a logo or magazine cover page. But it’s those little details of type that can make a world of difference between an aesthetically pleasing and readable page and one that looks cluttered and illegible.
Your choice of typography and how you make it work on your blog absolutely makes the difference between good and bad design. And how you use it will help your readers learn more about you and your brand by:
So if you’re ready to create a more enjoyable reading experience for your audience and create a strong identity for your brand, it’s time for you to start feeling more comfortable and confident with typography. This article will help you learn everything from the terms you need to know to the basic rules of making it work for you.
Understanding the difference between a typeface and a font can be a confusing concept at first. But when you break it down, it’s quite simple– a typeface is a grouping of fonts.
More specifically, a font is defined as a complete character set within a typeface, and a typeface family describes a range of designs that are all variations of one basic typeface. While there are a few more typeface styles, these five are the most popular to use.
These are the typefaces with feet. Serifs are much easier to read in long, printed works like books and newspapers because of the distinctiveness between the letters.
Most common Serif fonts: Times New Roman, Georgia, and Garamond.
Since sans means without, sans serif means without feet. Since these typefaces have a more modern feel and still look good at lower screen resolutions, designers typically use sans serif fonts for blog posts and web documents.
Most common San serif fonts: Arial, Verdana, and Futura.
Blackletter typefaces are known for their dramatic effect and are characterised by thick and thin strokes and swirls on serifs. While they were often used in early manuscripts (think the Declaration of Independence), this typeface is mostly used in headers, logos, and other signs.
Most common Blackletter fonts: Old English, Fraktur, and Linotext
Just like the name implies, this typeface resembles the fluid and varied strokes of handwriting. Script has two basic distinctions: formal and causal. For both these distinctions, script is most commonly used in designs for invitations, logos, and posters. You should never use a script as body copy.
Most common Script fonts:
Formal: Kuenstler Script, Quarzo, and Platinus Script Pro
Casual: Mistral, Kaufmann, and the Brush Script
This classification can come off pretty cheesy and should be used with a lot of discretion. I would recommend to only use a decorative font for a logo and never for headlines or body copy.
Most common Decorative fonts: Outlaw, Stencil, and Bauhaus
Each of these type styles has it’s own place in the design world. Make sure to read up more on them to find out all their best uses.
If you really want to get deep into typography, you’ll soon find out that everything about a typeface can be broken down. From small curls to the empty space inside a letter, each part that makes up a letter in a typeface has a name and designation. When you put all those pieces together, you have the anatomy of a typeface. Here’s how that takes shape:
Baseline: The line where the letters sit.
Cap height: The distance from the baseline to the top of the capital letter.
X-height: The height of the body of the lowercase letter. It’s located in between the baseline and the cap height.
Bowl: The curved part of the character that encloses the circular or curved parts of some letters, like ‘d’ and ‘b'.
Descender: The longest point on a letter that falls beyond the baseline. Usually for letters like ‘y’.
Counter: The empty space in the middle of letters such as ‘a’.
Ligature: The stroke that joins adjacent letters.
Stem: The base of a letter, similar to the stem of a flower.
Serif: The slight projection finishing off a stroke of a letter in certain typefaces.
Finial: The tapered end of letters such as ‘e.'
Ascender: The portion of a letter that extends above the mean line of a font. That happens when a letter is taller than the font's x-height.
Cross bar: The bar that goes across the inside of the letter and connects one side to another.
Terminal: A type of curve that you see at the top of the letter ‘f’ or the end of the letter ‘j.'
Spine: The curvy body of the letter ‘s' – and only the letter ‘s'.
Once you have your vocabulary down, it’s time to understand what it means to play around with your typography. There’s always something new to learn with a design skill this wide-ranging, but most designers find themselves adjusting and balancing out these six typographic concerns on the daily.
When you’re pairing typefaces in a design, it’s a good idea to use two that are similar in x-height. This will create a consistency and harmony between the two different fonts.
When you’re working with typography for an online design, leading means line-height. It’s how text is spaced vertically in lines. Think about your research papers in high school when you used single or double spacing. It’s kind of like that. For readability, a general rule is that your leading value should be 1.25 to 1.5 times greater than the font size.
Kerning is the amount of space between letters and the process of adjusting letters to create the right amount of space to avoid gaps or squished copy. The natural kerning is not always accurate and sometimes needs to be tightened or loosened to create a more appealing look. This process will be most important when dealing with large, highly visible text like headlines and logos.
Tracking is similar to kerning, but it relates to the spacing of the whole word and is done after you’ve figured out your kerning. This should be carefully used to change the spacing equally between every letter at once.
Measure refers to a line’s length. Depending on how long or short your measure is, you will need to adjusting your leading. Generally speaking, if the measure is long, the leading should be increased, and vice versa. For a single column design, many designers believe 65 characters is the perfect measure.
If all type was the same size, it would be hard to know what was the most important information on a page. Creating a hierarchy with different weights, styles, and sizes of fonts helps to create a flow of importance for your readers. The bigger and the bolder the text, the higher the positioning it takes on the page, meaning the quicker your reader’s eyes will go to it.
Putting all this information together can be overwhelming. So instead of trying to learn everything about leading and kerning, and memorizing every part of typeface right now, let me give you some simple and actionable steps you can take to start correctly utilizing typography for your blog.
First and foremost, the primary goal of design is communication. That means the readability of your type is top priority. That also means you need to make sure your type is connecting to your audience. This is more than just making certain that your copy is impeccably written. It’s also about ensuring that the font you use fits your market.
How-to: Consider the medium where your audience will read you work and choose a font that that works well with that medium. (I gave you some good examples to start with up in the typeface families section).
This is a really common mistake people can make with typography. Instead of taking the less is more approach, you’ll often see an overload of conflicting fonts that clutter up a design. A lot of designers recommend that two to three fonts throughout your website and blog should be a maximum in most cases to avoid this problem.
How-to: Look within the same font family when you want to add another style, and choose fonts that compliment each other and your medium.
The location of your wording can also have an effect on the readability of your work. Choosing the correct alignment will help direct your reader’s eye to right place on your page.
How-to: Here are common uses of each alignment-
This point is really about thinking how your type fits in relation to other things on your page and creating a balance for it. Using grids will help you ensure that everything on your page is working together to create balance and a cohesive look.
How-to: Before you start your design, split your page into thirds using guidelines. Just like the rule of thirds in photography, you can use these guidelines to arrange your elements and create balance. (Side note: you can use any grid you like, but a three column grid is good to start with if you're unsure)
Creating hierarchy with your typography will help your reader know where to look first on your design. When you can do this well, you create a path for you reader to follow through your blog so they get the right information at the right time.
How-to: Think about what the most important pieces on your page are. For blogs, make use of your h1, h2, and h3 styles for headings and subsections within posts. Most themes will already have h-tag styles established. You can edit these to match your own preferences based on everything you’ve learned in this article.
A widow is a term for a line of text that belongs to a paragraph and has moved over to the next column. An orphan is similar, but a single word on its own on a line, poor little thing. When these two issues happen in your content, it takes away from your readability as well as the overall aesthetic of your design.
How-to: You can manually edit the text to adjust the line length to remove the problem by creating a soft return (press shift +return) on the word in front of the orphan. You can also adjust the textbox or column size to create more space to move the type.
When fonts are created, they are built with specific attention to their shape and proportions. When you stretch them out in height or length to fit a space you’re actually taking away from the beauty of its design and the function it was created for.
How-to: Look for fonts that both complement your design and fit the space and medium you are needing them to.
Now that you have the basics down, you can go create your own typographic designs for your blog. What will you do first? A new logo? Some graphics for social media? A cover for your new eBook? At a very minimum, you can choose a beautiful font that resonates with your readers and fits with your new blog theme. Let me know how you use your new typography knowledge in the comments! I’d love see what you come up with.
Download this issue of Tradecraft as a PDF to read and reference at your own pace.