As a web designer or someone who has been involved in designing a website from a branding perspective, you would be well-aware of the unique and grueling challenge that font selection poses. The perfect font does exist. However, identifying which one aligns with your design and intent can put you in a dilemma. This dilemma is further aggravated because you’re not looking for something that simply looks pretty, you are looking for something that performs well across all device types and contexts.
It’s perfectly alright to be baffled and bewildered – after all, the last thing you want the text on your website to confuse people as opposed to helping them understand your business. As a core element of Form, Function, and Flair, the three pillars of web design, font has the superpower to make your web design stand out and give your website an unparalleled edge. It is advisable to focus your design and aesthetics around your content.
Here the following 4 areas to master the art of font selection.
Image source: https://dribbble.com/shots/3239158-InVision-s-2016-Year-in-Review, https://dribbble.com/shots/3796099-Invite-and-create-Groups
1. Font Size and Legibility
Font size is directly synonymous with readability and legibility. It is advisable to test your font with the smallest size that you intend to use on the website. This exercise will help you understand and evaluate the suitability criteria when testing the font. Be sure to consider other devices when testing font size suitability. Don’t forget, a legible font size will be appreciated by readers with visual impairments. An interesting hack to enhance web design is by manually increasing the font and checking if the page looks cluttered. If so, you can include some more white space in your design.
2. Device and Environments
There is a strong probability that your website will be accessed across various device types, web browsers and under various conditions. The chosen font must retain clarity across all device types such as laptops, desktop computers, smartphones, smart tabs, and smart watches. Also, your chosen font must render identically across all operating systems that power every device type. It is a common issue where fonts appear perfect on one browser but gets disoriented on other browsers in terms of letter spacing and clarity.BrowserStack is an effective tool to test your website for cross-browser compatibility on real browsers.
Image source: http://www.mixd.co.uk/approach/
3. Content Tone and Emotion
Font selection is more of an art than it is a science. And that is because every font induces a certain emotional response – serious, professional, informative, playful, childish, or a combination of emotions. Deep dive into the tone of your content and how you want it to ring with your readers. The best way to understand the suitability of a font for your website is by test reading it in the selected font/s. Have friends and colleagues read the text with your shortlisted fonts. You would be surprised to know that sometimes a font that induced a feeling of professionalism to you may seem overbearing to someone else. This exercise will give you valuable insight and enhance your font selection decision.
Image source: UsabilityNews
4. Pair Fonts
Now, you may want to use more than one font for your website. For this, you’ll need to know which fonts to play with and which ones to pair together. Limiting the number fonts to around two or three will help reduce confusion and maintain clarity and consistency. FontPair, typeconnection, and boldwebdesign are handy tools to quickly visualize potential font pairings. Pairing two or three compatible fonts will make your content more expressive and enhance the emotional tone of your website.
Image source: hyperallergic.com
Font selection is a creative process and one that is enhanced by a vivid imagination. If you are fueled with an unending passion of designing cutting-edge websites, then participate in a one-of-a-kind global web design contest – F3.space.
Do you have a favorite font or a combination of fonts that worked well? If so, then do leave us a comment below.
Also published on Medium.