There are 3 quick changes that I like to make to ebook css, whether starting a new ebook or doing QA on an existing ebook. These changes help me to:
- Read the running text more comfortably
- Visualize the information hierarchy more clearly
- Give the design a bit of personality
I achieve this by:
- Resetting the p selector’s line height
- Resetting the p selector’s margins
- Adding color that matches the cover to the heads
Here’s what I’m usually looking at before I make these changes to the CSS.
And here’s what I’m thinking:
So I open the CSS and make these adjustments:
I find most ereaders’ line height default to be too tight to be comfortable. Bumping up the line-height fixes this. While I’m in there I throw in hyphenation, widow and orphan, and text-align declarations. I also set the text-indent to zero if I intend to push the epub through Kindle Previewer because older Kindles that read Mobi files (instead of KF8) put a text indent on every single paragraph, whether I want it or not. Note that if I have lists in my ebook, I need to repeat some of the declarations in the selector so that my design choices remain consistent.
While I’m in there I set the margins to zero so that there is no space between paragraphs. But when I do this, I make a p class for a text indent so that readers can see where the next paragraph starts. And that p class with the indent picks up all the good stuff I threw into its parent … the p selector. Now the space around the heads is more noticeable and this strengthens the information hierarchy.
To set off the heads even more, I add a color that matches the cover. Unlike adding color to print designs, adding color to ebooks doesn’t cost a thing. The proliferation of color tablets on the market makes this a quick win. On eink screens the color simply goes to grayscale (but check to make sure the color you choose doesn’t look too faint). The color doesn’t have to be flashy. In my example below it’s navy but it’s enough and it matches the cover to help make a polished package. And while I’m in there I throw in hyphenation declarations to prevent hyphenation in case the heads wrap to a second line. I also like to set the heads as sans-serf, at least in the beginning, to see them more clearly.
Now, of course, some ereaders will override or ignore some of these declarations and human readers have the choice of changing the line-height, font, and other aspects of the text. But as a designer I become familiar with the material first and my job is to present it in a way that will make it more easy to comprehend. If the reader doesn’t agree, they are empowered to make their own choices.
Here’s the before and after:
(click on image to enlarge)
So there’s my 3 favorite CSS changes that get me started on the road to developing an attractive and useful ebook. Feel free to try them yourself. And feel free to share your own favorite “resets.”