-
Notifications
You must be signed in to change notification settings - Fork 0
Fonts
Typography is a key component of most e-books, unless you plan on creating an e-book that only uses images. For most e-book readers (both software and dedicated) the developers have handpicked a set of fonts they deem desirable for readers. In the cases of Amazon, Apple and Google – Bookerly, San Francisco Serif and Literata respectively were chosen to be highly readable and highly recognisable from a branding perspective.
For most e-books, there are 3 types of font that can be used with the font-family declaration within the CSS.
-
serif– Serif fonts have small lines attached to the end of each letter and number. These fonts are usually used for body-text, headings and titles as they are considered easier to read. -
sans-serif– Sans-serif fonts have no serifs. These are usually used for headings and titles, though in more technical books such as textbooks they may also be used for body text. -
monospace– Monospace fonts have equal spacing between most of the letters and symbols. These fonts are usually used in technical contexts such as computer programming where each letter, character and symbol needs to be easily distinguished.
The font-family declaration also includes cursive, fantasy and system-ui options, though support for these in e-book readers cannot be guaranteed.
For the paragraph tags <p></p>, I have added a font-family declaration in the zstylesheet.css of most of my e-books so that serif typefaces are forced by default.
p
{
font-size: 1em;
font-family: serif;
margin: 0px 0em 0em 0em;
text-align: justify;
text-indent: 1em;
hyphens: none;
}
Both ePub (2.0.1 and 3.1) and Kindle support font embedding using .ttf or .otf font files. There are three considerations to keep in mind when using your own choice of font.
Decide whether your e-book will have custom fonts for the titles, headings or body-text and choose appropriately. Keep in mind that many users will adjust the font size, line spacing and colouration while reading and plan for most reading scenarios. A good e-book is adaptable!
Some e-readers reject custom fonts either partially (such as for body text as in the case of Apple Books) or fully. Keep this in mind and ensure you don't entirely rely on custom typography for your e-book.
Keep in mind that licensing for e-book embedding is often separate from the license to use the font in desktop applications and web development. Read the EULA and if necessary purchase the appropriate license, don't assume that you are covered. Fontspring sells fonts and clearly outlines how they can be used with many fonts covered for e-book embedding without additional licensing.
Alternatively some free fonts, particularly those under the SIL Open Font License (SIL OFL) can be embedded into any e-book (or software in general) without consequence. Websites such as Google Fonts and Font Squirrel offer free fonts, many of which can be embedded into e-books.
Custom fonts can be embedded with ebookbuild within the CSS, using the standard @font-face declaration which should be familar to most web developers. As of version 0.811 of ebookbuild there is support for potentially any number of custom font files. They are stored in the fonts directory by default though this can be changed in the metadata.json.
As an e-book developer it is up to you whether one or many custom fonts are used in your e-book project. For instance in the The Fall of Western Man project I used League Gothic Condensed for the headings to keep the e-book in-line with the original PDF. I used the following declaration at the top of the zstylesheet.css:
@font-face
{
font-family: "league_gothic";
font-style: normal;
font-weight: normal;
src: url("../fonts/leaguegothic-condensedregular.otf");
}
After the custom font has been declared, I then declared its usage for headings, along with a generic sans-serif fallback. An issue I encountered with League Gothic Condensed is that because it is condensed, when it is unavailable on an e-reader the headings look huge, hence the comment:
h1.heading
{
font-size: 2.4em; /*Originally 3em, but reduced to make e-book look better when League Gothic is unavailable.*/
font-family: "league_gothic", sans-serif;
font-weight: normal;
text-align: center;
color: #000;
margin-top: 0em;
margin-bottom: 0em;
}
For some e-book projects entire font families can be declared and used. For example, I have used IBM Plex for a study guide project I have been working on. I chose IBM Plex Sans, Serif and Mono for different parts of the guide with the Regular, Bold, Italic and Bold Italic weights. This is the CSS declaration I used:
@font-face
{
font-family: "IBM-Plex-Sans";
font-style: normal;
font-weight: normal;
src: url("../fonts/IBMPlexSans-Text.otf");
}
@font-face
{
font-family: "IBM-Plex-Sans";
font-style: italic;
font-weight: normal;
src: url("../fonts/IBMPlexSans-TextItalic.otf");
}
@font-face
{
font-family: "IBM-Plex-Sans";
font-style: normal;
font-weight: bold;
src: url("../fonts/IBMPlexSans-Bold.otf");
}
@font-face
{
font-family: "IBM-Plex-Sans";
font-style: italic;
font-weight: bold;
src: url("../fonts/IBMPlexSans-BoldItalic.otf");
}
@font-face
{
font-family: "IBM-Plex-Serif";
font-style: normal;
font-weight: normal;
src: url("../fonts/IBMPlexSerif-Text.otf");
}
@font-face
{
font-family: "IBM-Plex-Serif";
font-style: italic;
font-weight: normal;
src: url("../fonts/IBMPlexSerif-TextItalic.otf");
}
@font-face
{
font-family: "IBM-Plex-Serif";
font-style: normal;
font-weight: bold;
src: url("../fonts/IBMPlexSerif-Bold.otf");
}
@font-face
{
font-family: "IBM-Plex-Serif";
font-style: italic;
font-weight: bold;
src: url("../fonts/IBMPlexSerif-BoldItalic.otf");
}
@font-face
{
font-family: "IBM-Plex-Mono";
font-style: normal;
font-weight: normal;
src: url("../fonts/IBMPlexMono-Text.otf");
}
@font-face
{
font-family: "IBM-Plex-Mono";
font-style: italic;
font-weight: normal;
src: url("../fonts/IBMPlexMono-TextItalic.otf");
}
@font-face
{
font-family: "IBM-Plex-Mono";
font-style: normal;
font-weight: bold;
src: url("../fonts/IBMPlexMono-Bold.otf");
}
@font-face
{
font-family: "IBM-Plex-Mono";
font-style: italic;
font-weight: bold;
src: url("../fonts/IBMPlexMono-BoldItalic.otf");
}
Some writing systems such as Arabic, Hebrew, Persian and Urdu are written from right-to-left. Using the direction: rtl; declaration will force most e-book readers to ensure that text is right-aligned. At the bottom of the zstylesheet.css on most of my e-books I have included a right-to-left declaration.
p.rtl, .rtl
{
direction: rtl;
}
Some e-readers do not support right-to-left languages. Keep this in mind when developing for markets that use right-to-left written languages.