achieving beautiful typography in ebooks
DESCRIPTION
Presentation from O'Reilly's 2013 Tools of Change conference. We know how to typeset print books, and by now, we know how to crank out EPUBs. It’s time to create some typographical standards for the eBooks we publish. Be prepared to be blown away at some of the best examples of typographically-beautiful eBooks currently in the marketplace, and then “peek under the covers” to see what kind of HTML and CSS mark-up were used to create it. She’ll present a checklist of common challenges and how those are met by the top eBook designers in our field. You’ll be able to bring back techniques you can use today to vault your eBooks to the top ranks of beautiful typography. Thanks to Anne Marie Concepcion of Seneca Design & Training, Colleen Cunningham of F&W Publications, Dan O. Williams of Storey Publishing, Rick Gordon of Shelter Publications,and Tom McCluskey of Digital Bindery for their insights and examples.TRANSCRIPT
Anne-Marie ConcepciónPresident, Seneca Design & Training @amariesenecadesign.com
Thank you!
Thank you!
Colleen CunninghamF&W [email protected]
Thank you!
Dan O. WilliamsDigital Projects Manager, Storey [email protected]
Thank you!
Dan O. WilliamsDigital Projects Manager, Storey [email protected]
Thank you!
Rick GordonShelter [email protected]
Thank you!
Tom McCluskeyDigital Bindery @TomMcCluskeywww.digitalbindery.com
Beautiful Typography
Show and Tell
Walden by Henry David ThoreauDesigned by Dan O. Williams
Walden by Henry David ThoreauDesigned by Dan O. Williams
Walden by Henry David ThoreauDesigned by Dan O. Williams
Walden by Henry David ThoreauDesigned by Dan O. Williams
Homegrown Honey Bees Alethea MorrisonDesigned by Dan O. Williams
Homegrown Honey Bees Alethea MorrisonDesigned by Dan O. Williams
Homegrown Honey Bees Alethea MorrisonDesigned by Dan O. Williams
Homegrown Honey Bees Alethea MorrisonDesigned by Dan O. Williams
Stretching by Bob AndersonDesigned by Rick Gordon
Stretching by Bob AndersonDesigned by Rick Gordon
Stretching by Bob AndersonDesigned by Rick Gordon
Stretching by Bob AndersonDesigned by Rick Gordon
Controlling Typeface
Controlling Typeface
• The digital typography tool chest• The Why, How, & Which of
embedding fonts.• “But will I go to jail?”
Typography Plans
account for • user intervention• reading system fail• backwards compatibility
Typography Tool Chest
• Semantic Markup• Responsive Measurements• Graceful Degradation• Progressive Enhancement• Font Stacks
Font Manipulation
• Font Basics– Font-family– Font-size– Font-style– Font-variant– Font-weight– Text-transform
• Advanced Font Manipulation– Font-size-adjust– Font-stretch– Word-spacing– Hanging-punctuation– Punctuation-trim
Embedding Fonts: Why?
• 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.
Embedding Fonts: Which?
• 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
Will I go to jail?*
• 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.
Embedding Fonts: How?
• 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
Stretching by Bob AndersonDesigned by Rick Gordon
Stretching by Bob AndersonDesigned by Rick Gordon
Flowable Ebook Typography by Chris Jennings
Back to Basics
Just because we’re doing things digitally doesn’t mean we get to lose
our minds.
Back to basics
• Character Size• Baseline Grid• Line Length
Character Size
• 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
The Baseline Grid
• 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/
Line Length
• 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
Hyphenation Control
No more ladders, no more rivers…
a girl can dream. Can’t she?
Hyphens for all:
• hyphens: none | auto | manual• -webkit-hyphens: none | auto |
manual• -moz-hyphens: none | auto | manual• adobe-hyphenate: none | auto |
explicit
Manual/Explicit Hyphens
• Set hyphens via ­ (soft hyphen)
Better Control
• hyphenate-after: auto | integer• hyphenate-before: auto | integer• hyphenate-character: auto | string (e.g. "\
2112”)• hyphenate-lines: auto | integer
Things to remember
• 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;
}
Don’t give up.
Be creative and persistent. Raise the bar.
Don’t give up.
• Rick Gordon’s Solution for thin spaces around em dashes:
<style>.thin {letter-spacing: -.2em;}</style>
<span class=“thin”> </span>—<span class=“thin”> </span>
Don’t give up.• 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>
Controlling Space & Breaks
All your space are belong to us.
Page Breaks
• Page-break-before: auto | always | avoid | right | left
• Page-break-after: auto | always | avoid | right | left
• Page-break-inside: auto | avoid
Implications: Widows and Orphans
• Orphans: integer• Widows: integer
p {orphans: 2;widows: 2;
}
Use Cases
Header (page-break-after: avoid: page-break-inside: avoid;)Body Text (h1 + p page-break-before: avoid)
Figure (page-break-after: avoid)Caption (page-break-before: avoid; page-break-inside: avoid;)
Tables (page-break-inside: avoid)
An Example of Pull Quotes & Sidebars
Discover Colorado by Mathew Downey and Ty BlissDesigned by Tom McCluskey
Discover Colorado by Mathew Downey and Ty BlissDesigned by Tom McCluskey
Discover Colorado by Mathew Downey and Ty BlissDesigned by Tom McCluskey
Discover Colorado by Mathew Downey and Ty BlissDesigned by Tom McCluskey
Discover Colorado by Mathew Downey and Ty BlissDesigned by Tom McCluskey
An Example of Great Captions
Show and Tell
From Stretching by Bob AndersonDesigned by Rick Gordon
From Stretching by Bob AndersonDesigned by Rick Gordon
Stretching by Bob AndersonDesigned by Rick Gordon
Stretching by Bob AndersonDesigned by Rick Gordon
Stretching by Bob AndersonDesigned by Rick Gordon
Stretching by Bob AndersonDesigned by Rick Gordon
Tables
(that look great)
Images vs HTML
• 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
An Example of a Great Table as Image
Show and Tell
From Homegrown Honey Bees by Alethea Morrison
Design by Dan O. Williams
An Example of a Great Table as HTML
From Colleen Cunningham
Combination of HTML & CSS Styles
Combination of HTML & CSS Styles
From Colleen Cunningham
Combination of HTML & CSS Styles
Dealing with Special Characters
and other Crazy Tricks
Super and Suber Script
Will mess with line-height unless you do something about it!
Here’s something Rick Gordon does:
sup {line-height:0;
}
Arrows
Dan Williams uses the following:
a:link:after { margin: 0 0.05em 0 0.3em; color: #555; content: "\002794"; font-style: normal; text- decoration: none; position: relative; top: .1em;
}
Homegrown Honey Bees Alethea MorrisonDesigned by Dan O. Williams
Limit User Control*
text-size-adjust/-webkit-text-size-adjust : 100%
Or
text-size-adjust/-webkit-text-size-adjust : none
*Tip from Rick Gordon
before: & after:
Dan Williams uses before: to display the word ABOVE before each caption
figcaption:before { color: inherit; content: "above:"; font-style: normal; padding-right: .4em; text-transform: uppercase; letter-spacing: .1em; font-size: 0.65rem; font- family: "chivo", helvetica, arial, sans-serif;
}
Homegrown Honey Bees Alethea MorrisonDesigned by Dan O. Williams
Generation Fix by Elizabeth Ruschdesign by Digital Bindery
Generation Fix by Elizabeth Ruschdesign by Digital Bindery
Media Queries
Media Queries are Rad
CSS 3 & Kindle Queries will break your Adobe-based ebooks
• The solution you ask?
Here you go ;)
For a closer look at what works across platforms come to
Open Standards in a Walled Garden
tomorrow
Thank you again to
• Anne-Marie Concepción (@amarie)• Colleen Cunningham
(@BookDesignGirl)• Dan O. Williams
(@FoxgloveCommons)• Rick Gordon (@rcgordon)• Tom McCluskey (@TomMcCluskey
Go Buy These Books:
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