Do you want to learn How to choose a font for your project? And stop wasting hours searching? Surely, at some point, when you needed a font for a specific project, you’ve wasted too much time… obsessing over finding the best font.
Has this happened to you? You’re not alone. I’m guilty too, and I’ve wasted a lot of time browsing platforms. Fonts have a hypnotic quality that draws you in… Choosing a font can be difficult: there are more and more available, and to make matters worse, we fall in love with them all.
But don’t despair. While there are no fixed rules for choosing a typeface, there are proven basic principles that will help you choose the right typeface for your design.
If you systematically follow the steps in this guide, you’ll have a winning font in no time.
Not selecting the most appropriate typeface for your project is a very common mistake. A good font is not only key to attracting attention, it also helps maintain a visual connection. The font we use will say a lot about our design. If we choose poorly, we can evoke the wrong associations or confuse our audience. Nor should you choose based on your personal tastes. The choice should not only be based on aesthetic criteria, but also on functional ones, to better communicate the message. Keep in mind that choosing one typeface or another can completely change the final result of our designs.
Let’s get started!
Content first. Neither desktop nor mobile
Choosing a typeface isn’t about seeing how many are available or how many times we’ve used one or another in our projects. Or which one is most fashionable.
It’s about choosing the right font for the project, taking into account who will be reading it, the objectives, and, most importantly, the chosen font should be conducive to reading the text.
“In the new age of computing, the proliferation of typefaces and typographic manipulations represents a new level of visual pollution that threatens our culture. Among thousands of typefaces, all we need are a few basic ones and discard the rest.” – Massimo Vignelli
I know it sounds counterproductive, because in many training sessions, we’re often told to first consider the device we’ll be designing for, or we’re even asked to be mobile-first. But content is there to be read, and for someone to be able to read it, the typography must be appropriate.
What to do before you start choosing fonts
It is important that you keep these 3 points in mind to avoid making mistakes:
1. Define the objective and the audience
What is the purpose of the text in your design? Is it for long articles? Content that will be “scanned” and the user will only read portions?
And, even more importantly, what is the project’s audience used to? Modern styles? Classical? Futuristic?
2. Avoid “Lorem ipsum”
Please ignore text simulators that don’t contain actual words from the language you’re designing for. How can you choose the right font if you don’t read the text? It may look good visually, yes, but does it really make it easier to read? Does it convey what the author intended?
I’ll give you an example: you might choose a sans-serif font because it looks good, but what if the text is a literary classic? Or is it a project that needs to appear serious, not modern? You won’t know if you don’t read it.
3. Consider the weight and format
As I explained in the article a slow-loading page will affect your ranking. Therefore, it’s important to choose fonts that don’t weigh too many kilobytes. If possible, choose variable fonts.
OpenType fonts (.otf) are 100% compatible with Windows, Mac, and Linux, contain more characters, and support more languages. Oh, and they’re optimized 🙂
5 steps to choosing a font
To give you an idea of the actual process, instead of listing five random points like other blogs, I’ll give you a brief to work from.
Know your target audience
The typography style should be consistent with the tastes of our audience. For example, designing for older people, who tend to have more traditional tastes, is not the same as designing for younger people, with whom we can take more risks. Put yourself in the consumer’s shoes and reflect on what type of font best reflects the vision and values you want to communicate.
Here it might help to ask yourself some quick questions, like…
- What is the majority profile of your audience?
- Do we want to approach a specific idea? As an experience or tradition?
- Or maybe we are trying to present it as something innovative?
The audience your project is aimed at and the context in which that message will be delivered also influence how it should be delivered. You know, choose a font that fits the context of the message, but also allows us to connect with our audience.
Sample content and topic
In this case, you need to design a website for a technology blog, which will mostly contain long articles.
As I mentioned before, you should find sample content and read it if we don’t have the content you’ll be publishing. In this case, you could extract any article from Hackernoon, The Verge, The Next Web, and other similar sites.
Define how the typography should be
It’s about technology, and by definition, it’s about modern content. So:
- Preference for serif fonts : they make reading easier and in this case, since these are long articles (as we saw in the previous point), they are appropriate.
- We need a “modern” touch, so the X axis will be high.
- It should be easy to read, so we aim for low or medium contrast. Too much contrast will make it difficult for the user to read.
- It will be in Spanish, so the chosen font must have accents and characters specific to the language, such as the letter ñ.
- Finally: it should also have bold and italics (and a mix of both, for headlines).
Look for references
Don’t you think it would be unwise to launch a communication piece out there without first studying how other brands in your sector approach it?
Studying the fonts our competitors are using will help us learn more about their personality and perhaps help us avoid choosing one that’s too similar. On the other hand, looking for references to find out which fonts have been used in projects with the same objective or aimed at a similar audience could help us get a lot of groundwork underway. Don’t you think?
Of course, if you’re developing a branding or brand identity project. keep in mind that we need to differentiate ourselves. Typography, in addition to helping us evoke certain values, can also help us stand out from other companies in the sector.
Find candidate fonts
With the previous steps in mind, we can now search on Google Fonts (or Adobe Typekit, if you have the license). Google’s platform has 1,483 fonts, so it’s time to start filtering results, including the characteristics we defined in the previous step. We select them, and we’re starting to see some light…
Of the 1483 fonts that appeared, we have now been able to filter the results to obtain only 65, with which to test 😉
Define the tone and personality of the message
In case you didn’t know, all typefaces have their own personality. They can evoke certain emotions or concepts. Their shapes and style can directly affect how we perceive them. To achieve effective communication, we need to ensure that the style of our typeface matches our content. Depending on the typeface we choose, we can convey very different ideas or even impact very diverse audiences.
Therefore, the typographic form and personality must be consistent with the message we want to communicate. The choice of typography not only affects the aesthetics but also influences the message’s transmission. Use your common sense and seek consistency between typography and content. This way, we’ll be able to use it to our advantage, choosing the typeface that best conveys the message.
Go for simplicity
If you recall, the goal of any piece of graphic design is to communicate. We seek to send a message. So, this communication will be more direct and clear the fewer elements that hinder it. By this, I don’t mean we should always use simple, minimalist fonts—no. But we should use fonts with as few decorative elements as possible. These will only hinder reading and, therefore, the main objective of communication.
Also, keep in mind that a clean and simple typeface is always easier to reproduce in different locations, formats, or sizes, allowing for greater adaptability. If you’re looking for a typeface with more character, such as a decorative typeface, just keep this point in mind to find the ideal balance between the shape of the characters and the readability of the message.
Start testing them… In code!
Yes, with a code. Don’t panic (and keep reading).
Photoshop is famous for rendering fonts very strangely, and Sketch and Figma, although they are vector and designed for digital product design, are not ideal either, because they do not exactly reflect how they will look in code (especially everything related to line height and vertical rhythm).
Whether you know a little CSS and HTML or not, this step is very important: if you test with code, you’ll be able to see what that font actually looks like. You’ll have the opportunity to test it on different screens and resolutions, operating systems (which render differently), etc.
To do this, I’ll leave you with a small CodePen with which you’ll only have to change the URL of the font (which Google Fonts gives you when you choose it) and the family in the CSS. In CodePen, I’ve highlighted everything you need to change. The line width and height are already predefined. but if you find the font doesn’t fit, you can also modify it without any problem.
If you click on the HTML, CSS or Result tabs, you will hide blocks that will allow you to see them better:
One typeface… or two?
Sometimes we’re interested in better separating content from headlines to give the design more dynamism and personality.
When choosing a font for your headers, choose one that maintains the characteristics mentioned in point 2, but make sure it’s different enough to make a difference.
Just never use more than two fonts in a design!
Keep in mind the context
Define the purpose of the typeface, because the one we choose must be consistent with it. In other words, choosing a typeface for a logo isn’t the same as choosing a typeface for a book cover, a poster title, a container’s packaging, or a website.
If, for example, we need to choose a font for text, it’s important that it has typographic variables such as weight, slant, or width. This way, we can include bold or italic type in our text. For very long texts, you might want to choose fonts that are easier to read. Here, serif fonts, or even sans-serif fonts, can be a great option.
On the other hand, if we’re short on space, we may need to use a condensed typeface that maintains good legibility with less space. Or take advantage of the opportunity to include fonts in your headlines that help draw more attention. Also keep in mind that if you’re going to need to establish a proper visual hierarchy, you may need to choose a complete typeface family, with its different typographic variations.
Oh! Important: If you’re going to communicate in Spanish, make sure the font includes the letter “Ñ.” It may seem obvious until you fall in love with one and then realize it doesn’t have the dreaded letter…
Seek harmony
Remember that we’re trying to create a cohesive visual experience, so the typography we ultimately choose should harmonize with the rest of the design. Keep in mind that a graphic design composition should exude harmony for several reasons; not just because it significantly contributes to the effectiveness or aesthetics of the piece. When elements are arranged harmoniously, it facilitates understanding : the viewer can assimilate information more quickly and without distractions. It conveys professionalism, because a harmonious design demonstrates care and attention to detail, generating trust on the part of your audience. Did you also know that it promotes information retention? Because your audience won’t feel overwhelmed by complexity or a lack of structure.
Don’t be afraid to experiment with different weights and styles of the same typeface, if doing so will help you find harmony or define a proper visual hierarchy.
Avoid trends or fashion sources
You’ve already seen that I recommend sticking to simplicity, but perhaps for some graphic projects I would also recommend sticking to timelessness.
If it’s a graphic design project that will be long-term, such as a logo or brand identity, I believe we shouldn’t follow fads or trends. Its typography should survive the test of time and accompany the company as its business evolves. Keep in mind that what’s a popular typeface today could go out of style tomorrow. And when I talk about trendy fonts, I’m not referring to practical and functional typefaces that have been used in graphic design for decades, such as Helvetica, Futura, or Garamond, but rather to typefaces that, for one reason or another, quickly become famous and don’t have the qualities to stand the test of time. Like Lobster, Jenthill, or Pacífico, for example… don’t you think so?
Ensures Readability
Let’s be clear. Your typography will have only two objectives. The first is purely aesthetic, superficial. But the second and most important is that it must be functional ; that is, we need to be able to read it for effective communication. So you need to make sure that the chosen typography always contributes to the readability of the text.
If we want to communicate something, the first step is to make it readable, right? To achieve this, we need to consider not only the font but also the contrast. This point is closely related to points 4 and 5 of Simplicity and Context, of course. If the typeface will need to be reproduced on different media or sizes, its scalability will have to be assessed. Or also tracking, the space between characters. If we use a typeface with little letter spacing, it will negatively impact legibility, especially at small sizes. Or, conversely, if we include too much space, we can end up making it difficult to read.
Finally: test and observe
Learning to choose fonts isn’t easy, but you’ll gradually feel more confident if you follow the steps above and look at other projects.
Use the free FontFace Ninja plugin for Chrome. Just hover over it and you’ll see what font it is, along with its colors, margins, sizes, and other features.