font-size headings

[JLius]

Dear all

In the CSS of my epubs, I didn't set font-size for headings (h1,h2,h3). When h1 was too big for the chapter heading, I just used h2.
Is this good practice? Or should I always set a font-size for the headings in my css?

Is what is written here (http://www.w3.org/TR/CSS2/sample.html) the default size for headings? So if you dont set them in CSS, this is the size they get?

h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }

JLius

[Jellby]

Originally Posted by JLius

In the CSS of my epubs, I didn't set font-size for headings (h1,h2,h3). When h1 was too big for the chapter heading, I just used h2.
Is this good practice? Or should I always set a font-size for the headings in my css?

You should never choose your tags based on how they look, but on what they mean (except for working around bugs and limitations, maybe), and then alter the looks with CSS.

That said, there's a bit of leeway in what <h1> means. Is it for the book title? For parts, even if there are no parts?... Personally, I often use <h1> for chapters, and if there are parts, I use <h1 class="part"> or something like that.

Is what is written here (http://www.w3.org/TR/CSS2/sample.html) the default size for headings? So if you dont set them in CSS, this is the size they get?

The default depends on the application (and sometimes even user settings), so no, those are at the most common defaults, but you shouldn't rely on them.

[JLius]

I use h1 for chapter titles, sometims h2 when h1 is too big, and h2 or h3 for subtitles.

Originally Posted by Jellby

The default depends on the application (and sometimes even user settings), so no, those are at the most common defaults, but you shouldn't rely on them.

So you're saying I should always set a font-size in css for h1,h2,h3?

[Jellby]

Originally Posted by JLius

I use h1 for chapter titles, sometims h2 when h1 is too big, and h2 or h3 for subtitles.

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>

So you're saying I should always set a font-size in css for h1,h2,h3?

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.

[theducks]

Originally Posted by JLius

Dear all

In the CSS of my epubs, I didn't set font-size for headings (h1,h2,h3). When h1 was too big for the chapter heading, I just used h2.
Is this good practice? Or should I always set a font-size for the headings in my css?

Is what is written here (http://www.w3.org/TR/CSS2/sample.html) the default size for headings? So if you dont set them in CSS, this is the size they get?

h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }

JLius

Right!
And the 500lb e-book Gorillas follow those

If you want a value. SET IT (and hop the Gorillas allow you to play that much)

to Jelby's advice

Use headings for Hierarchy , not size

[dgatwood]

Originally Posted by theducks

Right!
And the 500lb e-book Gorillas follow those

Exactly. Or, to be slightly more cynical...

What? You really think any of the EPUB reader vendors have actually read the CSS specification?

[JLius]

Allright, thanks all (especially Jellby)!

[Toxaris]

A bit late, but ok. If you have to make a choice between semantics or layout, always go for semantics. If labelled correctly, you can easily apply the layout you want. The other way round is not possible...

I personally use H1 for Book title, H2 for chapters and H3 for sections/sub-chapters/etc. Sometimes in an anthology I use H2 for the writer and H3 for the story title. If a story has multiple chapters, it would be H4.
Since I use this consistently, for me it is always very clear what it what.

[JLius]

For book title(page) I gave up tinkering with code, the result was never ideal (dependent on font-size etc). I chose to use a jpg as titlepage instead, that way title, author, publisher... are always positioned the same way.

[mrmikel]

This is one case where descriptive alt text would be most useful.

[Toxaris]

Originally Posted by JLius

For book title(page) I gave up tinkering with code, the result was never ideal (dependent on font-size etc). I chose to use a jpg as titlepage instead, that way title, author, publisher... are always positioned the same way.

Oh, I agree. I usually use an optimized png for the titlepage since it is usually black and white anyway. Much smaller.

[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>

Okay, I've been trying this span class for the subtitle, but it isn't going as planned.

Situation before:

h1 {
  text-align: center;
  padding-bottom: 20px;
  padding-top: 10px;
  }
h2 {
  text-align: center;
  padding-bottom: 70px;
  padding-top: 10px;
  }
h3 {
  text-align: center;
  padding-bottom: 1.5em;
  padding-top: 1.5em;
  font-weight: normal;
  font-style: normal;
  font-size: 1em;
  }

It's fine to eliminate h2 and replace it with a span inside h1 (font-size is not really an isue here).

So now I try this:

.subtitle {
padding-bottom: 70px;
  padding-top: 30px;
}

and use this for the span class.

But the result doesn't look anything like the initial h1 h2, which are separated by sufficient padding. The extension to the title chapter number appears on the same line. I don't want to add a </br>, that doesn't feel right. But even when I do, the padding-top doesn't work, even when I set it to 100px.
What am I doing wrong?


The h3 is for real subtitles, so I think I can leave that the way it is?

[Jellby]

How about:

.subtitle { display: block}

which is in practice equivalent to using <div class="subtitle"> (also a valid option)?

<span> is by default an inline element, <div> is by default a block element, both with no other semantic content. I don't remember the details, but it may be that inline elements do not have any padding, or at least vertical padding.

[Jellby]

Originally Posted by JLius

The h3 is for real subtitles, so I think I can leave that the way it is?

Do you mean real sections? Then yes, but move it to <h2> if you are note using anything between <h1> and <h3>.

[RbnJrg]

Originally Posted by JLius

For book title(page) I gave up tinkering with code, the result was never ideal (dependent on font-size etc). I chose to use a jpg as titlepage instead, that way title, author, publisher... are always positioned the same way.

In that case, why not a svg image?