Ideal Font Size
What's a good generic size to have your font, so it can accomodate most viewers most effectivley? I mean, i've got size 10, verdana (verdana cus i've found it's the most visually friendly) working on my font. This is a) because to me at this size it looks nice, neat & well formatted and because b) i have alot of content, and large content with huge font size is, to me, off-putting.
However, it's all about reaching as many people as possible. So what seems good to me, may not for example, be very readable to some people.
So is 10 a good size...too small perhaps? What's the average size, or rather, a good font size to have? I can imagine alot may say 12, as it's the Microsoft Word fave. But on my site, with regards to the content & design there, 12 doesn't look great to me. But, like i said, i'm just one person...
So, any comments...
PS: On this subject: I know people can change the text to large, medium, and small in the browser. I realise visitors to my site may do this, particularly people who have more trouble reading what most people consider normal font sizes. And i certainly wanna keep there experience as good as everyone else. So with that in mind..... Would, when they enlarge the font, the text 'break-out' of it's confines and make the page look horrible and distorted, and ultimatley, unattractive and off-putting?
I have my text contained in <div> tags with padding. So, if people enlarged the text via broswer options, would the div automatically create a scrollbar for the text that has now extended? In other words, will the div keep it's nice, formatted position on the page, and merely accomodate the now larger font by adding in a scrollbar? If it doens't, can this be done (even when ordinarily there is no scrollbar present as the text fits in the space when not adjusted by browser options?) Basically, is there a code to write to do this or does it do it itself?
It would be a nice feature i think, if when enlarged, the text keeps in the confines, but just becomes scrollable (note: i wouldn't want the scrollbar there for the standard unenlarged text, as in normal circumstances the text would fit 'snug' in the <div>)
Last edited by RTP; 06-30-2007 at 03:53 PM.
You seem more concerned about your design than the users ability to read the website content.
Font Size is relative
The font size is just an attribute, which is relative to the screen resolution the browser renders your web page in for the user. So the real issue becomes, 'Is this font size attribute the best for a user rendering my web page at less than 800x resolution?', less than 1024x, or 1280x or larger?
Test your WebPages at those resolutions and perhaps load css style sheets according to the user's screen resolution. If you don't want that hassle then decide on which resolution your site is coded for, and select a font size which looks good to you at that resolution. If you want the best readability examples, go to the news sites:
etc. and view source.
If that is protected, you may need to view your cache files to see what they used. You can also save the page complete to get the style sheet and see what they are using for the page you like best for readability. Check out the college websites (.edu) on 'usability for websites' for tips and info on this too. Just keep the user's screen resolution in mind. As Fang suggests, check out the websites on website usability and accessibility, they are a wealth of info too.
Last edited by rpgivpgmr; 07-01-2007 at 09:42 AM.
Fang, my first question was:
The whole point of finding this out is so my visitors can have the best experience possible. And as most visitors come for content, i want all of them to be able to read it, so i was inquiring about when font is enlarged. Basically, when a visitor does this, i don't want them to see an unreadable mess cus' the content has 'exploded' and gone over things (it's designnated area) and has become unreadable because of it.
Originally Posted by RTP
I have a nice readable fontsize now. and i've worked on what is the best font, and font size for readability. Turns out, thanks to your examples rpgivpgmr, that it is the same size as cnn.com's. So can't be too bad.
However, i want to try and accomodate all posibilities, and thus more potential visitors. So was wondering what happens when text is manually enalrged via broswer options. Does it have to be contained by a code to keep in with the area the text is in i.e. the content <div> (so it doesn't spew over parts that make it unreadable and messy), or does it do this itself - and just introduces a scroll bar on the content?
Browsing and testing sites for what happens on text enlarging, i found an example that would apply to my page. It just happened to be Yahoo!
Their text is in 'boxes', like most of my content (alot of the sites i tested where irrelevant to mine as their content was 'free' on the page, so basically, the page just extended down when the text was enlarged). When you enlarge text on Yahoo.com's homepage, the page sorta 'zoom's in'. So the next still remains in boxes at the larger size, and everything still looks nice, neat, and most importantly, still readable, for a person who had to browse with this text size. Does this happen as standard when the text is enlarged when the text is in boxes, i.e. the 'zoom' effect'? Or do you have to apply something to your code to make this happen?
A quick shifty at their source code and i found this under a css style:
D'ya reckon that font percentage stuff may have something to do with it. I don't know myself, everything i do seems new to me with this stuff!
Last edited by RTP; 07-01-2007 at 11:21 AM.
This is how text areas should be handled - any element that contains text should be allowed to expand with content. Using fixed heights for such containers will almost guarantee the text will spill out on resize.
Originally Posted by RTP
I don't see the point (pun intended) of using pt sizes for screen, as these are a print measure. I find a pixel font size of 14px to be a good readable size which shouldn't need to be increased by many, and usually set this as my base size in the body - all other fonts can then be derived as percentages of the base. Setting a base pixel size ensures close conformity between browsers, and any decent browser will still allow resizing - I would expect that viewers who need to routinely upsize text to read it would not be using a certain mainstream un-named piece of crap browser....
I see your point. So you're suggesting making it so the 'containing' box (that has the content in it) expands to accomadate - if the visitor expands the text to large?
This is what i would like to do. It's just i don't know if it's done automatically if the box contains the enlarged text, or if the text 'explodes' out. From tests by myself, i think it just expands. However, Due to the the layout of the page, expanding left to right would distort viewing of the page. Can you make it so it just expands downwards (i.e. lengthening the page to accomodate the larger text box)? Or does it just do this anyway as standard?
Another point; On that code i posted above, it states the size of the font (in the example, it's 13px), then mentions certain coding about font percentages. What are they doing there? I can't work it out for myself? Does this code they've written basically say 'standard font is 13, but if so and so happens, it goes to 115% etc'? If so, this would be ideal. Could someone who knows a little bit more about this stuff go over that little bit of code and tell me what it's doing more accuratley. i'd really appreciate that. It may be completley irrelevant to the subject here, but i won't know till the 'case study' comes in!
Here's the coding again:
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)