How to set the font sizes of two text sections to be relative to each other?

Question

I am editing an ebook, trying to mimic the original format of its text. In the book, footnotes are written in a smaller font with respect to normal text, and so are quotations; this means that a quotation inside a footnote is even smaller.

I used an inline style

<div style="font-size:smaller;">text</div>

which works well for footnote and quotations. (Actually, the directive is incorporated in their style) It work also for quotations inside footnotes, but in this case the size of the text is really small. I wouldn't want to dictate a font size; but I would like to have something like "use a font 1 pt smaller than the inherited one". Is it possible?

Answer 1

I eventually found out that I can use

style="font-size:90%;"

which is not exactly what I wanted but is sufficients for my needs.

Answer 2

If I understand correctly what you want to do, you will need three different font sizes, one for the main body text, one for the footnote, and another for the quotations.

As you correctly guessed, using a relative CSS unit¹ is the way to go, but I think that in this case it is more correct to use em or rem instead of %, since it these are units directly referencing font sizes.

I also advise you to use classes and set the actual styling on an external CSS file, in order to have a cleaner and more manageable code.

Example

HTML file:

<div class="footnotes">

    <p>Lorem ipsum dolor sit amet[...]</p>

    <blockquote>Lorem ipsum dolor sit amet[...]</blockquote>

    <p>Lorem ipsum dolor sit amet[...]</p>

</div>

CSS file:

.footnotes p {
    font-size: 0.9rem;
}

.footnotes blockquote {
    font-size: 0.8rem;
}

What we do here is wrapping the footnotes with a <div> and giving it a footnotes class, in order to easily select it in the CSS file; inside it, we have standard <p> paragraphs, that we set to have a font size 90% of the standard body text (by using rem units); then we used the <blockquote> HTML tag to wrap and style the quotations, and in this case we set the font size to be 80% of the body text.

---

_{1. Here is a reference to CSS units; please note that not all of them are pertinent or useful for epub use}