How To Choose The Right Web Font

Text plays a highly vital role in communicating ideas to users. There some areas to take note of when it comes to choosing fonts for a website. They should not be chosen to work against users. I will be sharing 3 basic and important tips on choosing appropriate web fonts.

Compatibility

Sometimes, less is more. Matching multiple fonts may be unpleasant to the eyes. As a rule of thumb, pick one base font and one display font throughout the entire site. This will ensure that the displays of different pages are coherent to each other.

The above example shows the font Domaine Display in a combination with Proxima Nova. A bolder and thicker font is used to display titles or headings while a thinner and sleeker font is used for the body text. This ensures readability and is pleasing to the eyes.

Mood and Tone

Colours and images are to be put into consideration when choosing web fonts. Different web fonts can convey different messages to users.

Thin sans serif fonts like the above (District Thin) give a calm and serious tone. They are great for businesses as they give off a feeling of class and professionalism.

A serif font above (Orchid) is bold and follows the style of olden calligraphy with a modernistic touch.  This font is perfect for titles and headings and complements sites that follow vintage themes.

 

Load Times

With increasing loading speeds, a site that takes time to load its text might turn impatient users off. Choosing multiple fonts will take up time so just stick to font types that are actually necessary to your site. For each typeface, pick only the style that you intend to use. Putting in a font multiple styles (eg. 400, 700 800) would slow down loading time.

 

Conclusion

Choosing web fonts are no easy task. Picking a good combination could create a harmonious website that is pleasing to the users’ eyes. Referencing other websites for inspirations and ideas is a good way to start.

 

References:

http://designshack.net/articles/typography/7-tips-for-choosing-the-best-web-font-for-your-design/

http://www.smashingmagazine.com/2014/12/the-good-the-bad-and-the-great-examples-of-web-typography/

http://www.smashingmagazine.com/2007/11/40-excellent-freefonts-for-professional-design/

https://www.pixellogo.com/sites/www.pixellogo.com/files/wp-content/uploads/2014/10/Orchid-558×580.png

 

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s