Thank you for visiting this eBook design tutorial. We now have an eBook design startup—
BB eBooks—dedicated to helping
independent authors and
small presses get their eBooks formatted, converted, and ready for sale at all the major online retailers (e.g.
Amazon's Kindle Store,
Barnes & Noble's Nook,
iBookstore,
Smashwords, etc.) Please
contact us for a no-obligation quote. For those writers, editors, and publishers looking to go the DIY route for eBook production (you probably are if you visited this page), we offer
free online tutorials and
apps to help you professionally
design your eBook. Please visit our
Developers page and let’s work together to improve the overall standards of eBooks. Also, please
sign up for the mailing list for promotions, design & marketing tips, plus eBook industry news.
Looking for a
complete guide on eBook design and development? Please consider
The eBook Design and Development Guide, which contains everything you need to know about HTML, CSS, EPUB, and MOBI/KF8 to make an eBook like a pro. Pick it up at
Amazon for $6.99 today.
Previous Post: CSS Selectors
Now that you have knowledge of how to use CSS selectors to apply presentation to specific HTML markup and content, you can make some basic typographical adjustments to your eBook to make it visually pleasing for your readers. Typography dates back to the Classical period when specialists would use punches and chisels to make distinctive inscriptions. Luckily, the digital age offers the ability to utilize typography without a lot of training and hard work.
Altering Text into Bold, Italics, Underlined, Strikethrough, and Small Caps
Utilizing bold, italics, underlined, and occasionally strikethrough and small caps text can convey meaning and emphasis for certain words. Certain content, like the titles of movies, is also recommended to be italicized per the
Chicago Manual of Style. Don't come off as uneducated to your readers due to a misunderstanding of CSS, because you will get slammed in your reviews. The properties and values in CSS for this type of text are simply as follows:
- Bold: font-weight: bold;
- Italics: font-style: italic;
- Underline: text-decoration: underline;
- Strikethrough: text-decoration: line-through;
- Small caps: font-variant: small-caps;
All that is required is applying these declarations using CSS selectors. Some example HTML of a passage in our book could be as follows:
<h2 class="mysmcaps">Chapter X</h2>
<p>This paragraph needs some <span class="i">emphasis</span>, as well as some <span class="b">strong emphasis</span>. Being modest is <span class="strk">best</span> the worst, because I can't <span class="u">underline</span> things.</p>
The corresponding CSS to select the HTML would be as follows
h2.mysmcaps {font-variant: small-caps;}
span.b {font-weight: bold;}
span.i {font-style: italic;}
span.u {text-decoration: underline;}
span.strk {text-decoration: line-through;}
 |
| Styling Some In-Line Text |
This type of CSS presentation you typically want to apply to only a word or two within a paragraph. Therefore, it is usually most appropriate to use an in-line
span element within your HTML markup to hook the CSS with a
class attribute. However, you could easily style entire paragraphs or even the entire
<body> element as bold, italics, underline, or strikethrough.
Tip: The class names in the CSS are completely arbitrary, but you should name them something that is logical and easy to remember so you can repeat throughout the HTML of your eBook.
Leading
Leading is a typography term that originates from when typesetters would jam strips of lead in between rows of type. It defines the spacing in between lines. For the Kindle, you probably do not need to adjust this value, since the default leading on the devices is designed for a good reading experience. However, this is good typographical knowledge to have in case of future changes to the platform.
Paragraphs with short leading have the lines of text very close together, and it is a lousy reading experience, especially for fiction. Therefore, be careful when adjusting the leading. The CSS declaration to modify the leading is simply
line-height: value;, where the
value is a relative percentage (100% being the value for "single-spaced" paragraphs). 120% leading tends to look nice for both fiction and non-fiction, but you should feel free to experiment. The Kindle Fire and e-ink Kindles have a
default of 120% leading. You may be familiar with the term "double-spaced" text, which is a leading value of 200%. It is not recommended that you ever double-space text in an eBook, because it looks incredibly childish and silly.
Some sample HTML and CSS where leading of varying amounts is applied is as follows:
<p class="shortleading">This is a paragraph that has too little leading. It is terrible on the eyes and not recommended unless you hate your readers.</p>
<p class="goodleading">This is a paragraph that has a nice amount of leading. Notice how it is easy to read.</p>
<p class="bigleading">This paragraph has too much leading. Double-spaced paragraphs might be okay for manuscripts and book reports for your 7th-grade English teacher, but it looks extremely unprofessional.</p>
The CSS:
p.shortleading {line-height: 70%;}
p.goodleading {line-height: 120%;}
p.bigleading {line-height: 200%;}
 |
| Examples of Paragraphs with Various Leading in Chrome |
Leading adjustment with the
line-height property
does not affect e-ink Kindles or Kindle for iOS apps. On the Kindle Fire, you cannot have leading less than 120%. If you do specify a leading of 70%, as an example, the presentation would simply remain at the default of 120%.
Introducing em
Em is another typographical term that defines the height of the letter "M" block when the printing press was the hottest new invention since the
Magna Carta. Why should you care? Frequently, web developers and eBook developers use measurements (e.g.
pixels or "px") to define font sizes, indents, and the spacing of margins. In the digital age, the
"em" unit has evolved into what is called a
relative measurement, which means that the font-size, margin, indent, and other presentation properties will scale based on the reader's pre-defined font settings rather than a specific value assigned by the designer. That's great news for readers, because it allows them to read an eBook with their own preferences. Don't ever mess with a reader's experience.
The Kindle and Kindle Fire default font size is
16px. Therefore, using a font-size of
2em is equivalent to
32px (or 200%) as an example. Instead of trying to remember this when you use your stylesheet to adjust the sizes of fonts, you can simply use a value of
1.0em. When a reader changes their font setting to bigger or smaller on the Kindle, it will render the text appropriately regardless of whether the text is specified in an absolute and relative measurement. However, many web browsers and eBook reading devices render the font-size to the absolute measurement regardless of the user's preference. You should endeavor to use relative measurements as a best practice, so that your eBook will be reader-friendly across all devices.
Adjusting Font-Size
Now that you understand the importance of using the relative measurement "em", you can begin altering the size of your text. You probably want headings to be greater than 1em, content text to be 1em, and footnotes and endnotes to be a bit smaller font size than everything else. As an eBook designer, this task may seem trite and not particularly challenging. However, neglecting small details can create an unpleasant reading experience for your reader. One of the most common errors in eBooks is poorly sized text (such as the chapter heading being smaller than the content in the chapter).
To change the size of the text, you simply use the CSS property
font-size: value;, where
value is in a unit of ems. An example of the HTML would be as follows:
<h2 class="chapheading">Chapter 355</h2>
<p class="content">This is normal content typically seen on the Kindle. It has a 16px font at default settings1. It's important that you pay attention to text size throughout your eBook. CSS makes short work of this task.</p>
<h3 class="appendixheading">Footnotes</h3>
<p class="footnote">1May be adjusted by reader</p>
And the CSS:
h2.chapheading {font-size: 1.5em;}
h3.appendixheading {font-size: 1.25em;}
p.content {font-size: 1.0em;}
p.footnote {font-size: 0.8em;}
 |
| eBook of Varying Font Sizes |
While the sizes are appropriate, one thing that looks unseemly in this example is the footnote number. Footnotes are typically in superscript at a font-size of about 60% (or 0.6em). To superscript the number, you simply use a span element to wrap around it, and use the declaration
vertical-align: super;. You can also use this property to declare any other text that should be superscripted.
Some example HTML and CSS would be as follows:
<p class="content">This is normal content typically seen on the Kindle. It has a 16px font at default settings <span class="footnoteindex">1</span>. That is my 1<span class="footnoteindex">st</span> footnote.</p>
The CSS:
p.content {font-size: 1.0em;}
span.footnoteindex {font-size: 0.6em; vertical-align: super;}
 |
| Font Sizes with Superscript Support |
Important Note: Keep in mind when designing eBooks for the older e-ink Kindles that they often render slightly different em values at the same exact size (e.g. 1.0em and 0.9em font-sizes both appear as 1.0em). The Kindle Fire does not have this bug. Trial and error using the Kindle Previewer is essential in ensuring the text is correctly sized on the e-ink Kindles.
 |
| Bug on e-ink Kindles with Font Sizing |
Tracking
Tracking is another typographical term defining a fixed space between letters. While leading is spacing on the vertical axis for a paragraph of text, tracking is spacing on the horizontal axis. The CSS property for tracking is
letter-spacing: value;, where value is a relative em value. The default percentage is 0em, so a negative value would bring letters closer together, while a positive value would push them further apart.
Some sample HTML and CSS where tracking of varying amounts is applied is as follows:
<p class="smalltracking">This is a paragraph with some squished tracking.</p>
<p class="widetracking">This is a paragraph with some wide tracking you could drive a truck through.</p>
<p>This is a paragraph with default tracking, which is generally fine.</p>
The CSS:
p.smalltracking {letter-spacing: -0.1em;}
p.widetracking {letter-spacing: 0.1em;}
p {letter-spacing: 0em;}
 |
| Varying Levels of Tracking |
While you are unlikely to have to adjust the tracking on a regular basis, it may be useful for specialized eBooks such as poetry collections or excerpting content from a newspaper to give that "old-timey" look.
Changing Colors
Using different colors was pretty much an exercise in futility a few years back, when virtually all eBook reading devices were grayscale. However, with the introduction of the Kindle Fire and the popularity of the iPad (which has the Kindle iOS app), it is now worthwhile to jazz up your eBook by adding some colors to your text. This statement should come with a word of caution. Back in the mid-1990s when the internet primarily consisted of Captain Kirk fanfic, colors were used and abused on websites to create content with seriously tacky presentation (blinking text anyone?). The big publishing houses have kept things simple by designing their eBooks with all-black text. However, don't be afraid to think outside of the box. Adding color to your text may be useful if you are working on designing something like an electronic textbook.
To add color to your CSS, you use the
color: value; declaration. The value can either be one of the
143 predefined color names (e.g. navy, pink, black) or a
# sign preceding a six-character hexadecimal code, which allows for over 16 million different colors (e.g.
#000000 for white). These values can be easily generated on a
number of sites online or using open source software.
Some sample HTML and CSS with different colors is as follows:
<p class="content">This is the final sentence in your textbook.</p>
<h2 class="redheading">Exercises for Your Teams</h2>
<ol>
<li>The <span id="blueteam">Blue team</span> should focus on…</li>
<li>The <span id="purpleteam">Purple team</span> should focus on…</li>
</ol>
The CSS:
p.content {color: black;}
h2.redheading {color: red;}
span#blueteam {color: #237DE4;}
span#purpleteam {color: #9123E4;}
 |
| Experimenting with Text of Different Colors |
Next Post: Understanding the CSS Box Model
Using CSS to Style Text for eBooks
