d.tek presents rex © lud April 12, 1998

Basic "old timers" typesetting practices

Typographical measurement systems

Author: Jan Roland Eriksson


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). The basic point unit in this system is defined as 0.376 millimeters (~ 1/68 inch). Please don't ask where Mr.Didot got this particular unit, no one seems to know the background of it. My own not very accurate guess, is that it just happens to coincide with the smallest point he had available in his print shop, but your guess is as good as mine on that matter.

On the island of the United Kingdom and on the American continent another variant of a point based measurement system is prevalent, the Anglo saxon system. (for the rest of this text i will refer to this system as As). So far I have not been able to find out the historical roots of this system, and it seems not to be specifically connected to any named person. Still it's a measurement system that is in use on a wide base, given the number of people who daily reads their newspapers and books, typeset on the base of this system.

Today the basic point of the As system is defined as 1/72 of an 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 inch. One of my sources claims that the slight change required to set the As point at 1/72 of an inch, does coincide with the first release of Adobe Post Script, but it still seems like the history is a bit unclear on this.


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.

Foot note 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 Foot notes.

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


Fig.1 Point defined The point, the cicero and the pica

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.

Following are the defined sizes of a point for the...

Both systems also defines another often used length unit based on their respective point sizes. For the Di system that 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.

The corresponding sizes of these units then becomes, for the...
References to the CSS1 specification

The specs for CSS1 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 medias, as made possible by the CSS specs, then it will be a different issue. Point sizing belongs on paper, not on the VDU (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.


Fig.2 Font height defined The height of a font

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 casted 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.

Wich 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.


Fig.3 The square defined The em-quad (square)

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 once 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 specification model is still in use today and there are solid 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 has got 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 ~ 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 does 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 use introduce an em-quad (square) of white-space indent on each new paragraphs first line. An exception is made for paragraphs directly following a headline, as well as for paragraphs that has more than 0.5 em of vertical white- space (leading) above it.

For text printed on paper it's normal to keep the line-height the same through out 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, ~ 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.


Fig.4 x height defined The - x - height

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 as a 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 hight 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, ~ 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 unbalance if a page needs to be rescaled while rendered into different fonts available on the target system.


Fig.5 line height defined Line height (leading)

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 medias. For presentation on low resolution medias like a VDU, it may be a good idea to increase the line height with approx. 0.1em over what's recommended for printed text.

The recommended line heights for printed text can be reviewed in the foot note 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.


Fig.6 char space defined Character space

(remains to be written)


Fig.7 word space defined Word space

(remains to be written)


Footnotes

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 defining the "point-based" typographical measurement system now bearing his name.

The Anglo saxon typographical measurement system

(Historical roots of the Anglo saxon typographical measurement system has not been found at this stage. Information on the historical background of this system will be gladly accepted for inclusion and update of info given on this page.)

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 the Greek word "diakrinein" that means "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's 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 particular 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 acute | and | Êp - l'accent circumflex |

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 typsetting 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.

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)


|W3C-HTML4/chk| |CSS in use| html mark-up and style design by rex
rex.butler@mbox300.swipnet.se
d.tek.jre@ebox.tninet.se