Achieving Beautiful Typography in eBooks
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Achieving Beautiful Typography in eBooks

  • 2,428 views
Uploaded 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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,428
On Slideshare
2,150
From Embeds
278
Number of Embeds
2

Actions

Shares
Downloads
39
Comments
0
Likes
1

Embeds 278

https://twitter.com 218
http://www.scoop.it 60

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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 @agommamanda@digitalbindery.com www.digitalbindery.com
  • 2. Anne-Marie ConcepciónPresident, Seneca Design & Training@amariesenecadesign.com
  • 3. Colleen CunninghamF&W Publications@BookDesignGirlthebookstudio.wordpress.com
  • 4. Dan O. WilliamsDigital Projects Manager, Storey Publishing@FoxgloveCommonswww.storey.com
  • 5. Dan O. WilliamsDigital Projects Manager, Storey Publishing@FoxgloveCommonswww.storey.com
  • 6. Rick GordonShelter Publications@rcgordonwww.shelterpub.com
  • 7. Tom McCluskeyDigital Bindery@TomMcCluskeywww.digitalbindery.com
  • 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: 24ways.org/2006/compose-to-a-vertical-rhythm/
  • 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 @agommamanda@digitalbindery.com www.digitalbindery.com