Glaring errors

I’ve looked at a lot of eBooks over the past ten years and find that there are a very few glaring errors that are common (not in every book, or from every publisher) but that could be avoided on most displays with a couple of small adjustments. If you are currently designing or creating an eBook, here are the top glaring errors and how to avoid them.

1. No margins. Nothing makes readers less comfortable reading a book than having the type slammed straight up against the edge of the screen. In some few instances, this is necessary because of the type of content or the size of the screen, but readers will find your book much easier to read if there is a margin on the sides and the top and bottom. How do you get it? In your CSS, set margins on “@page.” Most of the readers are using this to get consistent margins on every page. Use this code in your CSS: @page {margin: 5%;}. This will allot 5% of the width and height of your reader to white space between each edge of the screen and the type.


2. Double-spaced paragraphs. Most Web browsers (on which eReaders have been based) skip space between paragraphs and have no indents on the first line of text in a paragraph. While that works well for largely unformatted scrolling text on large screens, it is not common in actual books. If you want a natural book-reading experience, you want paragraphs to follow on the next line and be indented slightly on the first line. I’ve seen a lot of instances where designers add the paragraph indent, but don’t remove the space between paragraphs. To correct this, use the following CSS in your ePub package: p {margin:0; text-indent:1.5em;}. That makes a pretty nice indent. Of course you can adjust the width of the indent as you see fit.


3. Font-size and line-height. Standard defaults on most readers use 12-point type and 1.2-1.3 ems (%) for line-height (leading if you are a traditional designer). The result is that on some readers the type looks huge and crowded. Some readers will override whatever you set with their own defaults, but more commonly, this is considered the realm of the book designer. Make the type a little smaller and the line-height a little bigger. This will relax your reader’s eyes a bit and give them more enjoyment of your great novel. Use the “*” pseudo-element in CSS to accomplish this. * {font-size:0.83em; line-height:1.5em;}. Again, you can experiment with these settings to find your own favorites.

You’ll notice that I’ve used the measurement unit “em” a lot. This is the most flexible unit in CSS. It bases measurements on the default font-size. It can be a little tricky, though. When we set the default font-size at “*,” the 0.83em (the same as saying 83% in this instance) is based on the device default font-size. You could also specify a font-size in familiar units like “10pt.” Line-height and indents in ems are always based on the font-size of the element. So in the examples above, a normal paragraph would have 10-point type, 15 points of leading (1.5em) and a first line indent of 15 points (1.5em).

By following these three simple adjustments in your ePub CSS, you’ll change your books from looking amateurish to professional. More advanced tips will come in the near future!