www.webdeveloper.com
Results 1 to 7 of 7

Thread: Ideal Font Size

  1. #1
    Join Date
    Jun 2007
    Location
    Orlando, FL
    Posts
    66

    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>)
    Rich.
    Last edited by RTP; 06-30-2007 at 02:53 PM.

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    You seem more concerned about your design than the users ability to read the website content.
    http://www.accessibility101.org.uk/tips/55.htm
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Jun 2007
    Posts
    21

    Lightbulb Font Size is relative

    RTP,

    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:
    http://abcnews.go.com/
    http://www.cnn.com/
    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 08:42 AM.

  4. #4
    Join Date
    Jun 2007
    Location
    Orlando, FL
    Posts
    66
    Fang, my first question was:
    Quote Originally Posted by RTP
    What's a good generic size to have your font, so it can accomodate most viewers most effectivley?
    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.

    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?

    Thanks.
    Rich.

  5. #5
    Join Date
    Jun 2007
    Location
    Orlando, FL
    Posts
    66
    For example...

    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:

    Code:
    body{font:13px arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}
    table{font-size:inherit;font:100%;}
    select,input,textarea{font:99% arial,helvetica,clean,sans-serif;}
    pre,code{font:115% monospace;*font-size:100%;}
    body *{line-height:1.22em;}
    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!

    Thanks,
    Rich
    Last edited by RTP; 07-01-2007 at 10:21 AM.

  6. #6
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Quote Originally Posted by RTP
    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
    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.

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

  7. #7
    Join Date
    Jun 2007
    Location
    Orlando, FL
    Posts
    66
    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:
    Code:
    body{font:13px arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}
    table{font-size:inherit;font:100%;}
    select,input,textarea{font:99% arial,helvetica,clean,sans-serif;}
    pre,code{font:115% monospace;*font-size:100%;}
    body *{line-height:1.22em;}
    Thanks
    Rich.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles