10

10Body text, sections and headings

10.9

Inline body text styles

You have probably noticed that as I write, I use different inline styles for things such as all caps, code text, menu selections, small caps, italic highlighting, &c.

These are all made available on the website by using the <span> inline element (one of them uses the <em> element to make the text bold, see the footnote in § 10.3.1 for the reasons behind this). The HTML code for the above paragraph is:

<p class="hyp">You have probably noticed that as I write, I use different inline styles for things such as <span class="all-caps">all caps</span>, <span class="code">code text</span>, <span class="menu">menu selections</span>, <span class="sml-caps-s">small caps</span>, <span class="first-use">italic highlighting</span>, &amp;c.</p>

To make part of the text appear as all capitals, that part of the text is surrounded by the <span>...</span> HTML element and given the class .all-caps:

<p class="hyp">... <span class="all-caps">all caps</span>...</p>

In the style.css file, the .all-caps class contains the following:

.all-caps {                                 /* TEXT STYLE - all caps */
    text-transform: uppercase;
    letter-spacing: 0.086em;
}

It’s fairly simple; it converts the text to uppercase:

    text-transform: uppercase;

And then it adds some lateral spacing to the letters, this moves the letters further apart†1 and makes them easier to read. I’ve added 8.6% of additional spacing between the capital letters:

    letter-spacing: 0.086em;

I’ve specified this with the em unit (0.086em), not the rem unit. I generally specify things in rems, but here I’ve used ems, this is because I don’t exactly know where the all-caps class is to be used (it’s perfectly possible to use it in section headings) and I want the letter spacing to be associated with the actual size of the text in use, not the size of the text specified in the HTML class. Although I’ve used 0.086em I could just as easily used 8.6% the result would have been just the same.

This is how all these styles work. This is also the biggest pain in the arse when copying text from Word into the website. Where I’ve used any of these styles in the Word document, italics for example, I have to find that word or section of the text and put the <span>...</span> around it. In the case of this example it would be:

<span class="first-use">italics</span>

I’m not going to explain every one of my span styles in detail, they’re all very similar, but I’ve listed them, shown an example, explained where I use them (you don’t have to stick to my rules, use them for what you like) and given the CSS behind each one. Here they are (the extract used is compulsory reading for engineers and is from: The Race to the Moon by, Catherine Bly Cox & Charles Murray — Simon and Schuster, 1989. There is a Kindle version by the same authors, but just called Apollo).

†1 Letter spacing (or character spacing) adjusts the horizontal gap between letters in a section of text. Single capital letters (like those at the start of a sentence) do not need any additional spacing, where a word is completely capitalized, the normal spacing between the letters it too close, the letters look cramped together and more spacing is required. For a more detailed discussion, I refer you to Mr Butterick

10.9.1

Inline style — .all-caps

Appearance
Converts text to uppercase and increases the letter (character) spacing
Usage
Used at the start of chapters and sections as a lead-in text (leads the eye to where the text starts)
Example

In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. That’s all there is to it.

HTML
<p class="hyp"><span class="all-caps">In principle</span>, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. That’s all there is to it.</p>
CSS
.all-caps {                                 /* TEXT STYLE - all caps */
    text-transform: uppercase;
    letter-spacing: 0.086em;
}

10.9.2

Inline style — .code

Appearance
Converts text to a blue coloured monospaced font
Usage
Used to denote an extract of code or sometimes a user entry, filename or data &c.
Example

In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. That’s all there is to it.

HTML
<p class="hyp>In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. <span class="code">Liquid fuel is pumped</span> into a combustion chamber in the presence of liquid oxygen and a flame. It burns. That’s all there is to it.</p>
CSS
.code {                                     /* TEXT STYLE - code fragment */
    font-family: "trip-t4-r";
    font-size: 0.95em;
    color: #4F81BD;
}
  • The smaller font size is because the Triplicate font just looks larger than normal text, the 0.95 rem makes it line up better with the body text.

10.9.3

Inline style — em

Appearance
Applies a bold serif font
Usage
Used for emphasis in the main body text
Example

In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. That’s all there is to it.

HTML
<p class="hyp">In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. <em>It burns</em>. That’s all there is to it.</p>
CSS
.section-std em {                           /* TEXT STYLE - bold */
    font-family: "eqty-ta-b";
    font-style:normal;
}
  • This style uses the html element <em>, rather than the <span> element (see the footnote in § 10.3.1 for the reasons behind this), it uses the descendant selector (combinator) discussed in § 6.6.1 to set the style for every <em> element within the section.

10.9.4

Inline style — .first-use

Appearance
Applies an italic serif font
Usage
Used to highlight the first use of a term, also used to indicate a comment by the author
Example

In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. That’s all there is to it.

HTML
<p class="hyp">In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. <span class="first-use">That’s all there is to it</span>.</p>
CSS
.first-use {font-family: "eqty-ta-i"}       /* TEXT STYLE - first use */

10.9.5

Inline style — .index

Appearance
Applies an index font, a number in a circle 1, 2, 3 &c.
Usage
Used to identify a numbered point (from a numbered list) in the main body text
Example

In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. 1 That’s all there is to it.

HTML
<p class="hyp">In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. <span class="index">1</span> That’s all there is to it.</p>
CSS
.index {                                    /* TEXT STYLE - index font */
    font-family: "conc-i3-r";
    font-feature-settings: "ss00";
}
  • Only numbers (0, 1, 2, ...97, 98, 99) can be used inside the <span> element with the Concourse Index font set, letters and other characters will appear as they are the normal Concourse font.

If you are using my PS Index font, then only the numbers 0 to 26 are available, see § 9.6.2.

10.9.6

Inline style — .menu

Appearance
Converts text to a blue coloured san-serif, small capitals font. With the Equity font set, a slightly heavier version of the Concourse small caps font is used
Usage
Used to indicate a menu option, a web page selection or some other on-screen clickable item
Example

In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. That’s all there is to it.

HTML
lt;p class="hyp">In principle, <span class="menu">liquid rocket engines</span> are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. That’s all there is to it.</p>
CSS
.menu {                                     /* TEXT STYLE - code fragment */
    font-family: "conc-c4-r";
    font-feature-settings: "ss02";
    color: #4F81BD;
}
  • Stylistic set 02 is applied to the Concourse font; this ensures the British settings are used see § Stylistic sets

10.9.7

Inline style — .mono

Appearance
Applies a monospace font to body text (all other properties stay the same)
Usage
Used to apply a monospaced font (usually, within standard body text) to indicate the difference between fonts, used where required.
Example

In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. That’s all there is to it.

HTML
lt;p class="hyp">In principle, <span class="mono">liquid rocket engines</span> are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. That’s all there is to it.</p>
CSS
.mono { font-family: "trip-t4-r"; }       /* TEXT STYLE - monospaced font */

10.9.8

Inline style — .notice

Appearance
Applies a large, red sans-serif font
Usage
Used for proof reading and highlighting an important notification
Example

In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. That’s all there is to it.

HTML
<p class="hyp">In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. <span class="notice">It burns.</span> That’s all there is to it.</p>
CSS
.notice {                                   /* TEXT STYLE — important notice */
    font-family: "conc-t3-b";
    font-feature-settings: "ss02";
    font-size: 130%;
    color: #C0504D!important;
}
  • There is something new in the css for this inline style, I’ve added !important to the end of the colour declaration. If you remember, I talked about the hierarchy and specificity of css selectors, § 5.6.1 and top of the list is !important, it out ranks everything else. So when I use it with the red colour above, the colour will be red no matter what, it cannot be overridden.

Some purists will accuse me of being lazy, using the !important rule is considered to be bad form, I use it here because this style is important and I do want it to override everything else.

10.9.9

Inline style — .red

Appearance
Changes to colour of the selected text to red
Usage
Used for emphasis in the main body text (use sparingly)
Example

In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. That’s all there is to it.

HTML
<p class="hyp">In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. <span class="red">It burns.</span> That’s all there is to it.</p>
CSS
.red {color: #C0504D}

10.9.10

Inline style — .sans

Appearance
Applies a san-serif font
Usage
Used to apply a san-serif font (usually, within standard body text) to indicate the difference between fonts, used where required
Example

In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. That’s all there is to it.

HTML
<p class="hyp">In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. <span class="sans">It burns.</span> That’s all there is to it.</p>
CSS
.sans { font-family: "conc-t3-r"; }       /* TEXT STYLE - sans serif font */

10.9.11

Inline style — .sans-b

Appearance
Applies a bold san-serif font
Usage
Used to apply a bold san-serif font for emphasis in tables
Example

In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. That’s all there is to it.

HTML
<p class="hyp">In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. <span class="sans-b">It burns.</span> That’s all there is to it.</p>
CSS
.sans-b { font-family: "conc-t4-b"; }       /* TEXT STYLE - sans serif bold */

10.9.12

Inline style — .serif

Appearance
Applies a serif font
Usage
Used to apply a serif font (usually, within a table where it is normal to use a san-serif base font) to indicate the difference between fonts, used where required
Example

In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. That’s all there is to it.

HTML
<p class="hyp sans">In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. <span class="serif">It burns.</span> That’s all there is to it.</p>
CSS
.serif { font-family: " eqty-ta-r"; }       /* TEXT STYLE - serif font */

10.9.13

Inline style — .serif-b

Appearance
Applies a bold, serif font
Usage
Used to apply a bold, serif font (usually, within a table where it is normal to use a san-serif base font) to indicate the difference between fonts, used where required
Example

In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. That’s all there is to it.

HTML
<p class="hyp sans">In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. <span class="serif-b">It burns.</span> That’s all there is to it.</p>
CSS
.serif-b { font-family: " eqty-ta-b"; }       /* TEXT STYLE - serif bold */

10.9.14

Inline style — .sml-caps-ns

Appearance
Applies a small capitals, san-serif (non-serif) font
Usage
Used to for emphasis, an alternative to bold or italics, be consistent in where it is used
Example

In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. That’s all there is to it.

HTML
<p class="hyp">In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. <span class="sml-caps-ns">It burns.</span> That’s all there is to it.</p>
CSS
.sml-caps-ns { font-family: "conc-c3-r"; }  /* TEXT STYLE - small caps sans */

10.9.15

Inline style — .sml-caps-s

Appearance
Applies a small capitals, serif font
Usage
Used to for emphasis, an alternative to bold or italics, be consistent in where it is used
Example

In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. That’s all there is to it.

HTML
<p class="hyp sans">In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. <span class="sml-caps-s">It burns.</span> That’s all there is to it.</p>
CSS
.sml-caps-s { font-family: " eqty-ca-r"; }       /* TEXT STYLE - small caps */



End flourish image