Typography is the visual arrangement of design letters or types in the ‘design space’. Typography is everywhere, whenever you create a design for your poster or a banner or designing any graphic artwork.
By understanding the basic rules you make sure that you can convey the message in the most effective way.
Type is the most direct way to communicate visually, it is typically set either as a paragraph or in headers.
And that can often feel like a kid in the candy store where you just go and try to match some fonts together and the problem is that it doesn’t work so well.
In this blog post, I am sharing some guidelines that you need to follow which will allow you to pair fonts and actually have a cleaner and more aesthetic design.
Type of Fonts
There are two different categories of fonts:
Serifs are little ‘feets’ that exists on the bottom of letter forms like you can see on this ‘Times New Roman’ L.
Some examples of Serif fonts are Times New Roman, Georgia, Bell MT etc.
And Sans Serif type (‘Sans’ in French means without) doesn’t have this ‘little foot’. Some examples, of San Serif Fonts, are Helvetica, Arial, Roboto etc.
Now, there are hundreds of different fonts but there are also typefaces.
Difference between a typeface and font
A typeface is a series of letters that are designed to belong together. It is a combination of geometric and organic shapes which is combined together to create a larger shape.
For example: each of these letters is an entity and is part of a complete typeface made of other letter shapes. The characteristics of every typeface can be broken down into what is known in design as the ‘anatomy of type’.
It is the type of shape given to the anatomy of each type in each letter that gives the typeface a distinct look and feel.
Therefore, fonts make up typefaces in the same way chapters make up a book.
All typefaces are made up of letterforms. Letterforms are the individual design of any one letter.
Usage of proper typefaces in designing
Here’s an example: ‘Verdana’ and ‘ Lato’ are two different typefaces. And they are very similar typefaces which have an emulated similar type of a feel to each other.
In this example: there are two fonts that are paired with each other. The header is a ‘Helvetica’ (Sans Serif) and the text below it is ‘Times New Roman’. So, this is a classic way you can utilize different typefaces.
This allows you to have a little bit of contrast and a little differentiation.
The contrast of Fonts
In fonts, you can achieve contrast in a few different ways. You can do this through:
Here’s an example, where there are a title and a body text below it.
The header has a bold feel to it and the word ‘Learn’ is lighter. They are the same fonts bit come in different ways. So, this is an example that you are distinguishing the contrast between the title, in one word and the rest of the title.
In this above example, the header is actually much larger. So, much larger font versus the actual content below it. Here, you are achieving contrast utilizing font sizes and it allows you to decide what you want the audience to focus on. And in this case, the majority of focus goes towards the header itself.
Colors allow you to basically engage your readers and allow you to emphasize certain elements. Although we have used the same font on the header and although the word ‘learn’ is actually lighter font format, however, the color of the word is actually engaging you and that’s where your eyes go towards. And you can use color to achieve that
Spacing is very important in a design. In this case the spacing between the header and the content below, you are achieving a certain sense of contrast.
In style, you are talking about the whole mechanism. And if you look at this example, I am using the modern San- Serif typefaces. So what you are getting is a modern feel. You can use this type of typeface to achieve that.
In this design, your eyes flow from one point to another and if you look at the example, there are a few rectangles to the top and the bottom and also the word ‘learn’ has the same color as the rectangle.
So, it actually looks like a triangle where your eye goes from one point to another.
Consistency in Typography
Consistency is a key element in font paring and typography. And what I mean here is that you must avoid using multiple different types of fonts with each other.
Here’s an example, where I’ve used three different types of fonts and it is not looking appealing to an eye because the design is lacking consistency.
Now, in the next example: I’ve used only two fonts in this same content. In this, the header is of one font and the body text is of another.
Even though it has a bit of contrast but it’s still minimal and it has a nice feel to it.