Colophon

Book cover showing similar colours and typographic treatment
Front cover of Designing News

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.

— Hans P. Schmoller, in ‘Book Design Today’, Printing Review, 1951

Ordered list

The ol element denotes an numbered list.

  1. 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.
  2. This is the second item, which contains a sub list
    1. This is the sub list, which is also ordered.
    2. It has two items.
  3. 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 accompanying dd, but in that case they share descriptions with the next available dt. You may not have a dd without a parent dt.

Figures

Figures are usually used to refer to images.

Example image
This is a placeholder image, with supporting caption rendered in Plex Sans

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

Example image
This is a full bleed placeholder image, with supporting caption
Example image
This is an inline figure

Here, a part of a poem is marked up using figure:

‘Twas brillig, and the slithy toves
Did gyre and gimble in the wabe;
All mimsy were the borogoves,
And the mome raths outgrabe.
Jabberwocky (first verse). Lewis Carroll, 1832–98

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.

The Very Best Eggnog
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.

Font Rendering on Macs
BrowserFont Format
TrueType MacTrueType PCPostScriptOpenType PostScriptOpenType TrueType
Camino 1.2goodgoodgoodgoodgood
Safari 2goodgoodgoodgoodgood
Firefox 2goodcorrect italic & bold fonts displayed; miscalculation of space required for italic, bold & underlined fonts resulting in overlappping textnot rendereditalic & bold fonts synthesised; miscalculation of space required for italic, bold & underlined fonts resulting in overlappping textitalic & bold fonts synthesised; miscalculation of space required for italic, bold & underlined fonts resulting in overlappping text
Opera 9goodgood, but italic font is synthetically obliquednot renderedbold font not rendered; italic synthesisedbold font not rendered; italic synthesised