Colophon
The visual design of this website is unashamedly based on the front cover of a fabulous book, Designing News by Francesco Franchi, as published in hard back September 2013.
Headings and body text are all set in the variable font Literata designed by Veronika Burian and José Scaglione of TypeTogether. Captions and tables are set in a variable version of IBM Plex Sans, designed by Mike Abbink, Paul van der Laan, and Pieter van Rosmalen of Bold Monday. Code is set in a variable version of Inconsolata by Raph Levien.
The site is built on a homemade CMS. It was hand-coded in Espresso, marked up using semantic HTML and CSS.
I’ve used responsive design techniques to hopefully ensure the site is nicely readable on lots of devices. Text is scaled using Utopian techniques. I’ve put together a kind of style guide, mostly as a check that all likely mark-up is styled appropriately. While the site has not been widely tested, it should be fine on all modern browsers. Please let me know if you come across any problems.
Style Guide
This is a guide to the mark-up styles used throughout the site. In particular it’s a check that all likely mark-up is styled appropriately.
Sections (a Level 2 Heading)
The secondary header above is an h2
element, which may be used for any form of important page-level header.
Level 3 Header
The header above is an h3
element, which may be used for any form of page-level header which falls below the h2
header in importance.
Level 4 Header
The header above is an h4
element, which may be used for any form of page-level header which falls below the h3
header in importance.
Level 5 Header
The header above is an h5
element, which may be used for any form of page-level header which falls below the h4
header in importance.
Level 6 Header
The header above is an h6
element, which may be used for any form of page-level header which falls below the h5
header in importance.
Paragraphs
All paragraphs are wrapped in p
tags. Additionally, p
elements can be wrapped with a blockquote
element if the p
element is indeed a quote.
This is a paragraph directly following a paragraph. There should be a small gap between this and the prior paragraph.
This is a paragraph. It has an associated note as aside, which should sit to the right of the main text, otherwise it will be inline. This continues to be a paragraph with an associated note.
This is a second paragraph associated with the same note sitting to the right of the main text, otherwise it will be inline.
This is a paragraph following the aside. It does not have an aside associated with it.
Code block
Here’s a block of code. It should be using Prism.js for syntax highlighting and rendered in Inconsolata.
p {
hyphens: auto;
hyphenate-limit-chars: 6 3 3;
hyphenate-limit-lines: 2;
hyphenate-limit-last: always;
hyphenate-limit-zone: 8%;
}
Blockquotes
The blockquote
element represents a section that is being quoted from another source. The following is a single paragraph:
Democracy is a system of government where the citizens exercise power by voting. In a direct democracy, the citizens as a whole form a governing body and vote directly on each issue.
Multiple paragraphs:
Many forms of Government have been tried, and will be tried in this world of sin and woe. No one pretends that democracy is perfect or all-wise. Indeed, it has been said that democracy is the worst form of government except all those other forms that have been tried from time to time.
This is a second paragraph within the quotation, indented unlike the non-quoted paragraphs.
A blockquote in quotes with a citation:
One more attribute the modern typographer must have: the capacity for taking great pains with seemingly unimportant detail. To him, one typographical point must be as important as one inch, and he must harden his heart against the accusation of being too fussy.
Ordered list
The ol
element denotes an numbered list.
- This is an ordered list. This is an ordered list. This is an ordered list. This is an ordered list. This is an ordered list.
- This is the second item, which contains a sub list
- This is the sub list, which is also ordered.
- It has two items.
- This is the final item on this list.
Unordered list
The ul
element denotes a bulleted list.
- This is an unordered list. This is an unordered list. This is an unordered list. This is an unordered list.
- United Kingdom of Great Britain and Northern Ireland:
- England
- Scotland
- Wales
- Northern Ireland
- Republic of Ireland
- Isle of Man
- Channel Islands:
- Bailiwick of Guernsey
- Bailiwick of Jersey
Sometimes we may want each list item to contain block elements, typically a paragraph or two.
This is a first paragraph in the list item. This is a first paragraph in the list item. This is a first paragraph in the list item. This is a first paragraph in the list item.
This is a second paragraph in the list item. This is a second paragraph in the list item. This is a second paragraph in the list item. This is a second paragraph in the list item.
The British Isles is an archipelago consisting of the two large islands of Great Britain and Ireland, and many smaller surrounding islands.
Great Britain is the largest island of the archipelago. Ireland is the second largest island of the archipelago and lies directly to the west of Great Britain.
The full list of islands in the British Isles includes over 1,000 islands, of which 51 have an area larger than 20 km2.
Definition list
The dl
element is for another type of list called a definition list. Instead of list items, the content of a dl
consists of dt
(Definition Term) and dd
(Definition description) pairs.
- This is a term.
- This is the definition of that term, which both live in a
dl
. - Here is another term.
- And it gets a definition too, which is this line.
- Here is term that shares a definition with the term below.
- Here is a defined term.
dt
terms may stand on their own without an accompanyingdd
, but in that case they share descriptions with the next availabledt
. You may not have add
without a parentdt
.
Figures
Figures are usually used to refer to images.

This is a full bleed image using class='fullbleed'
to make maximum use of the screen estate.


inline
figureHere, a part of a poem is marked up using figure:
Did gyre and gimble in the wabe;
All mimsy were the borogoves,
And the mome raths outgrabe.
Text-level Semantics
There are a number of inline HTML elements you may use anywhere within other elements.
Links and anchors
This is a link.
Stressed emphasis
This uses the em
element for emphasis. This is italicised using an i
element.
Strong importance
This uses the strong
element for importance. This is emboldened using a b
element.
Strikethrough
This uses the s
element to strike through.
Citations
This uses the cite
element to for a citation.
Inline quotes
This uses the q
element to for a quote
.
Definition
The dfn
element is used to highlight the first use of a term.
Abbreviation
The abbr
element is used for any abbreviated text, like Staffs. and BBC, the latter uses class='c2sc'
to specify small-caps.
Code
The code
element is used to represent fragments of computer code as we’ve seen through this page. It should be rendered in Inconsolata.
Variable
The var
element is used to denote a variable. It should be rendered in Inconsolata.
Sample output
The samp
element is used to represent sample output from a program. It should be rendered in Inconsolata.
Keyboard entry
The kbd
element is used to denote user input. It should be rendered in Inconsolata.
Superscript and subscript text
The sup
element represents a superscript and the sub
element represents a subscript. Example:
The coordinate of the ith point is (xi, yi). For example, the 10th point has coordinate (x10, y10).
f(x, n) = log4xn
Marked or highlighted text
The mark
element is used to represent a run of text marked or highlighted for reference purposes.
Edits
The del
element is used to represent deleted or retracted text. The ins
element, is used to represent inserted text.
Tabular data
Tables should be used when displaying tabular data. They are rendered in Plex Sans.
Ingredients | Serves 12 | Serves 24 |
---|---|---|
Milk | 1 quart | 2 quart |
Cinnamon Sticks | 2 | 1 |
Vanilla Bean, Split | 1 | 2 |
Cloves | 5 | 10 |
Mace | 10 blades | 20 blades |
Egg Yolks | 12 | 24 |
Cups Sugar | 1 ½ cups | 3 cups |
Dark Rum | 1 ½ cups | 3 cups |
Brandy | 1 ½ cups | 3 cups |
Vanilla | 1 tbsp | 2 tbsp |
Half-and-half or Light Cream | 1 quart | 2 quart |
Freshly grated nutmeg to taste |
And this is a wide table to making maximum use of screen estate.
Browser | Font Format | ||||
---|---|---|---|---|---|
TrueType Mac | TrueType PC | PostScript | OpenType PostScript | OpenType TrueType | |
Camino 1.2 | good | good | good | good | good |
Safari 2 | good | good | good | good | good |
Firefox 2 | good | correct italic & bold fonts displayed; miscalculation of space required for italic, bold & underlined fonts resulting in overlappping text | not rendered | italic & bold fonts synthesised; miscalculation of space required for italic, bold & underlined fonts resulting in overlappping text | italic & bold fonts synthesised; miscalculation of space required for italic, bold & underlined fonts resulting in overlappping text |
Opera 9 | good | good, but italic font is synthetically obliqued | not rendered | bold font not rendered; italic synthesised | bold font not rendered; italic synthesised |