Achieving Beautiful Typography in eBooks


Published on

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

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.
  • Achieving Beautiful Typography in eBooks

    1. 1. Amanda Gomm
    2. 2. Anne-Marie ConcepciónPresident, Seneca Design &
    3. 3. Colleen CunninghamF&W
    4. 4. Dan O. WilliamsDigital Projects Manager, Storey
    5. 5. Dan O. WilliamsDigital Projects Manager, Storey
    6. 6. Rick GordonShelter
    7. 7. Tom McCluskeyDigital
    8. 8. Show and Tell
    9. 9. • The digital typography tool chest• The Why, How, & Which of embedding fonts.• “But will I go to jail?”
    10. 10. account for• user intervention• reading system fail• backwards compatibility
    11. 11. • Semantic Markup• Responsive Measurements• Graceful Degradation• Progressive Enhancement• Font Stacks
    12. 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. 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. 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. 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. 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. 17. Just because we’re doing things digitally doesn’t mean we get to lose our minds.
    18. 18. • Character Size• Baseline Grid• Line Length
    19. 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. 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. 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. 22. No more ladders, no more rivers… a girl can dream. Can’t she?
    23. 23. • hyphens: none | auto | manual• -webkit-hyphens: none | auto | manual• -moz-hyphens: none | auto | manual• adobe-hyphenate: none | auto | explicit
    24. 24. • Set hyphens via ­ (soft hyphen)
    25. 25. • hyphenate-after: auto | integer• hyphenate-before: auto | integer• hyphenate-character: auto | string (e.g. "2112”)• hyphenate-lines: auto | integer
    26. 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. 27. Be creative and persistent. Raise the bar.
    28. 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. 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. 30. All your space are belong to us.
    31. 31. • Page-break-before: auto | always | avoid | right | left• Page-break-after: auto | always | avoid | right | left• Page-break-inside: auto | avoid
    32. 32. • Orphans: integer• Widows: integerp{ orphans: 2; widows: 2;}
    33. 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. 34. Show and Tell
    35. 35. (that look great)
    36. 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. 37. Show and Tell
    38. 38. Will mess with line-height unless you dosomething about it!Here’s something Rick Gordon does:sup { line-height:0;}
    39. 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. 40. text-size-adjust/-webkit-text-size-adjust : 100%Ortext-size-adjust/-webkit-text-size-adjust : none*Tip from Rick Gordon
    41. 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. 42. Media Queries are Rad
    43. 43. • The solution you ask?
    44. 44. • Anne-Marie Concepción (@amarie)• Colleen Cunningham (@BookDesignGirl)• Dan O. Williams (@FoxgloveCommons)• Rick Gordon (@rcgordon)• Tom McCluskey (@TomMcCluskey
    45. 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. 46. Amanda Gomm