Whats the smallest text you can read comfortably?

Using CSS and thinking about upping the text point size.

[thunderpaste]

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.

[kcartlidge]

It's a rare setup that doesn't include Verdana, though it is possible.
But you see that's the beauty of the way the tag works. If you use
<font face="verdana,Arial">
for instance, directly within a page's HTML, then if the user has not got Verdana installed it will default to Arial in any case. It just works left to right until it finds one that's installed and then uses it.

Also note that not all users have Arial as standard either. Verdana does come with Windows in the same way as Arial, but I cannot speak for the Mac or Linux ...

[seindal]

I think most Linux users have the most common TrueType fonts installed, so Arial and Verdana won't cause a lot of problems for Linux users.

In any case a font specification in a FONT tag or in CSS should always finish with one of the standard font-family names, like 'serif', 'sans-serif' or 'monospace', så there is a usable hint to the browser about a default. That is, in CSS

font-family: Verdana, Arial, Helvetica, sans-serif;

Verdana and Arial will work with windows,
Helvetican with macs,
and sans-serif gives the correct default

René.

[chameleon]

I've heard that there are some bugs with using it (though I haven't personally seen any), but when possible I try to use percentages instead of Pixels or Points.

By saying something like:

.content {font-size: 85%;}
h1 { font-size: 150%; font-weight: bold )

I can get the "average" person to see my site the way I intended, but it's also responsive if you change the default font size in your browser. Make the default text LARGEST, and the fonts get bigger, etc.

For accessibility, this is a great way to go.

For more, check out IBM's Accessibility center (which I happened to do the coding for) for lots more of this kind of stuff:

[ibm.com ]

[seindal]

> h1 { font-size: 150%; font-weight: bold )

I believe I have seen something about some versions of MSIE misinterpreting this. The above should mean 150% relative to the surrounding text, but MSIE might make it 150% of the default size for <h1>, which is not the same.

Is this still so in recent versions of MSIE?

[pageoneresults]

A few years ago I also used pt instead of px. Switched to px after doing some testing and finding out that pt was not stable across all platforms.

I typically stick with verdana at 13, 12, and 11 px. Rarely will I drop below 11 and its usually a case of a client wanting something to fit within a specified area and not having enough room.

If using arial, I'll go up 1px to account for the differences in font width and height from verdana; 14, 13 and 12px.

I've been experimenting with relative fonts off and on. Unfortunately many designs that I am working with don't work with relative fonts. Too many things wrapping and causing problems with flow. That's what I get for working with fixed width designs! ;)

P.S. When viewing at 1024x768, the smallest size I can read comfortably is 11px verdana. Anything under that and I've got to lean forward. I do have 20/20 vision.

[Brett_Tabke]

Anyone check out what AllTheWeb has done recently for font sizes? Look in the upper right hand corner:

[alltheweb.com...]

That's cool. Nice work Fast.

[tedster]

should mean 150% relative to the surrounding text, but MSIE might make it 150% of the default size

That is an ambiguity in several browsers. "Percent relative to the parent element" is what we expect, but "percent relative to the individual browser's default size" is what we might get. I don't use percents for exactly that reason.

One em is always rendered as the browser default size by every browser I know of. So you can work with ems and be more confident that you are getting what you aim for... 1.5 em is always 150% of the user's font size setting.

[Shari]

Hi everyone--

We're a Mac-based firm, mostly because we're designers. We usually set font sizes between 10px to 13px, and they work quite well.

But it also depends on the font you are using. Verdana looks really good at smaller font sizes, even at 9px. Arial doesn't look so hot.

I know due to "liquidity" arguments, specifying a pixel size isn't recommended. However, I also know that the legibility of a layout can be compromized too much without a set pixel size. So I've seen both arguments.

[tedster]

IMO, the biggest problems come from fixed font sizes - at a SMALL size. I often design with a fixed 13px or 14px font and I've never had a complaint about those pages.

Those very small font sizes that LOOK good (that's a right brain judgement) are definitely not easy for people to READ (that's a left brain judgement).

Even when people "can" read a small font on screen, they will not do so easily. Nor will they pick up many of the words there in a casual scan of the page - and that's what we need to have happen if we want to draw people into reading our content.

The average website is, first and foremost, a communication and not primarily a work of art. If the art doesn't further the communication, then what's the point?

[bobince]

corny: yes. The keywords ('xx-small'-'xx-large') are not correctly supported on IE3-5/Win (and IE6 in Quirks mode, and Opera emulating IE's bug). You always get one size up from what you would expect, so the default text size is 'small' instead of 'medium'.

The browser that gets percentage font-sizes wrong is IE3/Win. I don't worry about this browser as I get hardly any hits from it - less even than the miniscule IE2/Win userbase! You can use various style-hiding tricks to provide a stylesheet IE3 won't even attempt to use.

Opera 5-6 also has a minor bug where a font-size of '100%' is incorrectly rounded a pixel down - if you set that size on lots of elements the text gets gradually smaller as the elements are nested.

em font-sizes in IE4-6/Win are weird... they scale more than they should when you change the 'text size' setting. Which can make text barely readable if you use, say, 0.8em and the user chooses 'smaller' on the text size menu. This problem doesn't happen with percentages, and if the font-size is relative to another non-em font size (eg. a div at 120% containing a paragraph at 0.8em) there is no problem, it is only when the em is relative to the size inherited into the html element this happens.

To sum up: 'em's good, but best when combined with a '%' font-size on the body element. '%'s also good most of the time. 'px's not optimal for all, but useful for stretches of text that have to be aligned with graphics. 'pt's a complete waste of space.

[moose606]

I usually use text sizes 10-12 px. for the bulk of the body text. This seems to work in all browsers, although different browsers will render it differently.

[kfander]

12 px is the smallest that I use, at least for most things.

[indiechild]

"em" units are the best units to use for specifying font size. "em" units are also relative, which is essential for good, accessible and readable webdesign.

I get extremely frustrated by sites which have tiny fixed font sizes by specifying the size in "px" pixels. Unfortunately MSIE does not yet allow font resizing when the fonts are specified in "px"s. The idea isn't for webdesigners to control how the users see the information -- the idea is to give that control to the users.