Typography on the web

Chuck Pearson
Sep 21, 2016 · 3 min read
Image for post
Image for post

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.

Image for post
Image for post
Image for post
Image for post

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/

Rareview

Articles on design, development, marketing, technology…

Chuck Pearson

Written by

Design brother and CEO of Rareview

Rareview

Rareview

Articles on design, development, marketing, technology, startups, entrepreneurship, and business. We strive to be a resource for designing better user experiences, more effective integrated marketing, and strategies for life and business.

Chuck Pearson

Written by

Design brother and CEO of Rareview

Rareview

Rareview

Articles on design, development, marketing, technology, startups, entrepreneurship, and business. We strive to be a resource for designing better user experiences, more effective integrated marketing, and strategies for life and business.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store