Typography on the web

The typography of a website plays an integral role in the user experience of a site–just as much as other elements such as navigation, color palette and use of images do. Fortunately, when it comes to formatting copy, the use of items such as typefaces can draw from a rich heritage in print and graphic design, which has been an evolving discipline for the last century or so. And when it comes to combining fonts, there are several best practices that have evolved out of the collective experience of the design community, taking the guesswork out of implementing effective typography on the Web.

Sans-Serif vs. Serif Fonts

Generally speaking, using both sans-serif and serif fonts together is now a common practice to make for a more interesting web experience. Serif fonts are simply those typefaces that have a line attached to the end of each letter, while sans-serif fonts do not. Examples of serif fonts include Garamond, Georgie, and Times, while the sans-serif family includes fonts such as Arial, Helvetica, and Geneva. In a word, serif fonts are fancier than sans-serif fonts. Naturally, serif fonts can be used to add personality to copy, while sans-serif is appropriate in situations that require a direct, no-nonsense approach.

Some Guidelines for Combining Sans-serif and Serif Fonts

With such an expansive number of fonts belonging to each family, it’s impossible to draw any hard and fast rules regarding what combinations work best. As the popular design mantra goes, combining fonts is an art, not a science. That being said, there are a few guidelines that work well in directing one through an expanse of virtually limitless options.

Historically, because serif fonts have more detail, they tend to work better in larger sizes (and in Print). San-serif fonts work well with more diminutive web copy (or on the Web in general).

• At small sizes, san-serif works better for body text and regular copy, while serif is appropriate for paragraph headers. Again, size dictates this guideline, as headers tend to be larger and bolder.
• At standard and larger sizes, serif can be for body text, and may actually work better as the font is more legible and causes less eye strain or fatigue than sans-serif–especially when used to display longer, expansive passages.
• Assign and stay consistent when using the two fonts in tandem. For example, the title of a passage may use serif, while immediately beneath it is the author’s name in a smaller san-serif font. Be sure to follow the assignment precedent throughout your site, so as to avoid confusion for your viewers.
• When choosing serif and sans-serif fonts to be used together, avoid combinations that vary too much in look and feel. For example, pairing an overly-heavy serif font with an extremely light sans-serif font will create discord and visual imbalance in the viewing experience.

Volumes have been written and complete courses have been taught on typography alone–many with an emphasis on what treatments work for particular audiences. For example, a site geared towards children and young learners might benefit more from a predominance of sans-serif fonts, with serif relegated to headings and other decorative purposes. At the end of the day, the best serif and sans-serif combinations depend on specific applications and use cases, and may depend on the viewing audience.

Infographic from UrbanFonts.com

Below is an Infographic about Serif vs. Sans. The recommendation is that Serif is best for print and Sans is best for Web. There are tons of sites now that combine both effectively and this trend will likely be here for a while.

Some additional resources:

http://www.webdesignerdepot.com/2013/03/serif-vs-sans-the-final-battle/
http://www.http://smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/
http://designshack.net/articles/typography/serif-vs-sans-serif-fonts-is-one-really-better-than-the-other/
https://designschool.canva.com/blog/typography-terms/