homepage Welcome to WebmasterWorld Guest from 54.227.141.230
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
What font size is BEST for website content?
Gemini23




msg:4353785
 3:15 pm on Aug 20, 2011 (gmt 0)

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




msg:4353871
 9:26 pm on Aug 20, 2011 (gmt 0)

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




msg:4354067
 11:49 pm on Aug 21, 2011 (gmt 0)

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




msg:4354076
 12:47 am on Aug 22, 2011 (gmt 0)

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




msg:4354247
 4:38 pm on Aug 22, 2011 (gmt 0)

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




msg:4354249
 4:43 pm on Aug 22, 2011 (gmt 0)

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




msg:4354257
 4:52 pm on Aug 22, 2011 (gmt 0)

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




msg:4354342
 10:06 pm on Aug 22, 2011 (gmt 0)

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




msg:4354582
 4:08 pm on Aug 23, 2011 (gmt 0)

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

alt131




msg:4354655
 8:25 pm on Aug 23, 2011 (gmt 0)

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




msg:4354889
 3:51 pm on Aug 24, 2011 (gmt 0)

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




msg:4355440
 7:09 am on Aug 26, 2011 (gmt 0)

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




msg:4355982
 12:44 am on Aug 28, 2011 (gmt 0)

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




msg:4356037
 9:47 am on Aug 28, 2011 (gmt 0)

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




msg:4356074
 5:13 pm on Aug 28, 2011 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved