stephenhawkes.

com
http://www.stephenhawkes.com/2013/08/23/jan-tschicholds-penguin-composition-rules-adapted-web-writing/
Jan Tschicholds Penguin Composition Rules adapted for web
writing
Jan Tschicholds
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 marksfull stop, colon, and semicolonshould 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 (doesnt 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, its 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 othersa 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, 19467, not 19461947. 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 13 exist in the HTML Latin character set and can be inserted using the following character codes
rather than using ¹ 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.