Font styles are everywhere. They’re used in your email, on your social feed, and on every page of every website you’ll uncover. From something as small as a phone number, to a more developed blog piece, we continually encounter different type styles. Most typefaces are chosen for a specific reason.
We can all joke about Comic Sans and Papyrus being terrible (no offense), but the fact is that fonts contribute to our perception of the narrative, tone and style behind a website. Fonts are an important component of every style guide, and can be seen as an extension of your brand.
However, with typography, comes a certain set of rules. There are just as many ways to fail at typography usage as there are to being a successful typographer. A successful typographer selects specific type that is legible, readable and appealing when displayed.
There’s a time and a place for each font
Many companies opt to use more common fonts, such as Arial or Times New Roman. However, the selection of a more elaborate typeface should be carefully considered. Each font family brings its set of personality traits—serif fonts score highest on traits such as stable, practical and mature. It would be unlikely that a three-Michelin star restaurant would choose the same font as a toy store. Take the time when developing your brand to select an appropriate font that is versatile.
Limit font usage
Websites should be easy to read. Font choice is very important to the legibility of your content. The overuse of different typefaces make your website hard to read —you not only confuse the reader, but you are at the risk of creating brand confusion. Limit yourself to a couple of fonts – one for your headings (H2, H3, etc.), and another for your body copy. In conclusion, it is best to limit font usage to three types.
While an 8.5×11 sheet of paper uses a 10pt font (or slightly smaller), the same does not apply to web design. People typically sit about 20 inches away from a computer so the selected font must be readable. Font sizes should be set and arranged by priority, as the size can impact the visitors’ website experience. Anything less than 16 pixels can be a costly mistake, so we suggest at least 28 pixels for headings.
Testing is imperative to success
The type of device and your browser are key factors in user experience. If you don’t optimize your website with these in mind, your website won’t succeed. With mobile responsive websites, your font size will adjust to each screen, so your visitor won’t need to pinch away or zoom in to read the text. When using a standard font, your website will be consistent across all browsers and platforms. However, if you use a font that isn’t deemed web-safe, your website will display differently across different browsers.
Typography choice and usage is extremely important to the success of your website. Remember the key to typography is font selection, limiting typestyles to three, using the right font size and making sure they are web-safe.