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

#141

Post by bzbarsky » Sun, Oct 09, 2011, 4:44 AM UTC

Chris_Newton wrote: post #101

bzbarsky wrote: post #94

Earlier quoted context omitted.

> which AFAICS is almost universally ignored. Safari on iPhone uses that definition (that's the whole "resolution doubling" thing, in a nutshell). Gecko uses that definition, including on mobile devices. In fact, that definition is almost universally _used_ in cases where it matters (i.e. high-dpi displays). > Given that CSS also recognises length units such as pt Which are nowadays defined in terms of CSS px, becaus…

> Safari on iPhone uses that definition (that's the whole "resolution doubling" thing, in a nutshell). That's my point, though: no-one is really implementing CSS-px. What they're doing is implementing approximations, like doubling everything up on a high-dpi screen because the pixel pitch is roughly twice what you get on a typical desktop monitor, which is close enough to be workable. If browsers implemented CSS-px a…

> What they're doing is implementing approximations

The definition of CSS-px (for low-res devices, which includes all the mobile stuff so far; high-res in this context is print) is:

  it is recommended that the pixel unit refer to the whole
  number of device pixels that best approximates the
  reference pixel

and the reference pixel is defined as:

  the visual angle of one pixel on a device with a pixel
  density of 96dpi and a distance from the reader of an
  arm's length.

See http://www.w3.org/TR/CSS2/syndata.html#length-units

So the whole point is to approximate the reference pixel by doubling your device pixels (or tripling, or whatever).

I think you may be thinking of a different definition of CSS pixel that used to exist a number of years ago (when "px" and reference pixels were the same thing). That definition is no longer in the spec, and hasn't been in a while. And that's precisely because of the antialiasing issues you mention.

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

#142

Post by ctuite » Sun, Oct 09, 2011, 5:41 AM UTC

Some interesting facts in the article, however, saying a font is hard to read because it's too small is a bit of a loose statement. Font family, color, line-height and width (anything over 500px wide is a strain) all contribute to the readability of text. So a pink font at 16px stretching the full width of the screen (let's say 1400px) with default line-height might be easier to read if it were 13px, dark grey, 450px wide with 20px line-height.

The article doesn't target a specific type of site. Article sites or news sites rely on readability far more than startups. The article seems to suggest that you NEED copy to guide users. This statement is incorrect. You can guide users with whitespace, color, images, buttons, hover states etc.

If you have a startup landing page with lots of copy on it, regardless of font-size...you've already failed.

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

#143

Post by Chris_Newton » Sun, Oct 09, 2011, 5:08 PM UTC

bzbarsky wrote: post #141

Chris_Newton wrote: post #101

Earlier quoted context omitted.

> Safari on iPhone uses that definition (that's the whole "resolution doubling" thing, in a nutshell). That's my point, though: no-one is really implementing CSS-px. What they're doing is implementing approximations, like doubling everything up on a high-dpi screen because the pixel pitch is roughly twice what you get on a typical desktop monitor, which is close enough to be workable. If browsers implemented CSS-px a…

> What they're doing is implementing approximations The definition of CSS-px (for low-res devices, which includes all the mobile stuff so far; high-res in this context is print) is: it is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel and the reference pixel is defined as: the visual angle of one pixel on a device with a pixel density of 96dpi and…

Yes, the official W3C recommendation changed to CSS2.1 earlier this year, and they did effectively redefine a CSS pixel at that stage. I'm not sure this did more than swap one problem for another, though: as I read the (current) wording, we shouldn't get fractional physical pixels any more and basic arithmetic still works on pixel lengths, but now you can only scale up by a factor of 2x, 3x, etc.

Given that the point we're debating here is the merits of setting a minimum 16px body text size, that would mean the next alternative was 32 physical pixels on a display of roughly 200dpi resolution. While that might be useful, you could still find that depending on the physical properties of your devices, 16px text needed to render at say 24 physical pixels to look the same size to the reader.

When you've got that kind of uncertainty to work with, I stand by my earlier comments that an arbitrary 16px size without reference to either the specific font or the physical properties of the device isn't a particularly useful guideline. The design considerations for devices with such different physical properties are too complicated to dismiss with a simple scale factor.

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

#144

Post by ricardobeat » Tue, Oct 11, 2011, 3:37 AM UTC

inflatablenerd wrote: post #37

The biggest failing I see this is argument is hierarchy. Sure, 16 point Georgia looks sexy as hell. If you have a text heavy website with little navigation, I'd definately recommend it. But in real world design situations, it's a mess. Even the Information Architects site looks flat. There's no easy way to guide the eyes because everything is ultra readable. There's no structure. It's an idealistic shortcut to readab…

> Information Architects site looks flat

Incidentally, that makes it perfect for, you know, reading. Are your books too flat?

While we're at it (and I still find their layout beautiful): "Good branding is not pretty; it’s bold, sweet and simple" - http://www.informationarchitects.jp/en/ugly-ugly-coca-cola-m...

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

#145

Post by bzbarsky » Tue, Oct 11, 2011, 5:10 AM UTC

Chris_Newton wrote: post #143

bzbarsky wrote: post #141

Earlier quoted context omitted.

> What they're doing is implementing approximations The definition of CSS-px (for low-res devices, which includes all the mobile stuff so far; high-res in this context is print) is: it is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel and the reference pixel is defined as: the visual angle of one pixel on a device with a pixel density of 96dpi and…

Yes, the official W3C recommendation changed to CSS2.1 earlier this year, and they did effectively redefine a CSS pixel at that stage. I'm not sure this did more than swap one problem for another, though: as I read the (current) wording, we shouldn't get fractional physical pixels any more and basic arithmetic still works on pixel lengths, but now you can only scale up by a factor of 2x, 3x, etc. Given that the point…

Yeah, I agree that saying "use 16px font-size" without mentioning at least the font family is completely useless.

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

#146

Post by grannyg00se » Fri, Oct 14, 2011, 5:38 PM UTC

john_flintstone wrote: post #117

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.

Just as most users don't know about Ctrl+, most users wouldn't know what "adjust text size up / down" meant either. My 60 year old father uses the Internet a lot, but he wouldn't be able to identify your use of the word 'text' with the words he reads on a website. Up or down to him would mean scrolling.

That's interesting. How else would one describe the words that you read on a website? It's text. Or copy. But text is probably more universally understood.

If he were reading a magazine and you said "do you find the text to be too small", you think he might turn to you and say "what do you mean by text, I'm reading a magazine here, there is no text."