Formatting your web content to be a pleasure to read | Hacker News Reader

Formatting your web content to be a pleasure to read

informationarchitects.jp

200 pointsbergie54 comments

They 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.

You're right.

The mobile web/iphone didn't really exist in 2006 when this was written.

This 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.

While 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.

Slightly 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.

Maybe 640 for a content area, but most sites shouldn't exceed 960 in totality.

I totally agree. I have two 1920x1200 screens, and I put two browser windows per screen, so I always max out at exactly 960.

That sounds like extremely productive HN'ing. ;)

I wish I had a million upvotes for this.

Robin 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

I 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.

I'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.

Do 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.

Not 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.

I 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-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.

I'm not a typographer, but I am a reader and I don't agree with his opinion that the list with hanging bullets makes it more legible. I find them slightly confusing. Maybe it's my programming background, but it just makes sense to indent something positively to emphasize context.

I do agree though that the hanging bullets add sophistication, but when I write that's not really my primary concern.

What 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?

I don't think so. The numbers in the header are more like an outline of items. The numbers in the list are not part of the outline. Hanging the numbers in the gutter is the typographically "proper" treatment there.

As 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?

There is nothing wrong with indenting lists negatively. In fact some say it is more correct: http://www.markboulton.co.uk/journal/comments/five-simple-st...

Sometimes I wish Mark hadn't published those articles. They have taken on a kind of cult status, like the interview with 37 Signals about their A/B testing and the words "See plans and pricing". Now lots of people seem to be taking these specific practices as gospel, but they've missed the point: it's not that what works for someone else will necessarily work for you, but that some things can be changed that might not have occurred to you, perhaps yielding much better results. <obligatory> Also, just because 37 Signals and Mark Boulton have popular blogs, that doesn't actually prove them right. </obligatory>

Mark's web site doesn't seem to have comments there any more, but I'm pretty sure I left one at the time pointing out that you want a typeset list to have a clear break between items (otherwise why are you typesetting it as a list?) and therefore hanging list markers the way you might hang punctuation seems exactly the opposite to what you are trying to achieve.

I would argue that the same series of articles makes the same mistake with hanging quotation marks, for the same reason. If you read some of the early thinking about hanging punctuation, the goal of this kind of microtypography was to give visually clean lines to the edges of where text is justified. If you position glyphs mechanically, as computer typesetting inevitably does by default, you actually get a visually uneven margin where you have glyphs that "stick out", such as quotation marks, dashes, and the crossbar on a captial T: the whitespace above and/or below the "sticking out" part breaks the straightness of the margin to a human eye. Instead, you can hang the glyph slightly (not necessarily entirely) in the margin, to give a line that is mathematically irregular but visually straight to the human eye.

Somehow this idea has transformed into hanging glyphs, usually punctuation marks, being some sort of trendy typographical effect, which might still make sense if you're talking about setting displayed type such as pull quotes. Unfortunately, it has then crossed a bridge too far, becoming "this is the Right Way To Do It(TM)" for even regular text, which is just dogma without any sort of aesthetic and/or usability justification.

And the space above the quotes is too much in comparison to the space below... it bothers me.

I 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.

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.

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_Mo...

thanks 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

> 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.

Does 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.

Firefox has a setting to switch back to the old behaviour, but yes, I dislike the new default.

Now, 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%

Argh, meant to upvote, misclicked, sorry.

I think that's what's meant by "changing settings". It's unnecessary overhead.

It'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.

There 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!

...and 5. don't make lines of text too long. Traditional spacing of about 66 characters per line works pretty well

Select 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://en.wikipedia.org/wiki/Verdana

(There may be a better article, but it's been years since I would have last seen it.)

Good 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.

I 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.

Certainly, 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.

There's also the need to provide a good default, particularly for those readers who don't know they can resize text themselves.

Great Article. I have been experimenting with reading content on the web with http://www.readability.com. It's a browser plugin that grabs web content and formats it in a easy to read layout.

Isn'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.

I 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.

Thanks. 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.

And yet another designer noticing the trend in increasing size of desktop monitors but missing simultaneous trend towards smaller devices, like netbooks and tablets.

Related (from 2008):

http://www.wilsonminer.com/posts/2008/oct/20/relative-readab...

I didn't like that page. Thought the text was too big.

Not that pleasurable to read on a netbook.

That'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.

Internet Explorer <9, Firefox <3.5, and Safari <3.1 don't support CSS3 media queries. Perhaps GP uses an outdated browser.

Why not? It's fine for me.

That was a pleasure to read. Very refreshing.

"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.

I 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.

His 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.

Reply on news.ycombinator.com