10 ms·

Optimal Characters Per Line

189 points by mikeyanderson 13y ago

mddw 13y ago
I wholeheartedly agree with your point, but why do you use Facebook comments, displayed in a whooping 11px ?
- mikeyanderson 13y ago
  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.
dangoldin 13y ago
Nice post. Something similar that was posted on here a while back is the "Interactive Guide to Blog Typography": http://www.kaikkonendesign.fi/typography/ http://www.kaikkonendesign.fi/typography/
taeric 13y ago
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.)
elnate 13y ago
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?
- clarry 13y ago
  I had the opposite experience, although I would have preferred it just a teeny bit smaller. Coming back to read long lines on HN is quite awkward. There's a reason I limit my source lines to 78 columns too. Well, many reasons if you consider 80x25. :-)
  - Chris_Newton 13y ago
    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.
- abcd_f 13y ago
  Yes, it's hard to read. 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.
- jeltz 13y ago
  Yeah, I stopped reading it due to the huge font being too hard to read.
clarry 13y ago
I hope that this article has at least caused you to think about the way your web page displays text. 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.
pubby 13y ago
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.
- mikeyanderson 13y ago
  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.
  - joshvm 13y ago
    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.
    - dmckeon 13y ago
      I can recommend the "NoSquint" Firefox add-on that remembers your preferred text size for each site: https://addons.mozilla.org/en-US/firefox/addon/nosquint/ 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".
  - didgeoridoo 13y ago
    There's always responsive typography using the webcam :) https://hacks.mozilla.org/2013/02/responsive-web-typography-with-webrtc/ https://hacks.mozilla.org/2013/02/responsive-web-typography-...
teleclimber 13y ago
> ...on this blog their are about 75 characters... Sorry to be that guy. I only point out grammar flubs if they are on 20px font or greater.
lucb1e 13y ago
For the record, I zoomed out on this website for a more comfortable read. Not really the way to drive your point home I think.
Kiro 13y ago
I don't know. I found the article very hard to read.
kyberias 13y ago
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.
- dgallagher 13y ago
  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.
  - thaumasiotes 13y ago
    > 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.
brownbat 13y ago
For better readability, try 75 characters per sentence. The larger font amplified the "wall of text" feeling.
tshadwell 13y ago
I can't read this while doing something else - I have to select the window and scroll every few words.
- mikeyanderson 13y ago
  That's part of the point. If you don't get readers interacting quickly it's very hard to keep them reading.
  - kyberias 13y ago
    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.
lessnonymous 13y ago
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.
- mikeyanderson 13y ago
  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/ http://www.pearsonified.com/typography/
- mhb 13y ago
  Thanks. A suggestion - the TL;DR is much more helpful if it is before the text - like an abstract.
  - omaranto 13y ago
    It's a TL;WR (too long; won't read) if you put it at the top.
shamino 13y ago
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.
analog31 13y ago
Limiting the text Just a few letters per line A novel concept
- KC8ZKF 13y ago
  It's hardly novel.
  - BrandonMarc 13y ago
    FTFY: It's hard for a novel.
nchlswu 13y ago
So there were some great points in there, all of which were valid. But immediately addressing those points doesn't mean using large type follows. Side note: as monitors increase in size, I'm curious of the general population is increasing the distance between their eyes and the screen
Foomandoonian 13y ago
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.
gwern 13y ago
Has OP A/B tested his claims and theories in any way, or is it just a tissue of personal preferences backed by rationalizations and just-so stories?
- nabla9 13y ago
  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).
  - gwern 13y ago
    > 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.
    - nabla9 13y ago
      Here is good overview of the research: How physical text layout affects reading from screen. http://images3.wikia.nocookie.net/__cb20060729105544/psychology/images/e/eb/Dyson,_M_C_%282004%29.pdf http://images3.wikia.nocookie.net/__cb20060729105544/psychol...
- rmrfrmrf 13y ago
  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.)
_delirium 13y ago
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.
- dredmorbius 13y ago
  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.
0xdeadbeefbabe 13y ago
I hate reading on any screen but my black and white kindle.
tech-no-logical 13y ago
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.
gambogi 13y ago
I nearly lost it at "inforamavores"
gnicholas 13y ago
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.
- Chris_Newton 13y ago
  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.
  - gnicholas 13y ago
    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.
rileyjshaw 13y ago
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.
Luc 13y ago
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...
- selectodude 13y ago
  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.
Greed 13y ago
I actually found this really hard to read because of how large the text is, the author needs to reevaluate his font size.
narsil 13y ago
Shorter lines are easier to read. Long lines with large characters like in the OP's post are harder.
mmgutz 13y ago
As others have pointed out here, the article above is much too large on an Apple 27" Cinema Display. One of my peeves with web pages in general is I choose a default font face, size and weight based on my monitor or laptop screen and the distance from which I view. The first thing usability experts do is override that with a custom font face at fixed point sizes. I don't get bored looking at the apps on the desktop using my preferences, why is it different on the web?
lnanek2 13y ago
I like the linked site, personally. I've always liked big huge readable text and will zoom or text zoom a site to make it so. That said, I do think it is tougher to scan his site for relevant headings/navigation/etc. that I want to interact with. The text is just so huge and there's nothing else and even just quick checking the headings you have to scroll a lot. Smaller text would allow more glance-ability.
ianet-goog 13y ago
I'm reminded of the 'Osprey - The Magic of Reading' paper by the late (great) Bill Hill
chj 13y ago
Information Architects has a much more thorough article on this matter: http://ia.net/blog/100e2r/ http://ia.net/blog/100e2r/
wudf 13y ago
When I'm reading a book, I've already decided that I'm going to read every word. On your website (on any website), I'm going to skim first to evaluate how much fluff and filler is written and to hopefully get to the point. With such large font, there is so little content in front of me that I'm actually frustrated with the encumbrance. If I didn't know better, I'd feel insulted that you deemed it necessary to try to control my browsing experience so strictly.
TacticalCoder 13y ago
I find it interesting that both the blog entry and the picture of the physical book he's using are not justified but simply jagged right. I've written books in both LaTeX and QuarkXPress and they were always using justification. Actually most books in english / french are justified (and probably many other languages) are justified. Heck, I couldn't find a single book here not using justification and my oldest book (16th century!) is using justification! As a matter of personal preference I find justification way easier on the eyes than justification (as long as hyphenation is done right) and I'm very thankful that most books out there are using justification. Of course justification on the Web is hard, especially without hyphenation and even more so if you try to use lines with few characters. But I find it a bit weird to "make a point" by taking of picture of a book which is jagged right when something like, say, 99% of the books out there are using justification.
- chipotle_coyote 13y ago
  I think your qualification "as long as hyphenation is done right" is the key here. I don't know of a single web browser that lets the user turn hyphenation on and off, and while CSS3 supports hyphenation, browser support is inconsistent. (Chrome is the most notable problem child here, oddly enough.) And you could go farther and say "as long as justification is done right." All browsers that I've seen do justification use a very simple algorithm compared to LaTeX, Quark, and InDesign, and bad justification -- which tends to leave huge gaps of white space between words -- is harder to read than ragged right. Personally, I think the best you can do reliably on the web right now is ragged right with CSS3 hyphenation enabled for elements that contain body text. But I wouldn't turn on full justification.
  - fudged71 13y ago
    It is really odd to me that Chrome is behind for hyphenation. It is such a crucial thing for typography.
- BrandonMarc 13y ago
  Ragged right may be rare, but that doesn't make it less optimal. Many argue the Betamax was superior to VHS, but Sony lost that battle. The studies I've heard of discuss how ragged right is easier for reading and comprehension, due to the 100% consistent spacing between words. On some sites the word-spacing is so jarring I find myself wanting to leave the page even while I'm trying to read what it says ... one of those situations where, if you notice it, it's because there's something wrong going on.
mariusmg 13y ago
"I’m sick and tired of cramped websites that have tiny type and don’t use the whole screen well" It's own site doesn't use the whole screen. So pot...meet kettle.
coldtea 13y ago
Nice, but here's an improvement: lose the 2-line section titles. Make them slightly smaller so they fit in one line, and can be read in one fell swoop.
- markeganfuller 13y ago
  That is the one thing that jumped out at me. Otherwise I agree with everything.
logn 13y ago
Maybe this is why, even on an 11 inch netbook, I generally surf the web with the browser window at about 3/5ths the overall screen width. I don't like columns that get too wide.
userbinator 13y ago
On each full paragraph line of text on this blog there are about 75 characters—which is widely regarded as the most characters that you can put on a line and still have it optimal for readers. I still use 80 columns as the limit on all the text documents I write, including source code. Occasionally I'll push it up to 128 but most of the time even I personally prefer 80 as an ideal width. Also, who maximises a browser, unless their monitor is tiny? Especially with resolutions where they are today. I have around a dozen other apps open at the moment and none of them are maximised.
- weirdcat 13y ago
  I actually do maximize the browser quite often when just browsing, i.e. not using the web while working on other things. My main screen is a 27" at 2560x1440, and I like how a maximized window allows for less distractions and more horizontal tab space. Unless the page doesn't have a max-width of course, which usually forces me to resize the window; for HN I created a restyling Greasemonkey script though.
- BrandonMarc 13y ago
  Also, who maximises a browser, unless their monitor is tiny? Especially with resolutions where they are today. I have around a dozen other apps open at the moment and none of them are maximised. Someone who doesn't have state-of-the-art resolutions. My 3 screens top out at 1280 px wide, so any browser window is maximized by default.
  - userbinator 13y ago
    Mine are 1280x1024 too, and I've never had to maximise windows much - the browser window I'm posting this comment from happens to be 900x600.
- icebraining 13y ago
  I maximize them. I'd rather use a tiling VM with a bunch of virtual workspaces than having to deal with resizing and minimizing windows.
mattdeboard 13y ago
Point #4 is basic journalism. Headline, nut graf + inverted pyramid.
dredmorbius 13y ago
I'm all about readable fonts, though mikeyanderson is going a bit overboard in the too big direction. He's also committing the fatal sin of mixing ems (for his h1 title font size) and px (for his h1 line height). The result is overlapping characters: http://i.imgur.com/tEplJmv.png http://i.imgur.com/tEplJmv.png I've griped on HN (and elsewhere) more than once about small fonts, low contrast (http://www.contrastrebellion.com/ http://www.contrastrebellion.com/ can't get enough good words from me), and the reading-friendly tools such as Readability.com (despite some recent updates I'm not entirely happy with), InstaPaper, Pocket, etc. The latter are a great way to avoid this pain with minimal effort, and "read now" bookmarklets make this pretty near instant for most users. The styles presented by any of these services would do well as a default for virtually all content-rich sites. I also have become all but obsessive in restyling sites whose CSS fails me. Which is to say, most of them (including Hacker News: http://stylebot.me/styles/2945 http://stylebot.me/styles/2945). Using the Stylebot Chrome plugin, I've created, as of this writing, 819 stylesheets (some applied to multiple sites, some the same basic "unstyled.css" sometimes lightly modified). I think I've reached the point where I can make some fairly definitive statements, at least as far as UI/UX goes: ⚫ Use ems. Do not use px (graphics positioning excepted). NEVER mix ems and px. ⚫ Provide a high contrast between foreground and background. No, you're not limited to black on white (though it's a safe choice). Brad Frost's website illustrates a styled but very clear example (and it's what he does): http://bradfrostweb.com/ http://bradfrostweb.com/ (It's also a beautifully fluid site). ⚫ While we're talking about contrast: take your "but black on white is too much contrast" talk and bin it. The guidance for brown type on an off-white page is for paper. Which is a reflective medium. Screens are, almost always, emissive. Which is to say, they have a maximum brightness, a much lower native contrast ratio than paper, and their display properties get markedly worse as ambient light levels increase. Most displays have a brightness/contrast control which can reduce the maximum brightness, and on many devices this is either automatic or easily accessed by the user (Fn+PgUp/PgDn on my Thinkpad, Macs have similar controls). However they cannot be pushed over their maximums, and in many cases, that's going to be insufficient to read your tiny low-contrast font. In my experience, any text at #333 or lighter is already too light. ⚫ Single-column designs are almost always preferable to multi-column. With an adaptive width, this will frequently address the needs of both desktop and mobile users with very few additional adaptations. ⚫ Respect your user's font choices. There are two classes of user: those who've selected font sizes to address their reading comfort and/or visual needs, and those who have no idea or clue. By forcing a specification on them, you're frustrating both. Using relative sizes "medium", "smaller", "larger" is a better bet. ⚫ Break the zoom button and you may not die, but your page is dead to me. ⚫ Don't include iframes with their own stylesheets. These cannot be overridden by the user. And yes, I'm talking to you, Amazon. Given the visual discomfort these elements present, I've simply set them to "display: none". ⚫ Don't explicitly scale HTML elements (p, a, li, tr, td, ol, ul, dt, dd, blockquote, pre). Style classes or IDs instead. One of my quick-and-dirty fixes is to apply an "important!" inherit property to each of these elments. CSS hackers will know about reset.css stylesheets, these can be useful to users as well. ⚫ Don't push your text to the edge of the screen. Another style I apply to virtually all sites is a "padding: 0 2em 2em 2em;" to the main text block. Generally padding at the top isn't necessary, but keeping the text from running straight into the gutter greatly improves readability. ⚫ It's hard to go wrong with a 45-55em max-width, auto width, and auto left and right margins. ⚫ Put some fucking padding and/or margins around images and other inline elements. 0.5 - 1em at a minimum. ⚫ CSS columns (a trick I picked up recently here on HN) are a good way for presenting your navigation / sidebar elements. Not supported in all browsers (what is), but the good ones do. You can see them used in the article below. ⚫ And if I sound fucking grumpy, it's because I am fucking grumpy. My first response to opening your goddamned webpage shouldn't be "fuck it, do I really want to spend time fixing this?" Because usually the answer is "no." I recently posted to reddit with several specific examples of sites converted from multi-column to single-column: http://www.reddit.com/r/webdev/comments/1tm4ox/user_site_restyling_multicolumn_vs_fullwidth/ http://www.reddit.com/r/webdev/comments/1tm4ox/user_site_res...
superpatosainz 13y ago
I love how this carefully designed site is sensible with its readibility and then you get the Facebook-powered comments with letters smaller than ants. Not OP's fault, but just a heads up.
jheriko 13y ago
did anyone else quickly notice how many eye movements they were making on this page and how irritating it was? i've never before noticed this to be a problem... its surprisingly distracting, and i felt like it was slowing me down which became frustrating quite quickly. i don't think i have a particular bias about this - i usually use tiny fonts and want my screen filled with text for coding purposes - although i do tend to stick to 80 chars or less per line for code as well but i think that because code isn't read quickly i've just never noticed this before...
anonu 13y ago
You can never really know how the end result is going to appear to your users/readers because everyone has different types of monitors, resolutions, layouts. For example, I have 4 monitors at work that have all been rotated 90 degrees from the "norm" - in other words they're all in portrait mode. My browser window dimensions are thus longer than it is wide - which I think is not what most web developers expect. Furthermore, I really do enjoy small fonts and much prefer to see as much of a site on 1 page as possible. I had to zoom out of that page just to be able to read it comfortably without scrolling too much.
mwww 13y ago
Nm
scholia 13y ago
Oliver Reichenstein from iA did this much better in 2006. He also had a photo of a book next to a screen.... The 100% Easy-2-Read Standard http://ia.net/blog/100e2r/ http://ia.net/blog/100e2r/
youWontLikeThis 13y ago
From the article "I’ve come to believe that the problem with reading on a screen isn’t the backlight" How cute and scientific. I'm trashing my kindle right now.

189 points by mikeyanderson 13y ago

mddw 13y ago

I wholeheartedly agree with your point, but why do you use Facebook comments, displayed in a whooping 11px ?

mikeyanderson 13y ago
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.

dangoldin 13y ago

Nice post. Something similar that was posted on here a while back is the "Interactive Guide to Blog Typography": http://www.kaikkonendesign.fi/typography/ http://www.kaikkonendesign.fi/typography/

taeric 13y ago

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

elnate 13y ago

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?

clarry 13y ago
I had the opposite experience, although I would have preferred it just a teeny bit smaller. Coming back to read long lines on HN is quite awkward. There's a reason I limit my source lines to 78 columns too. Well, many reasons if you consider 80x25. :-)
- Chris_Newton 13y ago
  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.
abcd_f 13y ago
Yes, it's hard to read. 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.
jeltz 13y ago
Yeah, I stopped reading it due to the huge font being too hard to read.

clarry 13y ago

I hope that this article has at least caused you to think about the way your web page displays text. 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.

pubby 13y ago

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.

mikeyanderson 13y ago
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.
- joshvm 13y ago
  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.
  - dmckeon 13y ago
    I can recommend the "NoSquint" Firefox add-on that remembers your preferred text size for each site: https://addons.mozilla.org/en-US/firefox/addon/nosquint/ 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".
- didgeoridoo 13y ago
  There's always responsive typography using the webcam :) https://hacks.mozilla.org/2013/02/responsive-web-typography-with-webrtc/ https://hacks.mozilla.org/2013/02/responsive-web-typography-...

teleclimber 13y ago

> ...on this blog their are about 75 characters... Sorry to be that guy. I only point out grammar flubs if they are on 20px font or greater.

lucb1e 13y ago

For the record, I zoomed out on this website for a more comfortable read. Not really the way to drive your point home I think.

Kiro 13y ago

I don't know. I found the article very hard to read.

kyberias 13y ago

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.

dgallagher 13y ago
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.
- thaumasiotes 13y ago
  > 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.

brownbat 13y ago

For better readability, try 75 characters per sentence. The larger font amplified the "wall of text" feeling.

tshadwell 13y ago

I can't read this while doing something else - I have to select the window and scroll every few words.

mikeyanderson 13y ago
That's part of the point. If you don't get readers interacting quickly it's very hard to keep them reading.
- kyberias 13y ago
  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.

lessnonymous 13y ago

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.

mikeyanderson 13y ago
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/ http://www.pearsonified.com/typography/
mhb 13y ago
Thanks. A suggestion - the TL;DR is much more helpful if it is before the text - like an abstract.
- omaranto 13y ago
  It's a TL;WR (too long; won't read) if you put it at the top.

shamino 13y ago

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.

analog31 13y ago

Limiting the text Just a few letters per line A novel concept

KC8ZKF 13y ago
It's hardly novel.
- BrandonMarc 13y ago
  FTFY: It's hard for a novel.

nchlswu 13y ago

So there were some great points in there, all of which were valid. But immediately addressing those points doesn't mean using large type follows. Side note: as monitors increase in size, I'm curious of the general population is increasing the distance between their eyes and the screen

Foomandoonian 13y ago

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.

gwern 13y ago

Has OP A/B tested his claims and theories in any way, or is it just a tissue of personal preferences backed by rationalizations and just-so stories?

nabla9 13y ago
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).
- gwern 13y ago
  > 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.
  - nabla9 13y ago
    Here is good overview of the research: How physical text layout affects reading from screen. http://images3.wikia.nocookie.net/__cb20060729105544/psychology/images/e/eb/Dyson,_M_C_%282004%29.pdf http://images3.wikia.nocookie.net/__cb20060729105544/psychol...
rmrfrmrf 13y ago
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.)

_delirium 13y ago

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.

dredmorbius 13y ago
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.

0xdeadbeefbabe 13y ago

I hate reading on any screen but my black and white kindle.

tech-no-logical 13y ago

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.

gambogi 13y ago

I nearly lost it at "inforamavores"

gnicholas 13y ago

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.

Chris_Newton 13y ago
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.
- gnicholas 13y ago
  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.

rileyjshaw 13y ago

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.

Luc 13y ago

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

selectodude 13y ago
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.

Greed 13y ago

I actually found this really hard to read because of how large the text is, the author needs to reevaluate his font size.

narsil 13y ago

Shorter lines are easier to read. Long lines with large characters like in the OP's post are harder.

mmgutz 13y ago

As others have pointed out here, the article above is much too large on an Apple 27" Cinema Display. One of my peeves with web pages in general is I choose a default font face, size and weight based on my monitor or laptop screen and the distance from which I view. The first thing usability experts do is override that with a custom font face at fixed point sizes. I don't get bored looking at the apps on the desktop using my preferences, why is it different on the web?

lnanek2 13y ago

I like the linked site, personally. I've always liked big huge readable text and will zoom or text zoom a site to make it so. That said, I do think it is tougher to scan his site for relevant headings/navigation/etc. that I want to interact with. The text is just so huge and there's nothing else and even just quick checking the headings you have to scroll a lot. Smaller text would allow more glance-ability.

ianet-goog 13y ago

I'm reminded of the 'Osprey - The Magic of Reading' paper by the late (great) Bill Hill

chj 13y ago

Information Architects has a much more thorough article on this matter: http://ia.net/blog/100e2r/ http://ia.net/blog/100e2r/

wudf 13y ago

When I'm reading a book, I've already decided that I'm going to read every word. On your website (on any website), I'm going to skim first to evaluate how much fluff and filler is written and to hopefully get to the point. With such large font, there is so little content in front of me that I'm actually frustrated with the encumbrance. If I didn't know better, I'd feel insulted that you deemed it necessary to try to control my browsing experience so strictly.

TacticalCoder 13y ago

I find it interesting that both the blog entry and the picture of the physical book he's using are not justified but simply jagged right. I've written books in both LaTeX and QuarkXPress and they were always using justification. Actually most books in english / french are justified (and probably many other languages) are justified. Heck, I couldn't find a single book here not using justification and my oldest book (16th century!) is using justification! As a matter of personal preference I find justification way easier on the eyes than justification (as long as hyphenation is done right) and I'm very thankful that most books out there are using justification. Of course justification on the Web is hard, especially without hyphenation and even more so if you try to use lines with few characters. But I find it a bit weird to "make a point" by taking of picture of a book which is jagged right when something like, say, 99% of the books out there are using justification.

chipotle_coyote 13y ago
I think your qualification "as long as hyphenation is done right" is the key here. I don't know of a single web browser that lets the user turn hyphenation on and off, and while CSS3 supports hyphenation, browser support is inconsistent. (Chrome is the most notable problem child here, oddly enough.) And you could go farther and say "as long as justification is done right." All browsers that I've seen do justification use a very simple algorithm compared to LaTeX, Quark, and InDesign, and bad justification -- which tends to leave huge gaps of white space between words -- is harder to read than ragged right. Personally, I think the best you can do reliably on the web right now is ragged right with CSS3 hyphenation enabled for elements that contain body text. But I wouldn't turn on full justification.
- fudged71 13y ago
  It is really odd to me that Chrome is behind for hyphenation. It is such a crucial thing for typography.
BrandonMarc 13y ago
Ragged right may be rare, but that doesn't make it less optimal. Many argue the Betamax was superior to VHS, but Sony lost that battle. The studies I've heard of discuss how ragged right is easier for reading and comprehension, due to the 100% consistent spacing between words. On some sites the word-spacing is so jarring I find myself wanting to leave the page even while I'm trying to read what it says ... one of those situations where, if you notice it, it's because there's something wrong going on.

mariusmg 13y ago

"I’m sick and tired of cramped websites that have tiny type and don’t use the whole screen well" It's own site doesn't use the whole screen. So pot...meet kettle.

coldtea 13y ago

Nice, but here's an improvement: lose the 2-line section titles. Make them slightly smaller so they fit in one line, and can be read in one fell swoop.

markeganfuller 13y ago
That is the one thing that jumped out at me. Otherwise I agree with everything.

logn 13y ago

Maybe this is why, even on an 11 inch netbook, I generally surf the web with the browser window at about 3/5ths the overall screen width. I don't like columns that get too wide.

userbinator 13y ago

On each full paragraph line of text on this blog there are about 75 characters—which is widely regarded as the most characters that you can put on a line and still have it optimal for readers. I still use 80 columns as the limit on all the text documents I write, including source code. Occasionally I'll push it up to 128 but most of the time even I personally prefer 80 as an ideal width. Also, who maximises a browser, unless their monitor is tiny? Especially with resolutions where they are today. I have around a dozen other apps open at the moment and none of them are maximised.

weirdcat 13y ago
I actually do maximize the browser quite often when just browsing, i.e. not using the web while working on other things. My main screen is a 27" at 2560x1440, and I like how a maximized window allows for less distractions and more horizontal tab space. Unless the page doesn't have a max-width of course, which usually forces me to resize the window; for HN I created a restyling Greasemonkey script though.
BrandonMarc 13y ago
Also, who maximises a browser, unless their monitor is tiny? Especially with resolutions where they are today. I have around a dozen other apps open at the moment and none of them are maximised. Someone who doesn't have state-of-the-art resolutions. My 3 screens top out at 1280 px wide, so any browser window is maximized by default.
- userbinator 13y ago
  Mine are 1280x1024 too, and I've never had to maximise windows much - the browser window I'm posting this comment from happens to be 900x600.
icebraining 13y ago
I maximize them. I'd rather use a tiling VM with a bunch of virtual workspaces than having to deal with resizing and minimizing windows.

mattdeboard 13y ago

Point #4 is basic journalism. Headline, nut graf + inverted pyramid.

dredmorbius 13y ago

I'm all about readable fonts, though mikeyanderson is going a bit overboard in the too big direction. He's also committing the fatal sin of mixing ems (for his h1 title font size) and px (for his h1 line height). The result is overlapping characters: http://i.imgur.com/tEplJmv.png http://i.imgur.com/tEplJmv.png I've griped on HN (and elsewhere) more than once about small fonts, low contrast (http://www.contrastrebellion.com/ http://www.contrastrebellion.com/ can't get enough good words from me), and the reading-friendly tools such as Readability.com (despite some recent updates I'm not entirely happy with), InstaPaper, Pocket, etc. The latter are a great way to avoid this pain with minimal effort, and "read now" bookmarklets make this pretty near instant for most users. The styles presented by any of these services would do well as a default for virtually all content-rich sites. I also have become all but obsessive in restyling sites whose CSS fails me. Which is to say, most of them (including Hacker News: http://stylebot.me/styles/2945 http://stylebot.me/styles/2945). Using the Stylebot Chrome plugin, I've created, as of this writing, 819 stylesheets (some applied to multiple sites, some the same basic "unstyled.css" sometimes lightly modified). I think I've reached the point where I can make some fairly definitive statements, at least as far as UI/UX goes: ⚫ Use ems. Do not use px (graphics positioning excepted). NEVER mix ems and px. ⚫ Provide a high contrast between foreground and background. No, you're not limited to black on white (though it's a safe choice). Brad Frost's website illustrates a styled but very clear example (and it's what he does): http://bradfrostweb.com/ http://bradfrostweb.com/ (It's also a beautifully fluid site). ⚫ While we're talking about contrast: take your "but black on white is too much contrast" talk and bin it. The guidance for brown type on an off-white page is for paper. Which is a reflective medium. Screens are, almost always, emissive. Which is to say, they have a maximum brightness, a much lower native contrast ratio than paper, and their display properties get markedly worse as ambient light levels increase. Most displays have a brightness/contrast control which can reduce the maximum brightness, and on many devices this is either automatic or easily accessed by the user (Fn+PgUp/PgDn on my Thinkpad, Macs have similar controls). However they cannot be pushed over their maximums, and in many cases, that's going to be insufficient to read your tiny low-contrast font. In my experience, any text at #333 or lighter is already too light. ⚫ Single-column designs are almost always preferable to multi-column. With an adaptive width, this will frequently address the needs of both desktop and mobile users with very few additional adaptations. ⚫ Respect your user's font choices. There are two classes of user: those who've selected font sizes to address their reading comfort and/or visual needs, and those who have no idea or clue. By forcing a specification on them, you're frustrating both. Using relative sizes "medium", "smaller", "larger" is a better bet. ⚫ Break the zoom button and you may not die, but your page is dead to me. ⚫ Don't include iframes with their own stylesheets. These cannot be overridden by the user. And yes, I'm talking to you, Amazon. Given the visual discomfort these elements present, I've simply set them to "display: none". ⚫ Don't explicitly scale HTML elements (p, a, li, tr, td, ol, ul, dt, dd, blockquote, pre). Style classes or IDs instead. One of my quick-and-dirty fixes is to apply an "important!" inherit property to each of these elments. CSS hackers will know about reset.css stylesheets, these can be useful to users as well. ⚫ Don't push your text to the edge of the screen. Another style I apply to virtually all sites is a "padding: 0 2em 2em 2em;" to the main text block. Generally padding at the top isn't necessary, but keeping the text from running straight into the gutter greatly improves readability. ⚫ It's hard to go wrong with a 45-55em max-width, auto width, and auto left and right margins. ⚫ Put some fucking padding and/or margins around images and other inline elements. 0.5 - 1em at a minimum. ⚫ CSS columns (a trick I picked up recently here on HN) are a good way for presenting your navigation / sidebar elements. Not supported in all browsers (what is), but the good ones do. You can see them used in the article below. ⚫ And if I sound fucking grumpy, it's because I am fucking grumpy. My first response to opening your goddamned webpage shouldn't be "fuck it, do I really want to spend time fixing this?" Because usually the answer is "no." I recently posted to reddit with several specific examples of sites converted from multi-column to single-column: http://www.reddit.com/r/webdev/comments/1tm4ox/user_site_restyling_multicolumn_vs_fullwidth/ http://www.reddit.com/r/webdev/comments/1tm4ox/user_site_res...

superpatosainz 13y ago

I love how this carefully designed site is sensible with its readibility and then you get the Facebook-powered comments with letters smaller than ants. Not OP's fault, but just a heads up.

jheriko 13y ago

did anyone else quickly notice how many eye movements they were making on this page and how irritating it was? i've never before noticed this to be a problem... its surprisingly distracting, and i felt like it was slowing me down which became frustrating quite quickly. i don't think i have a particular bias about this - i usually use tiny fonts and want my screen filled with text for coding purposes - although i do tend to stick to 80 chars or less per line for code as well but i think that because code isn't read quickly i've just never noticed this before...

anonu 13y ago

You can never really know how the end result is going to appear to your users/readers because everyone has different types of monitors, resolutions, layouts. For example, I have 4 monitors at work that have all been rotated 90 degrees from the "norm" - in other words they're all in portrait mode. My browser window dimensions are thus longer than it is wide - which I think is not what most web developers expect. Furthermore, I really do enjoy small fonts and much prefer to see as much of a site on 1 page as possible. I had to zoom out of that page just to be able to read it comfortably without scrolling too much.

mwww 13y ago

scholia 13y ago

Oliver Reichenstein from iA did this much better in 2006. He also had a photo of a book next to a screen.... The 100% Easy-2-Read Standard http://ia.net/blog/100e2r/ http://ia.net/blog/100e2r/

youWontLikeThis 13y ago

From the article "I’ve come to believe that the problem with reading on a screen isn’t the backlight" How cute and scientific. I'm trashing my kindle right now.