Question for Web Designers: Serif or Sans-Serif?

[Rathji]

In my technical communications class today the prof is saying that when you are putting content online, you should use serif fonts for all text but sans-serif for headings. I was always previously under the impression that you should use sans-serif for anything that is not meant to be printed to physical paper.

What is the general consensus on this?

[photon]

The common thought is that serif fonts are easier to read so that's why it's suggested to make the text a serif font.

Most sites though go with what's aesthetically pleasing rather than what's easy to read (as long as it doesn't actually hinder reading).

Serif fonts are usually seen as warm, traditional, or intellectual while san-serif fonts more modern and clean and uncluttered.

As to the reality of what's easier to read, it may not be as clear cut:

http://www.alexpoole.info/academic/l...urereview.html

[zamler]

Originally Posted by Rathji

What is the general consensus on this?

The article photon posted is a very good read. I am of the thought that when it comes to web design, there is no "general consensus" you go with what works. There are of course some basic guidelines that designers ignore that can be very annoying. Using very small text, darkish gray text on a lighter gray background, "fancy" fonts etc.

Too many sites sacrifice readability just because they want a certain look.

[Hack&Lube]

There is no black&white rule for this. It depends on what you are designing and the overall aesthetics and design goals you are going for.

Are you going for utilitarian? minimalist? modernist? glitzy/glam?

[maverickstruth]

The bigger issue isn't necessarily if the font is serif or sans-serif. It's whether the font is readable on the web. Verdana, for example, was designed for digital reading whereas Arial was designed for print. I believe (but don't quote me) that Georgia was designed for digital and TNR for print. In situations where there's a lot of content, using a digital-designed font will very often be a stronger choice than a print-designed one. If only because of how they scale (and, as a side note, please please please make sure you're setting font sizes with ems as your unit of measurement! ;-))

Directly related to your question, though, it is fairly conventional to use a serif for headings and a sans for body content, but that's really only because the list of true web-safe fonts is very limited. If you want a visual distinction between headings and body content, and don't want to use comic sans ;-), then your choices are basically serif heading and sans-serif body. Not because it's right or wrong, but because that's basically the only choices you have that have sufficient visual difference in the web-safe-font world. And, as was mentioned, it's often stated that sans serifs are better for longer reading in a digital format -- again, if only because of how they scale. Ideas about that are also changing as digital-designed fonts get better and more prevalent.

But no, it's not a rule and especially not with the font replacement techniques currently in use (and the upcoming web fonts that are going to explode in the next few years). It's more important to make sure its readable and supports your goals.

[octothorp]

It's more important that you use a font designed for digital display for body text. For example, don't use Helvetica at small sizes (since this is a font designed for print), and instead use Verdana, which is designed specifically for digital display and is very legible even at small sizes. Similarly, opt for Georgia over Times New Roman. Of course, make sure you structure your style-sheets so to accomodate users who don't have these fonts still get a half-decent font instead. But Verdana and Georgia are fairly universal now.

Have a look at the front page of the Washington Post, then look at Globe & Mail. The two are almost 180s of each other in terms of font usage, yet both are effective (and both use primarily Georgia and Verdana as their first choice). WP uses sans serif for titles, links, opinion piece text, bylines, and captions; it uses serif only for the body of news story bodies. G&M uses serif for titles, links, bylines, opinion pieces, and sans-serif for news story bodies and a couple other small-text applications.

Which just further illustrates that there are few accepted rules.

[GrrlGoalie33]

Originally Posted by Rathji

In my technical communications class today the prof is saying that when you are putting content online, you should use serif fonts for all text but sans-serif for headings. I was always previously under the impression that you should use sans-serif for anything that is not meant to be printed to physical paper.

What is the general consensus on this?

Are you at MRC taking Foundations?

[getbak]

This is Verdana, size 1. It is a sans-serif font for screen display. The quick brown fox jumps over the lazy dog.

This is Georgia, size 1. It is a serif font for screen display. The quick brown fox jumps over the lazy dog.


This is Arial, size 1. It is a sans-serif font for print. The quick brown fox jumps over the lazy dog.

This is Times New Roman, size 1. It is a serif font for print. The quick brown fox jumps over the lazy dog.


Verdana: Looking at those examples, I think Verdana is the easiest to read on a screen at that small size. Georgia is better than Times New Roman, but because of the serifs, the letters are squeezed more than they are without serifs.

Georgia: At a slightly larger size (2), Verdana and Georgia are both easily readable on screen. Personally, I prefer sans-serifs, and use Verdana almost exclusively on any web stuff I do.

Tahoma: Where I work, they're introducing Microsoft SharePoint for workflow management and communications, and I'm in charge of customizing the interface to our corporate standards (pain in the ass, screw you MS), and out of the box, SharePoint pretty much uses Tahoma everywhere. Personally, I prefer Verdana.

[MickMcGeough]

I stick to (the right) serif font for very large bodies of text, but otherwise it really depends on the site. Using only sans serif for headings is wrong.

[Shazam]

I hear black text on an orange background is the best.

[Rathji]

Originally Posted by Frankster

Are you at MRC taking Foundations?

No, just picking up an elective at UofC

[chalms04]

Comic Sans has something it would like to get off its chest:

http://www.mcsweeneys.net/links/mono...comicsans.html

[getbak]

Originally Posted by chalms04

Comic Sans has something it would like to get off its chest:

http://www.mcsweeneys.net/links/mono...comicsans.html

Lazy font didn't even use itself to post its rant.

[Flames0910]

Originally Posted by chalms04

Comic Sans has something it would like to get off its chest:

http://www.mcsweeneys.net/links/mono...comicsans.html

ahahaha
i'm the best motherfukin font since johan in gutenburg!
this, ima get smashed with papyrus.