Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

smashingmagazine.com

Post reply on HN
Print view View original

61–70 of 146 posts

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

#61

Post by blahedo »

I think I need to put together a form email, or possibly a webpage to link to, to send to web designers who pontificate about web design and reaching your audience---on a webpage that doesn't fit in my window AND has disabled my scrollbar. Meaning I literally cannot read it without sending it off to Readability or otherwise adjusting my browsing setup.

This fault is honestly an order of magnitude more common among webpages that are specifically discussing user-oriented design. Argh.

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

#62

Post by mkr-hn »

frankiejr wrote: post #12

Working closely with designers and observing client requests over the past decade or so, I've seen another pattern that also leads to the "small type" problem: Client requests to get as much above the fold as possible. Granted, the majority of the projects I've worked on in the past four or five years have been very large organizations. When client committees make decisions, it's much harder to teach them or even ste…

I think if you need to shrink things to fit it above the fold, it's time to reconsider what you're putting there. I've never had trouble fitting everything important comfortably above the fold, but I'm only working with my own projects.

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

#63

Post by [deleted] »

blahedo wrote: post #61

I think I need to put together a form email, or possibly a webpage to link to, to send to web designers who pontificate about web design and reaching your audience---on a webpage that doesn't fit in my window AND has disabled my scrollbar . Meaning I literally cannot read it without sending it off to Readability or otherwise adjusting my browsing setup. This fault is honestly an order of magnitude more common among w…

[deleted]

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

#66

Post by ugh »

Thrymr wrote: post #38
dextorious wrote: post #32

Earlier quoted context omitted.

He means "for the most common monitor DPIs", duh. The problem is: due to the need to mix and align with bitmap graphics, web design is most convenient when specifying font sizes in pixels (except for simple pages, like HN and such, fluid designs cannot cover most cases in a mainstream enough fashion). So, given that, he had to mention a specific pixel setting. But he took into account most common DPIs. For the majori…

Can we get over specifying text size by pixels already? You don't know what DPI monitor I will have when I look at your pages.

What’s the alternative? I know of no PPI-aware way of specifying font size.

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

#67

Post by FilterJoe »

If you ask a variety of people how readable they find a typical web site, you'll receive almost uniform responses that many (or most) pages are difficult to read. Font size is a factor but there are many more factors, which I outline here:

http://www.filterjoe.com/2009/03/25/filters-for-reading-on-t...

and suggest solutions for web design here:

http://www.filterjoe.com/2009/03/23/site-design-for-reading/

A main theme of my site is how to read without distraction on the web. As has come up a number of times on Hacker News, the tools readable and readability are a terrific way to reformat web pages in order to make them more readable:

http://www.filterjoe.com/2011/04/11/web-page-reformatting-se...

One last trick is to arrange a high pixel density monitor vertically and place it far away from your eyes. You can calculate the distance needed to attain the equivalent of a retina display:

http://www.filterjoe.com/2011/02/26/the-best-monitor-setup-t...

Whether this makes a difference in terms of readership, conversions, etc. I have no idea. But the proliferation of tools in the past few years to help people read web content suggests that a lot of web users are struggling with reading web pages.

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

#68

Post by Dylan16807 »

wladimir wrote: post #33

Why "16 pixels"? Wouldn't scaling fonts based in cm/inch make more sense to be resolution independent, especially important on mobile devices?

While it makes sense to use a resolution-independent scaling, keep in mind that mobile should have a smaller font size in inches than a full screen, akin to the font size in a book. I certainly don't use my phone with arm outstretched.

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

#69

Post by T-hawk »

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…

Another solution is a custom style sheet. Opera has had that capability forever, since about 2001. I use Opera for most browsing, with a custom style sheet to force all text to a certain font and style. This varies by device: Calibri 12pt is the most readable at work where I sit close to the screen on a smallish monitor, while Verdana 12pt works better on my home desktop and laptop screens. My stylesheet also forces text color to black-on-white, very useful for some forum sites that seem to like the scary gothic gray-on-dark look.

There won't be any magic bullet solution. Specifying text size in terms of pixels gives you tiny words on super high resolution iDevices or even modern laptop screens. Specifying size as an absolute via points or inches/cm doesn't work for users lacking the visual acuity to see that size. Specifying size relative to a user-settable device default only works for users savvy enough to find that setting. What we've got now is a mixmash of the above, where devices treat an absolutely-specified size as a baseline to scale from via zoom controls.

But hey, web font scaling is still twelve parsecs better than the original option of going out to buy the large print edition of whatever you want to read.

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

#70

Post by blahedo »

Chris_Newton wrote: post #42

This is an important issue to consider, but talking about "pixels" alone doesn't get us far in this context. For one thing, different fonts have different design characteristics. In particular, the x-height of one sensible body font at a nominal 16px could easily be 50% more than the x-height of another. Sadly, while CSS lets us specify a stack of fonts to try, it doesn't yet let us specify a different size to go wit…

> For another thing, these days pixel densities can vary by at least a factor of 3 between devices.

It pains me to point this out, but the solution to this particular problem is that CSS has redefined what "pixel" means, or rather, they've made "px" stand for something slightly different. Specifically, the "px" specifier now is a scaled length unit, and corresponds to whatever length subtends the same arc in a user's field-of-view as would a single pixel on a typical desktop display at about two feet away. So technically, in order to know how many pixels a px is, you need to know the resolution of the display, the size of the display, and the distance from it that the user will be sitting.

(Argh)

Post reply on HN