homepage Welcome to WebmasterWorld Guest from 54.166.53.169
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

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

CSS Forum

This 43 message thread spans 2 pages: 43 ( [1] 2 > >     
Whats the smallest text you can read comfortably?
Using CSS and thinking about upping the text point size.
thunderpaste

10+ Year Member



 
Msg#: 386 posted 2:25 pm on Nov 9, 2002 (gmt 0)

Hello, I am hoping to take a poll on what text size people feel is readable easily. After reading Brett's interview I became afraid that our fonts are too small but want to get a little input.

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.

 

seindal

10+ Year Member



 
Msg#: 386 posted 4:20 pm on Nov 9, 2002 (gmt 0)

Font sizes appear to vary quite a bit between platforms, and maybe even between browsers.

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_W

WebmasterWorld Senior Member nick_w us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 386 posted 4:24 pm on Nov 9, 2002 (gmt 0)

One em ;)

Nick

martinibuster

WebmasterWorld Administrator martinibuster us a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



 
Msg#: 386 posted 5:40 pm on Nov 9, 2002 (gmt 0)

Mac computers have difficulty rendering small type because of their anti-aliasing scheme.

I like for my text to be around 12-14px myself.

dingman

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 386 posted 6:53 pm on Nov 9, 2002 (gmt 0)

I think Nick is obviously correct about the best font size :)

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.

NFFC

WebmasterWorld Senior Member nffc us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 386 posted 7:27 pm on Nov 9, 2002 (gmt 0)

As a designer I like 11px, as a user I'm happier with 12px. The next site we are working on will be 12px for the first time.

Eric_Jarvis

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 386 posted 3:01 am on Nov 11, 2002 (gmt 0)

first...pt is no use for screen display...one point is 1/72 of an inch...that means nothing in terms of screen display and consequently is rendered very differently by different systems...it should NEVER be used in anything other than a print only style sheet

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

mrnoisy

10+ Year Member



 
Msg#: 386 posted 4:45 am on Nov 11, 2002 (gmt 0)

I like to use 9px. Using a screen font like verdana instead of a print font like times or arial makes it easier to read because the font lines up with the pixels. Screen resolution affects relative font size. Also providing an alternative style sheet with larger font size for vision impaired people is a good accessibility idea.
This is my first post to this great forum.

thunderpaste

10+ Year Member



 
Msg#: 386 posted 6:03 am on Nov 11, 2002 (gmt 0)

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?

tedster

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 386 posted 6:12 am on Nov 11, 2002 (gmt 0)

Welcome to WebmasterWorld, mrnoisy.

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?

percentages

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 386 posted 6:24 am on Nov 11, 2002 (gmt 0)

10px is my personal pref. My clients like 12px...but I have some very old clients ;)

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?

austtr

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 386 posted 6:57 am on Nov 11, 2002 (gmt 0)

Take into account also the age of your likely audience. If you are doing a site that is youth oriented, you can get away with the smaller sizes.

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.

tedster

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 386 posted 7:26 am on Nov 11, 2002 (gmt 0)

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]

mrnoisy

10+ Year Member



 
Msg#: 386 posted 9:57 am on Nov 11, 2002 (gmt 0)

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]

corny

10+ Year Member



 
Msg#: 386 posted 3:19 pm on Nov 11, 2002 (gmt 0)

I use the font-size keywords. Is there any reason to use ems instead of those or vice-versa?

Liane

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 386 posted 3:26 pm on Nov 11, 2002 (gmt 0)

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.

Grumpus

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 386 posted 3:52 pm on Nov 11, 2002 (gmt 0)

Most browsers come with 12px out of the box. If you use relative font sizes, you don't need to worry about it as much as the new browsers will let users tweak it up if they are blind and tweak it down if you're too "in-their-face". I run at default size for important stuff and "-1" for long text and paragraphs, and reading and the like. "-2" for notations, and things that need to be there, but don't need predominance on the screen (use all caps if you go below -1 or 10pt and it's a lot more readable).

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.

thunderpaste

10+ Year Member



 
Msg#: 386 posted 5:24 pm on Nov 11, 2002 (gmt 0)

Great input and thank mrnoisy for the lesson on alternate style sheets. I changed our site font from 12 to 14 pt. arial and will let everybody know if we see an increase in sales.

I just spent the whole weekend introducing myself to CSS. Seems very powerful as a design and layout tool.

gsx

10+ Year Member



 
Msg#: 386 posted 5:42 pm on Nov 11, 2002 (gmt 0)

I use 12px for the majority, 10px for small writing designed to be ignored to some degree (addtional information such as disclaimers).

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.

Brett_Tabke

WebmasterWorld Administrator brett_tabke us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 386 posted 4:17 am on Nov 14, 2002 (gmt 0)

Whatever you decide, take some time and go read at the OptimalWebDesign site at:
[psychology.wichita.edu...]

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].

mivox

WebmasterWorld Senior Member mivox us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 386 posted 6:47 am on Nov 14, 2002 (gmt 0)

The smallest I am comfortable reading onscreen personally is Verdana 10px... I have my employer's site set with 10px Verdana with a 15px line-height as the default "body text" setting.

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.

mivox

WebmasterWorld Senior Member mivox us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 386 posted 6:53 am on Nov 14, 2002 (gmt 0)

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. :)

Quagmire

10+ Year Member



 
Msg#: 386 posted 5:00 pm on Nov 14, 2002 (gmt 0)

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.

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.

Quagmire

10+ Year Member



 
Msg#: 386 posted 5:02 pm on Nov 14, 2002 (gmt 0)

Or from a strict accessiblitiy perspective, it's better to use CSS keywords, like small, x-large, etc. But the problem is that not all browsers interpret them the same, and your type may look too large or small on some platform/browser combos.

europeforvisitors



 
Msg#: 386 posted 5:47 am on Nov 18, 2002 (gmt 0)

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.)

danny

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 386 posted 6:31 am on Nov 18, 2002 (gmt 0)

I have my default font set to 18, and find anything smaller than 16 very hard to read... But I have a large high-res monitor.

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.

hobbnet

10+ Year Member



 
Msg#: 386 posted 7:38 am on Nov 18, 2002 (gmt 0)

Setting the font to a size w/o a stylesheet is great for a surfer who is more computer savvy. If the font is too large for them, they will change it to a smaller font and vice versa.

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.

mellonhead

10+ Year Member



 
Msg#: 386 posted 10:28 am on Nov 18, 2002 (gmt 0)

So what do you guys think of Tahoma then?

kcartlidge

10+ Year Member



 
Msg#: 386 posted 5:02 pm on Nov 18, 2002 (gmt 0)

Havin designed many sites and used everything from 640x480 laptops through to 1600x1280 21" monitor, I now do all my text as follows:

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.

JonnyWales

10+ Year Member



 
Msg#: 386 posted 10:01 am on Nov 19, 2002 (gmt 0)

"Using a screen font like verdana instead of a print font like times or arial makes it easier to read because the font lines up with the pixels."

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.

This 43 message thread spans 2 pages: 43 ( [1] 2 > >
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.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved