List of epub formatting "don'ts"

[Agama]

Originally Posted by JSWolf

Your assumption is very wrong. You do not get 1.2em on ADE based readers. Most are actually 1.0em and the Kobo is 1.3em. There are no ADE based readers that give a default of 1.2em that I know of. Desktop ADE is 1.0em. So if you do want a specific line height, you have to specify it. But please don't make it 1.2em or higher. Too big. 1.1em might be OK for most people.

This isn't an assumption, it's based on actual results using ADE. Attached pics show a couple of paragraphs in Desktop ADE with paragraph line-heights of: 1.0em, (LH10em.gif), 1.1em, (LH11em.gif) and 1.2em, (LH12em.gif). The final picture, (LHDEF.gif), is that obtained using default line-height, (i.e. not specified) and this is closest to 1.2em.

[Agama]

Originally Posted by Jellby

Unfortunately, that's very much font-dependent (meaning that for some fonts 1.2 will be "too much" and for others it will be "not enough"). It depends on how the different glyphs (letters) are drawn in the containing block. Some fonts have containing block very well adjusted to the glyph shapes, some fonts have lots of white space in the containing block, some fonts have large parts of the glyphs outside the containing block... There's no fixed solution for every font.

(see Figure 5-9 here)

Interesting. Perhaps this shows why there is some difference in opinion in this thread as to what makes a reasonable line-height. My font testing has been limited to those displayed on my PRS-300.

[Arios]

Thanks Agama,

Your suggestions are very helpful and I like the way you do shared it, without stiff statements like: "Do it!" I do not like it, "You are wrong".

We are in a free world, is it not (so people can like and do what they want to)?

[Tex2002ans]

Originally Posted by Agama

This isn't an assumption, it's based on actual results using ADE. Attached pics show a couple of paragraphs in Desktop ADE with paragraph line-heights of: 1.0em, (LH10em.gif), 1.1em, (LH11em.gif) and 1.2em, (LH12em.gif). The final picture, (LHDEF.gif), is that obtained using default line-height, (i.e. not specified) and this is closest to 1.2em.

Great! Actual scientific comparison screenshots trumps silliness! (Now now my friend Agama, why did you use that crappy GIF format and not PNG?)

Now, back to the "Do's and Don'ts of EPUB Formatting":

Do: Use a pleasing default line-height (~1-1.2em (MAYBE 1.3em)), or leave on defaults so user can choose whatever his heart desires.

Don't: Use a line-height of OVER 9000!!!!!

[Man Eating Duck]

Originally Posted by Tex2002ans

Now, back to the "Do's and Don'ts of EPUB Formatting":

Do: Use a pleasing default line-height (~1-1.2em (MAYBE 1.3em)), or leave on defaults so user can choose whatever his heart desires.

Don't: Use a line-height of OVER 9000!!!!!

That is actually close to what I put in the original post, my advice was to leave it default. Even (especially?) after all these posts about line-height, I think I'll let it stand

Originally Posted by Man Eating Duck

* Don't adjust line-height. Leave it at default. Readers will render a sensible default, many can override it if desired, but a silly value here can make it difficult to hit the correct value if you adjust the view. Edit: One exception is in span styles for superscript, here a line height of 0 avoids extra spacing to the above line.

[m00min]

Originally Posted by JSWolf

1.2em is too large a line height. It is not a default. 1em is actually the default (if there is one).

Don't use 1.2em. It's too big.

The general rule of thumb found in typography for setting the leading is to set at 120%. Of course different typefaces need different values, but anything less than 1.2em risks clashing ascenders and descenders, and that looks awful.

You might personally prefer it, that's fine, but typographically it's wrong.

[Zetetic]

I believe that 1.2em (-ish) is certainly the default for many desktop renderers.

As a wider point, this does seem like something that would be best left up to the user agent as the original poster suggests.

[Man Eating Duck]

Originally Posted by Zetetic

I believe that 1.2em (-ish) is certainly the default for many desktop renderers.

Yes, I've heard 1.25em or 125%. Still, I checked computed values for Firefox and Chrome via developer tools. All values are for font-size:normal.

Firefox line-height:
normal: 20px
1em:    16px
1.2em:  19.2px
1.25em: 20px
100%:   16px
120%:   19.2px
125%:   20px

Chrome line-height:
normal: 20px
1em:    16px
1.2em:  19.1875px
1.25em: 20px
100%:   16px
120%:   19px
125%:   20px

ADE line-height (measured with screen ruler, 10 lines/10):
normal: 19px
1em:    16px
1.2em:  19.1px
1.25em: 20px
100%:   15.9px
120%:   19.2px
125%:   20px

Curiously, ADE has a slightly smaller normal value (118.75%). The next time I upload a batch of books to my prs-650 I'll measure the test-epub with a ruler, I believe it is similar. I find the normal line-height with the default font to be very pleasant on my device. Like the majority of those who have spoken up about it, 1em seems too small for me.

Edit: The font rendered was the default fonts, this could explain the different values in ADE. Firefox and Chrome both used Times New Roman. If I can find the time tomorrow I'll update my test epub to reflect this and see if the value changes. I could also embed a few different fonts for comparison of "normal" line height rendering, suggestions are welcome.

[JSWolf]

Originally Posted by theducks

Agreed.
Most time I don't specify a line height.
In a few font cases, I have to specify 1.2 as the default space seems overly (screen) wasteful of space

The only other time I use it, is when I mix fonts on a line and the inherited space prevails (probably due to bad coding on my part)

It could be due to the different fonts. The metrics in the fonts can control how the line height works in ADE. So if you change the numbers, you change the line height without specifically specifying a set height.

[JSWolf]

From what I've seen, the line height of ADE is maybe 1.15em. It's larger then 1.1em and smaller then 1.2em.

[dgatwood]

Originally Posted by Zetetic

I believe that 1.2em (-ish) is certainly the default for many desktop renderers.

According to:

https://github.com/h5bp/html5-boilerplate/issues/825

The default for IE is about 1.125, and pretty much all other browsers (Firefox/Chrome/Safari/Webkit) use 1.1875. But most of the time we just say 1.2, because that's close enough for government work.

[William Ockham]

Wow, there is an enormous amount of misinformation about line-height on this thread. Let's clear a few things up.

1. Fonts DO NOT contain any information about line-height. Font files describe how to draw glyphs in relation to the em square. If you are seeing line-height change based on font selection, you are seeing the result of a (very broken) user agent.

2. Line-height will ALWAYS be rendered in a whole number of device pixels. This is a fairly obvious physical constraint.

3. The equation of 1em = 16px is just a convention. It's a long story and not really relevant.

None of this stuff really matters as long as, if you are going to specify line-height, you do it in ems. Just realize that the value you specify will get rounded to the nearest number of device pixels, which isn't the same thing as the CSS px measurement.

[Man Eating Duck]

Originally Posted by William Ockham

Wow, there is an enormous amount of misinformation about line-height on this thread. Let's clear a few things up.

2. Line-height will ALWAYS be rendered in a whole number of device pixels. This is a fairly obvious physical constraint.

Yes, I realised that my measurements necessarily had some (~6%) margin of error after writing that post, but figured that it wasn't really important. I think that the distinction whether 1em/100% or 1.2/120% is the regular "normal" value was relevant, though, as there seemed to be some confusion about which values constitute a large deviance from default.

Originally Posted by William Ockham

None of this stuff really matters as long as, if you are going to specify line-height, you do it in ems. Just realize that the value you specify will get rounded to the nearest number of device pixels, which isn't the same thing as the CSS px measurement.

Thanks for chiming in, appreciated

[JSWolf]

Originally Posted by William Ockham

1. Fonts DO NOT contain any information about line-height. Font files describe how to draw glyphs in relation to the em square. If you are seeing line-height change based on font selection, you are seeing the result of a (very broken) user agent.

It's nothing to do with the user agent. It's not actually line height information in the font, but the metrics. I can change the metrics and change the amount of space between lines. I've done this for ADE & Kindle (KF8) and it's worked. So while technically correct that there is no line height information in a font, there are metrics that say how to render the space between lines and that can be changed.

[William Ockham]

Originally Posted by JSWolf

It's nothing to do with the user agent. It's not actually line height information in the font, but the metrics. I can change the metrics and change the amount of space between lines. I've done this for ADE & Kindle (KF8) and it's worked. So while technically correct that there is no line height information in a font, there are metrics that say how to render the space between lines and that can be changed.

No, you are wrong. The line-height measures the baseline to baseline difference between two lines of text at the same em size. There is absolutely nothing you can do to a font to change that. You can change the metrics of the font to make it take up more of that space, but you really can't change the distance between the baselines. This is not some trivial disagreement. If I take rubber band with a diameter of 1 inch and stretch it across two posts that are 2 inches apart, I haven't decreased the distance between the posts. I've just distorted the shape of the rubber band. If you are changing the metrics of the font, you are just distorting the font and that's not anything related to changing line height.