Penguin Rules -- for the web

Jan Tschichold’s
Penguin Composition Rules
adapted for web writing


Text composition

Wide spaces in running text should be avoided at all costs, be they caused by short paragraphs, too much whitespace separating paragraphs or exaggerated indentation.

All major punctuation marks—full stop, colon, and semicolon—should be followed by a single space only.

Indenting of Justified paragraphs

Ideally, each paragraph should be indented 1em of the font body size, or a space equal to the line-height of the text. Indents should be omitted for the first paragraph of any text, and at the beginning of a new section that comes under a subheading.

Indents can be ommited in CSS2 by using adjacent selectors. For instance h2 + p { text-indent:0; } will ensure that all paragraphs following a h2 will have no indent (doesn’t work with IE < 6.0)

It is not necessary to set the first word in captials or small capitals, but if this is done for any reason, the word should be letter spaced in the same way as a running title.

The first word cannot be styled automatically using CSS, however :first-line and :first-letter are valid pseudo elements. However their use is not recommended for style reasons, aside from exceptional circumstances.

There should be no extra space preceeding or following a paragraph, save for a single line-space (equal to the line height) before a new section that has no subheading (such a paragraph should also have no text-indent.

Indenting of Flush Left/Right paragraphs

Due to the fluid nature of most web pages, it’s unlikely that as a typographer, one will be able to manage the exact display of text set flush-left/left. An uneven rag will lead to serious legibility problems if one follows the rules above, and as such flush left/right text requires a different set of rules.

No text-indent should be used with non-justified text, and unlike justified paragraphs, those set flush left/right require a space after, equal to approximately half of the line-height.

More care must be taken than usual that large areas of whitespace do not manifest themselves in long settings of non-justified text.

Warning for sensitive typographers

Until CSS2 (and thus, sibling selectors) are widely supported, the distinction between the first and subsequent paragraphs is not easy to make automatically, unless an appropriately styled class or id is added to the first paragraph to distinguish it from others—a practice which is not recommended.

In this case, text indentation (even for justified text) should be abandoned entirely, and all paragraphs should be have a space following them, euqal to approximately half the line height.


Punctuation marks & spelling

Between initials and names, as in G. B. Shaw and after all abbreviations where a full stop is used, use a ‘thin space’ (&#8201;) or if not a single word space.

Instead of em rules (&#8212;) with no spaces, it is more appropriate to use en rules (&#8211;) with a single space either side. This should particularly be the case when setting sans-serif fonts; it is more modern and less formal.

Marks of omission should use the ellipsis character (&#8230;) or three full points set without any spaces, but preceeded and followed by a single space.

Do not use full stops after the following abbreviations: Mr, Mrs, Messrs, Dr, St, WC2, 8vo, and others containing the last letter of the abbreviated word.

Use single quotes for a first quotations and double quotes for quotations within quotations. If there is still another quotation within the second, return to single quotes. Punctuation belonging to a quotation comes within the quotes, otherwise outside.

When long extracts are set in small type, do not use quotes.

Within quotations, use parenthesis () for explanations, and brackets [] for notes.


Captials, small capitals and italics

Words in capitals must always be letter-spaced. The recommended amount of letter-spacing is approximately 10% of the font-size.

For type set in a font size of 6-15px, set the letter-spacing CSS attribute to 1px; for type set in font-size 16-25px, use letter-spacing: 2px, &c.

It is generally good typographic practice to set printed abbreviations in letter-spaced small-capitals, whether this is appropriate on the web or not is a matter of debate. Small capitals should not be approximated by

Italics are to be used for emphasis, for foreign words and phrases, and for the titles of books and newspapers which appear in the text. In such cases the definite article ‘The’ should be printed in roman, unless it is part of the title itself.


Figures

In text matter, numbers under 100 should be composed in letters. Use figures when the matter consists of a sequence of stated quantities, particulars of age, &c.

In dates, use the fewest possible figures, 1946–7, not 1946–1947. Divide by and en rule (&#8211;) without spaces.


References and footnotes

The reference to a footnote may be given by an asterisk in the font of the body copy if there are not more than one per page/article. If there are two or more footnotes per page/article, use superior fraction figures preceeded by a ‘thin space’ (&#8201;).

Superior figures 1–3 exist in the HTML Latin character set and can be inserted using the following character codes rather than using <sup>1</sup> or similar:  ¹ (&#185; or &sup1;),  ² (&#178; or &sup2;) and  ³ (&#179; or &sup3;). The HTML latin character set only contains the digits 1, 2 and 3, so if more than three footnotes are used, the superscript tag method should be used for all.

Footnotes should be set in a font-size 2px smaller than their accompanying text, unless this hampers legibility, in which case they should be set 1px smaller. The same text-indent and line-spacing should be used as was in the accompanying text, and the numbering of each footnote should consist of normal figures followed by a full stop and a single space.