I wish that I could change do Disqus without losing all of my old comments. I had originally decided on Facebook I believe before this design of the site and now I'm stuck with it—if any one has a hack to change the type I'd love some advice. I can't seem to override the FB CSS.
Seems silly to say it should mimic a book, without acknowledging that many different type sizes exist in books.
Though, in general I agree with the font size needing to be larger. I'm curious if it is as important as portrayed. Probably depends on the type of reading being done. And, as always, effective use of graphics trumps most "text size" decisions, I would think. (As I look over a comic with ridiculously small type.)
Ironically I found that page hard to read. I think it might the constantly having to switch my eyes back at the end of a line breaks the mental flow of the sentances. Anyone else experience similar?
FYI, you can get a plug-in such as Stylish for a lot of browsers that will let you override styles for specific sites. For lightly formatted discussion sites that I visit often, I typically set a font and a (max-)width for comments and related material that I find comfortable.
For HN, I personally set a max-width of 700px on .comment and pre blocks, to go with fonts of around 18px. If anyone new to Stylish wants the exact overrides I use to paste in verbatim, feel free to ask and I’ll look them up.
On my laptop screen a single line is about 35cm long and individual glyphs are about the size of those used in my 3 year old's book. In fact, this is exactly the problem with all such websites - they all look like kindergarten books. It is as if they are trying to speak to you s-l-o-w-l-y because you are both dumb and legally blind.
Large fonts stress my eyes more than smaller ones. I fit less words in the center of my vision with a large font, which means I read slower and my eyes have to travel longer.
Having ~60 character columns is the important thing. Large fonts, not so much.
One of the difficulties of a screen is that you can't control how far away the reader is from the screen. With a book and mobile device the user can easily adjust distance to match their preference—on a screen you can make the type responsive to screen size, but if someone is closer to the screen or further away there isn't much that I know of that can help get this dialed.
Isn't this why browsers have text zoom? On Firefox if I want to make text larger I can simply do cmd + or ctrl +. Assuming the site is coded well, the text will flow accordingly.
My pet peeve on layout is when a page is multi-column, but each column is
taller than the viewing window, so the reader must scroll or page down in
each column, then go up for the next column, then down to the next page.
This issue often shows up in PDF versions of scientific journal papers.
Bonus points if a "page down" function operates on the source page
images rather than on the window view (iow, if repeated "page down"
only shows the top of each source page, rather than each visible
part of the viewing window.) Mouse-wheel scrolling helps, modulo
interface "features".
With Xbox One having an always on camera facing you this might actually be possible, although I think that the right size probably depends on your eyes and vary depending on how far or near sighted you are—that's just a guess.
Very, very hard to read due to way too large font. I immediately had to zoom out in order to read it.
I don't think the author can show that this big font provides better readability.
One can easily make assumptions on how far the average reader views the screen and optimize the font size to that. As the comments here show, the font size selection here is too large.
Curious; what type of display were you reading on? How big is
it? What was its resolution?
--------------------
Reading it on a 27" 2560x1440 display was really nice. Same in
vertical mode on a 9.7" iPad, but not so good in horizontal
mode; it felt constricted like watching a letter-boxed 16:9
movie on a 19" 4:3 TV screen.
What I've found is that optimal text formatting varies greatly
across devices. This is very hard to design for due to the
variety of screens. From small screen devices like cell phones
and gray-scale Kindle's, through larger 24" - 30" monitors and
even larger HDTV's. On top of that there are DPI variances.
I've always been a fan of MVC, separating the model (actual
document data/text/pictures) from the view (how it's
displayed), and using a controller (device/screen-specific
code) to display things optimally.
It would be nice if there was a standard that existed
allowing authors to simply write documents, saving them as
models. Then, each device could read from a standard model
file and, using custom controller code, generate a view
displaying the text/images optimized for its display.
Right now you see web developers creating multiple CSS
layouts for different screen layouts. This works for most
cases, but not edge scenarios. It feels very hacky, and I
can't foresee people building websites/content-delivery-mechanisms
like this 10 years into the future. There must be a better way.
> It would be nice if there was a standard that existed allowing authors to simply write documents, saving them as models. Then, each device could read from a standard model file and, using custom controller code, generate a view displaying the text/images optimized for its display.
This standard is called "HTML". What you describe is the entire idea of HTML. Frankly, it's embarrassing that a web browser presented with a long stream of text won't keep the line lengths capped at a reasonable length.
I guess you could say that HTML meets that standard. For example, <h1> through <h6> headers could be rendered by the browser accordingly; most default renderers still display things mostly the same way Netscape Navigator 2.0 did back in the Win 3.1 days (disable CSS on a site and you'll see).
Marked on the Mac, which is a Markdown renderer, loads .mmd files and renders them against a CSS template which you can swap out. That fits the MVC idiom nicely, although far from a perfect implementation as it's merely meant for viewing markdown files, not everything on the internet.
Yes, this is why it drives me crazy that Safari on iOS does not wrap text as you zoom in. Every browser since the beginning of time has been able to properly wrap the text as you increase the text size, and Apple has totally broken that.
That was one of my biggest complaints about iOS coming from Android. Reading Hacker News comments on iOS is a horrible experience of swiping back and forth, back and forth.
What's worse is that the other browsers decided to emulate this bad behavior. Most of the mobile browsers now no longer properly wrap text when zooming, where once they did.
The font size on HN is about the same as in a book when the book is held right up against my screen (my screen is almost exactly arm's length). When I hold a book up to my face, at my normal reading distance, the text size is much bigger than HN's and - roughly - the same as the OP.
Do you read childrens' books? :) Well, you are correct, but again it depends on the size of the font on the book, right? Normal book or magazine text seems to be slightly larger than HN test on screen when viewed on "normal" reading distance.
Well, of course, but the book I was referring to was a UK Penguin fiction paperback - pretty much as 'standard' as it gets, although I don't know about international variations.
I also have a 27" 2560x1440 display, and I found this really difficult to read. The fonts are far, far too large and I kept feeling a bit overwhelmed at any distance. It was an actual effort of will to continue reading it until I lowered the page size to 75%. Viewed from around 2'1" distance as well.
I'm on a 13" MBP (1280x720) and I found his font size to be perfect. It was actually refreshing, since I'm used to tiny fonts. It felt like using a mechanical keyboard after years of chiclets.
It probably varies from person to person. I read all the blog from start to finish, although usually I don't read long texts, or read the start, then somewhere in the middle and maybe see what's in the end. So for the inpatient type like me it seems to work.
Sorry what? Are you more interested in "keeping them reading" or actually making accessible web sites that are easy to read? What exactly does interaction have to do with it? When I'm reading a book, I really don't want to turn pages constantly.
I think the author has a point .. however we're all conditioned now to the standard-ish font size on the web. We all sit at a distance from the screen optimised for a particular size - and as most sites are about the same we zoom in or our a little. Changing that is just jarring.
The number of characters per line is, however, important. I tend to either resize my browser to narrow sites like HN or use the 'Instapaper Text' button to totally transform the page.
One things missing in this article is talk about line-height. The longer the line of text and the longer the paragraph, the more line-height you need. The white gap between the two lines helps the eye to find the next line as it quickly scans back to the start.
Many news sites still use a small line-height reminiscent of newspapers where whitespace is expensive. I think the designers think it gives the feel of 'real' news.
TL;DR: lines around 70 - 80 characters are good. But more important is sufficient line-height to scan back to the start of the next line instantly.
Agree on the importance of line height—here's a calculator to help give a balanced line height—I'll add to the post. http://www.pearsonified.com/typography/
Maybe the author kept under the character limit
that he proposed, but due to large font I still had trouble
reading. Not only was it hard to find the next
line after finishing the previous one, but it
was also hard reading each word. I only want to
glance at a word to know what it is - which is why
those "the the" tricks work.
Ironically when I read this on my iPhone the text size was much smaller than an average novel. (Also, the line-heights need some TLC).
I like larger text, but I find this too big (when I read it on a computer). And I think for valid reasons beyond just personal preference. For starters, it's hard to scan or keep track of where you are in the post. I don't think Nielsen would hold this up as a great example of scanability - on my 11" Air I get just about two paragraphs on screen at the same time.
A/B testing is not the correct way to test what is objectively better. As we can read from here, people often have personal preferences to what they are used to and think are best. Unfortunately what people think is best is not necessarily same as what is objectively best for them.
If you put people into usability lab and test their reading speed and reading understanding with different text sizes etc. you get more objective results (that mostly agree with the OP as far as I can remember).
> A/B testing is not the correct way to test what is objectively better.
It's much less wrong than preference-based theorizing. If you switch to longer lines and viewer time on page increases...
> If you put people into usability lab and test their reading speed and reading understanding with different text sizes etc. you get more objective results (that mostly agree with the OP as far as I can remember).
In very different contexts than blogs or web pages, I'd guess, if your memory is not misleading you.
Hi; I love your writing! I can't speak for the OP (though I doubt they A/B tested), but most typographic conventions come from the days of typesetting and the subsequent studies of typographers and graphic designers in the 20th century.
If you haven't already, I highly recommend that you read Josef Mueller-Brockmann's Grid Systems in Graphic Design/Raster Systeme fuer die Visuele Gestaltung; the content is really right up your alley. Mueller-Brockmann gives the "rules" of typography, then gives examples of what happens when one deviates from those rules.
You'll also see from his book that the main problem with web design today is the lack of use of columnar text layouts. Blowing the text size up on web pages is just a hack to fill space; if more responsive layouts used multiple columns, that kind of trickery would be unnecessary. (Edit for clarity: I'm talking about multiple columns for a single body of text, much like you'd see in a newspaper or magazine.)
As you might expect, people who can read better can generally read longer lines, limited mainly by the number of words apprehended in a single "fix" or by the reader's visual acuity.
The article I link to references research on both physical line length and characters per line, but the methodology described in the article itself attempts to fix physical size of a character and distance of the eye from the screen.
This is about the font size I read most stuff on the web at, so I guess I agree. The font on most sites is too small for me, so I browser-zoom them in 1-3 stops.
As long as browser zoom works, though, I don't think it's a huge deal if people have preferences for larger or smaller fonts. Firefox, at least, even remembers your zoom level between visits to the same site. What really annoys me is that browser zoom breaks some sites. I'd recommend testing your site at one or two zoom levels in and out and see if the results are at least vaguely usable.
The problem I've got with browser zoom is that it behaves wildly inconsistently across sites. In some cases, it will expand all containers along with the font size, frequently pushing page elements off the viewscreen. It almost always scales images, which I generally don't want. In some cases, narrow-format pages end up with ridiculously skinny columns of text floating in a sea of either whitespace or distractions. And in far too many cases, pixel-perfect styling elements break completely, leading to wrapped navigation bars, buttons with clipped text, or just plain broken page layouts.
Sadly, Web 2.0 seems to be desperately trying to re-tread all of the worst aspects of 1.0 design with framesets, animated banners, moire backgrounds, and the like. Some of the worst comes from Google -- G+ and many of the newer Blogger styles are completely unreadable.
gwern, who posts frequently to HN, has one of the better site designs. Medium is actually Excellent. But it's rare enough that I encounter such sites that they're far more remarkable than they should be.
first thing I did to make it readable was hitting "ctrl -" three times. so the site kind of defeats itself in that respect.
I agree that there's an optimal number of characters per line, but it doesn't necessarily mean you need huge fonts. just make your content more narrow, or use a multi-column layout.
In my experience, it's difficult — if not impossible — to please all of the people all of the time. My startup (www.BeeLineReader.com) has browser plugins that reformat text and display it using eye-guiding color gradients. We get comments from people telling us that the plugin's text is too big, and we get comments telling us the that the text is too small. I suppose we should be happy that the ratio of these comments is roughly 1:1 — maybe this means we've struck the right balance?
Similarly, we get people telling us that we absolutely must use serif fonts, and others telling us that serifs make text harder to read and must be avoided.
Since our startup is focused on enhancing readability, we take these concerns and comments to heart, but we have realized that much of readability is more subjective and less guided by universal, hard-and-fast rules. So now we offer multiple text sizes and are going to incorporate multiple fonts.
...But then you get into the problem of offering too many choices instead of telling the user what is right (the paradox of choice). Sigh.
Since our startup is focused on enhancing readability, we take these concerns and comments to heart, but we have realized that much of readability is more subjective and less guided by universal, hard-and-fast rules.
A big challenge with typography, and design more generally, is that sometimes what is objectively superior in some measurable sense (retention, reading speed, etc.) can contradict what a test subject prefers subjectively. I agree with your caution about providing too many options at the expense of simplicity, but when you’re asking a question that doesn’t have a single universally correct answer, I don’t see that you have any better strategy available. Interesting idea for the reading aid, BTW.
Absolutely agree that users' subjective perceptions about readability don't always line up with actual results. We have a reading test on our website (controlled and randomized, n = 15,000), and the vast majority of test subjects find that it improves reading ease.
Interestingly, among the minority of subjects (15%) who perceive that our tech did not improve readability, most of them actually read faster in the test condition than in the control.
At the end of the day, both subjective and objective results matter. People don't willingly use a product that they don't like, and most people aren't interested in a product that is only playing games with their mind. So we have to build products and features that help people, and then provide education so that people feel can make fully informed decisions.
If anyone is confused like I was when I opened this, there's a media query that reduces the font size when your window is less than 900px wide. Full screen it and the article will have huge text.
We can't really debate the issue given that some of us are seeing a huge font (much larger than the 'magazine held up to the screen'), and some a more reasonable one, all depending on the width of our browser window. Apparently it flips between the two sizes around 900px width.
I don't think that's what the author intended. Back to the drawing board I reckon...
It's switching to mobile formatting. The text is smaller, but the phone is also closer to your face. I thought it was cool how you could switch layouts on the fly like that.
105 comments
[ 5.9 ms ] story [ 197 ms ] threadThough, in general I agree with the font size needing to be larger. I'm curious if it is as important as portrayed. Probably depends on the type of reading being done. And, as always, effective use of graphics trumps most "text size" decisions, I would think. (As I look over a comic with ridiculously small type.)
There's a reason I limit my source lines to 78 columns too. Well, many reasons if you consider 80x25. :-)
For HN, I personally set a max-width of 700px on .comment and pre blocks, to go with fonts of around 18px. If anyone new to Stylish wants the exact overrides I use to paste in verbatim, feel free to ask and I’ll look them up.
On my laptop screen a single line is about 35cm long and individual glyphs are about the size of those used in my 3 year old's book. In fact, this is exactly the problem with all such websites - they all look like kindergarten books. It is as if they are trying to speak to you s-l-o-w-l-y because you are both dumb and legally blind.
I find it sad that the web page (every web page) has to do it. It would be so nice if the web page were text, which the browser displayed.
Having ~60 character columns is the important thing. Large fonts, not so much.
https://addons.mozilla.org/en-US/firefox/addon/nosquint/
My pet peeve on layout is when a page is multi-column, but each column is taller than the viewing window, so the reader must scroll or page down in each column, then go up for the next column, then down to the next page.
This issue often shows up in PDF versions of scientific journal papers.
Bonus points if a "page down" function operates on the source page images rather than on the window view (iow, if repeated "page down" only shows the top of each source page, rather than each visible part of the viewing window.) Mouse-wheel scrolling helps, modulo interface "features".
Sorry to be that guy. I only point out grammar flubs if they are on 20px font or greater.
I don't think the author can show that this big font provides better readability.
One can easily make assumptions on how far the average reader views the screen and optimize the font size to that. As the comments here show, the font size selection here is too large.
--------------------
Reading it on a 27" 2560x1440 display was really nice. Same in vertical mode on a 9.7" iPad, but not so good in horizontal mode; it felt constricted like watching a letter-boxed 16:9 movie on a 19" 4:3 TV screen.
What I've found is that optimal text formatting varies greatly across devices. This is very hard to design for due to the variety of screens. From small screen devices like cell phones and gray-scale Kindle's, through larger 24" - 30" monitors and even larger HDTV's. On top of that there are DPI variances.
I've always been a fan of MVC, separating the model (actual document data/text/pictures) from the view (how it's displayed), and using a controller (device/screen-specific code) to display things optimally.
It would be nice if there was a standard that existed allowing authors to simply write documents, saving them as models. Then, each device could read from a standard model file and, using custom controller code, generate a view displaying the text/images optimized for its display.
Right now you see web developers creating multiple CSS layouts for different screen layouts. This works for most cases, but not edge scenarios. It feels very hacky, and I can't foresee people building websites/content-delivery-mechanisms like this 10 years into the future. There must be a better way.
This standard is called "HTML". What you describe is the entire idea of HTML. Frankly, it's embarrassing that a web browser presented with a long stream of text won't keep the line lengths capped at a reasonable length.
Marked on the Mac, which is a Markdown renderer, loads .mmd files and renders them against a CSS template which you can swap out. That fits the MVC idiom nicely, although far from a perfect implementation as it's merely meant for viewing markdown files, not everything on the internet.
Same reaction as OP, same monitor dimensions (both resolution and physical size) as you. Head to screen distance is probably around 2 feet?
The larger font amplified the "wall of text" feeling.
The number of characters per line is, however, important. I tend to either resize my browser to narrow sites like HN or use the 'Instapaper Text' button to totally transform the page.
One things missing in this article is talk about line-height. The longer the line of text and the longer the paragraph, the more line-height you need. The white gap between the two lines helps the eye to find the next line as it quickly scans back to the start.
Many news sites still use a small line-height reminiscent of newspapers where whitespace is expensive. I think the designers think it gives the feel of 'real' news.
TL;DR: lines around 70 - 80 characters are good. But more important is sufficient line-height to scan back to the start of the next line instantly.
Just a few letters per line
A novel concept
Side note: as monitors increase in size, I'm curious of the general population is increasing the distance between their eyes and the screen
I like larger text, but I find this too big (when I read it on a computer). And I think for valid reasons beyond just personal preference. For starters, it's hard to scan or keep track of where you are in the post. I don't think Nielsen would hold this up as a great example of scanability - on my 11" Air I get just about two paragraphs on screen at the same time.
If you put people into usability lab and test their reading speed and reading understanding with different text sizes etc. you get more objective results (that mostly agree with the OP as far as I can remember).
It's much less wrong than preference-based theorizing. If you switch to longer lines and viewer time on page increases...
> If you put people into usability lab and test their reading speed and reading understanding with different text sizes etc. you get more objective results (that mostly agree with the OP as far as I can remember).
In very different contexts than blogs or web pages, I'd guess, if your memory is not misleading you.
How physical text layout affects reading from screen.
http://images3.wikia.nocookie.net/__cb20060729105544/psychol...
If you haven't already, I highly recommend that you read Josef Mueller-Brockmann's Grid Systems in Graphic Design/Raster Systeme fuer die Visuele Gestaltung; the content is really right up your alley. Mueller-Brockmann gives the "rules" of typography, then gives examples of what happens when one deviates from those rules.
You'll also see from his book that the main problem with web design today is the lack of use of columnar text layouts. Blowing the text size up on web pages is just a hack to fill space; if more responsive layouts used multiple columns, that kind of trickery would be unnecessary. (Edit for clarity: I'm talking about multiple columns for a single body of text, much like you'd see in a newspaper or magazine.)
As you might expect, people who can read better can generally read longer lines, limited mainly by the number of words apprehended in a single "fix" or by the reader's visual acuity.
The article I link to references research on both physical line length and characters per line, but the methodology described in the article itself attempts to fix physical size of a character and distance of the eye from the screen.
As long as browser zoom works, though, I don't think it's a huge deal if people have preferences for larger or smaller fonts. Firefox, at least, even remembers your zoom level between visits to the same site. What really annoys me is that browser zoom breaks some sites. I'd recommend testing your site at one or two zoom levels in and out and see if the results are at least vaguely usable.
Sadly, Web 2.0 seems to be desperately trying to re-tread all of the worst aspects of 1.0 design with framesets, animated banners, moire backgrounds, and the like. Some of the worst comes from Google -- G+ and many of the newer Blogger styles are completely unreadable.
gwern, who posts frequently to HN, has one of the better site designs. Medium is actually Excellent. But it's rare enough that I encounter such sites that they're far more remarkable than they should be.
I agree that there's an optimal number of characters per line, but it doesn't necessarily mean you need huge fonts. just make your content more narrow, or use a multi-column layout.
Similarly, we get people telling us that we absolutely must use serif fonts, and others telling us that serifs make text harder to read and must be avoided.
Since our startup is focused on enhancing readability, we take these concerns and comments to heart, but we have realized that much of readability is more subjective and less guided by universal, hard-and-fast rules. So now we offer multiple text sizes and are going to incorporate multiple fonts.
...But then you get into the problem of offering too many choices instead of telling the user what is right (the paradox of choice). Sigh.
A big challenge with typography, and design more generally, is that sometimes what is objectively superior in some measurable sense (retention, reading speed, etc.) can contradict what a test subject prefers subjectively. I agree with your caution about providing too many options at the expense of simplicity, but when you’re asking a question that doesn’t have a single universally correct answer, I don’t see that you have any better strategy available. Interesting idea for the reading aid, BTW.
Interestingly, among the minority of subjects (15%) who perceive that our tech did not improve readability, most of them actually read faster in the test condition than in the control.
At the end of the day, both subjective and objective results matter. People don't willingly use a product that they don't like, and most people aren't interested in a product that is only playing games with their mind. So we have to build products and features that help people, and then provide education so that people feel can make fully informed decisions.
I don't think that's what the author intended. Back to the drawing board I reckon...