7 ms·
Formatting your web content to be a pleasure to read
- cpeterso 16y agoRobin Williams' (not that one ;) The Non-Designer's Design Book is a great introduction to "design for the rest of us". You can preview it online: http://books.google.com/books?id=n1AuwXafMO8C http://books.google.com/books?id=n1AuwXafMO8C
- mattholling 16y agoI read that book when I was studying design. It is definitely a worth read. It reads very quickly, and truly "shows" key prinicples instead of just "telling" them.
- ignifero 16y agoI followed your advice re size, but the default sizes are just too big, so big it's ugly. I ended up making everything bigger than it was, but not default-size-big. Maybe your advice is best for blogs.
- po 16y agoHis advice is definitely for small or medium form writing. Places where you have substantial blocks of text. If you are trying to style headings or a web application then some of the ideas will apply but you should seek advice specific to that. For instance, the "give your text breathing room" is always going to be correct, but how much room you need is different for a small chunk of text in a button vs a large block of text. The context that it is placed in also matters.
- jrmxrf 16y agoI'm not comfortable reading that page.
- heyneighbor 16y agothanks for the reminder about this. these help in not just making it a pleasure to read, but also in improving comprehension of what you are reading. There is a principle called "Chunking", the term to describe breaking into digestible units of information, that relates to this. http://www.chambers.com.au/glossary/chunk.htm http://www.chambers.com.au/glossary/chunk.htm
- null_ptr 16y agoI've been setting Firefox's minimum font size to 16 for the past couple of years, and my eyes are very grateful. The web is all about text, the sites whose layouts break when I set the fonts two points higher make me sick. There is no reason whatsoever why I should ever have to strain my eyes when using a computer.
- sp332 16y agoDo you have your DPI set right for your monitor? Maybe the OS assumes a 100 DPI display, but if your monitor is actually 150 DPI, everything will be 2/3 the size it should be, e.g. 12-pt fonts will be 8-pt.
- petervandijck 16y agoNot a bad article, but the layout of the article itself has some flaws (numbered lists are indented negatively, ...). I wouldn't normally complain about that, but I will in an article that tells us how to format text.
- ddelphin 16y agoAnd the space above the quotes is too much in comparison to the space below... it bothers me.
- mikeklaas 16y agoAs other have stated, this is actually "correct" typographic practice. I have absolutely no clue why this is the case; to me it looks absolutely atrocious. Why not indent instead?
- wvl 16y agoI am quite sure that is done deliberately. I can't find a good resource to point to, but this article by Mark Boulton describes why you would do that with bulleted lists. I would assume that the same applies to ordered lists: http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typography-part-2 http://www.markboulton.co.uk/journal/comments/five-simple-st... > With the advent of desktop publishing it became suddenly very easy and cost-effective to produce bodies of text. The problem was these bodies of text work within a box. Every character in this box had to be within the box, Hanging Punctuation requires characters to be out of the box. This was a problem for the software and as a result was ignored. An important aspect of typesetting just swept under the carpet like that. It’s a great shame. And: > A ranged left body of type is pretty much destroyed, aesthetically, when punctuation isn’t hung. The eye looks for straight lines everywhere, when type is indented in this way, it destroys the flow of text.
- knowtheory 16y agoWhat i don't understand is why there's incongruity between the numbered headers and the numbered lists. Surely if you're going to stick the list numbers in the margins, the header numbers should be in the margins as well?
- cabalamat 16y ago> We don’t want to change our browser settings every time we visit a website! We don't have to. Using Firefox or Chrome, I simply press Ctrl+ or Ctrl- to make the text bigger or smaller, and the browser remembers my settings for that site.
- aw3c2 16y agoDoes anyone else find it highly annoying that browsers started to size the whole page instead of just text with this? I liked using it to change the size of the characters, but without upscaling images and such.
- glenjamin 16y agoFirefox has a setting to switch back to the old behaviour, but yes, I dislike the new default.
- jarek 16y agoNow, I use a browser that's done whole-page zoom since ever, so I'm probably biased, but I actually really like it. I just want things to be larger. Whole-page zoom does that without breaking layouts. /currently reading HN on 150% zoom on a 105 dpi screen, single key shortcut to set the 150%
- ScottBurson 16y agoArgh, meant to upvote, misclicked, sorry.
- ugh 16y agoI think that's what's meant by "changing settings". It's unnecessary overhead.
- JoelSutherland 16y agoThey write with a certainty that doesn't seem warranted. Your website will be read on screens that range from 3" diagonal to 30" diagonal and with a DPI that ranges from about 100 to 300. Now, it would potentially be smart to use the default font size so that your site would be consistent with every other site out there, but that isn't the case. MOST sites use smaller text. Browsers aren't optimized for the default text size, they're optimized for what gets used. The default size is a compatibility relic. That isn't to say that a larger font size is wrong, but that is one of many factors to consider when designing.
- dot 16y agoYou're right. The mobile web/iphone didn't really exist in 2006 when this was written.
- kalmi10 16y agoThis site would actually look pretty good on an iphone, because the lines are short. (They actually have a mobile version of the site.) It sucks big time when a site uses small fonts, and the iphone cannot reflow it.
- bergie 16y agoWhile you cannot know the pixel density or reading distance of every device a web page is read with, many of the principles hold true. The design should scale to the font sizes preferred by the various devices, and for example leading (line spacing) and length of text lines should stay sane.
- mhitza 16y agoNot that pleasurable to read on a netbook.
- retlehs 16y agoThat's odd since the iA site has media queries to account for other resolutions and devices. Is it because the fonts are too big to you? Just curious.
- Samuel_Michon 16y agoInternet Explorer <9, Firefox <3.5, and Safari <3.1 don't support CSS3 media queries. Perhaps GP uses an outdated browser.
- kleiba 16y agoWhy not? It's fine for me.
- neutronicus 16y agoI didn't like that page. Thought the text was too big.
- retlehs 16y agoRelated (from 2008): http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/ http://www.wilsonminer.com/posts/2008/oct/20/relative-readab...
- pacohn 16y agoIsn't so much of this a matter of taste that would vary depending upon the audience and the subject matter? Aesthetics are not absolutes, and they evolve. EDIT: Why would this be downvoted? It's an honest question.
- synotic 16y agoI didn't vote you down, but people are probably considering the difference between design and aesthetics/taste. Design should be a solution to a problem. In this case, the problem as defined is readability. Having lines of text one after the other with no leading (line-spacing) can be difficult to read. Having text that's too wide requires you to turn your head which can be uncomfortable. Text that's too small can be... too small. The article was arguing for an optimal font size which may or may not be correct, but the argument was that 16pt/72dpi font is effectively the same size as most printed books, which are optimized for reading. Text with poor contrast — light gray on gray is going to be difficult to read no matter the subject matter. His individual arguments may be wrong (although I don't think they are), but the scope of design, for a given problem can be more absolute than just taste or aesthetics. Taste is more about liking 10pt fonts even if you're designing for something to be readable.
- pacohn 16y agoThanks. I agree for the most part. But, I think the font choice/spacing here at HN for instance, works for a tech forum, whereas it might not be as optimal for articles or poetry. I guess I am saying that content and audience can define the problem you you are trying to solve. It could vary for that reason.
- Goladus 16y agoI change the font size in my browser all the time. A smaller font usually makes the organization of the text more apparent and requires less scrolling, especially if you need to refer to different sections of the document at the same time, while a larger font can be read more passively and from a greater distance. Neither default is suitable for all situations, there's no right answer.
- bergie 16y agoCertainly, but the design of a web page should allow for those font-size changes. Generally when I read on a tablet it is a lot closer to my eyes than my laptop.
- mooism2 16y agoThere's also the need to provide a good default, particularly for those readers who don't know they can resize text themselves.
- phenning 16y agoThere are variations in responses people have to text, but for the most part, there's a general range of what's prefered by the masses. Since web pages are solely created to communicate to people, it makes sense that time spent understanding readers' responses to text would be crucial in web design. I understood that from your article. I teach reading and have read a lot on how the eye moves across the page, how information is brought in through text, font type and size, color and so on. Overall you have a good general point, people don't want to work to read. Key points I like are... 1. don't use small text, 2. use contrasting colors that aren't too stark, 3. create line spacing that doesn't over-crowd (1,5) and, 4. use white space. I love sites where there's just enough text on a screen to allow me to fully engage in it before scrolling. Everyone wants a pleasurable web experience, especially those wanting traffic!
- bergie 16y ago...and 5. don't make lines of text too long. Traditional spacing of about 66 characters per line works pretty well
- pasbesoin 16y agoSelect a font that looks good on your targeted medium (e.g. a relatively low resolution screen). People piss all over MS (and I've been in line, at times), but they did some good things with regard to screen fonts. And lo, someone conveniently "forgot" to close the barn door (until they'd escaped ;-). http://www.will-harris.com/verdana-georgia.htm http://www.will-harris.com/verdana-georgia.htm http://en.wikipedia.org/wiki/Verdana http://en.wikipedia.org/wiki/Verdana (There may be a better article, but it's been years since I would have last seen it.)
- zeynel1 16y ago"Having air around the text reduces the stress level, as it makes it much easier to focus on the essence." But his extreme left margin creates unnecessary tension and looks unbalanced on the page. On the other hand, I applied his 140% line-height advice to my site, and it reads much better.
- ScottBurson 16y agoSlightly OT, but my pet peeve is the growing number of sites that assume a minimum browser width that is wider than I like to keep my browser windows, as if everybody kept their browser window maximized at all times. I still read old bare-HTML sites often enough that I don't like to do that; I prefer to keep them about 800 pixels wide. Too many sites won't fit; some of them even manage to turn off the horizontal scrollbar, a neat trick. I think the largest minimum width any page should assume is 640. I could live with 800, but 1024 is too wide.
- pistoriusp 16y agoMaybe 640 for a content area, but most sites shouldn't exceed 960 in totality.
- nhooey 16y agoI totally agree. I have two 1920x1200 screens, and I put two browser windows per screen, so I always max out at exactly 960.
- lhnz 16y agoThat sounds like extremely productive HN'ing. ;)
- StuffMaster 16y agoI wish I had a million upvotes for this.
- autarch 16y agoGood advice for a blog or news site, but figuring out a good design becomes exponentially harder for web apps. Yes, they include plenty of text, but you also have a lot of "actions" (links, buttons, tabs, whatever). Web apps also have to balance readability with making common tasks easy. In particular, making common tasks easy may mean putting more buttons and form elements on a single screen to reduce the number of pages/clicks for a task.
- stevederico 16y agoGreat Article. I have been experimenting with reading content on the web with http://www.readability.com http://www.readability.com. It's a browser plugin that grabs web content and formats it in a easy to read layout.
- bugsy 16y agoI agree completely that most web sites are poorly formatted with columns that are too wide to scan, the site cluttered with animated ads, and/or improper guttering that allows text to collide with the actual window frame. It is a known problem and one that the majority of sites obviously don't care about even though they should. The referenced page though, as an example of proper design, is not a good solution. When resizing the window, column widths jump erratically so it is hard to keep your place; and at a comfortable column width, there is so little text it takes but a few seconds to read, and then one has to scroll. Having to scroll every couple of seconds sucks big time, even worse than dealing with small font. Furthermore, he has done something to sabotage the font resizing buttons so when I try to make the text less gargantuan, it retains the text size but inexplicably shrinks the column size. As ghastly and infuriating as sites that make me disable javascript before I can copy text. I am sure his gargantuan text looks nice on his iPhone or whatever high density display device he is using, but it is way too big on a normal screen. Unfortunately, screens are now tied into film aspect ratios (as if this is what you spend most of your hours on), windows for non-film watching applications resize most easily to fill the screen to these film dimensions, toolbars are crammed on top and bottom of applications, using up even more vertical space, and HTML has no flowing multi-column support whatsoever, making good solutions impossible and small font the least worst among many terrible choices.
- joshuacc 16y agohe has done something to sabotage the font resizing buttons so when I try to make the text less gargantuan, it retains the text size but inexplicably shrinks the column size. The width of the column is set in "ems" rather than pixels. This has the advantage of ensuring that the measure (column-width) remains the same number of characters wide. 66 characters is often regarded as the ideal measure. http://webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.2/ http://webtypography.net/Rhythm_and_Proportion/Horizontal_Mo...
- masterzora 16y agoAnd yet another designer noticing the trend in increasing size of desktop monitors but missing simultaneous trend towards smaller devices, like netbooks and tablets.
- racerrick 16y agoThat was a pleasure to read. Very refreshing.
- mryall 16y agoIt's interesting to argue that you should 16px fonts because that's the browser default size and browser vendors must have had a good reason, then in the next section argue that the default line-height is too small and needs to be increased. Are the browser defaults only logically chosen when they agree with your particular thesis? The browser defaults are set the way they are to maximize compatibility with previous versions of browsers. The 16px font size is probably a relic from Mosaic or Netscape 1.0.