SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast satishtalim's Avatar
    Join Date
    Jun 2005
    Location
    Pune, India
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Making reading on-screen as clear as reading something in print - how?

    What can be done to make the experience of reading on the screen better? I know that there are many research papers on the net on this topic but for a layman it's quite confusing.

    My site teaches the reader, Ruby programming and very likely he/she would be spending a lot more time reading on the site. The site uses fluid layout.

    If the user uses Firefox or IE with screen resolutions of say 800x600 or 1024x768 or 1152x864, then my questions wrt body text are:

    a. which typefaces to use
    b. the size of the typefaces
    c. what should be the line-height?
    d. background and foreground colors

    Please note:
    a. I am using the following size and typefaces -
    Code:
    font: 81%/1.5em  'Trebuchet MS', Geogia, Arial, sans-serif;
    In case, a user does not have these on his/her computer what would these default to?

    b. I am not justifying text

    c. Do I define type size by %, em, px ?


    Sorry for the loaded question!
    Last edited by AutisticCuckoo; Jun 5, 2007 at 00:18. Reason: Self-promotional link removed
    Free Ruby Study Notes
    Blog on Java, Ruby programming, Chess and Making $$$ online

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's not a loaded question, but surprisingly, the best answer is to offer the text in short, managable bits and pieces.

    By the way, this would be best placed in the "Usability and Accessibility" board. Would you like me to ask about having this moved there on your behalf?

  3. #3
    SitePoint Enthusiast satishtalim's Avatar
    Join Date
    Jun 2005
    Location
    Pune, India
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    It's not a loaded question, but surprisingly, the best answer is to offer the text in short, managable bits and pieces.

    By the way, this would be best placed in the "Usability and Accessibility" board. Would you like me to ask about having this moved there on your behalf?
    Thanks Dan. Yes, please move this there.
    Free Ruby Study Notes
    Blog on Java, Ruby programming, Chess and Making $$$ online

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I can't move it myself, but I can ask.

  5. #5
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fonts - At the risk of being shot down in flames I believe that sans-serif fonts (Arial, Verdana, Trebuchet, Tahoma etc) are easier to read on screen while in print format serif fonts (Georgia, Times New Roman etc) are felt to be easier to read.

    You've got a mix of serif and sans-serif fonts in your font rule - I'd personally stick to sans-serif and probably Verdana with Arial and Helvetica (for macs) as a backup.

    I find Verdana easier to read than the others because it's quite a wide font for it's height - very rounded. I'll admit that that's purely a personal preference though!

    There's no way of being sure what a user has specified as default on their computer. It's very likely to be Times New Roman on a PC however.

    Alignment - keep text left aligned (if text is to be read left to right obviously!) and don't centre text.
    Justification - don't justify text for the screen as it can create "rivers of white space" on the page at different text sizing.
    Colours - keep a fairly high contrast of background to foreground colours while avoiding too much of a contrast (black text on white backgrounds or white on black backgrounds can be hard to read for some).
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  6. #6
    SitePoint Enthusiast satishtalim's Avatar
    Join Date
    Jun 2005
    Location
    Pune, India
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tailslide View Post
    Colours - keep a fairly high contrast of background to foreground colours while avoiding too much of a contrast (black text on white backgrounds or white on black backgrounds can be hard to read for some).
    If black on white is hard to read for some; then what combination of foreground on background would you suggest?
    Free Ruby Study Notes
    Blog on Java, Ruby programming, Chess and Making $$$ online

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by satishtalim View Post
    If the user uses Firefox or IE with screen resolutions of say 800x600 or 1024x768 or 1152x864
    Why exclude users with Opera, Safari, Netscape, Konqueror, OmniWeb, ... ?
    And screen resolution is irrelevant. A user can have a 1024768 screen while his browser window is only 400300.

    Quote Originally Posted by satishtalim View Post
    a. which typefaces to use
    The jury is still out on that. Different surveys give different result. An alleged truism is that sanserif fonts are easier to read on-screen, but at least one major survey debunked that.

    In my opinion, the most important aspect is to use a typeface that is designed for on-screen use.

    Quote Originally Posted by satishtalim View Post
    b. the size of the typefaces
    Strictly speaking, that would be 100%. In other words, let the user decide and respect his or her choice.

    Reality is often different, though. A font like Verdana can look horrible at 100% in a browser with a 16px default size.

    Users' needs will vary a lot. Someone with a large, low-resolution monitor and good eye-sight may be able to read 9px text, whereas someone else with a small, high-resolution monitor may not.

    Quote Originally Posted by satishtalim View Post
    c. what should be the line-height?
    That depends on the measure (line width). The wider the column, the more leading (greater line height) you will need, to guide the eye from the end of one line to the beginning of the next. I think 1.4-1.5 is a good choice in many cases.

    Quote Originally Posted by satishtalim View Post
    d. background and foreground colors
    Again, different users will have different needs. A person with poor eye-sight may need high contrast (black on white), while some groups of dyslexics find that jarring and need lower contrast (e.g., blue on pastel yellow).

    Quote Originally Posted by satishtalim View Post
    a. I am using the following size and typefaces -
    Code:
    font: 81%/1.5em  'Trebuchet MS', Geogia, Arial, sans-serif;
    In case, a user does not have these on his/her computer what would these default to?
    A person (such as myself) who does not have Trebuchet MS, Georgia or Arial will get whatever font is specified as the default sanserif font in his/her browser. In my case that will be Nimbus Sans L.

    Quote Originally Posted by satishtalim View Post
    c. Do I define type size by %, em, px ?
    I wouldn't recommend px, since that will prevent most IE users from resizing the text. Whether you choose % or em is a matter of taste, mainly. You should specify the base font size (e.g., for the html element) in %, though, to circumvent a nasty IE bug for sub-1em fonts.
    Birnam wood is come to Dunsinane


Bookmarks

Posting Permissions

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