Friday, May 7, 2010

Text Size in ePubs-- Points? Pixels? or Ems? Oh my!

This is making me a little crazy, so bear with me.

If you choose 12pt text in InDesign, and then export the document to ePub, InDesign creates CSS that calls for a font size of 1em.

When iBooks looks at that CSS, it translates the 1 em into 16 pixels. But since the iPad has a resolution of 132 pixels, the text's actual, physical size isn't the same as if it were on a monitor, where we're most used to seeing pixel sizes for fonts. Indeed, on the iPad, one pixel is 1/132", so 16 pixels are .12". And since in the physical world, 1" = 72 pts, that text that you originally sized at 12 pts, is now only about 9 physical points in iBooks (.12" x 72 = 8.64).

If you displayed the same XHTML document on my monitor (at about 98dpi), where 1 pixel is 1/98", that would mean 16 pixels would be about .16", or about 12 pts—the same physical size, if you put a measuring tape up to the monitor, as if you printed it on a piece of paper.

This all came to a head since I've been creating ePubs with Microsoft Word 2007 on Windows on Parallels on my same 98dpi monitor. Again, I choose to set text at 12 points. If I print the document on a piece of paper, it measures 12 actual points.

But when I save it as HTML and then convert it into an ePub, Word generates CSS that actually specifies 12 points.

So how does iBooks and the iPad in general deal with points specified in CSS? Curiously, it's very similar to what happens if you specify 12 points in InDesign. iBooks interprets 12 points in CSS as 16px, and so outputs it exactly the same as if you had specified 1em (or 16px) and so the text is actually displayed at about 9 physical points, not the 12 that you specified.

What's the moral of the story? How should you specify the size of text destined for an ePub to be read in iBooks (and elsewhere)? That's is an even more complex issue. Surprisingly, it turns out that the most variety of outputs in my tests was from using ems. ADE and Ibis Reader on the Mac (but not iPad) displayed 1 em at 21 and 19 pixels, respectively, while all the ereaders that I tested displayed 16 pixels and 12 pts as 16 actual pixels (and 9 actual points!)

(Line-heights are another issue altogether since there is a wide variety of default line-heights from one ereader to the next.)

So I'm tempted to recommend using pixels over ems. And I'm finally truly understanding, with my heart and not just my brain, why pixels are a relative and not an absolute unit of measurement.
Posted by Liz Castro at 12:29 PM
Labels: , , , , ,

6 comments:

  1. For eBooks, it seems to me that it really matters very little. The reader (person, that is) can increase or decrease the font at will with every device/software I've tried. So what really matters is the relative sizes more than any illusive absolute size. For that, we find em to be the best choice, since that will automatically adjust for different font choices (another typical ePub reader capability).

    Walt Shiel
    Publisher, Slipdown Mountain Publications LLC
    ReplyDelete
  2. Good point about how it's less important since readers can change at will.

    I still think it's important to at least know what the default view that has been designed will look like, even as we give deference to the reader's size and font choices.

    Also, I was curious about what you said about ems automatically adjusting for different font choices, because I have not found that to be true. In my tests, 12pt=16px=1em has been true for all the fonts I've tried. Maybe I'm missing something?
    ReplyDelete
  3. Do not attempt to set a font size for body copy. Use 1em, which literally and figuratively corresponds to the reader’s choice. Heading and other sizes can be specified as multiples of ems or percentages.

    Pixels are an ass-backward unit for specifying text on screens of unknown pixel density. Points work solely for print. This has long since been worked out by standardistas.
    ReplyDelete
  4. Frankly, I'm a bit tired of orthodoxy. Not choose an initial font size? Piffle. I wouldn't advocate keeping readers from changing it to something they like better, but I see nothing wrong with choosing an initial size that makes for a pleasing design.

    Indeed, I see nothing wrong with suggesting fonts, line-height, adding images, and making all sorts of design choices, instead of accepting an ereader's defaults. Why should an ereader's choices be necessarily more valid than a designer's? Or somehow magically closer to a human reader's choice?

    And if your answer is "because the reader chose a size and font in their ereader," I will remain unconvinced, since all of the ereaders I've seen have a limited selection of both sizes and font faces to choose from. Who is to say that the reader wouldn't have chosen my design over the defaults offered by the ereader?

    Finally, the point of the article was to explain how Word and InDesign translate points—because you can't specify ems in those programs!—into CSS. Curiously, pixels work more regularly across ereaders than ems, which despite the question of superiority, is a helpful thing to know.
    ReplyDelete
  5. Thanks, as usual. I'll stick with 12 pts in InDesign, until I learn better.
    ReplyDelete
  6. my p's are 1em and then headings are 1.2, 1.x, etc.; then I have body at 78% to make it all a bit smaller; I started doing this a few years ago for my websites; someone had calculated that 78% emulated the 11 or 12 pts were used to seeing on paper; for epub I wanted to do away with the 78% scaling down and just go with the 1em p's but I it wasn't practical in most readers -- too large;
    www.dita2web.be
    ReplyDelete

Subscribe to: Post Comments (Atom)

My Books