Best font and size for websites?

I am right now creating resource website that will have huge articles (some 8000-10000 words) so based on this readability is top priority for me.

Due to this the text would be displayed on a white background and the font color would be dark gray (almost like black but easier on the eyes) however one thing I cant seem to decided is which font I should use for this and of what size.

Can some one please give me a few pointers/recommendations on this?

 

A while back, I asked about which fonts were popular - there're some interesting answers given:
http://forums.digitalpoint.com/showthread.php?t=324052

I hadn't asked about the font size, but I personally prefer 12px.

And I like using Tahoma, Verdana, Arial, sans-serif for the main text and <h1>.

I always experiment with using a different font family, say trebuchet ms for <h2> and lucida sans unicode for <h3>.

Good luck!

 

I prefer Verdana, about 10-12px. Just don't make it too small if it's long articles.

 

I must say, I'm fond of a 10px sans serif, though maybe 12 if the content is a little thin

 

Use verdana 12 or 11 , or arial 12 or 11.. .. these font all neat to see in terms of body contents.. I really use these fonts always....

 

For good readability, there are a number of issues involved. They will assume greater than usual importance since you're talking about a lot of text.

Make your column of text no wider than 60–65 characters. Any wider and there is too much eye movement, leading to tiring. With a proportional font, that will be 30–32 ems. At default 12pt (16px) type, that's ≈480 to 500 px.

When choosing a font family, it is important to realize the screen is very low resolution, compared to print. Serifs help lead the eye on the printed page, but on the screen they tend to create a fuzzy effect unless the font size is fairly large. Stick with a sans-serif font.

Which sans-serif font? Font sizes are about the height of characters including the ascenders and descenders. But the eye is interested in the ex measurement, the height of the lower case body of a character. Among practical font families the aspect value (ratio of ex to em) is the important thing to look at. If a family has a small aspect value, meaning the lower case letters are much shorter than the upper case, you need a larger font size to match the readability of a family with a larger aspect value. Compare "URW Chancery L" to Verdana. The Chancery will need to be about 20pt to have the same readability as 12pt Verdana.

Comparing Verdana, Tahoma, Arial and "Trebuchet MS", we find Verdana and Tahoma have the largest aspect value, so they both appear larger than either Arial or Trebuchet MS. Verdana has very nice tracking (the spacing between characters), while Tahoma is a bit close; certain letter combinations appearing to run into each other. On Tahoma, increase tracking with {letter-spacing: 1px;}. Both Verdana and Tahoma could stand a bit more leading. The default in browsers is 1.2. Having {line-height: 1.25 || 1.3;} is a definite improvement.

Both Arial and Trebuchet MS have smaller ex values and will suffer if size is reduced. Tracking on both is pretty nice, the smaller ex size doesn't need the increased leading, though a little wouldn't hurt, say {line-height: 1.25;}.

There is a reason that the 12pt type size has been so common for so long. It is the single most comfortable to read and least tiring, for more people than any other size. That's why browsers, word processors, text editors and DTP applications all default, out of the box, to 12pt, or 16px (on the pc). Both Verdana and Tahoma could withstand going to 10pt (13px) if you use 1.3 or 1.4 line height. Arial and Trebuchet MS would suffer on reduction, as they already look smaller than the others.

Any of the four font families should do you well if you keep in mind their little quirks and make allowance for them.

You have a lot of text. Your visitor will appreciate your making it easy to read more than he'll ever care about some way kewl looking page with print that is hard to read.

cheers,

gary

 

I myself am an Arial 10pt fan

 

Verdana 12 pt

 

Thats about as much information as you could possibly ask for regarding fonts.
Thanks a bunch.

 

Just one more for you to check out...
http://battletech.hopto.org/for_others/font_test.html

This is not my site, just so you know. It belongs to a friend of mine.

 

Anyone has samples of websites using Verdana 12pt? I tried it on mine and think it looks a little too big.

The Digital Point Forum seems to be using 10pt Verdana, and I think that's just about right.

 

most of the webs are using arial, verdana, tahoma as a font family and font size 12px . font size and font family should be easy to read

 

Thanks every one, finally went verdana 12px. Easily readable yet looks good.

 

Use a standard font no matter what so then you know that the visitors browser supports it or else they wont even be able to read it.

I would proberly say 12pt for the size also

 

12pt is not the same as 12px - anyone knows how to convert between both units?

 

On a pc, screen resolution is ≈96 pseudo px per inch. At 72 pt per inch, each pt = 1.333 px. Thus 12pt is about 16px, 10pt is 13+px, 9pt is 12px. All this hinges on you having your resolution set appropriately for your screen size.

On Macs, they tend to be more carefully registered to 72 pseudo pixels per inch so that pt and px are roughly equivalent.

For the web, points are an inappropriate unit of measure. Ideally, you would set the global font size to a percentage of the user's default font-size, then set sizes for the selectors as em values relative to parent values.

cheers,

gary

 

Hey Gary, check out that link I gave the OP a few posts back. You might be shocked.

 

After Gary's excellent post, I think I'm more confused than ever as to what is the best way to set the font size, lol!

I'd be most grateful if anyone can suggest a "best practise" css style sheet for the following layout:

<html>
<head>
</head>
<body>
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</body>
</html>

... just something for me to get started with.

Thanks in advance!

 

I'd start with a proper DOCTYPE. You may also want to consider setting the font size in the BODY selector to be at 100% with a line-height of 1.2, and then scale the layout from there using EM.

Bear in mind this does have a drawback. Not all browsers use the same font size by default. Also, some people will use their own baseline font size. By setting the font size at 100% and the leading (line-height) at 1.2 you'll go a long way towards respecting these peoples' choices.

When using EM for measurement though, use the Lucida Console font for testing. Not all fonts have the same characteristics, and using Lucida Console for testing purposes will give you enough room to reasonably ensure that any font the user wishes to use will fit in your layout without breaking it. When you're done, remove the font from your stylesheet, but do not change the font size settings.

If you want to see how fonts behave cross-browser and on various operating systems, check this page out:
http://battletech.hopto.org/for_others/font_test.html

 

I saw nothing unexpected. I do think your friend drew an erroneous conclusion. Using point measures would be a Good Thing if you're styling for print, but it's not for the web, as it ignores user preference.

Consider this extreme (it makes the math easier) example:

There is a monitor that at standard resolution would be 1200×1600. Now assume the user has configured it to 600×800. Further, assume the browser's default 16px font is the desired size. It would be 12pt at normal rez, but is now effectively 24pt, or ⅓in.

When your friend now specifies 12pt, the font is back to â…™in, or half the size the user want/needs. The visitor now has to increase the size several increments. Did it break the layout? With that much change, likely.

Had your friend set the global size to 100% for the usual 16px/12pt or maybe 83.3% for a 13px/10pt size, the visitor would have seen his enlarged font in the same proportion to everything else on screen as your friend sees on his more normally resolved screen.

If the user sets his default size to some large value, don't you think he's aware of potential breakage caused by his own actions?

I think your friend is wrong, and he's trying to control things that are not his to control.

cheers,

gary