SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
-
Jun 4, 2007, 19:56 #1
- 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;
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 01:18. Reason: Self-promotional link removed
Free Ruby Study Notes
Blog on Java, Ruby programming, Chess and Making $$$ online
-
Jun 4, 2007, 20:24 #2
- 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?Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Jun 4, 2007, 20:30 #3
- Join Date
- Jun 2005
- Location
- Pune, India
- Posts
- 68
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Free Ruby Study Notes
Blog on Java, Ruby programming, Chess and Making $$$ online
-
Jun 4, 2007, 20:46 #4
- 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.
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Jun 4, 2007, 23:33 #5
- 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).
-
Jun 5, 2007, 00:14 #6
- Join Date
- Jun 2005
- Location
- Pune, India
- Posts
- 68
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Free Ruby Study Notes
Blog on Java, Ruby programming, Chess and Making $$$ online
-
Jun 5, 2007, 01:33 #7
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Why exclude users with Opera, Safari, Netscape, Konqueror, OmniWeb, ... ?
And screen resolution is irrelevant. A user can have a 1024×768 screen while his browser window is only 400×300.
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.
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.
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.
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).
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.
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