I’ve always read/been told that you should use Serif fonts in print and Sans Serif fonts online.
Do you agree with this?
I see that a lot of online newspapers use Serif fonts.
Sincerely,
TomTees
Hi Tom
From a print perspective, it is not about using only a Serfi typeface exclusively, but rather choosing one that will compliment your design and be an effective mechanism in translating your concept.
As with webdesign, it is best to stick to a limited range of typefaces that are able to be used on multiple browsers. Standard typefaces which include Arial, times, courier, Verdana Georgia.
In any case you probably know this and my list is not the best. But I would say choose a typeface that suits the content. For example, an online newspaper, as you have mentioned, may choose times new roaman. But that’s not to say that it wont look good with tahoma.
A sans-serif typeface adds readability. The sans means ‘without’ the superfluous decoration you find on typefaces such as Times. Another thing to consider with serif fonts is what their ascenders and descenders are doing. Often these can be longer and shorter (BTW they are how far a y goes down the page, or how hight the top of a t goes). The x height will also be affected.
This means you will need to adjust your leading tracking/ kerning to suit (that’s the distance letters/words are apart and line height).
A good place deepen your understanding of type face usage is at the beginning.
The best computer montior in the world sucks badly in comparison to the cheapest newsprint. Serifs work on paper to help guide the eye and are often desireable. On computer screens they only confuse the eye and make the text harder to read, and should be avoided except in headings where they are large enough to look OK.
The web is not paper, and it isn’t going to be paper anytime soon. When monitors get down to around 300 pixels to the inch then serif fonts might be a workabale idea, but that ain’t gonna happen any time soon and so you sould continue to avoid serifs for normally sized text.
I don’t agree.
Design has guidelines, not rules.
Though as far as readability goes, online text is easier to read with sans-serifs, and print is easier with serfis, a large enough serif can work beautifully online as a header. Most sites should limit themselves to no more than 3 typefaces IMO, and there needs to be a good differentiation between the fonts.
Tahoma mixed with Verdana is too similar. But use Georgia for a header and Tahoma for a body text and you have a much more harmonious difference.
Duly noted.
However, why then, do major websites like the New York Times, LA Times, Wall Street Journal, Time magazine, etc use Serif fonts?
TomTees
Firstly, when it comes to professionalism in all it’s ways, there really are no standards out there; just guides. Visual design is subjective, like art; what one person likes, others may not. I try for what is called the LCD approach (lowest common denominator).
This means appealing to the widest amount of people possible.
Look at Google. Undoubtedly a powerhouse monstrosity of search incredible-ness, and yet their website frontpage, as beautifully minimalistic as it is, as of this writing, has 82 validation errors.
Serifs have their place, even in web-based typography. I personally don’t feel we need 300-ppi capable monitors to appreciate what serifs have to offer via screen mediums.
As for NY Times (one of your examples), as proven with Google, just because you’re popular, doesn’t mean you’re high quality; and people will argue what quality really matters with the service they provide. NYT uses larger, bolder serif fonts (Georgia, I believe) for titles, and this looks great, but they also use Georgia for body text, which I personally feel a nice font like Calibri or Myriad Pro would work better.
It’s important, IMO, for headers and body text to by harmonious, which oddly enough, means they need to have significant differences to each other; but need to compliment each other as well.
(Oh, and NYT has over 380 validation errors. That’s disgraceful and embarrassing in my books)
I would agree with that as a general guideline for body text. At normal body text size on screen, the letters are usually too small for serifs to show cleanly and without dominating the letter shape. Some fonts that have been specifically designed for screen use (such as Georgia) are undoubtedly better than the generic but awful TNR, but they still look fussy compared with the clean sans-serif shapes of Arial, Verdana, Trebuchet or Calibri.
For print, the serifs will help to lead the reader’s eye along the line and make it easier for people to follow the text.
That’s all for body text - that doesn’t mean you shouldn’t break with that style for headings, boxouts and so on. While you don’t want to go mad with too many different fonts (or it starts to look like something your great-aunt did in Word the first time she found out how to change fonts…), if you choose fonts that complement each other you can get a good effect by using serifed headings and sans-serifed body text.
As to why many newspaper sites use serif fonts, I would guess that they are trying to replicate their print style. The news site that is generally recognised as one of the best in the business (the BBC) currently uses Arial, and previously used Verdana. Just because some news sites use serif fonts does not mean it’s good practice!
Well, that is sorta what I want to avoid… doing what the masses do and crave. (Very unoriginal!) 
Look at Google. Undoubtedly a powerhouse monstrosity of search incredible-ness, and yet their website frontpage, as beautifully minimalistic as it is, as of this writing, has 82 validation errors.
Yet another sign that Google is evil!! 
NYT uses larger, bolder serif fonts (Georgia, I believe) for titles, and this looks great, but they also use Georgia for body text, which I personally feel a nice font like Calibri or Myriad Pro would work better.
It sounds like you know fonts pretty well!
Is there is an easy way to know what fonts a website uses? (Sometimes trying to find the right style sheet on a major website is nearly impossible!)
So tell me more about Georgia and Calibri and Myriad Pro.
What do you like about them?
How are they different from other fonts?
Are they very well supported in browsers?
It’s important, IMO, for headers and body text to by harmonious, which oddly enough, means they need to have significant differences to each other; but need to compliment each other as well.
So how do you learn what is “harmonious”?
(Oh, and NYT has over 380 validation errors. That’s disgraceful and embarrassing in my books)
I just like the look of their content. Not saying I want their entire look. And I certainly would like to write error-free code!
TomTees
To me, I think Serif fonts look amateurish. They look like they were created by a programmer! 
What I like about the look of the websites I mentioned above is that they look more “professional” and “distinguished” in terms of content.
if you choose fonts that complement each other you can get a good effect by using serifed headings and sans-serifed body text.
So how do I know which Serif and Sans-Serif fonts go well together?
Also, isn’t the opposite for print? I remember learning that body text should be Serif, and headings should use Sans-Serif.
As to why many newspaper sites use serif fonts, I would guess that they are trying to replicate their print style. The news site that is generally recognised as one of the best in the business (the BBC) currently uses Arial, and previously used Verdana. Just because some news sites use serif fonts does not mean it’s good practice!
Far enough. With my American bias, I haven’t looked at the BBC’s website, but will now. (I did notice last night that USA Today uses Sans-Serif fonts to good effect.)
TomTees
Here is an old article talking about the NY Times font.
Not sure what they currently use.
BTW, can you sue that font or is it copyrighted?
TomTees
You’re over analyzing design too much. You’re looking for a logic out of it, and there really isn’t any. I understand you’re trying to find principles that help create popular typography, but there is honestly a huge amount of information in regards to how fonts work with your project.
I use Firefox 3.6 with Firebug plugin. When a website loads up, you can inspect an element (like a paragraph tag that has a font you like) and it’ll tell you the CSS properties applied to it, which include the font used.
Understand that if you specify a font that the user does not have on their machine, users will not see it. How to specify the order and font name is known as a “Font Stack”. Do a Google search on that in order to find out what I mean.
Why I like fonts like Myriad Pro is impossible for me to put into words. I can’t tell you why I like it so much, but I really do; it has a timeless classy quality. Don’t forget that with Myriad Pro, you can have different font faces like: Oblique, Condensed, Regular, Italic, Semibold, Semibold Italic, Bold, Bold Italic, Black, Black Italic, etc.
You can use it as it come with the Microsoft package and is free license. As far as I know.
Because said companies STILL have no clue how the web even works, which is why their websites are illegible inaccessible bloated trash? I don’t even want to THINK what their bounce rates are. (or absurd hosting costs)
Those ones listed still have their heads wedged so far up print’s backside they’re tasting tonsils, and wouldn’t know accessibility if it took a dump on them from orbit!
Let’s look at the NYT – font sizes below accessibility minimums in serif face, color contrasts (grey on white?) below accessibility norms, fixed width layout that isn’t even 1024 friendly, website functionality that is broken in many places when javascript is disabled, nonsensical heading tag orders (h6 preceeding h2, jumping to h6 from h2), static scripts and style inlined in the markup – endless repetitive classes for nothing, tables for layout, oddball uneven paddings between elements making it hard to tell where anything begins or ends… shall I go on? Top to bottom we’re talking a laundry list of “how NOT to build a website”
Just because it’s a professional website doesn’t mean it’s professional quality – the sites you listed being some of the worst there are online… Well, at least until you look at anything made by Microsoft or Yahoo.. Entirely typical of the ‘big name print world’ companies who just don’t get that (as Ed said) the Internet is not PRINT!
Most of said websites are so ineptly coded and constructed that frankly I wonder how in the bloody blue blazes any of these people are able to keep their jobs; I guess it’s a case of “never underestimate the stupidity of their boss.” – how else does one get away with blowing half a megabyte page load built around 130k of markup and 90k of javascript totaling no less than 100 separate files on delivering 12k of plaintext content!
It’s called ineptitude – and usually the bigger the brick and mortar name, the worse it gets as these companies STILL think of the Internet as a cute side addition to their company not realizing that for many of them (like newsprint) their days are counted. It’s not a question of IF they’ll become irrelevant, but when.
Hence the half minute page-loads on my 22mbps downstream connection… and hence why I don’t go to the print outlet websites as usually the TV stations at least seem to ‘get it’ a bit better.
So taking web tips from their sites? Even for something like fonts just say NO!
deathshadow, what a pleasure to read your post, a very serious indictment of the horrors of form over function
“tasting tonsils” and “from orbit” are memorable
when will people learn that web design is all about how something works, and not how pretty it is
The easiest way is to use a developer tool like Firebug (Firefox) or Dragonfly (Opera). This will tell you what fonts have been set, although it’s up to you to know whether you have the first one listed installed on your computer!
So tell me more about Georgia and Calibri and Myriad Pro.
What do you like about them?
How are they different from other fonts?
Are they very well supported in browsers?
These fonts were all designed for screen use rather than for print, which means they work well at small text sizes, with the letterforms aligned up with the pixel grid, so they retain their shape and easy legibility.
Georgia is very widely installed. Calibri is fairly widely used - it is part of the standard package on Windows Vista and W7, but is also available with Office 2007 and Powerpoint Viewer 2007 on older OSs. Myriad looks great but isn’t very common out there in the real world of home PCs.
So how do you learn what is “harmonious”?
The same way you learn which colours are harmonious, and what design features complement each other well. Try them and see. If you don’t have an arty bone in your body, ask other people. Good design is rarely a right or wrong answer, but a consensus opinion will generally guide you the right way.
That is the general guideline for print, yes. So it’s worth thinking about that when you write your print stylesheet - you then have to decide whether to swap the serif and sans-serif fonts over to get the best font for each media, or whether to keep them as they are on the screen to reinforce consistent branding and design.
Assuming you’re just specifying the font using ordinary CSS, you can set any font you want … but if the user hasn’t got it installed on their computer, they won’t see it in that font. There’s no harm in specifying a slightly more obscure font as the first choice, if you can find a more common (but similar) font to use as the second/third choice.
If you are looking at embedding the font so that users’ browsers download it and use it then yes, you would need to look into licensing restrictions. I doubt that they use the same font on their website as they do in print!
That link takes me to an Adobe page where you have to spend a couple hundred dollars to buy the font.
So wouldn’t that create the exact problem of people not having the font that you describe above?
TomTees
A few comments…
1.) I just said that I liked some of the fonts on the websites mentioned earlier. I never said I liked their entire layouts, nor did I say I liked how things were coded.
2.) According to you, r937,
web design is all about how something works, and not how pretty it is
Well, being successful in business and making $$$ IS about how things appear and how they are perceived. No one visits a website because they have the tightest HTML and CSS code around. (Well, unless you don’t have a life!)
Being a good business person - but also someone who takes pride in his IT work - my goal is to achieve both: A professional-looking design and layout, with respectable code that is accessible to as many people as practical.
I do believe you can have both.
These are not mutually-exclusive concepts as you seem to imply.
TomTees
Is there someone that lists all of the Common Fonts and has a picture of each - so you see what they should look like? (Almost like an "Online Library of Computer Fonts?!)
So what do you think are the Top-5 Serif and Sans-Serif Fonts for online??
And why?
TomTees
I spent some time browsing over their site last night. (Haven’t been there in ages.)
You are right, they do have a really nice looking website - both layout and font too!
TomTees
Why the BBC would go from a font designed for readability (and one of the few who can tell I from l) like Verdana to something that isn’t anywhere as good (Arial, who canNOT tell I from l), I have no clue. Verdana has a larger x-height at the same font-size setting as other fonts… that alone makes it a winner. Arial gets damn small damn fast for me. But, ok, it’s the cheerleader/football jock of fonts, everyone uses it…
but anyway…
Well, that is sorta what I want to avoid… doing what the masses do and crave. (Very unoriginal!)
When it comes to artsy “design”, go ahead, be original.
When it comes to usability (and this includes readability), don’t be original. Use what works and is easiest for real human beings. Art is not readable. Science and user studies point the way. Do the right thing, as often as you can get past your clients (hint: tell them it’s good for SEO… works for me).
Well, being successful in business and making $$$ IS about how things appear and how they are perceived.
But is always secondary to usability. If it doesn’t work, we don’t care how lovely it is. The most awesomely beautifully designed can opener who is a pain in the butt to open cans with will sit in the drawer. Joe may take it out once in a while to show to his friends, but he’ll use the one he got at the ten-cent shop when he needs to open a can.
It has to work first, and then you can worry about looking more awesome than everyone else… and then you need to make sure the awesome-saus didn’t ruin the usability.
Is there someone that lists all of the Common Fonts and has a picture of each - so you see what they should look like? (Almost like an "Online Library of Computer Fonts?!)
I use this page (which is slowly starting to date): http://www.apaddedcell.com/web-fonts
Also the “Linux” here is “Ubuntu” though most of those fonts also work for Fedora and Open Suse as well.
But this one stays up to date more: http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml (but the disadvantage of this page is you have to click on “image” for every font you don’t have… and I don’t have 90% of those).
Oh, forget Vista fonts unless you are absolutely in love, for two reasons (and yeah, I’ll prolly be the only one here to say this… vista fonts have a lot of love, mostly because of the lack of ugly):
-most of them (not all) are tiny as hell. If 1em font size is readable in Verdana, it’s almost half that size in Calibri. Cute, but difficult to stack well. I tend to try to keep my font stacks with similar-sized fonts, so huge size differences don’t occur when font #2 or #3 is getting used instead of the first one I set.
-Vista fonts are not available to me. No Linux, no Mac, no ancient Windows (if you are targeting the corporate world, especially finance and banking with your site, expect they are using Windows 2000 servers and IE5 or 6… bleh. And no pretty vista fonts). So then unless you’re using the two or three who are not so damn tiny (and one of those is monospace so you’re not using it for body text anyway), you’ll have huge text-size differences between (new) Windows vs every other OS.