10Body text, sections and headings

This is just a summary of the headings mentioned in the previous sections; it shows how I’ve used the <h1>...<h6> heading elements in the different types of <section> elements: lead-in, section, subsection and inline section

I haven’t discussed the <h1> element, if you remember, the <section> elements start with the <h2> heading element and progress from there to the <h6> element — I missed out the <h1> heading altogether.

The <h1> heading is used to give the chapter heading (we’ve only looked at sections so far). The chapter heading appears at the top of each web page

I’ve highlighted it in Figure 10.25.

There is only one <h1> heading on a page^†1 and this is always the chapter number and chapter heading text.

Chapter numbers are always in the format XX; they do not have a decimal point. Sections have the format XX.YY where XX is the chapter number and YY the section number within that chapter, subsections take this one step further with the format XX.YY.ZZ where XX and YY are the same chapter and section number, ZZ being the subsection number within the section.

The <h1> heading forms part of the <header> semantic element and I discuss this further in section 11.

The <h2> heading has two uses, first (and mainly) as the heading for a standard section (highlighted below):

It can also be used as the sidebar title for a lead-in section:

Let’s look at the code behind the <h2> heading, this is defined near the start of the style.css file and looks like this:

h1, h2, h3, h4, h5, h6 {                    /* set standard headings */
    font-family: 'conc-t3-r';
    font-weight: normal;
    font-feature-settings: "ss02";
    font-size: 100%
}

This is fairly straight forward stuff, just fonts and sizes really.

Firstly, all the headings <h1>...<h6> are made identical; they all use the sans serif Concourse font:

    font-family: 'conc-t3-r';
    font-weight: normal;

The next line just makes sure that no embed font weights are used (there aren’t any in these fonts, see § 9.3)

Next I set the font to use the British stylistic set:

    font-feature-settings: "ss02";

Finally, I set the font size to be identical to the html element size (i.e. 24 pixels that is responsive, reducing to 12 pixels at a browser width of 520 px, see § 10.1.1)

    font-size: 100%

This last line is important, it imbues the headings with the responsive aspects of the html text; and while I will subsequently change the font-size (the headings are generally bigger than the html text), they will just be a scaled version of the html text font size (I use the rem unit, and this is always relative to the html text size).

Thus as the browser width becomes narrower, the headings will become smaller along with the body text, but will always maintain the same relative size difference.

The next question is “if I’ve set the <h2> font-size to be the same as the html body text, why is it bigger in the section headings?”

The answer is given in the section title, the <h2> heading is embedded in either the sub-title-num-box class (for the heading number) or the sub-title-text-box class (for the heading text); in either case it is these classes that specify the font-size (Code 10.4):

.sub-title-num-box {                        /* container for sub-title number */
   . . .
    font-size: 1.9rem;
    color: #404030;
}

The font size is set to 1.9 rem and colour to the off grey #404030 (this is also true of sub-title-text-box).

By embedding the <h2> within these classes, (in both cases the <h2> element is a child of the class) it adopts the property of the class so the font size becomes 190% of the body text size.

At this point you’ve probably gone back through your notes and are about to point out that I’m a complete idiot and don’t know what I’m talking about (I generally accept this type of criticism with the self-deprecating wisdom taught to all Englishmen at school).

“Look” you will say “in section 5.6.1 you said that later properties override earlier properties and here the <h2> tag already has a font size property and it is applied later than the sub-title classes”

And you’re right, but you must also remember that despite our charming self-deprecation, Englishmen are also taught to rule^†1  — and whilst you are right, so am I. The <h2> font size declaration is:

    font-size: 100%

Notice here that I’ve specified the font size as a percentage (%) not as a rem. This is important; when I specify the size as a percentage it means that the text will be 100% of the text size of the parent element. In this case the parent element is either the sub-title-num-box or sub-title-text-box class and in both classes I’ve set the font size to be 1.9 rem. This leads to a bit of a chain (I’m assuming the browser width isn’t triggering responsive adjustments):

1. The html class specifies that all text has a font size of 24 px

2. sub-title-text/num-box sets its text to be 1.9 rem
   (1.9 × the html font size = 45 px)

3. The h2 class specifies that the font size is 100% of the parent elements font size (that is 100% of the sub-title-text/num-box font size) so it remains 45 px

If I’d set the h2 font size to be 1 rem, then the sub-title-text/num-box classes could not have changed it.

When the <h2> heading is used in the sidebar, there are some other properties that have to be changed, the main one being the font family, the sidebar <h2> heading uses the Equity serif font (rather than the Concourse font); these changes are made specifically in .aside-head h2 descendent class:

.aside-head h2 {
    font-family: "eqty-ta-bi";
    font-size: 1.3rem;
    margin-top: -0.45rem;
    line-height: 1.40;
}

Rather than repeat myself, I refer you to the aside heading style section.

The <h3> heading is used for subsections:

The <h3> heading is almost identical to the <h2> standard section heading; in fact they start off being identical with the declaration in Code 10.14. However, this is qualified with the following CSS:

h3 { margin-top: 5rem; }

This just adds more white space above the heading, I’ve shown the <h2> and <h3> headings side-by-side for comparison here (the margins are in purple):

The <h3> heading needs a bigger margin because it doesn’t have an over-line (which in the case of the <h2> heading carries the margin).

The two heading are designed to have the same distance between the preceding section and the heading, this can be seen in Figure 10.29. The difference between the section and the subsection headings is that there is no line above the subsection heading — this is done to make the subsection inferior to the section

The <h4> hheading is used for in-line sections:

The <h4> heading is almost identical to the <h3> subsection heading; they start off being identical with the declaration in Code 10.14. However, this is qualified with the following CSS:

h4, h5 { margin-top: 2rem; }

This again adds white space above the heading, but not as much as the <h3> heading (the idea being that in-line sections are inferior to the subsections). To demonstrate the difference I’ve shown the <h4> and <h3> headings side-by-side for comparison here (the margins are in purple):

The <h3> heading needs a bigger margin because it doesn’t have an over-line (which in the case of the <h2> heading carries the margin).

The two heading are designed to have the same distance between the preceding section and the heading, this can be seen in Figure 10.29. The difference between the section and the subsection headings is that there is no line above the subsection heading — this is done to make the subsection inferior to the section

This one’s easy, I don’t use it. It has exactly the same settings as the <h4> heading, but it doesn’t appear in the HTML.

This is the invisible heading used for lead-in sections. Inline sections look like this:

I’ve already explained how this works, see section 10.4.