The human eye moves in discrete motions ending in periods of detail-absorbing stability called ''fixes''. A proficient reader interprets several words with each fix across a line. However, when returning to the left margin, several fixes can be wasted locating the continuation of a sentence. '''Therefore:''' Compose text into lines averaging ten words or less, for casual reading, and even narrower for speed reading. When formatting an 8-1/2 x 11 page, use two columns. When reading text-rich web pages (such as this), resize your browser to narrow the column width to within the ten word limit. (Really, try it now.) Consider formatting web pages within tables of specified pixel width so that your reader will not have to adjust their browser . -- WardCunningham Set your browser to make all (and only) dashes on one line: --- ---- ---- ---- ---- ---- ---- ---- ---- ---- Use MozillaFirefox, press Ctrl-+ few times and you have increased font size to get lines to have ten word limit (best used when windows is maximized or press F11 for full screen mode) -- AleksanderSlominski ''The text is indeed more readable; however, with the browser window not as wide, I'm distracted by the clutter of the "desktop" which disappears when I have the window maximized. So I open a new browser window, set the address to about:blank, view full screen, and use the plain white result as a backdrop behind the shrunken windows I'm actually reading. Works great!'' [if you could utilize that whitespace for something useful though, like a continuation of the bottom of your browser, instead of it being whitespace (think about a newspaper, if half of it was white, they'd be wasting space)] It's hard to read missing words. Most formatted web pages within tables of specified pixel width are formatted in a way that there are missing words at the right edge when you print it. Different browsers lose different numbers of characters. Please never do it that way. -- GerdCastan I agree with Ward and I agree with Gerd. I would say design your webpages with ten words per line only if you're going to also provide a printer-friendly page for users. Personally, I like to design pages for maximized browsers. The best solution would simply to let the users choose approximately how wide their margins would be. I'm not sure of the technical implications of this though. -- ChuckSmith The ''best'' solution would be to spend some time figuring out what the proper semantics for a webpage-specification language should be, that would allow users to adjust this sort of thing to their tastes without limiting the power of page designers to incorporate images, tables, sidebars, or whatever... Oh well. Flame off. I do love the short lines, and find them much more readable than normal-width ones. I hadn't realized it until I read it here, but that's what I like most about how a lot of technical papers are formatted. -- DanielKnapp I hate short lines, personally, simply because I try to set my font sizes much higher than most other people do. Why is this? Because if you look at an office at any given time of the day, you can bet someone is leaning forward, squinting to read something in detail. People have done it so often they forget they're doing it, but it can't be good for their posture, or for their eyesight. (I have no studies to back this up, but it seems like common sense.) So I set my font size severely high (it helps to use a browser that allows you to do this, like IE 5 MacOS), so I can sit up straight and not squint, and still read comfortably. However, with an overly clever design like at http://www.suck.com, this becomes a serious hassle. -- francis [Also note resolution: if you are in 800 by 600 resolution, it makes a difference. For reading pages, you could switch to 800 by 600. But I find it's wasting monitor space.. and would prefer it if more text was available on the screen (especially when scanning for important points). Plus, when switching resolution, that does not work well when you are reading and coding at the same time, when you need to make use of all the desktop space, and you can't be switching back and forth.] ---- Try the OperaBrowser (http://www.opera.com) : it has an unequalled zooming system. Among other great ideas. ---- REALLY use Opera. It uses an engine, zooming the whole page not only the text. this combined with fullscreen allows you to read webpages like newspapers. The only reason one might have IE is for viewing IE-specific javascript pages (opera is provable improving their compatibility). ---- With the new UserJavascriptInOpera system in Version 8 you should be able to use your own page layout. You tag the web page in UserJavascriptInOpera and use UserCSSInOpera to apply a custom layout. I believe I read about that in the OperaWiki. ---- When dealing specifically with web design, use a table with its width set to 430 pixels to contain text. At the most common font sizes (10-14 point), this width will break the lines so that fixes are not lost locating line continuations. Typically, there will be more than ten words in each line, depending on the length of the particular words in the text. More information is available at http://www.dsiegel.com/tips/wonk1/type.html (many people disagree with the style and attitude of the author of that site, but there are nuggets of good advice to be found there). -- MichaelPizolato ---- Check out http://www.suck.com for an example of even fewer than 10 words per line. They have been presenting their ''articles'' (editorials) in 5 to 7 words per line for well over a year now. The format works quite well for speed reading. -- ToddCoram Try reading the same article in Wired [http://www.wired.com/news/news/wiredview/story/8125.html] and in Suck [http://www.suck.com/daily/97/10/30/] and see which one you prefer. My browser window is only so tall, and the extra scrolling causes me to lose my fix on the prose (although I do find the graphics on the Suck page amusing...) -- ChrisOlds The International Herald Tribune site [http://www.iht.com] has a very good way of handling this - there's a 3-column view, a single-column view, and a printable view, selectable via a user option. -- SteveConover [Also check alltheweb.com in comparison to google.com It's so much easier to scan the google results I find. Google results are more narrow and "blocky". It would be better if there was less whitespace, like a "two column" result page. I'd make a script up that parses google's results into two columns, but I think google watches IP addresses for automated queries.] ---- It's good advice for normal writing, but HTML is supposed to let the browser control how text appears. It's not the job of web authors to set the line width. -- DaveHarris C'mon, much web writing ''is'' normal writing. And control over presentation - in this case the ability to use short lines to enhance readability - is an aspect of writing that not everyone is willing to give up. -- DaveSmith I like my browser windows narrow and tall; for me, it's a good compromise between reading speed and context. More web authors '''should''' concentrate on producing good content, and let their readers control the presentation. Far too many "designers" prefer using the latest hyperactive glitz to doing the hard work of communicating clearly. -- LarryKollar ---- For ease of reading I like to make my browser very wide - maybe 150 characters wide. This way I can skim paragraph starts and bullet points more easily, only following the text along the line when I get interested. I '''hate''' narrow columns and pages that enforce column conventions - makes me feel positively claustrophobic. I'd suggest, then, that the best way to improve readability is to use lots of paragraph breaks and bullets, and let the poor readers select whatever fonts and columns work best for them. -- PeterMerel [If there is whitespace, or if it is low resolution then I too feel claustrophobic. But if the page is layed out like a newspaper, where the same exact amount of actual words is on a page, but laid out differently (no whitespace) I find it more efficient to read. Although an essay style page may be 150 characters wide like you say, I am pointing out that the page may also be 150 characters wide, but split into columns... so instead of 150 characters, 50 X 3 or 45 X 3. The same amount of text is available for you to scan, but it is layed out different. As for the "point form", or "bullets"; I agree, that is a lot easier to read. But usually those point form notes are not one whole pagewidth wide - they are indented and only span part of the page's width. This is essentially like a column (reorganization of the text)] ---- Here's where a graphic designer might step in to remind us that ''legibility'' is not the same as ''readability,'' though the two are often conflated. A legible layout is easy to skim; a readable layout is easy to read. These aren't mutually exclusive, but they do express different ideas. Legibility is about ease of recognition. It's why signs and heading text are often in a sans-serif font - it's easy to do a quick pattern match to recognize the word or symbol when scanning quickly past it. A wide layout and easily recognizable markers (bullets) allow for quick scanning. Readability is about doing long sequences of fixes. It is why body text is usually organized into short lines - the reader's eye has less space to travel and less of an opportunity to break the flow by getting lost when moving from the end of one line to the beginning of the next. For web material that's mostly informational, a legible layout is generally preferable. For content that's intended to read (e.g., most of Wiki), a readable layout is generally preferable. This is old stuff to graphic designers. The Yale Style Manual (an excellent web style guide) has some additional detail. With respect to TenWordLine, see http://info.med.yale.edu/caim/manual/pages/typography2.html and stay a while to scan the rest of the guide. -- DaveSmith ''I scanned the rest of that guide - I didn't like it. It kinda misses the point of the web, which is that it be widely accessible. Those guys assume everyone is using Windows or a Mac. They don't expect people with poor eyesight to set a larger than normal font size. They force their background colour to be white when I might need some other colour, for medical or technical reasons.'' -- DaveHarris For more on legibility on the web, see the October ''Alertbox'' column about web usability, http://www.useit.com/alertbox/9710a.html. And another good site is http://www.cybtrans.com/infostrc/, ''Information Structuring for Rapid Knowledge Transfer''. -- KatyMulvey See also: http://psychology.wichita.edu/surl/usabilitynews/42/text_length.htm ----- ''They force their background colour to be white when I might need some other colour, for medical or technical reasons.'' -- DaveHarris I fully agree that people should be free to set their background color to whatever they want. But I always thought of that as a personal preference. What medical or technical reason is there for someone to "need" something other than white? Colorblind people can read black letters on white text just as well as any other color. Completely blind people can't even tell whether the background color has been forced or not. -- DavidCary * Those who suffer from diabetes will often encounter neuropathy of some kind, and the eyes are usually the first to go. Observing bright sources of light (as, for example, white backgrounds) may induce unnecessary pain in the reader. --SamuelFalvo I don't have a clearcut answer, but here are a few comments - Jim J. Jewett (1)Apparently just-off-white is better and less tiring for most people (I haven't seen the original studies.) (2) Light on Dark vs Dark on Light are not symmetric. I found this information by following trails from the w3c's accessibility initiative, but it didn't sound like the exact difference was well understood. (3) It is very common to need to change the foreground color to get enough contrast. This works badly with an unchangeable background. (4) On not-quite-broken displays, reversing the colors can sometimes make reading less difficult. [I would think some of the basis is on the standard: paper and ink. If we had black paper, how would we create white ink easily? It's easy to bleach paper, and make black ink. But to make colored paper, and try and print ink on it... Since paper is the standard - that's what everything is based on. I prefer a black background with white text, because I find black backgrounds are easier on my eyes. They may also save electricity, since black requires less power than white.] ----- Funny... Wiki editor is set to 16 or 20 words, because I had to widen the browser window after trying the 10 words thing... I'd point you to http://www.w3.org/WAI/ the Web Accessibility Project of the World Wide Web Consortium. Among the problems of forcing a layout for a Web page are: * differing screen resolution * differing monitor sizes * differing preferred font and font size * differing access speeds * differing ocular definition * differing attention spans * differing abilities * strong disabilities All those are strong points for an accessible web site. Blind, ambliope or tired sight (how's in English?) users will need special sw/hw or bigger font sizes, &c to access to a given lexia (from HyperText theory, atomic unit of sequential reading). Daltonism is a problem that affect a larger part of the male population than thought, for example, so colors are something to take into account as well... Playing around with layout and so will make automatic voice readers render erroneous text, it will probably mess with users using text only terminals or telnets, make difficult reading for people with bad sight and others, or people with small monitors, or with just a couple of screens open (multiple spawned, parallel or even dysfunctional reading is a paramount characteristic of hypertext). There are more problems... But the ones above cover the ground pretty nicely for a starters... However, I haven't found WikiWiki too unfriendly, it works mostly 100% with LynxBrowser... -- DavidDeLis ---- Apparently U.S. President Kennedy had his "fix-width" determined, and all of his reading formatted to a column that width to increase his speed at reading. Any reason why the default EditPage text area is so wide, given that this advocates we narrow our browser windows? The needs of the editor are different than the needs of the reader. Also, WikiRefactoring is much easier with a large window. Editors should read more carefully to find their mistakes. Readers have much less interest in finding editing mistakes than editors. [Ironically, the sentence I'm replying to used to read "Are the needs the editor are different than the needs of the reader?" before I fixed it. I wonder if the prior author was trying to make a subtle point.] My browser windows are all quite narrow, precisely because text is easier to read when formatted quite narrowly. This means that Wiki edit areas are wider than my browser. Pain. And if you're doing a significant refactoring, you should almost certainly be doing the editing in something better than a web browser's edit box. So I'm not convinced that the reasons above justify having the EditPage text area wide. ---- I think that I agree with (almost) everyone above! The whole idea of Hypertext is that the markup should refer to structure, not layout, and that layout is in the hands of the user. The solution would be for a web browser to allow me to format a paragraph, or a sequence of paragraphs between headings, as one, two, three or more columns, where I select the width of each column (probably in characters rather than pixels). Then we could all have our cake the way that we like it. iCab, are you listening? But web page writers would have to stop trying to do visual layout for me, or using tables to achieve layout, or any of the other bad habits that are so common on the web, because browsers are so poor. -- Andrew Black It depends on what kinds of pages you spend a lot of time on. There are plenty of pages that tableize everything for layout's sake, but there are also plenty of pages where everything's on one main central column that adjusts with the window. The "underdesigned" pages tend to be on the personal, non-IPO sites that don't get much attention individually -- but collectively, I find lots of value in such pages. -- francis ---- ''However, when returning to the left margin, several fixes can be wasted locating the continuation of a sentence.'' Wouldn't it speed you up, then, to make the line as ''long'' as possible, so that you rarely have to return to the left margin? My screen is 1600x1200 (LCD) and I use fonts that are less than 20 pixels high. I can get 30 or 40 words per line, and that's in a window that doesn't even cover the entire screen. I prefer it that way. -- There's another consideration. Although one's conscious focus is on the words in the current 'fix', the eye is doing parallel read-ahead parsing of the words in the lines underneath. Short lines mean that the read-ahead is working on the immediately next context; long lines pushes that horizon further away. You might have noticed this effect when reading, and is one reason why answers to test questions should not be within the vicinity of the question - not to prevent cheating but to preclude this natural look-ahead. -- FergusCooney ''Your eyes absorb blocks or text better than lines because you have an X axis and a Y axis on your eye. Make most efficient use of the Y and X axis and you get boxes. You can only focus on a certain amount of text in your range. If you are reading a long line, you are wasting that available Y axis space you have in your focal range at that specific point in time. It's also easier to remember where things are on the page when it's layed out in blocks, if you have to refer back to the page. Think about a database, versus a string that you have to use a regex with. It's the same amount of text, but organized differently. It's also easier to spot a box or a circle on a piece of paper than a line is - You can see a box with a perimeter of X in one glance, but you can't see a line with a length of X in one glance.'' Whether ten-word lines is right depends on how many words you can get in a single fix. I can get seven or eight, maximum, which means that I have to fix on every 10-word line twice, and the second fix brings in only two or three words. All that zig-zagging gives me a headache. But with very long lines, it wouldn't matter whether you took in three words or fifteen with each fix; having an odd word at the end of the line wouldn't bother as much because it happens less often. -- EdwardKiser : As an experiment, I tried both a tall narrow browser with a big font and a short wide browser with a smaller-than-average font. Frankly, the latter allowed me to finish paragraphs in a third of the time. I suspect that I'm really accustomed to the left-to-right motion of reading, but what Edward says is true. You don't waste fixes on really long lines. : ''Try going back and finding important points about the article you were reading (referencing back to the article). Blocks are more efficient and easier remember, and process (just the same as a CVS file is harder to read than a spread sheet is.) Smaller fonts are faster to read, because you can pre-scan the article as you are reading. Smaller fonts make more efficient use of space, so that has to be held constant in the experiment. With small fonts you've got the advantage of glimpsing at more text per area. Reading is faster. You can pre-scan ahead of yourself with small fonts easier too. Blocks are just more efficient when you keep some constants, like font size, browser size. To keep the browser size a constant, you have to have a page to read that is designed like a newspaper. If you were to look at one long line and try to find information in that line, it would be much easier if it was laid out in a spreadsheet. It's not just about how fast you can read too, but rather the absorbability, and the memory. If I need to reference back to an article it'd be easier to go and find my information that I wanted to pinpoint, if it was in blocks or bullets, as I'd have a clearer memory of where it was on the page. A line versus a square on a piece of paper... easier to spot, easier to grasp in one glance. Makes use of x and y axis more efficiently at a constant time'' : I suspect a better predictor of reading speed and comprehension is your level of restedness. I know it's time to put down the reading material and go to sleep when I've just read the same sentence three times and still want to put down the reading material and go to sleep when I've just read the same sentence three times and still... -- IanKjos : ''I prefer the 10-words per line format, I don't move my head left to right much while reading. I read by moving my eyes/head top to bottom -- SridharNatarajan'' ''What we really need are decent browsers. I want to see Mozilla come out with a "columnize" feature, so you can maximize your browser window, and then split the body text into two or three columns for easier reading. It would interact oddly with scrolling, depending on how you defined the behavior, but you'd get to actually use all your pixels. -- francis'' A new HTML tag, say '...' could be used around all text on your site that would be appropriate to split into columns, then the browsers could handle the layout depending on your settings/screen resolution/window size/etc. -- KyleSherman Many years ago, Netscape created that did this. M$ took a not invented here attitude and never included support for it in IE, and it never made the HTML spec. No v5 browser that I know of has support. On the bright side, CSS 3 is supposed to provide something similar. -- Felix Miata ''I liked http://mrmazda.no-ip.com/auth/wauth1.html . Should I make a NamePage for FelixMiata ?'' ---- How about this: make the page deliberately, unreadably small, but 10 words per line (as many columns as you like). Make it look like a newspaper held 20 feet away, but the entire article should appear on the screen at once (no scrollbars). Then supply 'a magnifying glass' that you move with the mouse, that snaps to the column under it, and displays the text beneath in the size the user wants. (this style of interface dates back to Xerox's Magic Lens and beyond (http://www.parc.xerox.com/istl/projects/MagicLenses/93Siggraph.html)). Scanning in 2d across the article is going to be faster than using a scrollbar. I reckon this way you could get both legibility and readability -- BrianEwins I could recommend putting some white space on each side of the text, and using em measurements to adjust the line spacing to improve readability. Save the code below as a WIKI.CSS file, and use Tools - Options - Accessibility to select this file as a 'default' CSS styleguide for viewing wiki pages. Much easier to read, even better after narrowing the window to the 'ten-word-line' described above. a:link { color: #0000ff; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: .85 em; line-height: 1.5 em; margin-left: 7%; margin-right: 5%; margin-top: 0 em; margin-bottom: .7 em; color: #3366cc; } a:active { color: #ff0000; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: .85 em; line-height: 1.5 em; margin-left: 7%; margin-right: 5%; margin-top: 0 em; margin-bottom: .7 em; color: #3366cc; } a:visited { color: #800080; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: .85 em; line-height: 1.5 em; margin-left: 7%; margin-right: 5%; margin-top: 0 em; margin-bottom: .7 em; color: #3366cc; } a:hover { color: mediumblue; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: .85 em; line-height: 1.5 em; margin-left: 7%; margin-right: 5%; margin-top: 0 em; margin-bottom: .7 em; } body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: .8 em; line-height: 1.5 em; margin-left: 7%; margin-right: 5%; margin-top: 0 em; margin-bottom: .7 em; background-color: whitesmoke; color: #333333;} h1 { font-family: Arial, Helvetica, sans-serif; color: dimgray; font-size: 1.8 em; font-weight: bold; line-height: 2.4 em; margin-left: 0%; margin-right: 0%; margin-top: .5 em; margin-bottom: .7 em } p {line-height: 1.5 em; margin-left: 7%; margin-right: 5%; margin-top: 0 em; margin-bottom: .7 em;} strong { color: #333333; } pre { margin: .5em 3em .5em 2em; color: #302580; background-color: ivory; font-family: "courier new"; border: 1px solid #a0a0a0; padding: 1em; font-size: 0.9em; font-weight: bold; white-space: pre; } hr { color: #cdcdcd; } -- JonDonahue ---- I take a slightly different approach to Jon in that I have the following saved as a bookmark, which I can invoke as required. It gives me a narrow page, with borders, black text on ivory background, and 'proper' colours for links. It's based on code pinched from Freesquare's bookmarklets, so should be cross-browser (only tested on Mozilla though). The dimensions are based on having my broswer open full-screen, YMMV. javascript:(function(){var newSS, styles='body {width: 500px; border:solid grey; margin-left: 200px;} * {font-family:Times New Roman, serif; background: ivory !important; color: black !important} :link, :link * {color: #0000EE !important} :visited, :visited * {color: #551A8B !important}'; if(document.createStyleSheet) { document.createStyleSheet("javascript:'"+styles+"'"); } else { newSS=document.createElement('link'); newSS.rel='stylesheet'; newSS.href='data:text/css,'+escape(styles); document.getElementsByTagName("head")[0].appendChild(newSS); } })(); (Carriage-returns added to ease formatting) -- MichaelDavies ---- ''AnswerMe: What medical or technical reason is there for someone to "need" something other than white?'' Displays offer an overwhelming variety of visual behavior, and there are many settings where dark text on white backgrounds is a worst case. Here are some: * Slow (~60 hertz) displays in settings with ambient light provided by flourescent lamps that flicker at 60 hertz. The ambient light strobes the display and causes all sorts of user problems. Dark backgrounds are much better, as are reduced contrast. * Some display technologies consume power proportional to their brightness, white being a worst-case. * Improved readability and legibility for dark text on light backgrounds primarily applies to '''reflected''' light in a setting of high ambient light, such as printed pages. When ambient light levels are low, the inverse is true. For projected slides, for example, light text on dark backgrounds has higher readability and legibility. [the only argument with this, is how long you've been reading. I find that sometimes dimming my monitor as much as possible helps when I am very tired. When I am very awake, bright white and high contrast helps with concentration. When the eyes get dry and tired (sleepy), it seems they enjoy darker or dimmer environments. Most likely also due to muscle strain. The dimmer the colors, the less the pain. The other problem is paper vs monitor. Paper is not lit up, so the white paper is not the same white as a white monitor. A white monitor is much more strenuous than white paper.] ''Also, people with dyslexia can be aided by different colours. One person I knew needed to wear tinted glasses in order to help him read. A substitute for that would be to change the colour of the text and background.'' -- AnthonyWilliams ''White on black is higher contrast. I used it extensively on my laptop on the train - reading black on white was very tiring, white on black was much easier. I find this to be true in general with LCDs'' -- ChrisMellon ---- Can anybody tell if use of Times New Roman on these Wiki pages is intentional? You can tell I'm used to MS development technologies and reading documentation online that uses Verdana or Tahoma fonts. These are (from what I know) where specially designed to make reading online easier. ''There is nothing on these pages that specifies the font. Try changing the default font in your browser preferences.'' ---- For people running Mac OS X, the little known Tofu.app (http://homepage.mac.com/asagoo/tofu/) provides a way to read almost any online text in columns (ten words wide or even less). I opened this wiki page in Tofu by selecting all the text and choosing the ''Open in Tofu'' command from the Services menu. And boom! ---- http://www.w3.org/TR/css3-multicol/ Immeëmosol - 22-08-2006 ---- You know, I have to admit, I've looked at a lot of column-mode documentation on my workstation monitor (1600x1200). I prefer small text (20 pixels is way too big for me). And, yes, I prefer '''long lines'''. I do not like the use of columns on the monitor. I find it to be unnecessarily distracting. When I start reading, and am in a groove, I don't want to stop. There are speed-reading programs that work by taking text and streaming it in a scroller for example. These programs are known to work well. Not only are columns apparently not required, they appear to slow people down. I like my extremely wide pages just the way they are, thank you very much. --SamuelFalvo ---- See WebBrowserWishes, EasierReadingBrowserTip Should TenWordLine be merged with ColumnModeSometimesBetterThanWidespan?