How to choose the best typefaces for your web site and branding
The font you choose for your website says a lot about your business' personality and values. Follow these seven suggestions to select the most appropriate web font.
The fonts you choose to use may seem nothing but a minor thing when it comes to designing your website.
These are the windows on the building, right?
Not quite.
Fonts are an essential part of your brand and can have big impacts on the perception of your business.
Today, we bring you seven essential tips for finding the right fonts for your website, from selecting the top fonts and the best places you can download these fonts.
It is able to change the entire world.
But first, let's quickly discuss why a font of another name doesn't taste as delicious.
Why do website fonts matter?
It's important to consider the fonts you use on your website because they aid in communicating your business character, image and the values.
Through visuals Your website's font communicates a message to your audience without them even reading your website's content.
Consider, for instance, Mailchimp , that rebranded its website using typeface Cooper Light.
Why did they go with Cooper Light?
Mailchimp believes that this font can be "dressed-up and casual, or more formal and friendly". It's also a typeface that is a symbol of trust, honesty, and optimism. These are qualities that match their brand values.
The best fonts can also serve a functional purpose. They allow users to easily understand your brand's message across a range of devices and platforms.
Airbnb For instance, Airbnb opted for a font called Cereal since it is compatible with a wide range of offline and online platforms. The font presents Airbnb as easy to use and a user-friendly experience.
Speaking of accessibility, you must select a font that is usable to all users of your target audience especially if the brand crosses into different languages.
If you select an appropriate font that can be read by visitors who use different languages, visitors who use an automatic translator can still navigate your site easily.
For an example, we can take the following text " The quick brown the fox ."
In English it is perfectly readable in Merriweather font.
But, when translated into Czech, it's much less readable and aesthetically-pleasing.
So, if a significant portion of your visitors are transliterating your site into another languages, be sure that your font is readable in all languages.
Beyond the ability to read, many research studies show that fonts have an impact on consumers' views of a brand as well as its products all over the world.
For instance, font characteristics such as naturalness, harmony, and weight -affect your customers' overall perception of your brand.
They also affect your audience's purchasing intention.
The study also discovered that when shoppers shop for a relaxing vacation, an easy-to-read font increases their willingness to spend money on the trip.
However, when shoppers search for a more adventurous tour the font that is more difficult to read increases their willingness to shell out for tours.
Apart from the above impacts The fonts you use also influence the experience of your customers beyond the point at which they purchase and play into product perceptions as well as the experience of your product.
In one case, curvilinearity -- or fonts with curved lines changed diners' tastes expectation as well as their experiences.
What's the moral of this story?
The fonts you use on your site affect the way customers view your brand as well as your products and services They also affect your site's accessibility as well as ease of use.
The choice of the right font to send the right message is only part of the equation.
Familiarize yourself with the four most effective practices we recommend, and you'll be a lot closer to finding the best font for your business.
Four tips to choose the right web fonts
Tip #1: Use simple-to-read fonts
The best fonts to use on a site are those which are easy to read.
Otherwise, your website visitors may abandon your site because it's not easy to read. Of course, this means less time spent absorbing your marketing messages and exploring your site's offerings.
So, readability should be the top priority when you select a site font. It will help make all of your content -- from blog's posts, to your call-to-action (CTA) buttons to headers -- more digestible.
There isn't a single universal font for websites that will work most effectively for every company, Verdana and Georgia are great choices to display long text on websites.
This is also backed by this research which found that Verdana was great for reading long texts on screens.
Reading comprehension is essential in displaying testimonials on your site. In fact, difficult-to-read fonts are a negative influence on positive reviews and shoppers believe the credibility of a reviewer in the event that their reviews are easy to read.
While the importance of readability is high however, there is a caveat: easy-to-read fonts might not be as memorable.
So much so that studies have found that when writing in difficult to read fonts it's more likely to be remembered as opposed to writing in a simple font.
This study warns against taking it too far and applying fonts that can make reading difficult overall for readers.
So, it begs the question -- how can you find a balance between simple-to-read and difficult-to-read fonts for your website?
Simply put, follow this simple rule of thumb in two parts:
Wild Side Design For instance, it employs multiple fonts to draw users' attention to different parts of their webpage.
The majority of the content on its website is written in a simple font however, its CTAs as well as captions and headlines employ more intricate fonts.
If you want to see another instance, go to Mad Hippie the skincare company. The font used is handwritten in order to highlight the subheadings as well as short descriptions of the products it sells.
Regardless of your mix in fonts, here's a summary:
Easy-to-read fonts are often ideal for websites with text, specifically long pieces of copy. Fonts that are difficult to read may be more appropriate for key information -- for shorter periods -- that you would like people to be able to recall.
Fonts and copy lengths aren't all you need to play around with. You should also consider size this is why we're going to discuss our next suggestion.
Tip #2: Make your Font size large (enough)
While there is no any universally accepted font size for your website however, you'll need to ensure that it's big enough for your visitors to read on any sized device.
One study recommended that websites with a lot of text use the size 18 font or greater.
A similar study revealed that reading comprehension, as well as correct responses to comprehension tests, are higher when the font size.
Not to mention, larger size fonts can aid people who have difficulties with reading or sight.
Additionally, for younger and older people, larger font sizes leads to increased productivity precision, accuracy, and seeing distance and reduced perception of the difficulty of tasks.
If this isn't enough to convince you to go with a bigger size font for your site, here's one more consideration to consider.
Font size can affect website accessibility and readability for those who suffer from dyslexia too. This study suggests using an 18-point font to design a website with individuals with dyslexia.
To summarize:
Our two suggestions so far focus on functionality, our third tip focuses on the aesthetics of the fonts.
Tips #3: Avoid using more than three fonts, font sizes, or even colors.
Using a few different types of fonts, sizes of fonts and colors for your site could draw attention to a variety of elements of your website, such as CTAs testimonials, CTAs, and other important text.
That being said, you should limit how many fonts and colors you employ, to provide a consistent and visually appealing user experience.
If not then your site could appear too complicated or difficult to comprehend. You may also miss the target when it comes to conveying your message because the page is cluttered with variation.
To see an example of a company which does an excellent job in their choice of font colors and message, take a look at Lowe's that uses the colors of blue, black, and gray text and a variety of fonts on their site.
This is in keeping with the color scheme of the brand and gender-neutral DIY home improvement branding.
Workationing can also help balance the font variation well on their site. It employs black text on title of articles and more lengthy copy, and white text for buttons, headlines, and text that is shorter.
While you should feel free to explore colors that go beyond black and white however, you should limit yourself to two or three colors.
This is due to the fact that shades other than white or black can be difficult to read when you are on a site. Thus, keep non-black and white colors for accent colors in order to draw attention to something you want to highlight on your page.
Consider The Abundant Artist to give an example. While a majority of their text is black, they employ orange in headlines as well as article categories.
If you're wondering how to pick the best combinations for your website, use this guide for combinations of fonts . Also, if you're employing Google fonts for your website make sure you check out the 21 Google Combinations of fonts .
Basically:
It's OK to make your site more appealing by using various fonts size, colors, or sizes. Make sure that each type is compatible with the others and offers a seamless and clean user experience to your customers.
Limit your zing at a minimum, because you'll want to maintain the same design throughout your websites.
Tips #4: Ensure that you maintain the fonts you use consistent
Our last tip for this week is to utilize the same fonts throughout your site.
Why?
Aside from adding to your brand's power, regular font usage provides your visitors with an improved user experience. It also makes browsing your website more enjoyable.
More specifically employing similar fonts and similar formats (such for headlines or body content) helps visitors find information more easily. In the end, 56% of users expect to find what they are looking for in three clicks or less, so anything you can do to make navigation easier is beneficial.
Furthermore, when you display a the same appearance and style on your site, you also come off as more trustworthy and professional.
This is an important point given that 47 percent of people believe that the website of a company is one of the most trustworthy sources for information.
The process of gaining trust from your site's visitors is a fast process and also quickly. These days, people assess a website's credibility within 3.42 minutes depending on its design appearance.
Furthermore, the consistency between the image of a company and its website may lead to the development of a positive attitude towards the brand, as well.
For you to make sure that you can reap all of these advantages For you to get the most out of these benefits, here are two examples of brands that use uniform fonts.
Amazon uses the Ember font. Amazon Ember throughout its homepage.
Not to toot our own our own horn, but we use similar fonts for headers and regular text across the site's pages.
The most important thing to remember is using the same fonts and identical elements throughout your website, so that it is easy for your visitors to navigate through.
If you're now familiar with font best practices We'll look at how you can utilize them to select the perfect typeface for your website.
How to find the best font for your website
#1. Figure out what message you would like your font to send
While readability should be your top criteria when picking the right font, the message you want to communicate should come in as the second.
This restaurant picked the font they chose to go with their image of haute food, such as.
Nature , an academic journal, picked a font known as Harding as they were looking for the font to better represent the mathematical formulas and symbols.
They also picked a brand new font which gave the impression of "calm, rational intelligence" in order to match their branding.
Though fonts are just substitutes for spoken words, they can send off surprisingly different vibes.
Take a look at Times News Roman, a popular font. Times New Roman was perceived as more funny and comical as Arial when study participants were reading satirical text using the Times font.
A separate study also showed that experimenters were exposed to email messages written in various styles of fonts.
The participants who read an email that was written in Gigi (which is shown below) found it more youthful and rebellious than the other fonts studied. The participants also considered Gigi to be less stable as well as practical.
The participants also viewed the person who wrote the email as for the Gigi email as less professional, trustworthy, and older.
These findings suggest that fonts are able to communicate more about your business and personality than the literal terms they portray.
For ensuring that the readers are getting your message properly, check the fonts you use prior to an overall rollout.
2. Test the fonts you use with your customers.
The font you choose to use should not just be simple to read but it should also be enjoyable to be able to.
The saying goes that time is a blur while you're enjoying yourself, as is the case for the time spent on your website.
In fact, experimental participants did not realize how long they were studying a text by 3 minutes and 18 seconds , on average, when they read a text with good typography.
As opposed to people who read text using poor quality fonts and who overestimated their reading time in 24 seconds, at a typical.
These findings suggest that a good font can help keep your readers interested in the text on your website, therefore it's important to choose the appropriate one.
Certain of your results may alter your beliefs However, that's a great thing -- your research should help you identify methods to make your website better for customers and not just confirm your assumptions.
You might, for instance, consider that using a less complicated font could boost conversions on your sales and product pages. A study conducted by a researcher found that adding the simpler font did not work to increase an ecommerce site's conversion rate.
It is important to try out fonts on the people who visit your site before applying the fonts across your entire site. What people's perceptions of these fonts and the way they react to them- may surprise you.
However, if the results are inconclusive or you don't have enough respondents to poll, you can opt for our last tip.
#3: When in doubt choose a standard font
Until you figure out the best fonts to represent your company, stay with top website fonts like Georgia and Verdana.
Like we said earlier, numerous studies have proven Verdana as one of the most effective fonts to use for websites body text.
In one research study, the participants in the study showed the preference for Verdana while reading in a computer's screen. They also read their text more quickly and experienced fewer regressions (backward motion) when reading a text using Verdana.
An additional study showed that respondents preferred a the 12-point dot matrix Arial font. Another study suggests that participants read more quickly when they read sans serif fonts.
Now, you may be concerned that your clients might mistake your business for another if the font used is a standard one -- and that's not unreasonable.
The companies are often criticized for making use of similar or identical fonts for their logos -Take a look at the way the fonts employed in Google, Airbnb, Spotify, and Pinterest have been.
But, as the entrepreneur Thierry Brunfaut observes, using the same fonts to the fonts used by other businesses isn't always a bad thing.
Thierry stated that:
"The amount of visuals users are bombarded with daily is overwhelmingwhether on the street or on laptops, or a smartphone.
A visual chaos that creates a difficult environment to maneuver to. Most of the time, clarity have been the key words for every brand.
These bold and neutral logos convey to consumers the same story: Our brand and our products are straightforward, easy, and clear. Also, they are extremely easy to read."
Basically:
Avoid avoiding commonly used fonts -- they can often make it easier for customers to access your website or send a stronger message to customers more effectively than an original (untested) font could.
No matter if you're stuck with an old or completely new font, check out these fonts foundries to assist in the addition of new fonts to your website.
How do you find the most effective fonts for your website
In the case of finding fonts that you can use on your website, you've got two options. The first is to use the fonts that are built into your site design software of choice.
Another option is to utilize an online font store or website on which fonts are available for download and/or for sale. This, naturally, opens you for more choices.
Some of the best online font foundries are:
#1. Google Fonts
Google Fonts is one of the best font sites and, in my opinion, the most popular website to download fonts that are free. Users can download hundreds of fonts open source that can be used for over 135 languages.
Every one of the fonts on Google Fonts is available for use at no cost and may be employed for commercial use .
#2. Fonts.com
Like Google Fonts, Fonts.com has thousands of fonts to choose front -- over 150,000, to be more specific.
However, you'll need to purchase each font before making use of the font.
#3. Fontspring
Fontspring Fontspring a font foundry that also provides thousands of fonts for sale.
What differentiates Fontspring distinct from other finders is the fact that they have an emblem for fonts that don't impose unusual rules or restrictions on users.
This lowers your chance of not enforcing your contract with a font purchased from their website.
#4. What is the Font
Though it doesn't have fonts available for purchase, it can help you identify a font on other websites which you'd like to utilize to create your own.
#5. Type Detail
If you've come across the font that you love, but aren't sure how it will look in different weights and sizes visit Type Detail.
Type Detail Type Detail in HTML0 provides (naturally) information about a variety of popular fonts, such as this font profile named Neue Swift .
In addition, Type Detail shows how the font appears when it is in different dimensions and weights. It also reveals what is unique about the font as well as similar fonts.
Once you've figured out where you can find the perfect font, you can find out ways to modify the fonts you display in your online website.
What fonts can you change on your storefront
Your website can be changed the fonts within a glance when you have your own storefront online .
First, head over to the Editor tab, then select the page you want to edit. From there, choose the style of your headings as well as the style of your body by clicking on the "Fonts" dropdown menu.
Simply click the downward-facing arrow next to each font box and select the font you prefer.
There you are! You've just added a unique font to your shopfront.
Select the right typeface for your site in a few simple steps
The fonts you choose to use are not just for words. They also impact how people view your business.
Needless to say, picking a typeface for your business must be a priority along with choosing the right branding colors, logo as well as the layout of your website.
If you are using fonts on websites, you should:
Make sure you use a font that is easy to read.
Create a font that is large enough for the majority of people to read (size 18 font or larger)
Avoid using too many styles sizes, colors or styles
Maintain a consistent font use
Choose a font that conveys the correct message about your brand
Check your font's performance with your target audience
Choose a font that is common in case you aren't able to decide which fonts you'd like to choose.
As with the appropriate branding colors and logo, the fonts on your site can be the difference between creating a negative and a positive impression for your website visitors. Let's make sure you give them a positive impression.