What font size is BEST for website content?

[Gemini23]

What font size is BEST for website content? (in terms of usability)

Okay, How long is a piece of string you may ask...

Does Google have a preference for font size and colour for SEO purposes? I am not aware that they do...

I have used 12px for some time... I need to use reading glasses for close-up work but this font size seems to fit in with what many other websites in my field use.

However, I recently read on a 'usability' gov website that the recommended is for 12pt to be used....

This is somewhat large I fear... AND on the actual website where they recommend webmasters to use 12pt THEY are using
9pt 12px 0.75em 75%

Curious as they are recommending using 12pt 16px 1em 100%

Any comments? (in a font size of your choice)

[lucy24]

The answer nobody wants to hear:

Use the size the user has selected as their default. Let the CSS for specific areas say large, small, 85%, 200% and so on-- all of which will be interpreted relative to the user's preferred size or to the inherited size-- but never ever ever an explicit number.

[penders]

16px would seem to be the default font-size on desktop browsers under Windows. But the default font is also "Times New Roman". 16px Times New Roman looks correct. 12px Times New Roman is generally too small. However, 16px (made for web) Verdana is too big for most, but 12px Verdana is "just right". So, whatever font-size looks "right" is very much dependent on the font used IMO.

w3.org uses your browsers default, only specifying sans-serif (rather than serif), which is more readable on screen.

[lucy24]

So, whatever font-size looks "right" is very much dependent on the font used

Especially the generic font-family. Most sans-serif fonts have a proportionally bigger x-height and therefore "read" bigger than serif fonts of the same point size. Lacking full implementation of font-size-adjust, I've sometimes fudged it by including "font-size: 95%" whenever a sans-serif font shows up in close conjunction with a serif font.

:: shuffling papers ::

From the CSS 2.0 specs [w3.org] ... which is why I've still got both 2.0 and 2.1 bookmarked ;) Scroll down for nicely dramatic series of illustrations.

###. Forums don't seem to want to include the #propdef-font-size-adjust part, so you'll have to cut & paste or do a bit of further clicking.

[penders]

Thanks for the info lucy24. I was not aware of the font-size-adjust property. ...Introduced in CSS 2.0, removed in CSS 2.1, but could be back in CSS 3 [w3.org]? However, as you say, browser support has been bad. Is Firefox the only browser [developer.mozilla.org] that supports this, or have other browsers recently started to adopt this as well?

[rocknbil]

I have used 12px for some time...

Because of the fluid nature of text - probably the most fluid, for all the reasons above - it's a general consensus that font sizes be specified in 1) em's or 2) percentages. I say that with the utmost hypocrisy because I, too, am often an assigner of pixel sizes for fonts. Often it's the only way to control the design the way the client wants. They really do know everything, just ask 'em. :-)

[Gemini23]

An interesting topic... one question with muliple answers... I like your last answer rocknbil - no pun intended in your last sentence? "just ask 'em"

[lucy24]

Is Firefox the only browser [developer.mozilla.org] that supports this, or have other browsers recently started to adopt this as well?

There was a little bit of blahblah about it in a fairly recent thread in this forum.

:: shuffling papers ::

[webmasterworld.com...]

Basically everything except (!) AppleWebKit-based browsers. Well, probably not MSIE either. I try not to think about it unless I have to.

Have never figured out how to link to a specific post. Guess it won't show up in green for you. Oops.

[rocknbil]

Yeah Brett's redirect kills the pound signs. You used to be able to . . .

[alt131]

Yeah Brett's redirect kills the pound signs.

Sure does - I suggest using the specific section number and title as the link text so it can be identified from the page index at the top of each page. Also, regulars may have noted that when Paul tried to reference the Moz documentation a while ago an https is nolonger automatically linked. A workaround is to use an ordinary http as that is currently being redirected correctly at the Moz end.

[rocknbil]

https is nolonger automatically linked

That's not a bug, that's a feature. I use it in sample code so it doesn't link to the resource lol . . .

OK veering OT now, as you were . . .

[cssHTML]

Yes, of course allways let the user decide. And, many users want BIG sizes, let them increase.

[edited by: alt131 at 6:54 pm (utc) on Aug 26, 2011]
[edit reason] Thread Tidy [/edit]

[Xapti]

While people already mentioned that one should use EMs or % for font sizes, Another important factor when doing this is allowing the website to flow.

Elements which do not have automatic width (generally should be all but one along any horizontal point) should be sized with EMs (not % since it is interpreted differently for containers) as well, so that the containers scale properly and do not break the layout.

The biggest problem a designer may encounter is dealing with images. They should not be a major issue when you design properly though. In cases where an image should fit into a certain text area (mixed content), it is perfectly valid to also scale the image with EMs (yes you can do that — use style="" or a style sheet though). It may not appear the best depending on the browser's anti-aliasing/interpolation, but generally it will look great nowadays.

All too commonly, I see websites which have constricted containers resulting in broken-looking pages, I think it's terrible.

[londrum]

All too commonly, I see websites which have constricted containers resulting in broken-looking pages, I think it's terrible.

it's surprising how many *huge* sites have a fixed width to prevent this. look at bbc.co.uk. if you reduce your window even a fraction below 1024px then it starts cutting stuff off with the horiontal scrollbars. Yahoo is the same. the layout is totally fixed. what's happened to fluid layouts?

[Marshall]

what's happened to fluid layouts?

The problem has become wider monitors. Should the user have one say 2,000 pixels wide (or wider even), a paragraph becomes a loooong sentence and, in my opinion, annoying to read.

Depending on the type of site, wider is not necessarily better. In fact, it could have a negative impact.