
Formatting your web content to be a pleasure to read - bergie
http://www.informationarchitects.jp/en/100e2r/
======
JoelSutherland
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.

~~~
dot
You're right.

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

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

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

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

~~~
lhnz
That sounds like extremely productive HN'ing. ;)

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

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

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

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

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

~~~
wvl
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...](http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-
better-typography-part-2)

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

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

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

~~~
joshuacc
_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...](http://webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.2/)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

------
retlehs
Related (from 2008):

[http://www.wilsonminer.com/posts/2008/oct/20/relative-
readab...](http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/)

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

------
mhitza
Not that pleasurable to read on a netbook.

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

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

------
racerrick
That was a pleasure to read. Very refreshing.

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

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

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

