Saturday, March 3, 2007

Coldtype: not a rock band (ems and ens)

I'm old enough to have set movable type (I always called it coldtype, which was wrong, coldtype was a later development) by hand on a printing press in 7th grade shop class (circa 1963).


As opposed to the monospaced font used in manual typewriters (Design Basics Index p. 238), most modern fonts have different widths for characters. When you set movable type by hand, grabbing individual characters out of a box and putting them in the composing stick, the width usually did not fill up the line, so you'd grab ems (blank metal the width of the letter M) and ens (blank metal the width of the letter N) out of the box to justify the line. When it was full, you took the locking tool to tighten your type, put it on the press, inked the pads, and let-er rip.


ems and ens in CSS

Nowaways, ems and ens have a different meaning, and have infiltrated CSS:

from Web Content Accessibility Guidelines Working Group

em: The foremost tool for writing scalable style sheets is the "em" unit, and it therefore goes on top of the list of guidelines that we will compile throughout this chapter: use ems to make scalable style sheets. Named after the letter "M", the em unit has a long-standing tradition in typography where it has been used to measure horizontal widths. For example, the long dash often found in American texts (--) is known as "em-dash" since it historically has had the same width as the letter "M". Its narrower cousin (-), often found in European texts is similarly referred to as "en-dash". The meaning of "em" has changed over the years. Not all fonts have the letter "M" in them (for example Chinese), but all fonts have a height. The term has therefore come to mean the height of the font - not the width of the letter "M".
In CSS, the em unit is a general unit for measuring lenghts, for example page margins and padding around elements. You can use it both horizontally and vertically, and this shocks traditional typographers who always have used em exclusively for horizontal measurements. By extending the em unit to also work vertically, it has become a very powerful unit - so powerful that you seldom have to use other length units.
From wikipedia:
"An "em-quad" is a metal spacer used in printing presses. It is referred to by this name because it is composed of a square one em on each side. In these old-fashioned printing presses, this allowed the insertion of an em space( ) character between other typographical characters. It is also occasionally referred to as a "mutton quad".
The with of the em space ( ) is defined to be 1 em, as is the em dash (—) (more commonly used in American texts). By contrast, the narrower unit en (more commonly found in European texts) is half an em.
Online, the use of the em measurement has become more common; with the development of Cascading Style Sheets (or CSS), the W3C best practices recommendations within HTML and online markup now call for web pages to be based on scalable designs, using a relative unit of measurement (such as the em measurement), rather than a fixed one such as pixels ("px") or points."

2 comments:

serena fenton said...

Gerry - your skills are so old as to be 'in' again! I believe that what you are describing is 'letterpress printing'. With modern printing being done digitally, there is a revival in handset type. People are interested in letterpress because of the tactile qualities of the finished printing.

Here's some resources on letterpress:
INTRODUCTION TO LETTERPRESS PRINTING IN THE 21ST CENTURY
by David S. Rose / Five Roses Press / New York, NY
http://www.fiveroses.org/intro.htm

A short Extreme Makeover Video that shows a letterpress in action:
http://www.fiveroses.org/jennyextrememake.wmv

Briarpress, a letterpress community online: http://www.briarpress.org/

Galley Gab: a monthly online magazine about letterpress - this month features a long article about teaching letterpress to hobbyists:
http://www.galleygab.net/

I need to go back an ponder your comments on the relationship between css and hand-spaced type. Thanks for posting this!

gercohenJoMC712 said...

yes, letterpress was the process, movable type is what you set on the letterpress.