10Body text, sections and headings

I’ve spoken at great length about body text (specifically in § 3.3.3).

At its most basic, I made the following decisions (see § 3.4):

1. The main body text of the document will use the Equity font set

2. The main body text of the document will have a font size of 24 pixels

3. The main body text will have a line spacing of 135%

The first two of these points I addressed in § 9.3 (code fragment: Code 9.5), I set the html style to give a point size of 24 px (font-size: 24px) and to use the Equity font (font-family: 'eqty-ta-r'); I did this in style.css.

Like this:

html {
    background-color: #fbfaf6;             /* cream page bkgrd */
    font-size: 24px;
    color: #404030;
    font-family: 'eqty-ta-r';
    text-rendering: optimizeLegibility;
}

And this is fine, but it is not responsive, the font size will be 24 pixels no matter what. It won’t change in response to the browser window becoming narrower. When I discussed responsiveness in § 8.2, I said “I want the size of text (the font-size) to change as the website gets narrower” and I do.

This begs three questions: firstly — how do I do this? Secondly — what size should the font change to and thirdly, — when should it change?

I answer these in the following section.

The maximum width of the web page is 1276 pixels (see § 7.4.3), this is set in the body style. There is also an effective minimum width, this is the point at which the grid columns collapse into a single line, this happens at a browser width of 520 pixels (see § 8.2). If the browser is less than 520 pixels, there are no further responsive changes (520 pixels is the point at which the website stops being responsive).

I determined the smallest font size by looking at body text on various smart phones and judging by eye what I thought was an acceptable size. It was somewhere between 12 and 13 pixels. In the end I settled for 12 pixels, this looked better on lower resolution phones.

This gave me the two extremes:

Now in practice, the maximum font size (24 px) works at browser widths below 1276, again I judged this by eye and I found that a font size of 24 px was OK down to a width of about 960 px. Below 960 px the 24 px font size started to break the line length rules (see § 3.3.3), this was the width at which 24 px had less than 2 lowercase alphabets per line.

So I modified the above table:

Since font size is measured in pixels, and these are integer values (can’t have half a pixel), the next font size down from 24 pixels is 23 pixels. This means that the font size will vary from 12 pixels at a width of 520 pixels to 23 pixels at a width of 960 pixels.

This equates to a font size change of 11 pixels as the browser width changes by 440 pixels (960 — 520). 440 divided by 11 gives 40 pixels, thus I will increase the font size by one pixel for every screen width increase of 40 pixels. Giving the following set of font sizes and browser width breakpoints:

To make the body text responsive, I used the @media media query just like we did in § 8.4.3; I did this by setting the html font-size property to different values at different browser widths:

html {
    background-color: #fbfaf6;             /* cream page bkgrd */
    color: #404030;
    font-family: 'eqty-ta-r';
    text-rendering: optimizeLegibility;
}

/* **********************************************************************
   SET THE BASE FONT SIZE AND MAKE RESPONSIVE
   ******************************************************************* */


@media all {html {font-size: 24px;}}
@media all and (max-width:1276px){html {font-size: 24px;}}
@media all and (max-width:960px){html {font-size: 23px;}}
@media all and (max-width:920px){html {font-size: 22px;}}
@media all and (max-width:880px){html {font-size: 21px;}}
@media all and (max-width:840px){html {font-size: 20px;}}
@media all and (max-width:800px){html {font-size: 19px;}}
@media all and (max-width:760px){html {font-size: 18px;}}
@media all and (max-width:720px){html {font-size: 17px;}}
@media all and (max-width:680px){html {font-size: 16px;}}
@media all and (max-width:640px){html {font-size: 15px;}}
@media all and (max-width:600px){html {font-size: 14px;}}
@media all and (max-width:560px){html {font-size: 13px;}}
@media all and (max-width:520px){html {font-size: 12px;}}

You will note that I’ve taken the font-size declaration

    font-size: 24px;

out of the base html style; this is now superseded by the entry:

@media all {html {font-size: 24px;}}

You will also note that I haven’t addressed line spacing (line-height); line spacing is a constant (a percentage of the font size) and I set it individually for each relevant style in the style.css file, see § 10.3.1 for the first example of this.