When it comes to web design, there are many aspects that you need to take into consideration. Typography is one of them, and it serves as one of the main building blocks of good design.
It is perhaps the most important factor that helps you connect content with the design, and communicates your core message to the target customers. A properly-chosen font family makes for a smooth reading experience, improves UX, and the accessibility of your website.
Considering the importance of typography, in this article, we’ll provide you with some fundamental guidelines that will help you pick the best fonts for your website project.
Why You Should Care About Fonts
First of all, having the right fonts for your content is crucial for the overall UX of your website. According to an MIT study on how fonts and layouts affect users’ feelings, a font combined with a well-designed layout keeps readers focused on the site, with a better sense of clarity.
As you develop your branding strategy, fonts will play a vital role in attracting the users’ attention and creating your brand’s identity.
Brand Recognition – A distinctive font creates a relevant brand image for your customers. It helps you differentiate yourself by making your target customers associate that font with your company.
Setting the Mood – Take Armani as an example. The well-known font in their logo elicits luxury and elegance. Without even looking at the clothes, you can already have a sense of what the brand is about. The unique font that the brand uses in the logo sets the mood for consumers even before the product purchase.
Many luxury brands use the same font. Large and dynamic imagery coupled with perfectly geometric fonts elicits elegance and luxury and couture. Contemporary, classic, and distinctive at the same time.
Visual Hierarchy – A good website hierarchy captures one’s attention at the right moment on your site, and fonts help determine your hierarchy through their size, style, color, and placement. Our eyes notice the dominant element of a design first, and the boldest font on your site will help you convey the most important message.
Better Readability – When you choose your fonts, you need to make sure that they improve your content’s legibility and authenticity.
Find Your Inspiration
Font libraries can be really helpful. Although, in most cases, they’re limited in terms of font selection and styles. Paid font libraries like Adobe Fonts can provide you with more premium-level options and high-end fonts.
Regarding the inspiration behind your fonts, it is always a wise choice to follow the latest typography trends:
Bold and Loud – Fonts that leave a lasting impression on the users. They are perfect if you want to highlight your brand’s personality from the minute someone clicks on your site. Such fonts are generally great for headlines, but not for the body of the site’s content.
Minimal Sans Serif – Simple fonts that can be really effective if used properly. They elicit feelings of calmness and composure in their design. You can use them for the main body content.
Nostalgic and Vintage – A vintage font can make your brand look elegant, which is always a good trait to aim for. You can combine these fonts in the body and heading content. After all, typography along with vintage fonts have existed for a very long time, and are often a fashionable choice.
Evolving Scripts – Handwriting is forever! When it comes to script fonts, any choice that fits your brand style is perfect. However, make sure to limit the use of such fonts. You don’t need more than a couple of script font elements on your pages. Such fonts are best for branding materials and wallpapers, not site content. As such, they are often part of a raster or vector image.
Outline Fonts – The modern look of these fonts will make your brand look appealing and mature. They work well for logos and branding materials. If you have to use them for content, try to limit their usage to no more than a few words.
High-Contrast Serif – These fonts can make your brand appear loud, raw, and fashionable, all at the same time. You’ll recognize them by the difference in the strokes, where the upper one is thinner than the bottom one. Due to limited readability, these fonts are best for headlines or logos.
Quirky – Fonts that act as the perfect pause from the sleek and weighty typefaces that oversaturate the web. They are excellent if you want to highlight your brand as fun and ongoing.
Messy – Messy-looking fonts are excellent for art-orientated, organic, and healthy living style websites. But due to their complexity, they’re not suggested for headlines or body content.
Unique Hand-Lettering – There’s something special about tailor-made fonts, and more and more brands use them today. These fonts can add a ton of personality and uniqueness to your brand.
In addition to trends, don’t forget to take notes of something that you loved about another website. For that purpose, you can use a Chrome extension such as Fontface Ninja to inspect, try, and buy the font that you like on a particular website.
Furthermore, if you want to examine the usage of a current web font trend on the Internet, there’s one more useful tool called FontReach. Simply type in the font that you want to get usage data for, and the tool will scan the top million sites in the world for that particular typeface.
Follow Your Brand Identity
Any inconsistency in your brand and website elements, including fonts, can confuse your customers. Aligning the typography with your brand’s identity can help you communicate your company’s values into the design of your website.
First, Understand Font Character
There are a plethora of fonts to choose from. Each of them has its own unique personality traits, just like your brand identity does. You can begin by looking at the five most common types of fonts and their characteristics.
Serif – These fonts include small markings called serifs at the top and the bottom of each letter. It is a style that dates back to the Roman Empire, and the most famous example comes in the form of Times New Roman, heavily used in magazines and news websites.
Other free serif fonts that work well are:
- PT Serif
- Playfair Display
- Libre Baskerville
- Zilla Slab
- Noticia Text
Sans Serif – A font type that does not include (that’s what sans means) markings as the serif does. These fonts evoke minimalistic and clean feel. It is a neat, modern, and enticing family of fonts used widely used in tech, automotive, B2C, B2B, and other industries where the contemporary look is better. The most well-known example is probably Helvetica.
Other excellent free sans-serif fonts are:
- Open Sans
- Source Sans Pro
- Fira Sans
- Noto Sans
- Work Sans
Script – They are beneficial if you need to communicate elegance, creativity, and passion. But don’t overdo it. Scripts have a better effect when used only in logos, headlines, and few other CTA words at the very most.
Decorative – This is the most diverse font type. It involves unique forms and proportions that achieve a stylish look. Decorative fonts can vary from one another, but they all evoke positive and friendly feelings. In the same vein as with script fonts, they are more effective when used in small doses.
Choose Fonts That Match the Brand Purpose
You can easily saturate your design with typography especially if you don’t know what you’re doing. That is why it’s important to focus on your brand’s purpose when choosing the fonts for your website. You need to gauge the right font style that you’re after, which in turn will help you convey your core message.
When assessing your brand’ purpose, ask (your team) the following:
- What is our brand’s nature? – Each font brings out a different emotion, and that is why you need to choose the font that communicates the feeling that best represents your brand.
- Is our business a long-term or short-term project? – You need a font that fits your project. For example, if you need a font for an artsy project, decorative typography is a good choice. Or, if you own a financial institution website, you need to communicate security and trustworthiness through your font choice.
- Are we conventional, or do we need to stand out? – A classical approach via fonts such as Times New Roman or Garamond demonstrates credibility and conventionality. Or, if you want to make a statement, display fonts that include unique elements are your best bet.
- Are we visually or text-driven? – Decide how you want to communicate information on your site. Do you want to visually redirect users to the most important information, or rely on your choice of fonts for a better content hierarchy? Choose your typefaces accordingly.
Check the Language
If you’re working internationally, you will want your website to reach people on every continent. So even if you provide content in only one language, many users will use Chrome’s translation feature to learn more about your business.
The auto-translate option can alter your entire layout, where unevenly changed characters stick out from the rest. That is why you need a font that supports multiple languages, which ensures that the design of your website will remain consistent.
As a matter of fact, to tackle this, Google has developed the Noto font family, which supports all written languages in the world.
Check if your fonts of choice comprise of “Extended Latin” characters (Ă, Ď, Ĵ, Œ) used in many European countries. There are lots of font families that include multilingual support, such as Alegreya, Nunito, Roboto, or Quattrocento. They include a vast range of characters, and some of them even support Cyrillic letters too.
In any case, make sure not to include such characters and sets if your content does not need them in the first place. From our experience, not using extended Latin characters can significantly reduce the final font size and increase the site speed as a result.
Play with Font Pairings
Having the same font for all the content on your site is somewhat dull. You need to mix things up, and adequately pair typefaces. Our Graphic Designer Yanka has made an awesome post of free font tools and an Infographic for the twelve best font combinations and trends that you can follow:
- Playfair Display and Source Sans Pro
- Montserrat and Merriweather
- Raleway and Lato
- Elsie and Roboto
- Corben and Nobile
- Amaranth and Open Sans
- Merriweather and Oswald
- Dancing Script and Josefin Sans
- Sansita and Open Sans
- Baloo and Montserrat
- Open Sans Condensed and Open Sans
- Alegreya with Lato
Another set of bonus font combinations that would work great for your website are:
Open Sans and Roboto – Both fonts are clear and readable. An excellent combination that can help you express the unique value proposition of your site.
Merriweather and Lato – A crisp and professional blend of fonts. It’s a versatile combination, with the Merriweather font helping your brand to appear more appealing, while Lato exudes trustworthiness.
Amatic SC and Josefin Sans – It’s an ideal combination if you own an artistic brand. Works best against white or light backgrounds. Keep in mind that you shouldn’t go overboard with this combination. It will make your site difficult to read.
PT Sans and PT Serif – Both fonts are readable, and you can use them for short-form text and blog posts, as well as landing pages.
When you rely on font pairings and combinations, consider your business and the industry that you’re in. Keep your font combinations simple and relevant to your target audience.
The following are some additional tips that will help you choose and use fonts with a greater effect on your website.
- Pick Complementary Fonts: You need to ensure that each font will have a complimentary mood with the other typeface and the rest of your designs. As with people, opposites can attract when it comes to fonts too. So, if one of your fonts has a distinctive personality, you can combine it with a more neutral font for a better balance.
- Maintain a Hierarchy: The best examples of font hierarchy are newspapers and magazines. They pair fonts for various textual components such as headings, copy, sub-headings, and image captions. The font size, weight, and spacing also help the hierarchy which allows users to browse much easier.
- Think About Context: Your design and the site’s context should determine your choice of fonts. Everything must be readable whatever the size of the font is. Your design’s context should match the characteristics of your brand’s personality. That should also apply to typefaces, as a part of their character.
- Establish Contrast: You can achieve better font contrast through their weight, spacing, size, style, color, etc. Contrast can highlight the distinctive role of each font, and make it stand out from other elements on your page.
- Don’t Pair Fonts That Are too Similar: Even if you’ve had the best intentions, users might not think the same, and they’ll find the pairing conflicting. To test whether your fonts look too similar, place them side by side on your page and squint a little when you look at them. If they look the same, you should think about the differences between the fonts and whether you should use another typeface to pair them with.
- Don’t Use too Many Fonts: A rule of thumb is that you should not use more than two or three font families on your website. You need to be thoughtful about your choices. Each font must have a defined role on your site, and with no more than three different fonts, everything will look much more harmonious and orderly on your website.
Fonts are like the air that we breathe – people don’t notice them until something is wrong. Choosing fonts for your website can have a significant impact on your entire branding strategy.
When trying to figure out what fonts work on your website, always think about your brand’s personality and the design purpose. Once you know what your general direction is, you can choose the best font combinations for your website. Remember, there are countless pairings and options, so always select the ones that will go hand in hand with your brand tone.