Forum Moderators: not2easy
Can each person state what font size they think is the smallest for a comfortable read and why they use this size.
I feel very comfortable reading 14 point but I can handle 12. I don't wear glasses or anything like that.
Using Mozilla on Linux I often find sites with unreadable small text, with what appears to be 7pt or 8pt, but I guess it is readable for some in msie.
Are text displayed at the same size in MSIE and NN7/Mozilla on windows, given the same stylesheet?
On a site of mine I ended up making one stylesheet for MSIE, which is the bulk of the visitors, and one for everybody else that renders well in Mozilla.
René.
Nick
I like for my text to be around 12-14px myself.
As for IE/Moz rendering, here's my experience. At work, I have found that it takes very little for me to make a page look the same in IE and Mozilla with a single style sheet as long as I avoid positioning elements directly. Setting margins and padding works find, but if I use "height", "width", "left", or "top", things get weird.
Other than that, the only diferences I've run up against are spacing issues, where IE seems to generally default to more whitespace than Mozilla does. I've been able to deal with it just by setting things explicitly even though I was happy with the defaults in one or the other.
I'm with Nick on 1em...for this reason...I'm diabetic and my eyesight varies dramatically depending on my blood glucose levels...sometimes I need massive text, sometimes I have perfect eyesight...if you allow me to see the text at my default size then I can simply set my browser the way I need it...I NEED to be able to resize text, and I'd much prefer to be able to do it for all sites rather than having to override settings one at a time
You may generate some hearty disagreement with a choice as small as 9px. That is at the legibility threshhold for what some systems (especially older Macs at 72ppi) can render at all.
What is it about such a small font size that you like?
With very few folks using a screen less than 15" 10px should do the job IMHO. I have to say that although big often looks ugly to me, it does generate more sales...maybe because people can read it?
If the audience is over 40-45, then go larger. Most perople in that age group are starting to suffer from deteriorating vision :(
While allowing for those differences, you should still remember that anything under 10px is NOT comfortable reading for any length of time.
although big often looks ugly to me, it does generate more sales
That's the whole point. It doesn't matter what "looks" elegant to a right brained, aesthetic orientation. What matters is not just reading, but COMFORTABLE reading. You gotta grab both sides of the brain to get a sale -- and reading on-screen is already tough enough.
If the font isn't a comfortable size, then the left brain just flickers off. But we want random words here and there to register for them, even if they are just skimming. That phenomenon doesn't happen as often with small fonts, as pretty as they may be.
I was a reluctant convert on this issue. My earliest sites were always <font size=-1> or even <font size=-2>. And then through a trade show connection I met a firm-but-friendly editor for a major web portal -- she urged me to kick it up a notch, and I'm very glad I listened.
Instantly sales improved -- with the same traffic, same content.
[edited by: tedster at 11:14 am (utc) on Nov. 11, 2002]
Thanks mrnoisy. I am just getting into style sheets. Can you explain how to set up a page with multiple style sheets where a user could request a different style sheet?
OK, put something like this in the head:
<LINK REL=stylesheet HREF="style1.css" TYPE="text/css" media="screen" title="style1">
<LINK REL="alternate stylesheet" HREF="style2.css" TYPE="text/css" media="screen" title="style2">
this in the body:
<a href="#" onclick="setActiveStyleSheet('style1'); return false;"><img src="image.jpg"></a>
<a href="#" onclick="setActiveStyleSheet('style2'); return false;"><img src="image2.jpg"></a>
style1.css is your regular stylesheet and style2.css has a larger font-size specified. Just make the link to style2 a button with "click here for larger text" or something like that on it. I hope that helps.
After what some of you have said I may have to rethink my 9px strategy. I just thought it looked better, but I have good eyesight and a modern monitor. :)
[edited by: tedster at 11:08 am (utc) on Nov. 11, 2002]
[edit reason] added quote box [/edit]
10px is my personal pref. My clients like 12px...but I have some very old clients.
As someone else mentioned, figure out your target audience. I can't tell you the number of sites I have arrived at only to discover I can't read the carnfounded things. I'm outta there with the click of my back button!
Big may be ugly, but if it means the difference of being able to read it or losing a potential customer ... well its simply a no brainer. 12px min.
Sigh, sometimes you design guys forget what (and who) its all about.
I think relative font sizes are the most important part of web design in today's day and age. I run my screen at very high resolutions because I always have 50 things going and like room on the desktop. I tend to boost up my browser to 1 size larger than default so I can read it without changing my display rez. My father, who uses my computer a lot, is an old fart who surfs at 800x600 with fonts tweaked up 1 because old farts are blind.
Sites that don't allow me to control this usually get ignored by me unless they are VERY informative and/or they are the only answer I can find.
G.
I just spent the whole weekend introducing myself to CSS. Seems very powerful as a design and layout tool.
The readability is affected in three ways:
1) If the writing is too small, the user can usually read it, but becomes so slowed down that they will not bother to read it.
2) If the writing is too large, it is easy to read but the scanning of the eye has a maximum speed before too much blurring occurs and this can cause the reader to be forced to read slower or use 'patterning' (recognition of word shapes, rather than reading of the words). Patterning is a main cause of mis-read information.
3) If the writing is too large, the reader must flick back to the start of a new line too regularly. This causes a tiny dizzy effect and can put many readers off.
Balance is the key.
Font usability:
[psychology.wichita.edu...]
[psychology.wichita.edu...]
Like many other studies, most people find Arial 12pt to be the "just right" font to read.
A fascinating chart showing text sizes that your browser is showing on top, and actual scanned graphics of those point sizes at the bottom. How far off is your browser?
Font comparison [psychology.wichita.edu].
Line height is another consideration in text legibility... in many cases, increasing the line height to put a little more space between your lines of text increases the readability of smaller type considerably.
I actually get at least one or two emails a month from random users telling me how easy the site is to use, etc., etc.... so, given what a low percentage of people generally bother to give feedback about anything, I'm assuming that the current rate of positive feedback means I'm doing something right.
Obviously people are bothering to read it, and they're finding what they want. (...and yes, we do receive more positive feedback than negative, by at least 3x. ;) ...and even so, I try to "fix" whatever it was about the site that causes each case of negative reponse.)
That said, in the upcoming site redesign I'm planning, I was thinking of switching the fonts to relative sizing like "small" or something variable like that... not because I've ever gotten a complaint about it, but rather because of all the testimonials from people like tedster, who sacrificed their aesthetic vision before me and have reported back from the "other side"... hehehe.
chart showing text sizes that your browser is showing on top, and actual scanned graphics of those point sizes at the bottom
Wow... that's really cool. And even better, my laptop appears to be spot-on. :)
My font styles, when using sans-serif, usually go in this order:
{ font-family: Verdana, "Trebuchet MS", "Lucida Grande", Geneva, Arial, sans-serif; }
And getting back to topic, I would go with 12px as a default, then vary according to your audience. I personally prefer 14px on my 1600x1200 monitor when there is lots of text to read.
I would suggest Verdana in lieu of Arial. Verdana is specifically designed for screen legibility, with wide characters and large x-heights. While Arial is commonly used on Windows systems, it isn't necessarily the most legible, and might be better as a second or third choice.
I like Verdana for navigation text, and it's fine for very short copy blocks, but I don't think it's a good choice for body text. For that, I prefer good old-fashioned serif type. It's good enough for The New York Times, and it's good enough for me. :-)
(Of course, the ideal typeface for body type is whatever the user's browser default happens to be.)
I *hate* sites that have the font size set to 10, or 8, or heaven forbid 6. Web pages should not be specifying font sizes - why override the user defaults? You don't know better than the user how good their eyes are, how big their monitor is, what the lighting is like, and so forth.
But I imagine the everyday web surfer out there isn't even aware of the fact that you can change font sizes on a webpage (assuming the webmaster isn't using css).
For this reason, and to make things easier on me, I typically use 12px and will never go below 9px.
NORMAL LETTERING
14pt Verdana, Tahoma, Arial
ENHANCED LETTERING
16pt Bold Verdana, Tahoma, Arial
SMALLER LETTERING
12pt Verdana, Tahoma, Arial
For those who question why the need to set font sizes, it's simple. Not all sites are simple free-flowing text. I detest frames but I always use PHP and tables to achieve the same effect with a single page and, due to the need to lay out the tables correctly, I use style sheet text sizes to line areas up. If I allowed the user to set the text sizes themselves, the whole layout gets screwed.
The ideal is to have 2 styles sheets as mentioned previously. Both are identical apart from one definition, which is larger in one than the other. A simple button toggles the two. Then, ensure that only large bodys of text are set using that particular definition and everything else on the page remains lined up.
PS. Verdana is easiest to read due to it's width. Tahoma next due to it's clarity (though it's narrower than I prefer), and I only use Arial as a default because almost everyone tends to have it installed somewhere.
I always use Arial only because thats the font I always have used. Doesn't the person viewing my page have to have the font I've used installed on their PC, otherwise it will be displayed using some other font for which I had not intended? If this isn't the case then great I'll use something like verdana or futura.
