This post is also available in: Español (Spanish)
Hiya! Do you remember how we started our design tricks saga with tips to choose the best colour palette for our works? Well, today I am bringing you the next episode about Typography, a design, brand and communication element of great importance.
Choosing one or more fonts for a project is not an intuitive process. If it really was, we wouldn’t get such a myriad of posters and flyers using Comic Sans, nor would we see restaurants or take-away menus combining more than 3 or 4 widely deformed fonts. Having a lot of font face options doesn’t mean we should use them, and having an interest in a concrete font face doesn’t imply either that it can be “the one” to shoulder your brand’s communication.
Let me remind you that we only have three seconds to cause a nice first impression when we get in touch with a new reader or user, and font faces are an essential element of communication during that time.
My purpose here is to make a brief introduction to Typography in the wide lines, while showing you how to differentiate the styles and their moods, in order to make the best choices when facing the need of adding a font to your designs. Let’s start!
What is Typography?
Nowadays, when we talk about typography we use the word as a synonym of a font type or font face. Still, traditionally Typography referred to the task or job of choosing and ordering types (design letters) to compose text blocks.
At the beginning, when texts were being produced in mass, the full-text blocks or printing pages were carved in wooden blocks. That meant that any potential mistake forced the workers to redo the full wooden block. Then Gutemberg, back in 1440, had the great idea of creating movable types or movable letters (a concept that, to be honest, already existed in China since the 21st century). Movable types are separated letters that can be ordered next to one another so as to build text blocks, like in a puzzle. They can also be changed to create new texts at any moment. That’s why, although they began being wooden letters, they soon were melted in metal so they would be more resistant and durable for multiple press works.
I feel very fortunate to have been able to act as an old-fashioned typewriter during one of my subjects at the Polytechnic University of Valencia. Fiddling inside the movable types boxes, looking for the correct letter in the correct font family and size… is a thorough and relaxing process, and there is a special magic in the tasks of connecting and evenly spacing them.
Quite a lot has happened since that way of printing However, we still use many of the concepts inherited from traditional typography in the current digital era: such as using the point as a measure unit. And even if the process has been widely simplified, we still take as foundation some principles made by the great typographers and designers from old. For other elements, we’ve made adaptations and simplifications so they could better fit today’s requirements.
Now we’re all in the same page, let’s go for the crux o the matter: what is a typography made of and how can we classify them.
Types of types: the typographic classification
Typography anatomy
Typographic design is a full specialization and it is a complex task we are not going to explore, but I would like to introduce you to the idea of the anatomy of a typography, since the letter parts we are going to be enable us to see the differences in the fonts and even establish categories to group their families.
The following infographic is a glossary of terms for each letter part. Isn’t it super specific?
When the type designers create letters, they have to take said elements in account so that the resulting font type is harmonic and regular (but there is also the option of playing with the distortion precisely to create contrast and dissonance).
Anyway, among all those strange words there are some particularly important to remember: like serif and ligatures, which will guide us a lot in the following classifications.
Depending on the function: text blocks VS display
A first way to group type faces is according to their designated usage, which is often related to the matter of legibility, A typography that prioritizes the originality and aesthetics may be a great choice for headings or display cases, but it would definitely be a bad idea for long text blocks. For longer texts, fonts that are easy to read and that do not attract much attention because of their morphology will always be recommended.
Inside this classification we can also differenciate if the fonts are going to be used in printing or on screens. Serif typefaces are generally preferred for printed books and magazines, while sans-serif typefaces tend to be more legible on screen. We are going to see these concepts in detail but, first, let me remind you that we can have and advanced control of how the fonts are rendered in the web browsers thanks to some CSS properties.
Depending on the morphology / shapes
Another way of grouping fonts -the most frequent- is according to their morphology (anatomy), the two main categories being the ones that combine serif and sans-serif typefaces. Each large group can in turn be subdivided into styles, which unite certain fonts that show common characteristics. Let’s check these categories!
Serif or Roman typefaces
Serif typefaces, as their name suggests, are those where the letters are designed with serifs. They are the most traditional and were already visible in classical art, which is why they are often called Roman typefaces. They are especially fitting for print media and became very popular with the appearance of the newspaper, hence the well-known Times New Roman, designed by commission of the Timesin the 1930s. A more recent and popular serif font for Microsoft text processors nowadays is Cambria.
Within the Serifs, according to the type of serif and the thickness ratio between lines, we can also subdivide them into:
- Old-style or old Roman: the most antique of all, where the serifs tend to be triangular and are based on ancient typefaces engraved in stone. A well-known example is Garamond, but also the Timeskind fall under this naming.
- Modern: in these, the serifs are usually very straight and thin, linear, and also the letters often play with the contrast of thin and thick strokes. Some popular fonts under this flag are Bodoni or Didot.
- Egyptian o Slab: this family embraces strong and rectangular serifs, and are usually weighted fonts or, in other words, bold style. They are used for titles and labels, but not for texts. Some examples are Clarendon or Egyptian Slate.
- Transitional: some people use this designation for typefaces with serifs halfway between the old-style and the more squareish, a good example being Baskerville.
Sans-serif or linear typefaces.
This group includes fonts that do not have serif, opposite to the previous ones. They are also called linear as they have straight lines without any detail. They have always been a trend in graphic design because they look more modern, sophisticated and neutral, so they tend to fit well with any proposal. Among the most popular currently, we could mention Open Sans, Montserrat, Raleway or Roboto (which is also the official Android font).
As with the serif fontfaces, we can group the different san-serif styles into the following categories:
- Geometric: these fonts do not have any type of detail and their construction is rigid, with the most pure geometric shapes prevailing. They use pronounced lines and very geometric shapes, which makes them less organic than the fonts recommended for long texts. They usually fit logos or display needs much better. Some members of this subtype are Futura, Avant Garde, Poppins or Confortaa.
- Grotesque and Neo-grotesque: usually more modulated than geometric ones, with more organic and soft shapes, so they are wide-range fonts. They are also very legible in short sentences or signs, and two very popular cases are Arial and Helvetica. We can also mention Univers, Karla or, again, Roboto.
- Humanist: this is the other end of the spectrum, font types that shine with organicdifferences in thickness of their strokes, leading them away from geometric rigidity. They’re visually pleasing, so they are preferred for longer readings. Here we would count fonts like Calibri, Verdana, and more modern ones like Corbel, Fira Sans or Segoe UI.
Cursive or Script fonts.
We may have fonts or very different aspects here in the Script category, but they all have in common that they are inspired by handwriting, sometimes trying to imitate the scribal old style. It goes without saying that they are not very readable for long texts and their use should be moderate. However, they are very attractive for book/magazines titles and logos.
In this case it is quite easy to grasp the differences between subtypes:
- Casual: they express the strength and variety of the hand-made line, imitating handwritten writing. Some suggested names are Nanum Pen Script, Homemade Apple or Rock Salt.
- Calligaphic: even if these also imitate the hand-written style, they make it in a much more regulated and thorough way, like the calligraphy art itself. Their design is very precise. Some examples? Kaushan Script, Great Vibes or Sacramento.
- Gothics: pretty evident, they imitate ancient and classical writing of the scribes, with all its flourishes and details. Some names are Perry Gothic, Old London or Cloister Black.
Decorative or Fantasy Typefaces.
Now we enter a chaotic category for all the rest of typographic variations that do not fit in the previous types. They tend to have a strong personality, and readability is usually forlorn in the aesthetics. Fantasy or decorative fonts drive us to medieval magic stories, futuristic universes, comics or even horror movies. You have to use them with care because sometimes they are excessive even for display purposes. In fact, in most cases, these fonts are created for very specific purposes or brands that demand them.
Here’s a sample of these fancy fonts:
Dingbat Typographies or Dingfonts.
Another possible categorization brings together fonts whose characters are symbols. You may be surprised to learn that Charles Bigelow and Kris Holmes, the married couple of typographers who designed the Lucida font, were also the authors behind the Wingdings font, and thus the forerunners of the emoji.
They foresaw the need for iconography both for print and on web pages, based on all the symbolisms of medieval texts or Asian ideograms. Thus we came to have a font face with pointing hands, skulls and bombs, which would feed among some collectives conspiracy theories about encrypted codes during the Cold War.
Nowadays, icon fonts have evolved a lot and we have a wide range of options that provide us with vector illustrations for quick and easy use of icons without having to insert images into our documents. Probably the best known is Font Awesome, but you have many more options and, in addition, it is very easy to create your own custom fonts with the icons you want (a good topic for a future article, by the way).
And with this, we leave aside the categorization according to morphology, although I would like to mention the last way to differentiate the font types: the spacing.
According to spacing: monospace fonts
So far the vast majority of the fonts that we have talked about have letters of different widths. So that letters seem to have the same separation, the spaces between certain characters are more or less large. That spacing between letters is known as tracking. The letters themselves also have different sizes since an “i” does not occupy the same space as an “a”.
Well, there is a type of fonts that always have the same space and size between letters: the monospace. These fonts are perfect for code processors because they allow a clearer reading of each word separately and make it easier to detect errors. They are not very legible for text blocks, but they are great for single words and letters inside each word.
Monospaced fonts are inspired by the age of the typewriter machine, that always advanced the same number of spaces after any key was pressed. In that style, the best known to Windows users are the Courier and the Courier New. However, nowadays we have many monospace options without that retro look, and even certain typeface families like Roboto, PT or Fira have their own monospace versions.
Woah! This section ended up being a bit long, but I hope it was enjoyable! I think the following infographic is a great way to summarize this section visually.
The mood of a font type
Now that you are able to identify font types, it is important to know the impact their differences have on the readers. Apart from readability, the letter’s shapes transmit certain personalities and moods. Just as colour inspires certain emotions, the curves, thicknesses and flourishes of the fonts also awaken a certain impression in the readers.
In other words, the font you choose matters, and a lot! Check out the following example:
Here is where I remind you of something we mentioned before: liking a font doesn’t mean it is the appropriate one for a certain project. As in any act of communication, we need to be aware of our target audience and message. Depending on those criteria we will lean towards one font or another.
For instance, when we went through the different font types we mentioned that sans-serif fonts have a more modern and friendly look, while serif fonts tend to look classic and authoritative. The infographic below expands and nicely summarizes the main emotions for each font style and their variations (such as weight and slant).
Tips for choosing the best fonts for your project
Great! We know now where all this typography thing comes from, how typefaces can be categorized, and how their differences generate certain emotions on the reader (in other words, how they can shape your brand).
There’s only one thing left I can give you: some nice tips and principles to help you on your mission of finding the ideal fonts for your project. Pay attention to the following!
1) 3 font principles for usability.
Type experts say that we should take into account three principles when we choose a font:
- Legibility(at letter level), that is, the clarity of each letter shape among the adjacent ones. For instance, we have to check that letters such as “b” and “h” or numeric elements like “3” or “8” are clearly differentiated. This is particularly important for calligraphic typefaces or those who imitate handwritten fonts.
- Readability(legibility of text blocks), related to the margins, padding, line-height, word-spacing, word splitting, etc.
- Font aesthetics, where we have to consider how to subtly and carefully combine different font families and sizes while caring about the correct composition and layout of text blocks in the visual space. At this point, we can also consider the font mood and evaluate if it is aligned or not to our purposes.
In my opinion, these principles work great as filters. Any font that you may consider as a candidate for your design should be validated by those criteria. And you may think: “well, but I don’t need a font to be extremely readable at the text-block level if I am only going to use it for titles”. Fine, but, what if tomorrow your project grows and you end up needing that display font in larger text modules? Caring about these principles from the start of the ideal typography search ensures that your selection will be scalable. You’d better not overlook them!
2) Don’t mix more than two different font types.
This is crucial. Having more than two fonts in your project distracts the user and over-complicates the reading experience. Also, it makes it even more tricky to properly “pair” more than two fonts. Follow the KISS (Keep It Simple Stupid) principles and you will do your readers a favour.
3) Make use of contrast…
The essence of UX is to be able to create hierarchies of importance through contrast. The same applies for texts. It will always be easier to highlight the titles and the information of interest if you consider from the beginning a hierarchy of importance in your fonts. Make it easier for your users to discern the essential concepts in the text by contrasting the fonts. How about some examples?
- Mix serif and sans-serif fonts.
- Use different font weights.
- Play around with the sizes.
- Force uppercase in contrast to normal cases.
- Combine types with different widths.
4) … But always pair fonts that evoke similar emotions.
Contrast is great, without going overboard. The fonts you use always need to be aligned in mood and age to create an integrated impression.. This is usually easy if you tend towards a neutral typeface for the text bodies, and it gives you the freedom to choose riskier intense display fonts with an intense personality.Don’t use fonts that are too similar either: users will notice that they are different but they won’t know how to differentiate them well and will be visually confusing!
5) Be careful with languages!
Not all fonts have the characters or symbols required for certain languages. If you’ve ever written in Spanish you will have already noticed. Check that the font you like supports accents and letters like “ñ” before you fall in love with it. If your project ends up being multi-language you will find yourself with a great problem later on.
6) Test your fonts with real text.
A corollary of the previous point. First, you’ll know if your font adapts well or not to your language if you use real texts, but there is also the issue that text blocks like lorem ipsum don’t give us a real impression of how the font type works in our case: it doesn’t use a real paragraph length and it isn’t something readable either. It generates a feeling of disconnection with the content, and that can affect us when evaluating whether the typography really conveys the message correctly or just looks pretty. Therefore, I recommend that you always try the fonts with real text.
7) NEVER distort a font.
You can alter the character spacing (or tracking), but you should never modify the designed height or width of the font letters. Doing that is the same as scaling an image by breaking its proportions. It’s madness! The fonts have been designed with great care by their authors, caring of proportions and strict beauty rules. Grabbing the corner of the text box and stretching its dimensions with impunity would be considered a sin in any design bible. You’d better not do that! If you are interested in creating contrast with narrow and wide letters, look for fonts that have a condensed version.
8) Remember the accessibility.
I think it is always good to remember that there may be people in our audience who have a hard time reading, whether due to visual or intellectual problems. One case to take into account is people with dyslexia.
Contrast is an ally in these cases, but it is also good to know that there are certain fonts that are easier for these users to read than others. Precisely, there are some fonts designed for these cases, since dyslexia makes it difficult to differentiate the letters that can be mirrored (like “b” or “d”). Therefore, the more asymmetric the fonts are, the easier they are to read clearly (and that is why Comic Sans also works well with them – but don’t use it, please).
If you are interested in the subject, you can take a look at typographic projects like Dislexie Font, OpenDislexic, or Read Regular. Let me also drop a reference here to a series of tips from the British Dyslexia Association to help create a friendly environment for everyone.
9) Avoid certain typefaces.
Finally, nowadays, if you want your project to be taken seriously, I recommend you avoid certain fonts: some because their design is an attack on legibility and elegance, and others because they have been overused and become very boring and repetitive. This is a list with which many designers agree, to avoid:
- Comic Sans
- Papyrus
- Kristen ITC
- Curlz
- Vivaldi
- Impact
- Courier New
- Arial / Helvetica
- Times New Roman
And, again, I leave here a cool infographic as a visual summary of some of these principles:
Where to find font types? Recommended font libraries.
Now you have all the tools to choose wisely! Let’s finish the article with some popular links to find font faces for your projects. I have split them according to whether they offer free to use fonts or licensed fonts.
Open-source and free for commercial use font libraries:
- Google Fonts: the most practical and visual. I particularly enjoy its useful tool that suggests you and lets you test popular font combinations. It also makes it very easy to add the desired fonts to your projects via CDN (but remember it may affect your site privacy).
- Font Squirrel.
- Font Library.
Licensed font face libraries:
- DaFont: one of my favourite font face libraries for decades. Also, some of its fonts are free for commercial or personal use. Just check the license info or filter by it when searching.
- Adobe Fonts (also known as Typekit).
- Linotype.
- Fonts.com.
A little extra. College Humor sketches.
Whenever I talk about fonts, I remember two wonderful College Humor sketches that embody the most classic typefaces. It wasn’t all going to be studying, right?
Font Conference
Font Fight
And now yes, this is the end of this article! I hope it makes your life easier when it comes to finding and matching the right fonts. Which are you going to choose? Let us know more about your preferred font types and why. We will love to read about it!