Achieving Beautiful Typography in eBooks

Hello.

Amanda Gomm@agomm

[email protected]

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!

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

Homegrown Honey Bees Alethea MorrisonDesigned by Dan O. Williams

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

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?

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.

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

An Example of Great Captions

Show and Tell

From 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

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;

}

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;

}

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

cya.

Amanda Gomm@agomm

[email protected]

Achieving Beautiful Typography in eBooks

Technology

Transcript of Achieving Beautiful Typography in eBooks