This is a legacy document, and retained on the site in order to avoid link rot. The content is likely no longer (a) accurate, (b) representative of the views and philosophies of current site management, or (c) up to date.

Basic "old timers" typesetting practices, ch.1

-

Jan Roland Eriksson

Typographical measurement systems

Table of contents

Short history

In the western world there are two traditional systems in use for specification of typographical measures. Both systems use the notation of a graphical point as their smallest unit of absolute length, but sadly to say, those two points are not equal in size.

On the European continent the Didot system is the one most widely in use. (for the rest of this text I will refer to this system as Di ).

In the United Kingdom and on the American continent another variant of a point based measurement system is in use, the Anglo saxon system. (for the rest of this text i will refer to this system as As ). Even this is a measurement system that is in use on a wide base, in a more modern and refined form, given the number of people who daily read their newspapers and books typeset on the base of this system.

The invention of the point based system came out of a need for standards as more and more print shops was founded, and the first successful attempt to standardize typographical sizes was made by P.S.Fournier who brought his system into its final form in his book "Manuel Typographique" published 1764.

Mr Fournier was of French origin and he based his point size on the "French Royal Inch" that was different in size as compared to the "Imperial Inch" (FRI = 27.07 mm -- II = 25.40 mm) and that seems to form the background of why the Anglo saxon and the European typesetting systems have different sized points.

Later in around 1775 another French man, Mr Didot, took over and fine tuned the Fournier system and the result has since been known by the name The Didot System . Any way, the "magic" divisor of "72" was used in the Di system in the same way as it later would appear in the As system, as in "1 point Di = 0.376 mm = 1/72 of a French Royal Inch" (27.07 mm)

There's a reference to this here .

Today the basic point of the As system is defined as 1/72 of an "Imperial Inch" (0.353 millimeters). However, during my research for this page, I have found indications to the fact that even the As point did have another defined size originally, slightly different from the 1/72 of an Imperial Inch. One of my sources (section 6) claims that the slight change required to set the As point at exactly 1/72 of an Imperial Inch, coincides with the first release of Adobe Post Script .

A quote from that source

And so the point, of one-seventy-second of an inch, stayed as the base measurement (well actually it was 1/72.27 inch but John Warnock and Charles Geschke set it at 1/72 inch in PostScript, and the rest of the world followed . . . well almost.
» » »

Length and area units used in typography

This section introduces definitions of the basic absolute and relative length units of typography, starting with the smallest defined unit and working up wards.

Footnote references has been included to explanatory text, located in an other area, and any one interested in the background of certain items described here will find the foot notes through links included in the text that points to different sections of the Footnotes .

This text has been "typeset" for the WWW using a one em-quad of text indent on paragraphs not directly following a headline or a list, and its stylesheet does not specify an absolute font size to be used for rendering so as to let your selection of browser fonts still be used.

The point, the cicero and the pica

Fig.1 Point defined The graphical point represents the smallest unit of length in use for creating absolute sizes in typography. All other variants of length units have the point as the base of their respective sizes.

Initially it's very easy, due to its name, to think of the typographical point as a sort of circular unit. Actually it's better viewed as a square with its defined size (illustrated as p1 in Fig.1 up here) as the side of that square. In fact one can view a whole area available for positioning of items, as having an invisible grid with a size equal to the side of the (square-shaped) point.

The defined sizes of a point for the . . .

Both systems also defines other often used named length units based on their respective point sizes. For the Di system one of the more well known units is one cicero equal to twelve points Di , and in the As system the corresponding length unit is named pica , also equal to twelve of its points.

Corresponding sizes for these units becomes, for the . . .

References to the CSS1 specification

The specs for CSS 1 states that the length unit 'pt' is an absolute size measurement of 1/72 inch, and also includes the side note that this length unit is only useful if the characteristics of the rendering device is well known.

Naturally that statement makes sense. I can se no use what so ever of an absolute point size specification in documents that are geared towards rendering on VDU's. Whenever we will get a reliable support for the print media, as made possible by the CSS specs, then it will be a different issue. Point sizing belongs on paper, not on the VDU (and that's regardless of the original thinking behind mr. Job's machines).

The rest of the CSS1 text does not contain any specific information on how/if any of these typographical point sizes does relate to the use of CSS in a HTML document.

The height of a font

Fig.2 Font height defined Any properly designed type in use for presenting text in print or in other visual media, like on a VDU, must include quite a number of characters that has diacritical marks built in.

As an example we can compare this to the original art work of Claude Garamond for the Garamond type, that contains around 380 different type drawings to fill the range of characters that he saw as required, several of them representing characters that includes diacritical marks.

Naturally this holds true even for all of the more modern font definitions in use at later times, and as a result of this, the "old timers" set of cast lead blocks, for any specifically defined font, had to be given a height that allowed space even for casting of the diacritical marks.

The required height of a lead block, that is cast to make room for all possible characters in a font, is traditionally called font height . Normally the height of the block is little bit larger than the characters printing face since the character, cast on top of the block, is slightly tapered to make it easier to get it out of its mould during the casting process.

Later, when a typeset page is printed on some media, usually paper, that media will most often absorb some of the ink, in a way that makes the pattern on the media somewhat larger than the face of the types. The fact that the character on the lead block is a bit to small as compared to the correct font height (i.e. the height of the lead block it self) is thus slightly compensated for by ink absorption into the printing media.

References to the CSS1 specification

The CSS1 specs states the following on the subject of font size

The size for which a font is designed. Typically, the size of a font is approximately equal to the distance from the bottom of the lowest letter with a descender to the top of the tallest letter with an ascender and (optionally) with a diacritical mark.
» » »

Which makes very much sense, since one of the standard char sets of HTML is ISO-8859-1 and that char set does in fact contain quite a number of types that includes diacritical marks.

The em-quad (square)

Fig.3 The square defined The origin of a square as a relative unit of length for layout of characters can be found back in the old Roman Empire and the font that was used there to create carved inscriptions on statues and monuments, among other things.

The type design that was used by the Romans, is named Capitalis Quadrata and its original design has been the source of inspiration to all Roman types designed in more modern times.

CQ was successively developed by the Romans from the original Greek alphabet, and was ready in its final timeless shape at around 200 b.c. The most characteristic part of CQ is that all of its letters are designed within a specific relationship to a square that has the height of the type as the length of its sides. Since the CQ alphabet only contained capital letters, and diacritical marks was not yet invented, the side length of that square was always as long as the height of these capitals.

Not all letters in the Roman alphabet did fill the full width of the square, but some of them was clearly designed to do just that. The letters C, G, M, O and Q being the ones most easy to identify.

The font height is in it self such a significant unit of length for a typesetter, that it has been used to define a universal unit of relative length by the name of one em , where the name may stem from the fact that the letter M in the Roman alphabet did in fact have a width that filled the full width of the square based on the height of the type in use.

That 1:1 relationship between the width of the letter M and the width of an em has been lost through the development of types in historical time. First we have the invention of lower case letters during the time period of 600 - 800 a.d. that introduced descenders, later into the time period after 1000 a.d. diacritical marks makes their appearance that adds even more to the height of a type. The size of the square, and hence even the em , increased to cover both descenders and diacritical marks, while the letter M still had to maintain readable proportions in relation to the height of capital letters in the set of types.

Just as the point defines a square absolute sized area of white space, even the em is used in the same way to define a relatively sized area of white space that is as wide as the font is high (illustrated as q1 in Fig.3 up here), and that area is called em-quad , or sometimes one can see the name square used instead.

Traditionally the em-quad has been used to create white space areas in typeset text, most notably, it's the standard measurement for text indents, together with another block of white space that is exactly half as wide, the half square . The width of the half square has also been given a name of its own as one en .

At the beginning of this century, the company Monotype laid down a white space definition model, based on the em length, where they specified white space increments to be stated in 1/18 of an em. This white space model specification is still in use today and there are recommendations available on the number of em/18 parts to use when introducing white space areas in different sections of printed text. More on that later, in the section that describes word and character spacing.

Any professionally designed type does contain two characters named em-dash and en-dash . These characters get their names from the fact that they are cast on blocks of width one em and one en respectively. The en-dash is most widely used in European typesetting, to mark a rejoinder or as a pause mark. Correct setting of the en-dash is to separate it from the surrounding words with %7E 4/18 to 5/18 em of white space before and after the en-dash it self.

Anglo saxon typesetting, on the other hand, most often uses the full sized em-dash for the same purpose, but then in a setting without white space separation to the words before and after the dash. It can thus be noted that both European and Anglo saxon typesetters do in fact separate words by close to a full em length in this situation, but the European style is to leave a bit of white space around the (shorter) dash while the Anglo saxon style is to cover the full em length with a correspondingly longer dash instead.

The traditional way to use an em for first line indents is to introduce an em-quad (square) of white-space indent on each new paragraph's first line. An exception is made for paragraphs directly following a headline, or even better expressed as "paragraphs following a significantly different style".

Also a paragraph that has more than 0.5 em of vertical white space (leading) above it, can do good on its own without a first line indent.

For text printed on paper it's normal to keep the line-height the same throughout the text, but for text to be presented on a lower resolution media like a VDU, it may enhance the readability to introduce an extra leading (i.e. increase the top margin) of paragraphs with some 0.2 to 0.3em.

References to the CSS1 specification

The CSS1 specs states the following on the subject of the length unit em among others…

There are two types of length units: relative and absolute. Relative units specify a length relative to another length property. Style sheets that use relative units will more easily scale from one medium to another (e.g. from a computer display to a laser printer).

(and in a later passage…)
These relative units are supported:

H1 { margin: 0.5em }
(ems, the height of the element's font)

H1 { margin: 1ex }
(x-height, %7E the height of the letter 'x')

P { font-size: 12px }
(pixels, relative to canvas)

The relative units 'em' and 'ex' are relative to the font size of the element itself. The only exception to this rule in CSS1 is the 'font-size' property where 'em' and 'ex' values refer to the font size of the parent element.
» » »

The em length has a long history and has proven it self to be the best base unit of all for typographical layout purposes. Lets hope that browser vendors will fully understand that fact and see to it that their browsers works accordingly.

The - x - height

Fig.4 x height defined The x height is another relative length unit that is derived from the height of a fonts lower case letters that does not have descenders (i.e. the height of the letter - x - ).

For normal typographical work it's not that widely used in fact. One exception can be found though. A type designer who decides to include "small-caps" into his set of types, usually uses the x height to define the height of his small capital letters.

It should be remembered though that type design is a work of art and there are no "rules" that states it as compulsory for a type designer to set the height of small-caps the same as the x height of the type set where the small caps are going. The type designer is naturally free to chose any balance of height - width - black - white as he se fit for the letters in his new set of types.

References to the CSS1 specification

The CSS1 specs states the following on the subject of the length unit ex among others…

There are two types of length units: relative and absolute. Relative units specify a length relative to another length property. Style sheets that use relative units will more easily scale from one medium to another (e.g. from a computer display to a laser printer).

(and in a later passage…)
These relative units are supported:

H1 { margin: 0.5em }
(ems, the height of the element's font)

H1 { margin: 1ex }
(x-height, %7E the height of the letter 'x')

P { font-size: 12px }
(pixels, relative to canvas)

The relative units 'em' and 'ex' are relative to the font size of the element itself. The only exception to this rule in CSS1 is the 'font-size' property where 'em' and 'ex' values refer to the font size of the parent element.
» » »

The ex unit is available for use as specified in the CSS1 spec. Personally I don't see that there's much it can be used for that could not be accomplished with the em instead.

The use of ex can even at times be less than fruitful since there are a lots of fonts available where the x height is different between fonts of the same height. This could lead to problems of black - white imbalance if a page needs to be rescaled while rendered into different fonts available on the target system.

Line height (leading)

Fig.5 line height defined The line height is defined as the distance between the baselines of two consecutive lines of text, indicated here as h4 in Fig 5, that illustrates two short lines of letters that are set in a close 1/1 relation between font height and line height .

It is easy to see that it is not possible to set lines of running text with less line height than the height of the font in use. Any attempt at doing that would eventually lead to a situation where some letters on a line would directly interfere with letters on the previous line. Text that is set at a 1/1 relation between font height and line height is said to have a compact setting.

Compact setting of text should be avoided, except maybe for very small portions where a given area of white space must be used in a certain way and it would not be possible to fit the text into the area otherwise.

Introduction of extra white space between lines of text was traditionally done through a process called leading . The typesetter inserted thin strips of brass with a known thickness between lines of type blocks in the printing frame to increase the distance between the baselines of his types.

Adjustment of line height is one of several methods to balance the black -- white impression of a piece of text, with the final target of making the text easy to read and understand. A properly set line height will also help the human eye to find a clear "return path" to the beginning of the next line of text. Over time some recommendations on proper line heights has been defined for use together with various font heights and widths of text on printed media. For presentation on low resolution media like a VDU, it may be a good idea to increase the line height with approximately. 0.1em over what's recommended for printed text.

The recommended line-heights for printed text can be reviewed in the footnote section of this document.

The CSS1 specification does not have a property that is targeted at suggesting leading of text but instead specifies the property line-height to be used to suggest distance between baselines of text.

References to the CSS1 specification

The CSS1 specs states the following on the subject of line height

Value: normal | <number> | <length> | <percentage>

Initial: normal

Applies to: all elements

Inherited: yes

Percentage values: relative to the font size of the element itself

The property sets the distance between two adjacent lines' baselines. When a numerical value is specified, the line height is given by the font size of the current element multiplied with the numerical value. This differs from a percentage value in the way it inherits: when a numerical value is specified, child elements will inherit the factor itself, not the resultant value (as is the case with percentage and other units).

Negative values are not allowed.

A value of 'normal' sets the 'line-height' to a reasonable value for the element's font. It is suggested that UAs set the 'normal' value to be a number in the range of 1.0 to 1.2.
» » »

The line height property is of limited use for electronic publishing of text on the WWW as of today. This is due to highly undefined handling of this CSS property in currently available browsers. In a situation where the exact viewing situation can be controlled (e.g. for intranets using a standardized browser) it may be possible to enhance text readability by the use of a properly set line height for published text.

Another article specifically describing line-height is available

Character space

Fig.6 char space defined There are only on few occasions when it may be a good idea to try to adjust the standard character spacing within individual words (illustrated as "d1" in the figure to the right).

First it should be remembered that the original designer of specific type has done a lot of tests of the resulting black -- white balance for long series of words rendered by means of his type design, and adjustments to individual glyphs has been done to make sure that this balance can be kept over a wide spectrum of text.

There are of course situations when a redesign of individual glyphs can not make up for a bad black -- white balance, and traditionally that situation was taken care of by casting so called "ligatures" where two (or sometimes three) characters were cast together on a single block of lead in order to bring the characters closer together.

Some "famous" ligatures include the character pairs -- fi -- To -- ov -- where they all share the common characteristic that the glyphs are moved closer to each other than what could be done by setting them with individual lead blocks.

The corresponding process inside electronic rendering systems would be a "kerning" process, where the font rendering engine of the system is programmed to do automatic ligatures when that is appropriate. Sad to say, no WWW browser today takes advantage of that possibility, even if the technique is implemented on the actual platform they are running on.

As typography developed into an art in its own right, a few generic rules was formed for how to, and how not to, use character spacing techniques.

These generic rules are . . .

These two rules implies that doing exactly the opposite of what they say, may be advisable at times, and I have already touched on the forming of ligatures and electronic kerning as a way to improve the black -- white balance of lower case and the combination of lower and upper case letters.

Since the amount of kerning for pairs of lower case letters would be highly dependant on the actual font at hand, this process is best left to the local systems font rendering engine and I can see no practical need to include properties in CSS to handle it, browsers should be programmed to make use of a kerning facility instead, if it's available on the local system.

For lines of text that contains only upper case letters the situation is quite different though. Most serif type fonts have quite big serifs that helps the human eye to scan a good "word picture" even if the distance between letters is increased. Regardless of if serif or sans-serif fonts are in use, upper case letters usually have rather large areas of white inside them self, so for lines of upper case text, e.g. poster style headlines, the readability and b/w balance of such a headline will be better if the individual letters are spread out a bit.

An example of is given here for those who have browsers that supports the CSS property 'letter-spacing'.

References to the CSS1 specification

The CSS1 specs states the following on the subject of letter-spacing

Value: normal | <length>

Initial: normal

Applies to: all elements

Inherited: yes

Percentage values: N/A

The length unit indicates an addition to the default space between characters. Values can be negative, but there may be implementation specific limits. The UA is free to select the exact spacing algorithm. The letter spacing may also be influenced by justification (which is a value of the 'align' property).
» » »

For most documents published on the www, a careful use of the property 'letter-spacing' can contribute to a more balanced appearance of headlines. I would not advise its use for other purposes than that.

Word space

Fig.7 word space defined(remains to be written)

Footnotes

Pierre Simon Fournier as given by ENCYCLOPÆDIA BRITANNICA

Pierre Simon Fournier (b.1712 - d.1768) French engraver and type founder particularly noted for decorative typographic ornaments reflecting the Rococo spirit of his day. Trained as an artist, at 17 he went to work in a type foundry, where he learned to cut punches and to engrave ornaments.

He set up his own type foundry in Paris in 1736. He designed many new characters, and the fame of his foundry spread beyond his native France. His Table des proportions qu'il faut observer entre le caractères (1737) was followed by several other technical treatises, including Modèles de caractères (1742), which presented his entire range of typefaces.

His principal work is Manuel typographique (2 vol. 1764-66), the first volume of which deals with punch cutting and type founding; the second is devoted largely to type specimens, with many pages of ornaments.

The Didot typographical measurement system

So named after the French book printer François Ambroise Didot (b.1730 - d.1804) who is remembered for his work of fine tuning the "Fournier point based" typographical measurement system that now bears his name.

The Anglo saxon typographical measurement system

The historical roots of the Anglo saxon typographical measurement system is described in The history of the American "point" system by by Nicholas Fabian.

The Cicero unit of length

So named after the ancient Roman lawyer and member of the senate, Marcus Tullius Cicero [b.106 b.c. - d.43 b.c.) who is remembered as a master of speech and who became most famous for his disclosure of the Catilina conspiracy against the emperor of Rome.

Some 58 speeches, and around 800 private letters, are still available for study after this true master of the written and spoken word.

The pica unit of length

So far I have not been able to obtain any relevant information on the background of this particular unit of length. Contributions will be gladly accepted.

A Diacritical mark

From Greek "diakrinein" meaning "separate" or "set apart from". An additional mark that is used together with a character to change its phonetic value into something else than what is represented by the character alone.

The use of diacritical marks is very common in many languages of the world to create symbols for phonetic sounds specific to those languages. Three examples are given as an illustration here in the form of the character 'E' with, in order -- Èp l'accent grave -- Ép l'accent aigu -- Êp l'accent circonflexe .

The extra height created by a diacritical mark is considered as a part of, and included in, the final height specification of any given font definition.

The Garamond type

Around the year 1540 the French book printer mr Claude Garamond (b.1481 - d.1561) designed the famous type that now bears his name. CG was assigned this work by king François I, who was king of France from the year 1515.

King François had a strong interest in culture, art and architecture and also had this idéa that his governing of France would become easier, if he had access to a standard method of communication within the country (does that sound familiar?). Hence he ordered CG to design a set of types that should be used to typeset all official texts produced by the kings government.

The result was the Garamond set of types, and the original art work by CG can still be viewed at the Plantin-Morteus museum in Antwerp, Belgium.

The en-dash in practical use

A good example of the correct European use of the en-dash can be found in a book with the Swedish Title "Ändamålsenliga och vackra trycksaker genom god typografi" by Jan Tschichold. JT is probably one of the most well known European typographers of this century and has, among other things, been working as typographical designer for "Penguin Books" and "Birkenhäuser Verlag".

This book of his does consistently use the European en-dash with surrounding white space, and I would strongly suspect that JT him self has supervised the typesetting of this book.

The em-dash in practical use

Many possible illustrations, of a correct Anglo saxon use of the em-dash, can be found in English and American printed text. Let me give just one example of a book with the title "How to write themes and term papers" (I have the third edition of it) by Barbara Lennmark Ellis who is (still?) a "Professor of Technical Journalism" at Oregon State University.

The typesetting of her book does consistently use a full length em-dash (length equal to the height of the font) without surrounding white space.

About line height in printed text

Recommended line height for text columns narrower than 20 cicero

Set 10 point text at 11 point line height (10/11)

Set 11 point text at 12 point line height (11/12)

Set 12 point text at 14 point line height (12/14)

Set 14 point text at 16 point line height (14/16)

Recommended line height for text columns of width 20 - 24 cicero

Set 10 point text at 12 point line height (10/12)

Set 11 point text at 13 point line height (11/13)

Set 12 point text at 15 point line height (12/15)

Set 14 point text at 17 point line height (14/17)

Recommended line height for text columns wider than 24 cicero

Set 10 point text at 13 point line height (10/13)

Set 11 point text at 14 point line height (11/14)

Set 12 point text at 16 point line height (12/16)

Set 14 point text at 18 point line height (14/18)