16 pixels For Body Copy. Anything Less Is A Costly Mistake • Hacker News Board

Re: 16 pixels For Body Copy. Anything Less Is A Costly Mistake

#131

Post by bilban » Sat, Oct 08, 2011, 4:56 AM UTC

parfe wrote: post #103

I installed the https://addons.mozilla.org/en-US/firefox/addon/stylish/ addon for firefox and have set news.yc to use the following stylesheet: @namespace url( http://www.w3.org/1999/xhtml ); @-moz-document domain("news.ycombinator.com") { .title{ font-size: 16px !important; padding: 0.5em !important; } .subtext{ font-size: .8em !important; padding-left: 0.5em !important; } .comment { font-size: 16px !important; } .c…

This is a great one site solution, but it get's a bit tedious personalising each and every site individually.

Re: 16 pixels For Body Copy. Anything Less Is A Costly Mistake

#132

Post by bilban » Sat, Oct 08, 2011, 5:03 AM UTC

xentronium wrote: post #44

I zoom most of the sites I read mostly due to the number of characters per line. When it is greater than 120-140, I can't focus on the line I'm reading. And that is by the way another reason I love fixed size layouts: you can zoom them however you like.

Re: fixed size layouts, I don't get this. You might be able to zoom these on the iphone, and scroll around the page easily with your finger. But I find fixed sized layouts can be a pain. Preferring fluid. Because at least I can resize the browser window - to get a good line length etc. It's annoying if you do zoom in and the text flows out the side of the browser. I don't enjoy side scrolling.

Re: 16 pixels For Body Copy. Anything Less Is A Costly Mistake

#133

Post by bilban » Sat, Oct 08, 2011, 5:10 AM UTC

grannyg00se wrote: post #113

It's just as easy to hit [ CTRL + ] as it is to hit backspace. If you are worried about your users' ability or knowledge, then you can simply include a link that says "adjust text size up / down" and let them click that to get the desired effect. Browsers allow users to customize the font for a reason. It's impossible to claim a default size that everyone is going to like.

It gets pretty tedious, when you are doing this for 80% of the sites you are visiting.

Also on slower hardware - zooming is a drag, and it can be slow.

The browsers do allow for customisaton, and I think this is probably the easiest thing for an end user. I use a minimal font size of 16px, and that works for me. But it does break some sites - Facebook's layout has been broken over the last month like this for example. Which is fine if you kind of understand the reason for it, but could confuse other users. Just as some navigation breaks, think of horizontal nav, that falls onto another line when the text size increases - I'm thinking hover states, and drop down menus.

Re: 16 pixels For Body Copy. Anything Less Is A Costly Mistake

#134

Post by bilban » Sat, Oct 08, 2011, 5:12 AM UTC

YeeHaw wrote: post #95

I thought the article was impossible to read at 16 px - just not enough density - too few words per line and too few lines per screen to read comfortably. I'm 46.

Each to their own.

Re: 16 pixels For Body Copy. Anything Less Is A Costly Mistake

#135

Post by bilban » Sat, Oct 08, 2011, 5:32 AM UTC

Interestingly the browser defaults have changed over time.

When we used to use 640x480 and 800x600 monitors, the browser defaults - for something like a h1 took up most of the screen. That's half the reason designers (before the advent of CSS) didn't use semantic markup. They'd just use bold to mark up a heading at the body text size. We had pixel images used for text in navigation at 10px. With something like 12px for body text (and tables for layouts.)

There were also radical inconsistencies between the browsers, with their text size rendering defaults.

I'm also pretty sure that the 16px default font size was a late edition. Either way a bit of history would help the article.

Plus, as many have pointed out, the fact that 16px appears differently depending on screen resolution, distance from the display is an important point that should have been stated.

The article may have been better arguing that making a website more readable is better for users and sustained readership.

Re: 16 pixels For Body Copy. Anything Less Is A Costly Mistake

#136

Post by now » Sat, Oct 08, 2011, 8:04 AM UTC

First of all, you should be measuring in points, not pixels. Secondly of all, why set font-size at all? Leave it at what the user has set it to and adapt your layout around the possibility of a range of font-size values.

Re: 16 pixels For Body Copy. Anything Less Is A Costly Mistake

#137

Post by dextorious » Sat, Oct 08, 2011, 1:44 PM UTC

wladimir wrote: post #96

dextorious wrote: post #71

Earlier quoted context omitted.

Yes, you could provide multiple bitmaps in a website now, but in a convoluted way (with some custom javascript checking for resize events etc). In the icons case, it happens automatically. As for SVG, client rendering time would be insignificant for most case (for a desktop machine at least, they have CPU to spare). But currently used IE version (> 6) for one don't support SVG. And the main problem are bitmap assets…

Sure... I didn't say that it would happen automatically, just that it could be done. Everything done on the web is convoluted. Btw: why would you have to watch resize events? Changing the size of the browser window (even rotating the screen/phone) doesn't change the DPI.

My bad, I meant resize as in zoom-in out (Ctrl +-) of the page in general, not the $(window).resize().

Re: 16 pixels For Body Copy. Anything Less Is A Costly Mistake

#138

Post by sjs » Sat, Oct 08, 2011, 3:11 PM UTC

leif wrote: post #51

Corrado wrote: post #10

I agree completely with this article. As I've gotten older (now 43) I have had more and more trouble reading web sites. In fact, I've noticed lately that I don't even try on some sites that have "small" fonts, I just close the tab. There are some sites that I really like and I generally depend on my browser to help me out. Chrome has a good habit of remembering my page zoom on a particular site so I don't even notice…

I'm 23 and I zoom in on plenty of sites.

The worst is when zooming breaks the layout causing some of the text to be located outside the viewport. I can't think of a specific example right now but it has happened to me a few times and it's infuriating.

(There are workarounds but they shouldn't be necessary.)

Re: 16 pixels For Body Copy. Anything Less Is A Costly Mistake

#139

Post by bostonvaulter2 » Sat, Oct 08, 2011, 7:09 PM UTC

Is there a way to use javascript to detect how far zoomed in most of your readers are?

Re: 16 pixels For Body Copy. Anything Less Is A Costly Mistake

#140

Post by danmaz74 » Sat, Oct 08, 2011, 8:06 PM UTC

bilban wrote: post #128

danmaz74 wrote: post #45

I'm 37 and I zoom almost every website I use - I also like to be distant enough from the screen. I also very often use ctrl+A to have white text on blue background (I know, most designers will hate me at this point - but keep in mind that I usually sit in front of a screen 12 hours a day, 10 hours a day on weekends...). Last thing, I just hate sites that use facebook comments - eg techcrunch - because fonts don't sca…

Seriously consider an alternative. Tweak your browser to your liking. You can always break out into a different browser, if you want to see the site the way the author intended. I use my own style sheet with opera, and customise firefox flipping between the two, and occasionally breaking out into chrome. I also find the terminal more readable than the browser, so have made my browser look like the terminal - I even u…

Thanks for the suggestion, but I prefer to give the designers at least a chance to impress me ;)