font-size headings

[JLius]

Originally Posted by Jellby

That's fine, if with "subtitles" you mean sections inside chapters. If they are real subtitles (a kind of extension to the title), they are better included inside the <h*>, and you can style them, of course:

<h1>Chapter One: The Beginning
<span class="subtitle">How everything started</span></h1>

Only if the particular size is important to you. You can probably rely on <h1> being larger than <h2>, and both larger than the normal text, but if you want the sizes in some definite proportion or whatever, you better define it.

I've encountered something weird - weird to me, for you guys it's probably normal.

So I have this for my titles:

h1 {
  text-align: center;
  padding-bottom: 70px;
  padding-top: 10px;
  font-family: "Libre Baskerville", serif;
	font-size: 2em;
}
.subtitel {
  padding-top: 30px;
  display: block;
}
.subsubtitel {
	display: block;
	padding-top: 30px;
  font-size: 1em;
	font-weight: normal;
}

And this in my html:

 <h1>chapternumber

  <span class="subtitel">subtitel same size as chapternumber</span>
<span class="subsubtitel">subsubtitel that should be smaller</span>
	
</h1>

What really happens: subsubtitel is the same size as the subtitel and chapternumber. When I change font-size subsubtitel to 2em, it is dubbel the size of the chapternumber and subtitel. When I change to 0.7, it looks about the same size als my normal paragraphs, which are 1em in size.

How is this possible? I set the font-size for h1 to 2em.

[roger64]

Originally Posted by RbnJrg

Maybe your friend compiled my original epub with Calibre instead of kindlegen/Kindle Previewer and for that reason he got what he got. Send the .azw3 attached to this post to your friend to know how this file appears in his Kindles.

Hi Rubén

Sure. I'll do it. Thanks for the tip

[Jellby]

Originally Posted by JLius

What really happens: subsubtitel is the same size as the subtitel and chapternumber. When I change font-size subsubtitel to 2em, it is dubbel the size of the chapternumber and subtitel. When I change to 0.7, it looks about the same size als my normal paragraphs, which are 1em in size.

How is this possible? I set the font-size for h1 to 2em.

Your problem is that em sizes are relative, such that 1em = 100%, and they are relative to the current font size.

So your are setting h1 to have a font size twice as big as the default, fine. Everything inside h1, including both spans will now have this large font. Now you set span.subsubtitle to have 100% of its current size, which is already large, and of course 100% leaves that unchanged.

If you want span.subsubtitel to have the same size as the normal text, you have to "undo" the scaling, and set the font size to 0.5em (or 50%), that should cancel the 2em in h1. But if you change the h1 size, you have to change this again, because the size is relative to h1, not relative to the main text.

Was that semi-clear?

[Sunlite]

The font size in html/css is set relative if you use either em or percent.

1em = 100%
2em = 200%

The value always changes the font size given by the parent.
If no font size is given, the font size of the parents parent is used.

Somewhere in either your css or the cs f the reading software a font size is given in px or pt.
That is font size all relative font sizes are based on.

In your example let say the base font size of your epub is 14pt.

In h1 you change it to 2em = 200%. The font size of the heading 1 becomes 28pt (14*2).
The font size of .subtitle is not changed so it inherits the font size of its parent the h1 class.
The class .subsubtitle has a set font size of 1em = 100% which means 1 time the font size of its parent h1 (28 * 1). To make the font size smaller, you will have to use an em value smaller that 1.

[JLius]

I suspected that this would be the 'problem'. Thanks for clearing that up for me!