SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    May 2002
    Location
    Montreal
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Readability and column width : guide

    I have done a bit of searching for guidelines for the maximum width for a column. It is obvious to me that after a line gets too long it makes the paragraph very difficult to read.

    I found this webstyleguide.com article that suggests that 365 pixels is the maximum width for readability. This seems a bit narrow to me, but close to the number.

    When designing a fixed-width layout, we typically use page layout tables with text cells no wider than about 365 pixels.
    What is your opinion for max widths for columns of text?

    Cheers,
    Mark
    Mark Dixon
    Freelance Web Designer and Developer
    www.markdixon.ca
    Montreal, Quebec, Canada


  2. #2
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It seems more natural to measure the line length in ems rather than pixels. However it depends on how much leading you have too. Longer lines require more leading.

    If you want to maximize readability I would advice against fixed pixel width layouts.
    Simon Pieters

  3. #3
    SitePoint Zealot
    Join Date
    May 2002
    Location
    Montreal
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very long lines (i.e. wide columns of text) make it difficult to find the next line when reading. Flexible line widths (like this forum) mixed with long paragraphs make it difficult to read. Very wide columns of text actually require the reader to move their head as well as their eyes.

    I am still unsure what the width is, perhaps something around 400-500px?
    Mark Dixon
    Freelance Web Designer and Developer
    www.markdixon.ca
    Montreal, Quebec, Canada


  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree with Simon. Specifying the width of a line of text in pixels is utterly pointless. 365px is nothing for a person with a visual impairment who needs a 60pt font to read anything. And 365px can be way too long for an eagle-eyed tech nerd with his default font size set to 9px.

    I'd say the maximum column width for decent readability is somewhere in the 30-40em range, depending on the font you use.

    Also, the leading (line height) must be in proportion to the column width. The wider the column, the more leading you need to make it easy for the eye to find the beginning of the next line.
    Birnam wood is come to Dunsinane

  5. #5
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    It's more likely to be characters/words per line that would make sense an as for "layout tables" oh dear.

  6. #6
    SitePoint Zealot
    Join Date
    May 2002
    Location
    Montreal
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I won't be using layout tables. Given that you suggest using characters per line, what do think should be the maximum characters per line? A DIV's width, however, cannot be specified with number of characters...
    Mark Dixon
    Freelance Web Designer and Developer
    www.markdixon.ca
    Montreal, Quebec, Canada


  7. #7
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Theoretically it can by using em units but things scale. Though at typical 100% browser default usually around 80 - 90 characters is considered relativity easy to read but again you can change dimensions, etc.

    Should there be a maximum? Probably not as the web is fluid.

  8. #8
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo
    I'd say the maximum column width for decent readability is somewhere in the 30-40em range, depending on the font you use.
    Yeah, I like 38-39em paragraph widths. That's approximately 500px when you have computed values of 13px Verdana.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  9. #9
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I believe the optimum line-length is about 11 words.


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
  •