The document summarizes a show and tell session on ebook typography. It includes tips from various designers on techniques like embedding fonts, hyphenation, pagination, images, and media queries. Examples are provided for techniques like adding thin spaces around em dashes, styling footnotes and captions, and reflowing inline elements. A list of recommended books designed by the presenters is also included.
26. • Because the option is the “Whatever
Approach” to font selection.
• Because we can.
• Because life in Caecilia all the time is not a
life worth living.
• If you really don’t know why, I am going to go
to your house and remove all your fonts except
Papyrus. Then the rest of us will go have a
whiskey.
27. • What’s your budget for fonts?
• That’s what I thought.
• Try something free to distribute.
“Permission is hereby granted, free of charge, to any
person obtaining a copy of the Font Software, to use,
study, copy, merge, embed, modify, redistribute, and sell
modified and unmodified copies of the Font Software…”
—Font License for Adobe’s Source Sans Pro
Resources: Font Squirrel, Google Web Fonts
28. • Yes. Obviously.
• For more about the legal issues of embedding
fonts in ebooks, go see Charles Nix tomorrow.
*Amanda Gomm is in no way qualified to give legal advice.
29. • Put the font (and any necessary licenses) into the
OEBPS file
• Declare it in your OPF file
• Link to it in the CSS with @font-face
• Specify the font using font-family
What could possibly go wrong?
Hint: Epubcheck will get cranky if you’ve got your
CSS encoded incorrectly
30.
31.
32.
33. Just because we’re doing things digitally
doesn’t mean we get to lose our minds.
35. • Typical font sizes for print will be too small
for reading devices
• Setting explicit sizes can anger some readers
and retailers
• Font-size: medium and font-size: 1.00em will
size the font to default
• We can scale from there
36. • Line-height is not leading
• Make it relative (1.50em for example)
• Remember to add bottom margins to headers,
images, etc.
• Remember that line-height and margin relative
sizes are inherited from the parent element
Resource: 24ways.org/2006/compose-to-a-vertical-rhythm/
37. • Be mindful of how your typeface and font-size
affects line length
• In normal scenarios, lines that are too long are
rarely a problem
• Just in case: p { max-width: 66em; }
• Lines are likely to be too short for larger fonts
if relative margins are used
41. • hyphenate-after: auto | integer
• hyphenate-before: auto | integer
• hyphenate-character: auto | string (e.g. "2112”)
• hyphenate-lines: auto | integer
42. • Tip from Rick Gordon: bold and italic spans don’t
always inherit the hyphenation rules.
em {
font-style:italic;
font-weight:inherit;
-webkit-hyphens:inherit;
hyphens:inherit;
}
44. • Rick Gordon’s Solution for thin spaces around em
dashes:
<style>
.thin {
letter-spacing: -.2em;
}
</style>
<span class=“thin”> </span>—<span class=“thin”> </span>
45. • Rick Gordon’s Solution for thin spaces around em dashes + Tom
McCluskey’s solution for keeping em dashes with their predecessor
<style>
.thin {
letter-spacing: -.2em;
}
.nobreak {
white-space: nowrap;
}
</style>
<span class=“nobreak”>word<span class=“thin”> </span>—</span><span
class=“thin”> </span>
47. • Page-break-before: auto | always | avoid | right | left
• Page-break-after: auto | always | avoid | right | left
• Page-break-inside: auto | avoid
64. • Images Pros
– Perfect representation
– Readers can’t mess it up
– All of the data will fit nicely all the time
• HTML Pros
– Accessibility
– Reflowability
– Readers can mess it up
– The data can be dynamic
86. • Anne-Marie Concepción (@amarie)
• Colleen Cunningham (@BookDesignGirl)
• Dan O. Williams (@FoxgloveCommons)
• Rick Gordon (@rcgordon)
• Tom McCluskey (@TomMcCluskey
87. Homegrown Honey Bees by Alethea Morrison
Stretching: Enhanced 30th Anniversary Edition by Bob Anderson
Discover Colorado by Mathew Downey and Ty Bliss
The Everything Learning French Book 2nd Edition published by F&W
Media
Waldon (as designed by Dan O. Williams) by Henry David Thoreau
Killer Commodities published by F&W Media
eBook Typography by Chris Jennings
The most robust typography planReaders will change sizeReading systems won’t be able to embed fontsSomebody will read your book on a Kindle 1
The most robust typography plan accounts for user intervention, reading system fail, and backwards compatibility.
Other thing in our tool chest: ability to manipulate fontJust like print, these can be powerful tools easily over used.
Would you go to the printer and ask them to just go ahead and throw whatever font they have on their system into the book. Sure, you designed it in Caslon, but you know, bodoni, or bauhaus, or whatever. That’s fine.
Probably not.* But you may get in big trouble—meaning embarrassment and cash settlements.
Do you need to go back and read Bringhurst to remind you of the noble tradition from whence we come?
so if you set your headers to a bigger font, you’ll need to scale your bottom margin accordingly to retain the grid
Javascript can deal with characters per line so for reading systems that support scripting, that’s an option.
Zero-width joiners are also an option but we’ve run into some problems with certain default fonts on certain reading systems that present the zwj’s as boxes.