Since my MA Degree of Graphic Design and Typography at the Anglia Ruskin University and reading books such as “The Complete Typographer” from the Senior Lecturer in Graphic Design Will Hill I have been questioning the correlation and evolution between the origins of Typography and our current Web Typography.
It’s quite amazing to realise that ” a hundred years ago the setting of type was still a specialised craft within the printing industry.” (The Complete Typographer, Third Edition, Thames & Hudson, Will Hill, 2010, introduction, p.6 )
The word, typography, is derived from the Greek words τύπος typos “form” or “impression” and γράφειν, “to write”, and its origins come from the development of written forms, “phonetically based alphabetic systems (…) represented by a scheme of abstract marks”, that then lead to the concept of “Typeface. A set of standardised letters designed for mechanical or digital production.” (Hill, Will. The Complete Typographer, Third Edition, Thames & Hudson, 2010, p. 11, p. 186, and Bringhurst, Robert. The Elements of Typographic Style, version 3.1. Canada: Hartley & Marks, 2005. p. 32. Pipes, Alan (1997), Production For Graphic Designers (2nd ed.), Prentice-Hall).
Since the first European book, printed with movable type at Mainz in Germany in 1455, the Johannes Gutenberg’s 42-line Bible, Typography has developed to an ever-changing life form, where emoji, in their naive form will probably revolutionise the way we express concepts.
This adaptability to several devices, this democracy of ideas and creativity has enormous advantages but also challenges, such as the loss of typographic knowledge, guidelines achieved so far and standards.
In practical terms I try, as a Designer, to go back to the sources as much as I can. Despite the web it’s a wonderful thing, the fact is that it is hard to obtain “reliable” sources for setting strong basis for any Design. The pressure on time, the fast passed lifestyle we all get trapped is seductive with its provision of adrenaline and high emotion but, it also destroys, by avoiding knowledge to be compacted as pillars for something else, strong roots that will allow us to reach more than the temporary “play” systems we got used to take, such an everyday pill…
The new Blockchain and distributed Ledger Technologies will probably help resolve the problem of inconsistency on the Web and but they pose again, a challenge… how much should it be standardised, how much should be left to develop without imposed standards, how much should be locked at all.
Returning to the issue of Typography I will start with Type Sizes. How many times my communication with Developers has been about how the font, from a design created in Sketch, for instance, is rendered on the web. In fact what you design on a software needs to be tested on a web format, before going forward with a final design for development. The fact is that Sketch uses pt as a measurement system for fonts, instead of px, outrageous you say, in the age of the web.
Well… not quite!
According to some developers using pt as a basis is better because you can safety convert to pixels, since in iOS 1pt equals 1px @1x and @2x 1pt would equal to the double 2px increasing the resolution, translating this to Android again 1pt would equal to the basic unit in Android, 1dp. So 1 dp = 1px in mdpi, 1 dp = 1,5px in hdpi, 1 dp = 2px in xhdpi, 1 dp = 3px in xxhdpi and so on.
Look at this discussion here:
Pt can be translated the same, everywhere, px cannot. Px depends on the DPI ( Dots Per Inch) resolution of each device. Pt, however, renders the same. PT or Point, the origin, the “unit for measurement of type, now standardized at 1/72in”, about 0.353 mm (Hill, Will. The Complete Typographer, Third Edition, Thames & Hudson, 2010, p. 11, p. 186).
Why PT? 1PT? The Fournier’s system.
“The sizes at which type was cast were not subject to a standard measurement until the 18th century. Prior to this, types had been given specific names at each size, including Great Primer, Double Pica (…)”, then a “French punchcutter Pierre-Simon Fournier (1712-68) first introduced a unified system of type sizes based upon the division of the inch into units, known as points.” (p. 12, The Complete Typographer, Third Edition, Thames & Hudson, 2010, Will Hill).
“In Fournier’s system, an approximate French Royal inch (pouce) is divided by 12 to calculate 1 ligne, which is then divided by 6 to get 1 point. Didot just made the base unit (one French Royal inch) identical to the standard value defined by the government.” Wikipedia, https://en.wikipedia.org/wiki/Typographic_unit, 21 Nov 2019, 17:37 pm
We could say that the Fournier’s original method of division is now restored in today’s digital typography since 1⁄72 French Royal inch = 15 625⁄41 559 mm is now the standard on the 1985 agreement between Adobe and Apple.
1985 agreement between Adobe and Apple
The ” historic differences between the European Didot systems and the Anglo-American point system were (…) resolved (…) by Adobe and Apple in 1985 to establish a point size of exactly 1/72in for the Adobe page-description language PostScript. This corresponds to the AppleMac screen, which has a resolution of 72 pixels to the inch.”
Hill, Will. The Complete Typographer, Third Edition, Thames & Hudson, 2010, p. 110).
Macintosh screens were designed to work with the Apple’s ImageWriter printers, which had a print resolution of 144 dots per inch – exactly twice the resolution of the screen 144:2 = 72, which meant that text and graphics could bee seen at the exact size.
But point size is ultimately linked to the “traditions of hand-set metal type”(…), the “body upon which the letterform was cast.” This body had to be high enough to accommodate the highest and the deepest ascender and leave some space to prevent them to touch.” When setting lines of lead type, lead strips were used to add vertical space, improving reading.
Along the years (for future research, using the “The Elements of Typographic Style: Version 4.0” of Robert Bringhurst, Hartley and Marks) the leading was set to 12pt for a 10pt font.
Converting 12pt to pixels we obtain a base font of 16px.
Most of the Browsers’ default Stylesheets use 16ixels for they paragraph text on <body> as you can inspect on the DOM yourself or by reading https://www.w3.org/TR/CSS21/sample.html and http://lists.w3.org/Archives/Public/www-style/2008Jul/att-0124/defaultstyles.html
This is an ongoing research. Future reading: