Have you ever struggled to read the font on a brochure or website? With the seemingly infinite number of fonts out there, choosing one that is both readable and visually appealing can be difficult to achieve without proper consideration.
Serif and Sans Serif – What is the Difference?
Typefaces can be described as “serif” or “sans serif”. A serif is a decorative line or embellishment added to the basic form of a letter. Serif fonts have these embellishments, whereas a sans serif typeface (sans = “without”) does not contain those decorative embellishments.
Left: Times New Roman, a serif font Right: Calibri, a sans serif font
Best for Online vs Best for Print
When selecting a font, a helpful place to start is to consider is where it’s going. Print or web?
For Web: Sans Serif
Why: Most people find sans serif fonts, with their simple shapes and generally uniform widths, to be easier to read on the web.
On computer monitors, serifs become difficult to see if not invisible, Serif fonts on computer screens are quite a bit harder to read than they are in print due to the lower resolution of computer screens as compared to printed works. If you want your online material to be legible to all audiences, go with a sans serif.
Note: There are some serif fonts that are made specifically so that they will be more readable on the web, with taller and wider dimensions.
For Print: Serif
Why: Put simply, serif fonts are easier to read in print
Serifs, although defined as “embellishments” are not without purpose- they make individual letters more distinctive – thus making it easier (and quicker) for our brains to recognize them in print and follow along the line (webdesignerdepot.com). These types of fonts are also effective for use as body texts because they are much less likely to cause fatigue from reading.
Style Tips
Ensuring that you’re using the most readable type of font for your platform is a necessary place to start, but where do you go from there? Font choice is highly subjective, but there are two questions that we always consider when making these decisions.
Is the font you’re considering contextually appropriate?
This is where a lot of people drop a Comic Sans reference – for good reason. Which font seems most appropriate for a “wet floor” sign intended to prevent customers from injuring themselves? Comic Sans or Times New Roman?
Left: Comic Sans, Right: Times New Roman
The same can be said for situations where a degree of whimsy is called for. Perhaps Times New Roman would not be the most playful font for a child’s birthday invitation. In that situation, Comic Sans or other youthful fonts may be more appropriate.
Is the font you’re considering overused?
Is your potential font so widely used that it won’t stick out at all? Worse yet – is it so overused that it is universally disliked and might distract from your intended message entirely?
Arial, Times New Roman, and Courier New are examples of fonts that are so popular that using them could be considered unoriginal and prevent a consumer from feeling excitement upon first glance at your branding.
Comic Sans, Bradley Hand, and Papyrus are decorative fonts that have gained notoriety and ultimately become distracting to read due to the bad publicity surrounding them. You want your readers to think about the message in your text – not how much they dislike your font choice
Which Fonts Can You Use on the Web?
Unless you’ve purchased the individual licenses to the typeface or software to do so, there are a lot of fonts that you cannot use on your website.
Fonts that are the most safe to use and work cross-platform: Arial, Helvetica, Times New Roman, Courier, Courier New, Verdana, Georgia (a web-optimized serif font), Trebuchet MS, and Impact (http://web.mit.edu/jmorzins/www/fonts.html).
If you’re craving to switch things up and use something a little less widely used and a little more artistic, Google Fonts are free to download and use on your website so long as you abide by their terms of use.
The Final Battle
Although produced in 2013, this is still a great infographic showing the difference in font types:
For free fonts and dingbats, check UrbanFonts.com
Sources:
https://www.webdesignerdepot.com/2011/02/10-iconic-fonts-and-why-you-should-never-use-them/
https://www.opticentre.net/FAQ/Fonts/What-is-serif-and-sans-serif-font/
http://usabilitynews.org/a-comparison-of-popular-online-fonts-which-size-and-type-is-best/
https://www.smashingmagazine.com/2010/12/what-font-should-i-use-five-principles-for-choosing-and-using-typefaces/
https://www.webdesignerdepot.com/2013/03/serif-vs-sans-the-final-battle/ http://www.learnnc.org/lp/editions/webwriting/711