body font-size > 1em, then p font-size < 1em

[hobnail]

This is in books I've gotten from places; I can't remember where.

More likely in the book's CSS the body font-size is > 100% and then p font-size is less than 100%. So it's close to 100% after those gyrations.

Anybody know why they do this? Maybe it's from converting the book from kindle format to epub in Calibre? If so, would checking the "Disable font size rescaling" stop that?

[JSWolf]

body {
  font-size: 150%;
}
p {
  font-size: small;
}

It's that simple.

[hobnail]

Originally Posted by JSWolf

body {
  font-size: 150%;
}
p {
  font-size: small;
}

It's that simple.

Right, I forgot about that variation. Which means it's not Calibre.


But my question is why do they do that?

[JSWolf]

Originally Posted by hobnail

Right, I forgot about that variation. Which means it's not Calibre.


But my question is why do they do that?

Stupidity.

[Tex2002ans]

Originally Posted by JSWolf

Stupidity.

Agreed. It leads to frustration all around. I've had so many books where I:

Click one font larger, uncomfortably large. One font smaller, uncomfortably small.

This kind of poor code causes ebooks to not match user-specified preferences.

It could be imported templates + overrides, and a whole host of other nonsense (see below).

You could also see similar discussion in:

2017 "Adobe InDesign and poor code"
2014 "Headings appearing huge with Indesign stylesheet"

Side Note: Also recommend doing a search for:

Tex2002ans InDesign site:mobileread.com

in your favorite search engine to run across a lot more examples over the years...

Side Note #2: Different CSS units may interact in unexpected/unintended ways for font-size. See some discussion in "Em Vs Percentage" or one example article "Difference Between em, px, pt and % in Font Sizes".

I say your best bet is to just KISS. Don't specify anything unless you absolutely have to:

Only change font-size sparingly and in rare cases (such as .8em on a copyright page or an image's caption). Besides that, best to just leave font-sizes up to the device/user.

Originally Posted by hobnail

This is in books I've gotten from places; I can't remember where.

More likely in the book's CSS the body font-size is > 100% and then p font-size is less than 100%. So it's close to 100% after those gyrations.

Anybody know why they do this?

It could be a whole multitude of things:

CSS Resets

These try to aim towards "looking similar across all devices/browsers". They override everything, then try to add your changes on top.

Old HTML/Browser Code

Ebooks =/= Browsers... so you have a lot of legacy code cruft built up over the years, leading to bad ebook experiences.

Example: "How to Size Text in CSS" from 2007 discussing ways to handle IE6/7 + Safari + all these other older/buggy browsers.

There's no need to carry stuff over code like that into ebooks.

Note: For max compatibility in ebooks, just stick with font-size in em or %. Use CSS2, avoiding newer CSS3 units like rem, vh, [...].

Print-Setting Leftovers

It could be very poor conversions/exports.

In EPUB/HTML it's not smart to use fixed sizes (pt/px).

InDesign has 12pt font in the PDF, so during export it may "helpfully" convert to fractions of em, so you see code like:

font-size: 1.00375em

Direct Formatting Leftovers

There are a bajillion and one different ways of creating documents (in Word/LibreOffice/InDesign, etc.).

Instead of using Styles, they could've been pressing all the direct formatting buttons, which may achieve "the same look" on the surface, but the road to arrival is completely different.

For example, let's say Word's defaults are:

12pt font, 16pt chapter headings.

You could:

1. Just specify headings as headings, paragraphs as paragraphs, and leave it to the defaults.

If you exported this:

HTML:

<h2>Chapter 1</h2>
<p>And so it begins.</p>

the resulting HTML "uses the device's defaults". Your chosen preferences might be 10pt font and 14pt headings.

Whatever, the exact same spirit gets across.

2. You could "hard-code" in the sizes:

You highlight all your text and push the buttons for 12pt font, you highlight all your headings and push the 16pt font:

<h2 style="font-size:16pt">Chapter 1</h2>
<p style="font-size:12pt">And so it begins.</p>

In Word, it LOOKS the same on the surface... but when the user wants to change font sizes...

3. You override some with others.

You know that specifying exact font sizes is bad, so instead, you decide to go with scaling percentages!

You don't like the height of your Print font, it's a little too small, so you specify all fonts to be 125% bigger.

You go pushing all those similar buttons:

<body style="font-size:125%">
<h2 style="font-size:80%">Chapter 1</h2>
<p style="font-size:80%">And so it begins.</p>
</body>

I mean, it looks similar to Print... until the user begins changing anything (fonts, font sizes, line-heights, etc.).

* * *

Like I said initially, overall it's best to just get out of the way. If you need to mess with font-sizes, do it very sparingly:

<body>
<h2 class="chapter">Chapter 1</h2>
<p>And so it begins.</p>
[...]
<h5>The Interaction</h5>
</body>

h2 {
	font-size: 1.2em;
}

h5 {
	font-size: 1em;
	font-style: italic;
}

but there's no need to specify font-sizes in the <body>, then trying to override/calculate everywhere else. It'll just lead to trouble further down the line.

[JSWolf]

Another font related thing that bothers me is the base font size set to small and what might be large is set to medium and what would be small is set to x-small. I was editing a book like that earlier today.

Another thing (not font related) that I don't like is the same styles duplicated with different names such as tx1, tx, fmtx1, fmtx, amtx1, and amtx. That's 6 classes that could be done in just 2. Also, these catch all CSS have been known to cause problems in older Readers because of the older software. I've seen recently, 496 extra classes being removes removing unused CSS. This is just ridiculous. I could come up with a nice simple CSS that would handle most use cases and then build the eBook from there using those styles and adding in any styles needed that do not already exist. When done, just remove the extra CSS and it's a nice well coded eBook as most ebooks do not need any sort of complex code. Plus, it would mean that eBooks from that publisher would have a similar/same look. eBooks do not have to look like the pBook.

[stumped]

I have also seen , in some retail books, the main body text size set to 1.1em and then lots of 0.9090...in para styles to counteract it.
And, less commonly, a base size of 1.2em....

To the extent that I can be bothered, I tweak everyting that is >1, back to 1. I am not a fan of big headers on small screens, also I find anything smaller than 0.9 to be hard to read. Some books put some sections in a smaller font, to make them stand out from the main story line I suppose. Which probably works for the print hardback edition but is a fail when carried over into the e book edition

[hobnail]

Originally Posted by JSWolf

Another thing (not font related) that I don't like is the same styles duplicated with different names such as tx1, tx, fmtx1, fmtx, amtx1, and amtx. That's 6 classes that could be done in just 2.

I don't even see the need for those two classes. I have CSS for a plain p which is indented, and then for the non-indented paragraphs I use

h + p, hr + p /* etc */ { text-indent: 0; }

I only use classes where it's a special case; e.g., a div for poetry. One of the first things I do when cleaning up a book is remove all of those unnecessary classes (pindent, nonindent, etc.) from the html.

[j.p.s]

Originally Posted by stumped

I have also seen , in some retail books, the main body text size set to 1.1em and then lots of 0.9090...in para styles to counteract it.
And, less commonly, a base size of 1.2em....

Everything that might modify the main body text should be left unspecified.

Originally Posted by stumped

To the extent that I can be bothered, I tweak everyting that is >1, back to 1. I am not a fan of big headers on small screens, also I find anything smaller than 0.9 to be hard to read. Some books put some sections in a smaller font, to make them stand out from the main story line I suppose. Which probably works for the print hardback edition but is a fail when carried over into the e book edition

That bothers me a lot when it happens. I set the text size to be as small as is comfortable for me to read. That means a block of text any smaller than that is by definition uncomfortable for me to read. I know that not everyone sets fonts at the edge of comfort, but I don't think I am alone.

A short paragraph or note might be OK, but a full or even half page is not.

I'm also annoyed at tiny font sizes for end notes. No extra paper or bytes are used in ebooks with readable notes. (I don't believe I should have to adjust the font size to read notes.