Each font has its own personality. Times New Roman evokes a feeling of authority, respect and stability; while Helvetica is associated with modernity and cleanliness. Sarah Hyndman in her Ted Talk – Wake up and smell the fonts, says that typography taps to the unconscious mind of customers. According to Hyndman, fonts has the ability to retrieve information hardwired in our DNA; and reference complex library of association that people built overtime. These complex associations are built in three ways:
• Every time one sees a font in the context where it is used in;
• Some are based on customer experience, while some are universal; and
• Some are constant while others change with a flick of an event.
With the right type of font, website readability can increase by more than the typical 50%, as stated from Josh Schwartz’ study. Here are tips on how you can use typography not only to build a strong UX but also to strengthen your brand image.
Choose fonts that are consistent with your brand and audience
As each typeface has its own meaning hardwired in our customer’s brain, make sure that when deciding which fonts to buy, choose a font design that is consistent with your brand image and target audience. There are roughly four content categories according to Missouri University of Science and Technology: Serif, Sans-serif, Script and Modern. Serif fonts such as times New Roman, Georgia, Bodoni and Baskerville are associated with respect, tradition, grandeur and authority. Often used in news sites such as Time and The New York Times, it evokes a sense of heritage and pedigree, making customers feel comfort from the hands of a reputable and stable company. Sans Serif on the other hand evokes a feeling of modernity, straightforwardness and sensibility. Most popular Sans-serif fonts such as Helvetica, Verdana, Arial, Century Gothic and Calibri, works well in digital design because it carries a reputation of being contemporary. Equated in femininity and fanciness, script fonts are used to demonstrate creativity and genius. They are used by Coca-Cola, Cadbury, Cadillac and Instagram. Finally, modern fonts evoke progressiveness, style and coolness. Popular websites using this font design are Facebook, Nars and Shuterfly.
Pay attention to font readability
Deciding which website fonts to use, also largely depends on its purpose and consequently, readability. On the study conducted by Heydon Pickering, more than 51 percent of websites which participated in their study used Sans-serif font design for headlines, as they are perceive to stand-out better and is readable regardless of distance. The same preference for Sans-serif is found for the website’s body. Most popular typefaces used are Georgia (utilized by The Guardian and Financial Times), Helvetica and Lucida Grande. Consequently, font sizes determine website readability. Most popular headline font sizes range from 18 to 29 pixels; with 24 to 26 pixels in average. On the other hand, website font for body are between 12 to 14 pixels, with 13 pixels as average. As a rule of thumb, heading font size to body copy font size ratio is 2:1. Meaning, the size of your heading is ideally twice the size of your body.
Look for versatile fonts
In determining fonts to buy, always consider its compatibility to both web and mobile platforms. Some font designs that render well on websites, doesn’t necessarily display well on mobile. Because of this, find website fonts that are versatile just like open source Google fonts such as Open Sans, Lato, Old Standard TT, Abril Fatface and PT Serif. For instance, Open Sans, a sans-serif typeface designed by Steve Mattenson is characterized by upright stress, open yet neutral form with a friendly appearance that works well not only for web and mobile but also for print. Another approach to bring the best out of your font design is to use font pairing. On an average, a designer would use one type of website font for the headline and another font design for the body. To know which combination works, ask yourself: “are they similar enough?” Or “are they not different enough?”. There is actually no fool proof way to see which font combination works unless you try them. That’s why there are designer tools that you can use such as Google Type, Type Connection and Font Pair.
Don’t forget font layout and aesthetics
Font layout and aesthetics are also major contributing factors to website readability. Spaces between lines of text, also known as “leading” is important to make your content easy to read. Use 1.5 CSS line-height property spacing for large blocks of text; while smaller fonts require tighter leading. “Tracking” or the space between text characters is another font design consideration. CSS doesn’t give much control over this, though as a rule of thumb, add 1 to 2-pixel letter positioning to your CSS to give enough space. Also, utilize grid design to provide clear balance and geometric structure to your website.
Choosing the right font is one of the most important things designers have to consider to set the right tone of their website. A poor choice would send the wrong message; while an appropriate one is sure to increase visitor readability above 50 percent. As typography is believed to tap to the unconscious mind of customers, make sure to not only choose the right font but also to carefully implement it using the recommended font design principles that we have discussed.
