Your SlideShare is downloading. ×
Achieving Beautiful Typography in eBooks
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Achieving Beautiful Typography in eBooks


Published on

Presentation from O'Reilly's 2013 Tools of Change conference. …

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.

Published in: Technology

1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide
  • 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.
  • Transcript

    • 1. Amanda Gomm
    • 2. Anne-Marie ConcepciónPresident, Seneca Design &
    • 3. Colleen CunninghamF&W
    • 4. Dan O. WilliamsDigital Projects Manager, Storey
    • 5. Dan O. WilliamsDigital Projects Manager, Storey
    • 6. Rick GordonShelter
    • 7. Tom McCluskeyDigital
    • 8. Show and Tell
    • 9. • The digital typography tool chest• The Why, How, & Which of embedding fonts.• “But will I go to jail?”
    • 10. account for• user intervention• reading system fail• backwards compatibility
    • 11. • Semantic Markup• Responsive Measurements• Graceful Degradation• Progressive Enhancement• Font Stacks
    • 12. • 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
    • 13. • 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.
    • 14. • What’s your budget for fonts?• That’s what I thought.• Try something free to distribute.“Permission is hereby granted, free of charge, to anyperson obtaining a copy of the Font Software, to use,study, copy, merge, embed, modify, redistribute, and sellmodified and unmodified copies of the Font Software…”—Font License for Adobe’s Source Sans ProResources: Font Squirrel, Google Web Fonts
    • 15. • 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.
    • 16. • 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-familyWhat could possibly go wrong?Hint: Epubcheck will get cranky if you’ve got yourCSS encoded incorrectly
    • 17. Just because we’re doing things digitally doesn’t mean we get to lose our minds.
    • 18. • Character Size• Baseline Grid• Line Length
    • 19. • 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
    • 20. • 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 elementResource:
    • 21. • 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
    • 22. No more ladders, no more rivers… a girl can dream. Can’t she?
    • 23. • hyphens: none | auto | manual• -webkit-hyphens: none | auto | manual• -moz-hyphens: none | auto | manual• adobe-hyphenate: none | auto | explicit
    • 24. • Set hyphens via ­ (soft hyphen)
    • 25. • hyphenate-after: auto | integer• hyphenate-before: auto | integer• hyphenate-character: auto | string (e.g. "2112”)• hyphenate-lines: auto | integer
    • 26. • 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;}
    • 27. Be creative and persistent. Raise the bar.
    • 28. • Rick Gordon’s Solution for thin spaces around em dashes:<style>.thin {letter-spacing: -.2em;}</style><span class=“thin”> </span>—<span class=“thin”> </span>
    • 29. • 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><spanclass=“thin”> </span>
    • 30. All your space are belong to us.
    • 31. • Page-break-before: auto | always | avoid | right | left• Page-break-after: auto | always | avoid | right | left• Page-break-inside: auto | avoid
    • 32. • Orphans: integer• Widows: integerp{ orphans: 2; widows: 2;}
    • 33. 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)
    • 34. Show and Tell
    • 35. (that look great)
    • 36. • 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
    • 37. Show and Tell
    • 38. Will mess with line-height unless you dosomething about it!Here’s something Rick Gordon does:sup { line-height:0;}
    • 39. 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;}
    • 40. text-size-adjust/-webkit-text-size-adjust : 100%Ortext-size-adjust/-webkit-text-size-adjust : none*Tip from Rick Gordon
    • 41. Dan Williams uses before: to display the word ABOVEbefore each captionfigcaption: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;}
    • 42. Media Queries are Rad
    • 43. • The solution you ask?
    • 44. • Anne-Marie Concepción (@amarie)• Colleen Cunningham (@BookDesignGirl)• Dan O. Williams (@FoxgloveCommons)• Rick Gordon (@rcgordon)• Tom McCluskey (@TomMcCluskey
    • 45. Homegrown Honey Bees by Alethea MorrisonStretching: Enhanced 30th Anniversary Edition by Bob AndersonDiscover Colorado by Mathew Downey and Ty BlissThe Everything Learning French Book 2nd Edition published by F&WMediaWaldon (as designed by Dan O. Williams) by Henry David ThoreauKiller Commodities published by F&W MediaeBook Typography by Chris Jennings
    • 46. Amanda Gomm