eBook Formatting Tip: Changing the Font Size (CSS)

When formatting an ebook varying font-sizes are necessary (chapter headings, subheads, etc). While the sizes are built-in for headings and paragraphs, you can fine tune your ‘font-size’ in the CSS. Depending on your preferences, modify font sizes using pixels, percentage, point size, em value and keywords. (with percentages and points the easiest for non-designers to get their heads around.)

IMPORTANT! When using any or all of these options be sure to proof your ebook before publishing. Many are valid options for web browsers but are not compatible with e-readers.

Learn More: To learn more of what you can do with CSS check out http://www.w3schools.com/css/  While it if for web browsers, it will give you a base understanding of CSS and HTML, and how to apply it to an ebook.

font-size

The CSS property font-size defines the text size to be used for an HTML element.

• Use relative sizes such as percentages and ems to facilitate scaling
• Ensure default font size does not affect legibility of the prose (e.g., avoid specifying size by Keyword: x-small, xx-small, large, etc)

Changing a font-size

With the body content set, by default, at 100% (or 12 point) you can make your text larger and smaller using percentages or em values.

NOTE:
em values vary between e-reader devices—in some cases it is 12 point, others it is 16 point.

p.larger   { font-size:110%; }

font-size:110%; will make the typeface 10% larger than the base font.

IMPORTANT!
E-reading devices allow the user to adjust the point size for reading to larger or smaller than the starting 12 point.

Font-size can also be applied to headings (chapters) to make them less bulky:

h1 { font-size:150%; }

Body

You can override the default font in the body.

NOTE:
I use the body to define the book values such as no hyphens and the font family (serif or sans-serif);
I avoid setting a base font-size.

Author style sheet declaration

body {
font-family: "Times New Roman",serif;
font-size: 1em;
-webkit-hyphens:none;
}

NOTE:
Always turn off hyphenation for chapter headings — especially if they are long

To suppress hyphenation, you can use the -webkit-hyphens property just on your header elements:

h1, h2, h3 {-webkit-hyphens:none;}