I’ve always had an affinity for typography, even before I knew what it was. When I was young, I enjoyed playing with fonts, endlessly scrolling through those that came with CorelDRAW installed on the family computer. As I grew up, I became interested in design and naturally, so did my appreciation for good typography when I got into designing websites. I was fortunate enough to have a boss who started out as a typographer to instill in me a deeper appreciation for the art.

During the waning days of my previous job, old books in the office were being cleared out due to various business decisions, and one set of books caught my eye with its unassuming brown cover and gilded edges. They were the two volumes of a first edition printing of Daniel Updike’s Printing Types from 1922 and I’m a little ashamed I hadn’t heard of them until then, given my penchant for the topics they covered. I didn’t pay them much attention beyond a cursory glance and just when they were about to be discarded with other unwanted materials, I felt an unexplained need to save them for myself. I took them home, glanced at them occasionally, and put them on a shelf where they sat for years. As I started making more digital editions, their presence nagged at me and I couldn’t help but think that I could do something interesting with them but could never figure out what until this past summer when inspiration finally struck.

Printing Types: Their History, Forms & Use

Daniel Berkeley Updike (1860–1941) was a distinguished American printer, typographer, historian, and professor. During his tenure at Harvard University, he taught a course on Technique of Printing in the Graduate School of Business Administration for five years—the lectures of which served as the basis for Printing Types, published in 1922 in two volumes. After a couple reprints with minor corrections, an official second edition was published in 1937 with a healthy addition of supplemental notes.

This two-volume work became known as the standard work on the subject and a basic book for all who were interested in the graphic arts. Updike explored the art of typography from the dawn of Western printing in the fifteenth century to the beginning of the twentieth—focusing primarily on European printing in Germany, France, Italy, the Netherlands, Spain, and England as well as the United States. In it, he traced the development of type design and discussed the importance of each historic period and the lessons they contain for contemporary designers. His study provided to be one of the first systematic historical analyses of typeface development, establishing typography as a serious academic discipline.

Updike included more than 360 figures, showcasing examples of typography, borders, flowers, and pages pulled from other seminal books from across the centuries. They were crucial to understanding the topics he covered due to the fundamentally visual nature of typography. These figures were facsimiles of books from his own collection, libraries, and others’ from around the world—many of which had not been reproduced until their inclusion in his work.

The first edition was hand-set and so could not be easily adjusted for the second edition. Instead, apart from a handful of careful corrections, the second edition is identical to the first except for the addition of supplemental notes added to the end of each volume—120 notes in total covering 36 pages. These notes include corrections and valuable additions from later research.

Updike had strong opinions and didn’t mince words when he voiced both his praise or distaste for the examples he cited. At times, his displeasure was almost poetic as in his description of French books of the seventeenth century:

The best of these books were perhaps printed from types in the Impimerie Royale; and were imposing rather than tasteful—grandiose, and as uncomfortable as grandiose things have a habit of being.

…and very matter-of-fact as in his comments about some Spanish books of the eighteenth century:

All its prefatory matter is composed in various sizes of good, but rough, old style roman and italic, and the Dictionary itself is set in a smaller font which is pleasant in feeling. In the main, it is a sober, solid piece of work; but the woodcut head-pieces and common, ornamented initials employed are ugly, and the presswork is of varying degrees of badness.

However, he offered well-deserved praise as in his comments about Joaquín Ibarra’s work:

Now this all sounds very simple—and it is; but as we turn page after page of this distinguished, lively, easily read italic and massive roman, we see how magnificent pure typography was made at an unexpected moment and place. It is really the beauty of these two fonts of type that, above all, makes such a wonderfully beautiful book.

During my initial research, I was fortunate enough to stumble upon an original review of Printing Types from The Atlantic in 1922 as well as two obituaries of Updike, again from The Atlantic from 1942 and also The New York Times in 1948. It’s not often that I get to read these types of timely articles for antique books either because they’re far too old or they simply don’t exist. They all provided some great background and are worth a read.

To say these books are impressive would be a vast understatement. At a glance, they are unassuming and in Updike’s own words, cover a “subject generally considered dull,” but upon deeper examination paint a fascinating picture of typography’s evolution, which is why I wanted to create a digital edition for everyone to enjoy.

Source material

Printing Types was published in 1922 and has since entered the public domain. Fortunately, because it is so well known, scans of it are freely available online, though not all are equal. During my initial research, I found four and a half sets of scans on the Internet Archive with varying levels of completeness and quality:

• First edition (1923)

  • Set 1: Volume 1, Volume 2 (medium-quality images and first volume is missing some pages)
  • Set 2: Volume 1, (good quality images, first volume only)
  • Set 3: Volume 1, Volume 2 (great quality images but figures 91 and 229 as well as page 66 from the second volume’s PDF)

• Second edition (1980 reprint)

  • Set 1: Volume 1, Volume 2 (medium-quality images, missing errata, available to borrow)
  • Set 2: Volume 1, Volume 2 (low quality images)

I used a combination of several sets to start my digital edition with much, much more material added later on.

Digital edition

The digital edition started humbly with the simple goal of creating a nice, legible site that combined both editions with high resolution images of the facsimiles and some kind of visual timeline. Considering Updike’s work was all about typography, I wanted it to have a strong typographic focus with as few extraneous distractions. I drew inspiration from sites like The Atlantic, The New Yorker, and the The New York Times—particularly their article pages—for their sparse layout and focus on readability.

Before considering anything else, I had to figure out the right typeface to use. Finding just the right one was an intriguing challenge. Updike states that he used the Oxford type from Binny & Ronaldson for Printing Types—a transitional style between old style and modern face and “a type of real distinction.”

Unfortunately, my initial hope of using the same one was dashed when I couldn’t find a modern font of the same name. I tried a number of other classic serif types named for their creators including Garamond, Baskerville, Fournier, and Plantin (all of which happened to be discussed by Updike), as well as a few decent fonts from Google and Adobe like Noto Serif, and IBM Plex Serif, but settled on Adobe Caslon as a compromise because I was familiar with its versatility from using in on Byrne’s Euclid. While not a transitional type face, and indeed, designed based on the namesake of the “old style” he mentioned, it worked well for my needs. I used text from the first and second chapters as a test for these types.

I liked Caslon and it was a fine substitute. I continued to try others as I built out other pages but always came back to Caslon. It wasn’t until I was about 70% complete when I dug deeper and stumbled across a specimen of the Monticello type designed by Matthew Carter in 2003 based on Oxford. A little more research turned up a page about the history of the Monticello typeface, which reiterated much of the history used in the copy of the specimen and confirmed that it was the modern equivalent of Oxford. The current font is available through MyFonts. Once I implemented it on my digital edition, the project felt more whole and true to the original.

The first page designed was the chapter template. A compound layout comprising four- and five-column grids was used with text spanning the center four columns. I planned on treating each figure as its own full-screen section that interrupted the flow of text so they would stand on their own. I went through several iterations of this template, even trying a dark mode as a quick test. This layout worked well, capped with large text for the chapter name and a small red accent for the chapter number. Just seeing these first few rough iterations was enough to get me excited. They felt proper in some way and a worthy edition of the material they contained.

Printing Types’ more than 360 figures (also referred to as illustrations) are the real stars of the show. Without them, Updike’s descriptions would be too open to interpretation. They deserved to be highlighted as fun-screen displays just as they were in the original. I initially designed several layouts to be used based on each one’s size: one for tall figures, one for square, and another for the wide ones. The wide ones turned out to be too wide so I only used the first two. Each figure takes up the full height of the viewport and can be magnified or downloaded in its highest resolution.

Additionally, I created a separate catalog of just the illustrations and categorized them based on country of origin, style of type, and contents. The descriptions for each were direct excerpts of Updike’s own words. My early mockups used only a few images as a test to settle on the general approach of the list and detail views.

The home page was the final major piece of the design and went through more iterations than other pages. I started with a very sparse design comprising a large title graphic and a simple list of links to each chapter. However, that hid all the wonderful facsimiles so I experimented with some layouts that used a thumbnail for each chapter. Not all chapters included facsimiles so I went back and forth between variations of text and image and settled on a design with thumbnails for the chapters that had them and simple text for those that didn’t.

I use mockups for my own projects primarily to get rough ideas out of my head to see how they look. I don’t plan out every detail because I like to start using them as soon as possible so I can see how they feel and make adjustments along the way. Planning out every detail in a mockup is great for other projects but for my own, they create a false impression of what the end result will be. The sooner I can see how a project feels to navigate with real content and the sooner I can start adding that content, the better. Plus, in many cases, making changes in code is a lot easier than making changes in the mockups, even with the niceties afforded by Figma. These initial mockups were enough for me to start building the site so I built the templates and started adding content.

The prefaces and introduction were a great place to start because they were short, didn’t include any figures, and allowed me to iron out a lot of the formatting nuances. In typing these, I made the decision to forego any kind of OCR assistance and instead, manually retype all 550+ pages for a few reasons:

• OCR isn’t perfect. I’ve used OCR for other projects and while it’s great, I’ve often felt like correcting its mistakes took longer than simply retyping the text myself. The use of italics for book titles and accented characters also caused OCR to get more wrong than it got right.
• Retyping allowed me to connect with the material. Instead of approaching each page as simply a wall of text that needed to be converted, retyping allowed me to connect with Updike’s words much more. I understood what he was describing more clearly.
• I enjoyed it. It’s hard to articulate, but I simply enjoyed retyping everything—giving structure to his words using simple HTML where there was none when they were trapped in scanned images.

My process was relatively simple: I methodically went through the first volume by typing until I reached a figure reference. Then, I paused typing and converted the scan for that figure into a black and white version, added it with its caption, and went back to typing. It wasn’t a glamorous process but it worked well and I found comfort in the repetition. I used a local version of the Tiny editor configured with formatting presets for all the typing which saved time hand-writing the HTML—a common practice I’ve done for meant projects. The figures were cleaned up in Photoshop with minimal editing because the images from the Internet Archive were high quality, which was a nice change of pace from previous projects.

A section in the second chapter concerning miscellaneous and occasional characters caught my attention and was one of the first of many treasure hunts because I wanted to replicate the unusual characters.

I knew of ℞, (prescription), and learned about ⅌ (per) during another project. Seeing the latter again brought a little smile to my face. I found ℣, (preces) by simply searching for a “v with a line through it” as a liturgical symbol and found ᛭ (runic cross) by searching for crosses on AmpWhat, an excellent resource for finding character codes. The other occasional characters are some I had never seen before and thus, were a real challenge to research.

I started by trying to decipher the symbol that looked like “q3” and searching for “q and 3” but coming up empty. It appeared in figure 79, showing German typography from the sixteenth century so I searched for that and found the German Orthography Wikipedia page, which included the ʒ. That at least gave me a character to search for, which indicates a voiced postalveolar fricative relating to speech. Searching for “qʒ” led to a Reddit thread from someone asking about it and some other characters. One response mentioned that it was an abbreviation for the enclitic “-que” and searching for that finally led me to a Wiktionary page for -que confirming it.

The character that looked like a “wavy 4” was even more challenging. At one point, I resorted to doing an image lookup of it using Google Images but that didn’t produce anything helpful. As luck would have it, searching for “4 symbol” led me to a page on the Library of Congress’ site about deciphering scribal abbreviations, describing it as the “rum” symbol and introduced me to the term “scribal abbreviations.” Once I learned that, everything fell into place because I found the scribal abbreviation Wikipedia page, which contained a wealth of knowledge. The “rum” symbol wasn’t a 4, but a ꝛ (r rotunda) with a line through it—a common practice for abbreviating portions of words to save space on expensive paper. Scribal abbreviations are fascinating and while learning about them, I also learned about the q with a stroke through it (ꝗ ꝙ), which was also an abbreviation for “que.”

I’m still not entirely sure what the lines above the qʒ and ꝗ indicate but I assumed they were another form of abbreviation. Similarly, the letters with smaller letters on top of them are likely a form of abbreviation. The Combining Diacritical Marks Wikipedia page has only some examples.

Unfortunately, due to the obscurity of these unusual characters, reproducing them in using HTML entities made them stick out like a sore thumb because they weren’t in the Monticello font so they defaulted to a sans serif font. In an effort to get as close as possible to Updike’s original text, I recreated some as small SVG shapes and others with a little extra HTML and CSS. I also created SVG shapes for the varying styles of ampersands on the following page and some other gothic shapes in later chapters.

After learning about scribal abbreviations, I recognized them everywhere, especially in older books and had a much easier time deciphering them. Other helpful pages I found for reading old texts were Old Latin abbreviation examples, How to read ancient manuscripts, and even a children’s book from 1568 about the ABCs, which included these abbreviations (“abbreuiatures”) and more. I found it amusing that a children’s book was still educational more than 450 years later.

An early idea I had for visualizing the types Updike included was some kind of timeline to see the evolution of type styles over the centuries. This idea was even bolstered by a passage in the fifth chapter about fifteenth century Italian types (emphasis mine):

It is not fair, however, to take the finest of these and think of it as representative of Italian fifteenth century type. Only by seeing many examples can one get a general idea of that. And for this purpose, the publications of the Type Facsimile Society, issued in England through the influence of Robert Proctor between 1902 and 1909, are admirable. If the reader can divide a set of loose plates into groups of roman and gothic types, and then sort them into groups under each country, in chronological arrangement, he will obtain a conspectus of national type-forms which is invaluable. He has, in fact, but to glance through the gothic and roman Italian types shown in facsimiles thus arranged, to comprehend the general tendency of type-forms in either class of character; and will realize how high an average of excellence, especially in the roman letters, the fifteenth century Italian printers attained. This publication is rare, and this use of it diverts it from the bibliographical purposes for which libraries cherish it—though it does not divert the librarian! But for the student I do not know a more valuable work, nor a more valuable way to use it.

I extracted words from each one in every style (gothic, roman, italic, etc) and designed two timelines to showcase them—a linear timeline from oldest to newest, and another grouped by country and style. The early results were somewhat interesting but as the screenshots show, they didn’t get better. Since all the words weren’t the same original size, unifying their sizes looked sloppy and looked like a jumble of nonsensical words with little value. I kept up the process for the first volume but abandoned the idea after starting the second.

As I made my way through the first volume, figure by figure, chapter by chapter, something felt lacking. The project was coming together nicely but it felt somehow less than its potential. The figures looked too sterile in black and white and I was constantly curious about the sources from which the facsimiles were made. My curiosity was piqued even more with all the references to another books for which facsimiles weren’t included. On many occasions, I looked up scans of the originals and loved looking through the other pages to get a better sense of their typography.

Shortly after beginning the second volume, I decided to track down online scans of all the original sources—a much larger feat than I anticipated.

Treasure hunting

My naïve goal was to find original scans to replace all of Updike’s facsimiles and add links to scans for all other books mentioned. This was truly a grand treasure hunt because finding each set of scans was like finding buried treasure in the depths of the internet.

I’m no stranger to hunting down old books. It’s one of the first things I do for any digital edition but it’s usually a brief process. Finding all sources that Updike mentioned took things to a whole new level. There were 367 numbered figures in Printing Types (369, counting the updates in the second edition, 376 counting multiple parts) and at first, I thought finding original sources for just those would suffice, but that wasn’t enough because Updike cited so many other books to support his critiques and without them, readers would be left wanting more as I did.

I chose to use a small book icon was used any time a link pointed to an original source to differentiate them from other links and I kept track of all sources on a separate page as a kind of chronological bibliography. For each entry, I included its original title, the date it was published, one or more links to view it or each volume, and a brief description (including its typographical interest when possible), and the figures that came from it.

Many scans were easy to find by doing a simple search for the title like Fournier’s table of proportions for his point system in his Manual Typographique from 1764 on the Internet Archive but others required a lot more digging.

An early example that tested my patience was the Gutenberg Bible or the 42-line Bible, published in Germany in 1455. Initial scans were easy to find because its Wikipedia page links to them on Gutenberg Digital but I wanted to find the specific page in those scans, so I carefully looked at every page until I finally found a match on page 149v but the resolution was too small to replace the facsimile. Finding the correct page was made even more challenging because the page I was looking for was a portion and not the entire page. After more digging, I was able to find higher quality scans on Göttinger Digitalisierungszentrum, including the matching page.

Another example was the Catholicon, also published in Germany in 1460. Scans were readily available on both the Library of Congress and Princeton University Library—the latter having better scans. This was a tome of more than 750 pages of fine print. Page numbers weren’t in common use yet and neither site had searching capabilities so I resorted to downloading the PDF and relied on the automatic OCR capabilities built into Preview on macOS. Even then, I had to find words that resembled words that OCR might detect like “align” or “tamen.” After a lot of trial and error, I managed to find the matching text by searching for “prop” which appeared on the left column of page 583.

A common challenge was having limited information beyond a few words such as the Satires of Juvenal published in France in 1490. All I had to go on was a mention of Jean du Pré employing roman characters in his edition of it in 1490. After some trial and error, I found a page dedicated to editions of the Satires of Juvenal printed up to 1600 which had a record for the 1490 edition and on that page was a link to the digitized copy on Friedrich-Alexander-Universität Universitätsbibliothek under the title, Juuenalis cum commento Domitii Calderini with a match on page 201. In this case, the title wasn’t even close to my original searches.

Plenty of facsimiles were obvious composites of multiple pages like Bodoni’s ornaments, Zatta’s Gerusalemme Liberata, or slightly less obvious ones like Plantin’s calligraphic initials, which combined two sets of letters from different pages into one image or Fournier’s roman and italic types, in which the original ornamentation was omitted.

Two other composites were real head-scratchers. The first was from Plantin’s 1567 specimen, which looked like a single page but was actually parts of three separate pages seamlessly combined: roman type at the top and borders from one page, small heading from another, and italic type from a third. A full set of scans was available at DAMS Antwerpen but the smaller roman type in the middle wasn’t. It should have been on scan 13 because that scan only contained half the page and the bottom half still showed part of the previous page. It was the only page in the whole set missing its bottom half and of course, the one page I needed. Other original scans were nowhere to be found so I combined the scans I could find with Updike’s facsimile. It’s not the prettiest figure but it’s better than nothing.

The other composite was a set of four ornamental borders from Gillé’s 1808 specimen. Beautiful scans of the entire specimen were on Gallica, including the fold-outs which weren’t available at other places I found. The top border was #306 and the bottom one was #511 but the middle two had stumped me at first. I went through every scan multiple times and found some that were close but none that matched…that is, until I realized that I was ignoring the borders surrounding each page. Once I paid attention to those, I found the remaining borders on pages 51 and 52. One could almost hear my eyes rolling when I figured those out.

One of the most challenging images was an example of William Caxton’s Type 2 from 1477. Its caption stated that it was from The Dictes or Sayengis of the Philosophres. I found an 1877 facsimile of that book at the Library of Congress which looked very similar but after carefully looking through every page and doing various searches through OCR’d versions, I couldn’t find any pages matching that matched Updike’s facsimile. Convinced that the text had to be in it because it looked so similar to the facsimile, I resorted to searching for phrases within it hoping that I would find some matching transcription that would lead me to a set of scans. The last sentence, “For Salamon saith take no counceyll of a fool” turned up a passage in the PhiloLogic ECCO-TCP database from Chaucer’s General Prologue to The Canterbury Tales printed by Caxton in 1477—not the book Updike mentioned. This struck me as very odd considering none of the scans I found up until this point were from completely different books than what Updike mentioned.

Still, the text was unmistakable so I then sought out scans of The Canterbury Tales from 1477, which presented its own challenges. Searching for the first sentence from the PhiloLogic database, “A Yong man that called was Mellebeus the which,” led to a 1491 edition printed by Pynson with the same passage appearing on pages 507–508 (starting in the lower right of 507), which confirmed that was the correct book, but the wrong year. Searching for the title of the 1491 edition, The boke of the tales of Canterburie and including Caxton’s name came up with a page from Merton College in Oxford about the book and had a banner at the top with a picture of a page from it that matched the facsimile so I knew I was getting close. After more digging, I found a news article from the same college promoting the newly digitized version of it with a link to scans on the Digital Bodleian and finally the page matching Updike’s facsimile (page 274r [2L8r] or 551 of 768). This effort took an entire evening and part of the following morning to complete.

However, there was still more do because the very last note in the tiny errata section at the end of the second volume of the second edition of Printing Types stated that the figure was replaced with a different facsimile—one that actually was from The Dictes or Sayengis of the Philosophres in 1477. So I resumed my original search for that and while I couldn’t find a 1477 edition, I did find the page matching the facsimile from the second edition in the 1877 reprint at the Library of Congress and used that. I included both versions of the fiture with clarifying edits in the chapter containing them and in a note on the figure’s page in the illustrations section. An inordinate amount of effort was needed for this figure but I was glad I stuck with it and figured it out.

Auction and rare book shops often appeared in searches and at first, they were annoying because they cluttered up the results, making it more difficult to find complete scans. However, they quickly became a great resource once I realized that most of their listings included a few pictures of title pages and books’ original names—two helpful types of clues for the tough searches.

For example, to find the 1564 edition of Dante’s Divine Comedy published in Venice, all I had to start my search was the sentence, “An edition of Dante with notes by Landino and Vellutello, edited by Sansovino, issued in Venice by the Sessas in 1564.” Not even a portion of the title was mentioned. Some searching with a few keywords came up with a product listing on PRPH Books and AbeBooks, the former of which had some beautiful pictures and both had varying titles. Searching for the exact titles resulted in a 1578 edition on Bibliothèques numériques de l’Institut de France, which was the wrong year but very close in style. Including the year with the full title turned up with the exact match on Biblioteca Digitale Fondazione Marco Besso (page 91v). Without the help of the booksellers’ sites, I may not have found it.

Updike also mentioned more than 200 specimens that showcased the variety of types and ornaments available from printers and type designers. These were some of the most interesting items to browse and the most challenging to find due to their obscurity. The more well known specimens such as those from the Vatican Press in 1628, Fournier in 1742, and Bodoni in 1818 were easy to find and a joy to examine. I struggled finding others from lesser-known printers. Fortunately, I came across several invaluable resources that specialized in cataloguing type specimens. If it wasn’t mentioned on one of these sites, chances are, it didn’t exist online:

• Paul Shaw Letter Design: Personal site of Paul Shaw, designer and design historian. His Blue Pencil posts that catalogued type specimens (1486–1704, 1700–1769, 1770–1799, 1800–1836, 1803–1899) was possibly the single most valuable resource in finding specimens. The rest of his site is wonderful too.
• Typenrepertorium der Wiegendrucke: A database of printing types used in fifteenth century books (incunabula) based on the five-volume Typenrepertorium der Wiegendrucke, published by Konrad Haebler between 1905 and 1924. It’s a little challenging to use because of the language barrier and overall design but searching for last names often returned results (in the far right column) that contained links to online scans I couldn’t otherwise find.

• Bibliothèque Virtuelle de Typographie: An extensive catalogue of specimens and other typographical materials from 1452 onward organized by date and name.
• Digitale Sammlungen: A digital collections portal for Goethe University that has a large collection of historical material related to printing.
• Letter Library: A large catalog of links to specimens from around the world

Broadside specimens quickly became some of my favorite ephemera. Updike included facsimiles of seven broadsides, all in the second volume. However, considering their size, he printed them spanning two pages, which meant that the middle was interrupted by the book’s binding. The Elzevir specimen from 1681 was the tipping point that convinced me to start finding original scans. While I couldn’t find the original, I was able to find a more complete, albeit somewhat damaged reprint from 1880. Still, it was better than the reduced facsimile split across two pages. William Caslon’s specimen from 1734 was a rare find in that not only was it easy to find and in high resolution, but there were scans of three copies on the Internet Archive. Examining the details is truly a treat. The specimen from Molé brought out in 1819 at the Paris exhibition is considered “one of the most magnificent type specimens known.” The facsimile in Printing Types was one of 14 broadsides and the original is so much better.

A supplemental note to the chapter on type specimens included a long list of specimens that was worth consulting. Most were only mentioned with a name and a date. I was able to find quite a few but with little to go on beyond a name and year, I couldn’t find them all.

Not every scan could be found online so I turned to the generosity of public libraries. The Newberry Library in Chicago was most instrumental and the staff was incredibly helpful. Despite being around for nearly 140 years and essentially in my back yard, it wasn’t on my radar as a resource until this project. Plus, as luck would have it, they have an extensive collection of books related to printing and typographical history, including thousands of type specimens. After coming up empty on some of my early searches, I searched for public libraries with rare and antique books and learned of its extensive collection.

I bookended the research phase with trips to the Newberry to see several books in person and take my own photos. On my first trip, I received my reading room card, learned about the rules, and met the very kind staff. I only planned a short visit but before I knew it, five hours had flown by and I had dozens of photos. In a way, it felt like being at a restaurant where I could request anything I wanted but I never had to pay. I had to take photos with my phone, and I couldn’t use a tripod but it was sufficient for what I needed. After my first visit, I made nearly a hundred requests using their online form for scans since I couldn’t visit as often as I wanted. Once I finished the research phase, I visited a second time to take the remaining photos myself. The staff was incredibly kind and very willing to help me find the images I needed for this project.

The special collections arm of the Providence Public Library (PPL) in Rhode Island was another amazing partner. I first stumbled across them when looking for a 1771 specimen from Antonio Espinosa—several figures of which are in the chapter on Spanish types from 1500 to 1800. The most I could find was a bio and a few rough scans. After clicking on nearly every link I could find, the last one was a post from more than 10 years prior on the Special Collections at PPL blog which had a screenshot of a browsable version of the specimen. Unfortunately, the specimen was no longer available, (not even available at the Wayback Machine) but I figured that the files might still be available at the library’s offices. As a last resort, I emailed the staff inquiring about them. To my pleasant surprise, I heard back from Jordan, their director, who found a bunch of files of some other specimens and only a few of the original but none matching Updike’s facsimiles. When I asked if the book was still in their collection, I was told that not only was it still available, but they were willing to take some photos of the pages I needed as well as make the full set of scans available at some point in the near future. This was a wonderful and unexpected outcome to a last resort.

This wasn’t the only time the PPL came through in a pinch. As luck would have it, they had a direct connection to Updike in that he helped them get their book collection started in 1910 and upon his death, his entire collection of books on printing was bequeathed to them. To say this was a stroke of luck would be an understatement. They were able to send me scans of three more items that were impossible to find anywhere else:

• A 1782 sale catalog from the James Foundry in London appeared in Printing Types as a single figure but was actually a composite of parts of four separate pages of the original specimen, the entirety of which was printed in a 1961 facsimile of A dissertation upon English typographical founders and founderies (1778): with a catalogue and specimen of the type-foundry of John James (1782) (pages 16–18). Updike mentioned in a lengthy supplemental note from the second edition that only two copies of the sale catalog existed—one of which belonged to him. Knowing that the PPL had Updike’s collection, I asked if they still had it. Not only did they have it but they were kind enough to send me beautiful pictures and later scans of those pages from the original. I did my best to combine them into a single image using some Photoshop magic so the figure matched Updike’s facsimile.
• Baskerville’s 1762 broadside specimen was available online but only in its bordered style at Small Performances as a low-quality photo and at the Internet Archive as part of a microfilm digitization effort. Paul Shaw’s blog gave a link to an mediocre version on Flickr and another on Harvard Digital Collections but the latter was no longer working. After finding a record of it in PPL’s Updike collection, I inquired about it and paid a little extra to get a high quality scan and was not disappointed.
• An 1806 broadside specimen from L. Léger was almost nonexistent online apart from a listing on a rare bookseller’s site. Despite having the facsimile as a reference and searching far and wide, I could only find a single line in a PDF listing the contents of the PPL’s Updike collection. I must have found it at just the right moment because as of this writing, the PDF is no longer available. In inquired about it and was thrilled that they had I was able to purchase a high quality scan. It’s a beautiful specimen and I borrowed some elements of its ornamentation for my own poster.

The final library that was a big help was the Boston Public Library. I only needed one item from their catalog but the request was hail mary and I didn’t expect to get the image, let alone a response. The page I needed was from a 1504 Spanish translation of the Latin work of St. Juan Climaco printed in Toledo by Peter Hagenbach. I was only able to find minimal details about it and no scans. In the list of figures at the beginning of the first volume of Printing Types, its facsimile was listed as being from a copy in the Boston Public Library. With that one line to go on, I contacted the rare books and manuscripts department asking about it. To my great surprise, they not only had it but were happy to send me a beautiful scan of the page I needed.

The staff at these libraries were some of the kindest people who were genuinely interested in helping me with my obscure project. I couldn’t be more thankful for the time they spent digging through centuries-old books looking for very specific pages that must have seemed very random. This was a valuable lesson in never being afraid to ask because sometimes (though not always), the results may unexpectedly be just what is needed.

In addition to finding original scans to replace Updike’s facsimiles, I was also determined to find scans for all the books that were mentioned by name. These were valuable because he often used them as examples for where to see various styles of printing (good or bad) and they make up such a large portion of what was being discussed.

For the most part, these took the form of italicized titles but were also referenced in shorthand such as “Lactantius of 1468,” “Miscomini’s Florentine Horace,” or “Virgil by Gering.” Each one needed its own research just to determine the original title so I could then use that to find the scans. There were also often multiple volumes of books such as the 10 volumes of a 1790 edition of the Bible, the 4 volumes of Histoire de Louis II, Prince de Condé, and the 8 volumes of S. Ioannis Chrysostomi Opera graecé. Being the completionist that I am, I didn’t want to simply find one volume but all volumes. When multiple volumes were needed, I would sometimes get lucky and they would all be available at a single link such as the five volumes of the 1797/1798 edition of Don Quixote on HathiTrust or the two volumes of The Historie of the World, the latter of which could be seen by crafting a very specific search for identifiers on the Internet Archive. I included links to all the volumes in the description when a single link wasn’t possible (as with most links to Google Books), which made the text a little busier than it needed to be but I felt it wasn’t too distracting.

An extreme example of this was sparked by the two words, “Aldine Poets” in the chapter discussing the revivals of Caslon and Fell types as one of William Pickering’s best publications. It was another vague reference that took me down another rabbit hole. Those words referred to the Aldine Edition of the British Poets, a series of 53 reprints of classic literature issued 1814–1839. Two pages on Publishing History included partial lists for volumes 1–46 and volumes published after Pickering’s death. I found sources of both lists to confirm their accuracy (vols. 1–38, vols. 39–46, later volumes). A mention in a biography of Pickering stated that many volumes were reissued in later years and that same book contained what I considered the definitive list of all the books—originals and reissues. With that list finally in hand, I set out to find them all, which was the second part of this little adventure.

Finding the books wasn’t as simple as searching for “Aldine Edition of British Poets,” though that did result in a few. Most were under the formulaic title of “The Poetical Works of X” where X was the name of the poet such as The Poetical Works of Thomas Parnell. Most were published in multiple volumes and republished in later years so including the year and volume usually led me to the right result with a little digging. As luck would have it, all but two were available on Google Books, though there were plenty of duplicates and records without any scans available. In total, there were 97 books in the “Aldine Poets” published between 1830 and 1853 including all the reprints. Links to all of them are in the sources list. Did I need to find all of them? Absolutely not. One would have sufficed to see how Pickering printed these books. However, since Updike didn’t specify which one, I considered it a fun mini-project for others who might find them useful in the future.

Updike used footnotes liberally and they were a rich source of supporting information in every chapter—often referencing additional books, interesting typographical tidbits, and the occasional anecdote. They were present in every chapter, ranging from 2 to 89 for a total of 539 footnotes. I exercised a little editorial freedom in how they were formatted so they were more accessible in my digital edition by replacing all the “ibid” abbreviations with the repeated name of the book or author mentioned. I used littlefoot.js to make the footnotes and references interactive so clicking on a numbered reference in the text shows a small popup with the corresponding footnote. Keeping the “ibid” abbreviations would have made reading those popups more difficult without the preceding references for context. Most of the footnotes included page or plate numbers for what was being referenced so I included direct links whenever possible.

In earlier chapters, many footnotes referenced a handful of books that weren’t available online. Several of these books were compilations of excerpts from older books. They were available at the Newberry Library so I made it a point to get pictures of each page referenced so readers could click on the plate numbers and at least see them. As an added bonus, I was able to track down most of the original scans of those plates and link to them in their captions. I thought about including the original scans instead but that wouldn’t have been accurate to what Updike published. I figured by using pictures from the compilations and including links to their sources, that was enough to let readers see what Updike intended and give them a path to see more if they wanted. For compilations that were available online, I simply linked directly to the pages referenced.

Despite my best efforts, not every source could be found and in those cases, I kept Updike’s facsimiles and simply omitted links, though they were still included in the sources page minus their links. There were plenty of times that Updike’s facsimiles were the only version of a book that was available such as an example of Grandjean’s romain du roi from 1889 used in Cuivres de Cochin destinés à l’Histoire de Louis XV par Médailles. Updike states that the original book was never published and indeed, I could not find any scans of it online—even by searching for phrases from the facsimile. Other times, the facsimiles were better than the scans as in the lettre batarde used in The Fall of Pinces from 1480. The only copy I could find was a very low quality scan of microfilm at the Internet Archive. Most of the time, when I couldn’t find any scans, I could find copies on rare book shops’ sites and plenty of catalogue records at various university libraries but those weren’t good enough sources to include links.

The preceding examples are just a small set of treasure hunts that I went on but this blog post would be magnitudes longer if I detailed all of them.

In total, I identified 1,229 sources in Printing Types and found online scans for 1,035 of them (84%). Of the 367 numbered figures, I found scans of 315 (86%). Considering their obscurity, that was a much better outcome than I was expecting. This doesn’t mean that scans don’t exist. I just may not have been able to find them. I hope that by making this digital edition, others may let me know where to find them or send me pictures of their own copies if they’re out there.

I acknowledge that I am fortunate to live in a time with luxuries that Updike didn’t have such as online repositories with millions of digital scans at my fingertips like the Internet Archive, HathiTrust, Google Books, universities, and more. My efforts in tracking down sources pales in comparison to Updike’s. Nonetheless, a tremendous amount of research was needed to find as many sources as I did including a few that he couldn’t.

I couldn’t help but wonder why Updike chose the facsimiles that he did—not so much the subject matter but the specific pages or portions of pages. Title pages, broadsides, and other specimens made sense because they highlighted unique material but so many facsimiles were from pages buried deep within much older books with hundreds of others that looked identical to them. Why choose page 91 of Dante’s Divine Comedy? Why page 274 of The Canterbury Tales? Why only a portion of page 290 of the Latin Psalter? They seemed like peculiar choices.

As I worked my way through all the sources, I found that I needed to keep notes on the more difficult ones and the steps I took to find others as a point of reference. My notes were organized into two long pages in Google Docs—one organized by figure number and the other by title. I used emoji icons to indicate if I found the source successfully (✅) if I couldn’t find it (❌), or I found a partial match (✅ ❌) and they were littered with hundreds of links to leads, dead ends, and other info. It was a very low-tech approach but afforded me the flexibility in notetaking. I ended up compiling nearly 80 pages of notes.

I included a small chart on the About page that showed a breakdown of how many sources and facsimiles were included grouped by decade. The chart extends into the 2000s due to some books only being available as reprints in later years.

Design updates

With all the great scans I was finding, I wanted to find a way to increase their visibility so I updated the design of the chapter template to include a banner collage of the figures within each one. These collages set the tone for the chapter by giving a preview of the images that would be discussed and gave each chapter its own identity beyond the initial minimalist design. No facsimiles were included in chapters 3, 11, and 24 so those chapters were kept as originally designed without banners. A few chapters only had one or a handful of images so simpler banners were used. I enjoyed seeing these banners come to life after finishing each chapter. As a final touch, the home page hero image was also updated to use 10 different images as a rough timeline showing the evolution of typography over the centuries with the oldest on the left and most recent on the right. I also updated the home page to use thumbnails of an image for each chapter instead of the black and white versions of the facsimiles.

When facsimiles were the only option because better scans couldn’t be found elsewhere, I changed the images I already put online from the stark black-and-white look to be more like they appear in the physical world with the light tan background so they fit in better with the other images and didn’t look so sterile.

A specimen of specimens

As with every project, I like to make posters inspired by data I collected during it. I didn’t have a clear idea of what I wanted to do from the outset but my initial thoughts were to create some kind of timeline showcasing typography’s evolution across the centuries. I experimented with this by building timelines in the digital edition with the intent of using that as a basis for a poster but they ended up looking messy and not good enough for a wall poster.

As previously mentioned, broadside specimens were some of my favorite scans. There was something about them that appealed to me—with the dense amount of information shown and their elegance in how they were designed. I enjoyed them so much that I ended up using them as inspiration for my own version.

I thought it would be interesting to create a specimen of Updike’s facsimiles but there were too many to include to be legible. A characteristic aspect of Printing Types was his many opinionated critiques and toward the end of the research phase, it dawned on me that I could perform sentiment analysis to evaluate how favorably he spoke of the types included. I had also inadvertently prepared for this because for every entry in the list of illustrations, I included a copy of Updike’s critique.

I took a very low tech approach to this analysis and asked Claude for instructions on how I could use data within Google Sheets since it was easy for me to upload a copy of my data there. It gave me a snippet of code and helpful instructions on how to run it using Google Cloud Natural Language API and within a few minutes, I had a sentiment score for each one ranging from -1 (negative) to 1 (positive). The distribution of scores was about what I expected with the majority of them being mostly neutral but surprisingly, they trended more positive than negative. As I retyped Printing Types, I felt that Updike was a little more critical than complimentary but that could have been due to how sharp his words were when they were the former.

I did some spot checking and the results were accurate. For example, some of most positive descriptions were of Bodoni’s Epithalamia Exoticis Linguis Reddita from 1775:

Such a book…issued in honour of the marriage of Marie Adelaide Clotilde, sister of Louis XVI, printed in Bodoni’s “first manner” from old style types, is a masterpiece; really magnificent in its types, their arrangement, and the superb engraved decorations which, for once, enhance the effect of the page. I think it one of his finest volumes.

…and William Martin’s Chase from 1796:

Martin’s types…are charming transitional roman fonts, both delicate and spirited—and so thoroughly English that Bewick’s engravings seem in a complete harmony with them.

Some of the most negative descriptions were of Enschedé’s Proef van Letteren from 1768:

The smaller types are extremely dull in colour, through here and there we find fonts with a good deal of movement, cut by Van Dyck. Fleischman’s black-letter is tortured and fanciful, and does not stand comparison with Van Dyck’s simpler and finder black-letter, still less with early Flemish gothic fonts.

…and Unger’s Wilhelm Meister from 1795:

We see how little was put on the title-page, how poorly that little was placed there, and in what dejected looking characters it was printed…

Using this scoring method, I used a cropped portion of the top 100 facsimiles that Updike described favorably. At first, I arranged them from most to least favorable and used rough crops just from the original scans to get a sense of how they would fit and how much I could include. They were arranged in a multi-column design like other broadsides, with a large title and a bit of explanation at the bottom.

I tried to include a consistent amount of text for each image, showing a maximum of five lines of text or just a few if the type was large. Once I knew they would fit, I replaced the scans with the facsimiles to ensure a uniform look regardless of the specimen. I found it a bit ironic that I ended up replacing the facsimiles with originals in the digital edition and vice versa for the poster. I also arranged them chronologically show how types evolved over the centuries. Above each one is a label with its style, the name of its creator or printer, country of origin, and the year it was printed. For some added flair, I added some ornamentation that I borrowed from two of my (and Updike’s) favorite specimens: Léger’s and Molé’s.

The final result turned out better than I expected and paints an interesting picture of the “top” fonts spanning nearly 450 years.

Order a poster

AI

I would be remiss if I didn’t describe how AI helped in this project because I used it more than in any other. I have plenty of reservations about the use of AI but it did prove useful in a few ways: research, summarization, image cleanup, and semantic analysis, the latter of which has already been discussed.

Finding original titles of books, let alone the books themselves, was an ongoing challenge so I often turned to Google’s to give me leads and direct links. The results were very hit-or-miss—helpful only about 50% of the time. When it worked, it was great, as in when it helped me find the Caxton edition of The Canterbury Tales for figure 60 or finding the 1769 Pastorale referenced in the chapter about Bodoni and the Didots. With little to go on for the latter, I asked AI Mode for simply “pastorale 1769 duke of parma” and it gave me the full title of, Descrizione delle Feste Celebrate in Parma l’Anno MDCCLXIX which allowed me to find a full set of scans for it at the Institut National d’Histoire de l’Art—something I probably wouldn’t have been able to easily find otherwise. In general, when it worked, I was able to get what I wanted by asking things like “Where can I see scans of X.”

However, It frequently told me incorrect information or insisted that I was wrong and it was right (albeit politely). After failing with direct questions, sometimes I had to start broad and progressively narrow down my line of questioning to get what I wanted. A good example was a sample of Greek type from Selwyn Image in 1895. Updike’s caption described it as being from a Greek New Testament published in London. A bit of searching turned up another sample of the type on From Old Books dot Org, which said it was created for the Macmillan Company by Image. When I asked Google’s AI Mode about Greek New Testaments printed in 1895 using the type from Macmillan, it suggested an excerpt appearing in A short history of English printing from 1900, Homer’s Iliad from 1895, and a set of commentaries on the Greek New Testament. It vehemently argued that the Macmillan never published a Greek edition of the New Testament itself in 1895. After a lot of dead ends, I was able to get it to finally admit that one was reissued, titled The New Testament in the Original Greek and edited by Brooke Foss Westcott and Fenton John Anthony Hort. Armed with the title, I was able to find a copy on Google Books with the page in question, albeit in low quality. Fortunately, the same book was at the Newberry library so I was able to hold it in my hands and get my own picture.

I also used Google Gemini to help with the summaries of all the sources. Google Gemini was a great help for the vast majority. I used the prompt “one-sentence summary of [title]” and did my best to also include a mention of any typographical importance. I never ran into any limits on the number of requests I could make so it was a great tool to have at my disposal.

I kept image cleanup to a minimum but did use Photoshop’s generative fill to make the excerpts from original scans match the facsimiles by erasing text that would have been cut off by cropping. For example, the excerpts from De Stad Haarlem en haare Geschiedenissen and Ibarra’s Spanish Sallust, only included part of the bottom half of the page so I used generative fill to remove the lines before and after the excerpt that would have been cut off with the crop. These updates were essentially the modern version of what Updike did when he created his original facsimiles.

Timeline

The digital edition of Printing Types was completed over about four months, though it was brewing in the back of my mind for years. I’ve gotten into the habit of keeping a log of my progress for most projects, partly as a reference for blog posts like this but also because it’s another artifact of my efforts.

This project started out like most others with early research and design explorations, followed by building a proof of concept, and settling into the routine work of filling in content. However, once I started the big treasure hunt for original scans, I went back to the beginning and replaced facsimiles with scans and added links to sources. When that started, I took a parallel approach—dividing my time between typing chapters and researching. Researching required a steady internet connection and unlimited data so I did that in the mornings before my day job, during breaks, in the evenings, and on weekends. Simply retyping and formatting chapters’ text didn’t require an internet connection so I did that during my commute to and from work (about 3 hours a day). Researching during my commute ate up my data plan way too quickly so splitting my time made the most sense. Eventually, I finished typing and focused solely on research, which ended up taking just as long as the typing. Finally, I polished up the overall design, created the poster, and wrote this blog post.

Final thoughts

On more than one occasion, Updike spoke of books or specimens that he had never seen. I am glad that modern technology and numerous digitization initiatives have made it possible for me to not only find them from the comfort of my own home but share them with others. However, nothing beats viewing the books in person.

This project was truly a grand treasure hunt and worth every minute. What started out as a simple design exercise evolved into a typographic adventure through the centuries. I thoroughly enjoyed digging through archives and leafing through antique books, both digital and physical to find treasures. The satisfaction of connecting the dots and following the trail to find that one page again and again was addictive and very rewarding. My sincerest thanks goes out to all the library staff who put up with my many obscure requests.

Updike’s final paragraph struck a chord with me as an artist and designer but could certainly apply to anyone else passionate about what they do:

The practice of typography, if it be followed faithfully, is hard work—full of detail, full of petty restrictions, full of drudgery, and not greatly rewarded as men now count rewards. There are times when we need to bring to it all the history and art and feeling that we can, to make it bearable. But in the light of history, and of art, and of knowledge and of man’s achievement, it is as interesting a work as exists—a broad and humanizing employment which can indeed be followed merely as a trade, but which if perfected into an art, or even broadened into a profession, will perpetually open new horizons to our eyes and new opportunities to our hands.

Explore the project

Source material

Thomas Wright is most well known for his book, An Original Theory or New Hypothesis of the Universe published in 1750, in which he writes nine letters to a friend about his thoughts on the cosmos and the structure of the universe. Before that, in 1742, he wrote a lesser-known treatise titled Clavis Cælestis: Being the Explication of a Diagram, Entituled a Synopsis of the Universe: or, the Visible World Epitomiz’d, in which he discussed the astronomical concepts illustrated on several large engravings.

Wright engraved these concepts on copper plates and published them as seven large sheets meant to be folded and inserted throughout the Clavis Cælestis. When combined into their final arrangement, they formed a large poster at least five feet long that presents a wide-ranging view of astronomy and invites a great amount exploration.

I first stumbled upon Thomas Wright’s illustrations from a pin on Pinterest showing them printed on a single sheet—an uncommon arrangement as I later discovered. The image in that pin is available on Wikimedia which lists its source as a post from the British Library on Flickr; which in turn lists its former owner as George III, King of Great Britain (1738–1820). Thomas Wright may have printed this special copy for the king, for he was worked on instruments that were part of the royal collection when the king ascended to the throne (source).

Beyond this single sheet, Wright’s engravings often appear online in various combinations comprising one or more sheets—often sourced from the high-resolution scans at the Library of Congress. However, their set is incomplete—only including five of the seven sheets and curiously printed on three sheets. The arrangement seems unusual because the sheets were originally published separately. The posters available in online shops and stock sites look nice but make little sense if one knows about their history. For example, places sell sheets one and seven combined or one, three, four, and seven combined. The latter is strange because sheets three and four only contain half of the tall diagrams that flank the sides of the original complete arrangement.

Very little about the Clavis Cælestis is available. The most illuminating post I found was from the Linda Hall Library, which Wright’s works. In it, they describe it as “really just a commentary” of the overall poster but also stated that they own the only complete original copy from 1742, which intrigued me. A little more digging turned up very high-resolution scans in their catalogue of the complete book as well as a complete set of scans for the seven sheets—all available under a Creative Commons license.

Finding complete scans in such high resolution is rare. The scans at the Linda Hall Library were truly a jackpot. Every detail is clearly visible—from the thousands of lines representing rays of sunlight to the tiny strokes on comets’ tails. The scans at the Library of Congress are equally amazing but unfortunately incomplete.

Prior to finding the scans at the Linda Hall Library, I learned of a facsimile that was published in 1967, which also turned out to be somewhat rare. I could find no publicly available scans of it but found records for it at the Library of Congress, University of Chicago, Google Books, WorldCat, the Adler Planetarium collection, and the Illinois University Library—the latter of which was advertised as available online but required a university login to access. Being from Chicago, I thought getting a copy on loan from the Adler Planetarium collection would be possible but was fortunate enough to find a copy in excellent condition for sale from AbeBooks at a reasonable price so I ordered it to have as my own. Despite being a facsimile, it’s still an impressive book—complete with fold-out sheets inserted throughout the treatise as intended printed with a tremendous amount of detail.

The facsimile also included a preface from the author, M.A. Hoskin, containing a brief biographical and bibliographical overview of Wright’s life. While not an essential part of this project, I enjoy having a copy of my own and enjoyed learning more about Wright’s background from its preface.

Structure

A common practice I’ve developed over the years is creating outlines of the material I want digitize to visualize their structure. Reading through entire texts is a must but making simple outlines have become instrumental in understanding the whole picture.

Most books have a table of contents but they don’t always exactly match what’s written in the text and they don’t show all subsections. The Clavis Cælestis had the same situation. Its table of contents is a short two page summary.

Contents of text

To get a more complete picture of the actual text, I compiled my own that included the subsections:

• Summary
• Preface
• Introduction
• Book I. Of the System of the World.
  • Section. I. Of the Planets in general
    • Of the Planets Densities and Quantities of Matter, &c.
  • Section II. Of the Sun and the inferior Planets
    • Of the Sun
    • Of Mercury
    • Of Venus
  • Section III. Of the Earth and Moon
    • Of the Earth
    • Of the Moon
    • To find the Quantity of Matter in the Moon
  • Section IV. Of the Superior Planets
    • Of Mars
    • Of Jupiter
    • Of Saturn
    • Of the Planets in general
      • Of the Parallax of the Planets Orbits
• Book II. The Hypothesis demonstrated
  • Section I. Of the Laws of Motion and apparent
    • Of apparent Motion
  • Section II. Of Light and Heat
    • Of Refraction. Tab. III.
    • Of the Vicissitude of Seasons
  • Section III. Of the Equation of Time
    • A Table of the Equation of Time
  • Section IV. Of the Phænomena of the Planets
    • Of Eclipses
    • Of Transits and Occultations
  • Section V. The Theory of Tides
  • Section VI. Of Comets
    • Of the Stars, &c.
    • An Explanation of the different Stiles in the Account of Time
    • Old and New Stile explain’d

Sheets of A Synopsis of the Universe

In addition to the text, the figures and illustrations were entry points into the content and in an effort to gain a better understanding of their organization, I created a list of how they were structured on the sheets and alphabetically. There wasn’t much meaning to these arrangements because sheets included figures that spanned multiple sections and the reason for the numbering wasn’t clear. Their outlines are as follows:

• Sheet 1
  • Saturn and his Settlelites
  • The Orbits & Trajectories of the Planets & Comets Near the Sun
  • Jupiter and his Settlelites
  • Earth and Moon
• Sheet 2
  • Cosmological systems
• Sheet 3
  • Figure III. Of Refractions and Reflected Vision &c.
  • Figure V. To Explain the Equation of Time
  • Figure X. Theory of the Tides
  • A Sector of the System of Comets (top half)
• Sheet 4
  • A Sector of the System of Planets (top half)
  • Figure II. Of Light and Heat to the Planets from the Sun &c.
  • Figure O. To Explain the Doctrine of Parallax
  • Figure I. Of Projectiles and Natural Gravity
• Sheet 5
  • A Sector of the System of Planets (bottom half)
  • Figure II. The Astronomical Areas Illustrated
  • Figure O. Of the Visible Magnitude of the Stars &c.
  • Figure VIII. Of the Solar and Lunar Eclipses
• Sheet 6
  • Figure III. The Laws of Motion Explain’d
  • Figure IV. Of the Planets Apparent Motions
  • Figure IX. Of the Planets Transits and Occultations
  • A Sector of the System of Comets (bottom half)
• Sheet 7
  • Figure VII. Phases of the Planets and Their Solar Aspects
  • Vicissitude of Seasons
  • Figure VI. Phenomena of the Moon

Figures and illustrations by title

• A Sector of the System of Comets
• A Sector of the System of Planets
• Cosmological systems
• Earth and moon
• Figure I. Of Projectiles and Natural Gravity
• Figure II. Of Light and Heat to the Planets from the Sun &c.
• Figure II. The Astronomical Areas Illustrated
• Figure III. Of Refractions and Reflected Vision &c.
• Figure III. The Laws of Motion Explain’d
• Figure IV. Of the Planets Apparent Motions
• Figure V. To Explain the Equation of Time
• Figure VI. Phenomena of the Moon
• Figure VII. Phases of the Planets and Their Solar Aspects
• Figure VIII. Of the Solar and Lunar Eclipses
• Figure IX. Of the Planets Transits and Occultations
• Figure X. Theory of the Tides
• Figure O. Of the Visible Magnitude of the Stars &c.
• Figure O. To Explain the Doctrine of Parallax
• Jupiter and his Settlelites
• Saturn and his Settlelites
• The Orbits & Trajectories of the Planets & Comets Near the Sun
• Vicissitude of Seasons

I could not determine why multiple figures were numbered “II,” “III,” and “O.” Most all figures were referenced by name in the text. The introduction covered the cosmological systems from the second sheet and the two figures labeled as “O.” The rest of the numbered figures were referenced throughout other sections. The rest weren’t referenced directly but their titles made it clear to which sections they applied. The only two figures never referenced directly in the text were the sections of planets and comets.

Typography

As with many antique illustrations, no typeface was a perfect match for the text Wright used in his engravings because it was drawn by hand. I experimented with several typefaces and settled on Cormorant because of its legibility and old style number characters. Its semibold weight was used for most text throughout the poster.

I tried quite a few typefaces for the text of the Clavis Cælestis and settled on Sorts Mill Goudy because it was easier to read online than Cormorant and its italic style had similar character to the original text. I have a soft spot for italicized text with a bit of character.

The astronomical and astrological symbols were also hand drawn and varied in their depictions. I thought about using a standardized set of symbols but doing so would have eliminated their character. Instead, I recreated each to be as close as possible to the original.

However, I used standard unicode symbols for those in the text of the Clavis Cælestis because they were closer to the original and to maintain legibility. I discovered that most of them often appear as emojis, which looked garish compared with the rest of the design. A thread on Stack Overflow educated me about the variation selector character that could be used to instruct the browser that non-emoji characters should be used. For example, the code for Aries is ♈ which displays ♈ but changing that to ♈︎ displays the much-nicer ♈︎ instead.

The spelling of the word “Cælestis” in the title was curiously inconsistent. The treatise’s title page shows it clear as an italicized “æ” ligature but it’s spelled with an “œ” or “oe” in every modern reference. Both appeared to be accepted forms according to Wiktionary, but “cælestis” had a more complete definition while “coelestis” was simply described as an alternate spelling. In an effort to stay true to the original, I used the “Cælestis” spelling.

Wright used the long s ( ſ ) liberally throughout his text including the aforementioned title but I changed it to the modern lowercase s to maintain legibility. I have a soft spot for the long s since learning about it during my recreation of Byrne’s Euclid but I learned not everyone shares my enthusiasm so I opted for legibility over accuracy.

Redrawing the illustrations

Before embarking on the lengthy task of recreating all of the illustrations and figures, I had to make some adjustments to the layout. Cropping the scans from the Linda Hall Library and arranging them into a single image resulted in an image with roughly a 2:3 ratio, which was the same as the poster I wanted to create but, I wanted mine to have three-inch margins in case someone wanted it framed.

Shrinking the image to fit this area resulted in some extra gaps at the top and bottom. To accommodate this, I redrew the underlying frame with a little more space for some that could be easily extended and repositioned crops of each image as a guide. The only illustration that wasn’t altered was the centerpiece of cosmological diagrams. The rest had whitespace around them or lines that could easily be extended to fill the extra space.

The centerpiece

The center illustration was the most complex with several cosmological diagrams including the Pythagorean System and the Platonic, Ptolemaic, Ægyptian, and Chaldean systems as well as those of Tycho, and Ricciolus surrounding it. Each system only includess six planets and the moon because Uranus and Neptune hadn’t been discovered yet. The Pythagorean system is shown in two forms—one with the large sun at the top center surrounded by the six planets and a larger diagram showing the planets and their orbits around the sun in the center. Accompanying them are orbits of several comets.

I figured this it was a good place to start—thinking that if I could successfully recreate it, the rest would be easier by comparison. The scan from the Library of congress was of a slightly higher resolution than the one from the Linda Hall Library so I used that as a base guide. I started with the sun labeled “SOL” and used that as a test to iron out how I would handle making the many spheres representing the sun, planets, moons, and comets throughout the rest of the poster. The shading was accomplished with groups of concentric and angled arcs—carefully traced one a time and with a tapered width profile applied so the ends of each line are thinner than the middle. Some of the concentric lines were thickened a bit to help add to the appearance of depth. This technique worked well and was repeated for all other spheres in part or in whole depending on the detail needed. I recreated the stippling around the sphere not with a pattern, but by manually placing each dot to ensure the same density as the original—a time-consuming task for sure but worth it.

Pausing for a brief time after recreating the sun, I made an attempt at redrawing the illustrations surrounding the center area, which included a snake eating its own tail (an ouroboros), an old winged man with a scythe in the upper left, a winged woman with two trumpets on the upper right, and a young child juggling balls at the bottom center. No explanation of these figures was given in the text, nor could I find any direct explanation in my research. The most could deduce was the following:

• The ouroboros could represent the ongoing cycle of time, which aligns with the circular astronomical signs and divisions around the sun.
• The male figure could represent father time, who is often represented as an older winged figure with a scythe.
• The female figure could represent Pheme, or the personification of fame, who is often represented as a winged female with trumpets heralding communication.
• The young child juggling could represent new beginnings an innocence, which could align with the Age of Enlightenment—a movement that emerged in the 17th and 18th centuries, emphasizing reason, science, and individual liberty over superstition and tradition.

Unlike the rest of the geometric elements drawn by Wright, these illustrations were organic and after a brief unsuccessful attempt at redrawing just one wing with many fine brush strokes, I decided to keep the original and not recreate them. Fortunately, scan from the Linda Hall Library was a high enough resolution that all the details are preserved at even the largest poster sizes.

Turning my attention back to the central illustration, I created the astrological divisions around the sun surrounded by the ouroboros. The lines emanating from the center weren’t evenly spaced so they were drawn one at a time with thicker lines at major divisions and thinner lines at smaller ones. Each line also has a very long taper from the outer edge to the middle to avoid appearing too dense toward the center.

With the backdrop of the main area filled in, I focused on all the planets and comets orbiting the sun—slowly and methodically drawing each one and its parts. From the beginning, I made sure to carefully organize and name my layers in Illustrator so I could keep track of everything.

Great care was taken do draw every line as it was with as few shortcuts as possible. One I did allow myself helped with the “rays” of light emanating from planets and comets. As the screens above show, these lines were drawn exactly as the original but their spacing and alignment looked amateurish. To fix this, I used NodeBox to generate rays spaced equally around a center point and then masked them in Illustrator. However, I made sure to use the same number of rays around each body so they were as accurate in density as possible. These looked much better at a smaller scale. Larger rays emanating from the sun in other parts of the poster were hand drawn.

After completing the central depiction of the Pythagorean system, I created the top one—starting with the sun. I used the same technique as previously described to create the shading on the sphere but its rays of light presented another challenge. Wright drew these rays with great care by varying their width ever so slightly to create an undulation of light and dark lines—an impressive achievement for when it was engraved. To recreate this effect, I draw all the lines with the same width of the thinnest and thickened those at the darkest spots. Then, using NodeBox again as a quick calculator, I calculated the steps in thickness needed to transition from one to the other. This was a time-consuming task but worth the effort. I setup the NodeBox calculator so I could a minimum value, a maximum value, and the number of steps I needed and it would give me the steps from one to the other.

The ring around the sun of the top portion containing the title, planets, and the moon presented an interesting challenge. My initial attempts at manually spacing out concentric circles wasn’t fruitful and it was here that I allowed myself another shortcut by using NodeBox. The is a set of concentric arcs but spaced out as if they were poloidial lines of a torus, or parallel lines circling the center but never crossing. When viewed straight on, they appear closer to each other at the edges and farther apart at the center. I achieved this by creating a semicircular arc in NodeBox and sampling the same number of points around it as the number of concentric “rings” to draw. Based on those points, I drew new arcs with the same radius as the image. To avoid the lines looking too perfect, I added a subtle roughen filter in Illustrator. The same method was used to draw the rings in the Platonic and Ptolemaic systems in the upper corners.

While I worked on the Pythagorean system, I experimented with designs for the website of the digital edition, which is covered in more detail below. The whole Pythagorean system including the top and middle portions took about 10 days to recreate.

With the first system complete, I was encouraged by the results and started building out the website for the digital edition while working on the next two systems: the Platonic and Ptolemaic. They were both geocentric with the Earth at the center and other celestial bodies orbiting them and drawn in a similar style. Unique to them were the rings of stars surrounding each. Each of the 66 stars had tiny extra rays emanating from them and were traced by hand.

Next, were the two systems of Tycho and Ricciolus. Both were shown in a similar design but had different bodies orbiting the the sun or the Earth. In Tycho’s system, the sun orbited the Earth and all other bodies orbited the sun. It the system of Ricciolus, only Mercury, Mars, and Venus orbited the sun while Jupiter and Saturn orbited the Earth.

The key challenge with these systems was the rays emanating from the sun. At first glance, they seemed simple enough but being the perfectionist that I am, I wanted to draw them as accurate as possible. The rays could be grouped into concentric rings—each more dense than the last the farther away from the center they got. The two catches were that the innermost rays varied in width ever so slightly, creating an undulating pattern and they stretched beyond the inner ring to penultimate outer ring of rays. I achieved the undulating pattern by again using my NodeBox stepper calculator and used some creative clipping masks to ensure every line lined up with the original. Not all of Wright’s lines were perfectly straight but I made sure each line I drew lined up with the ends of Wright’s.

With the top two thirds of the center illustration complete, I turned my attention to the bottom, containing the Ægyptian and Chaldean systems along with one for the moon—the two former with all celestial bodies orbiting around the Earth. At this point, I had become familiar with the techniques needed to complete them by working on the previous systems so they went smoothly. Like with the figures perched on the ouroboros, I chose to keep the illustration of the moon as the original instead of recreating it.

The entire illustration of all cosmological systems took about three weeks to complete.

After completing it, I started building out the design of the website for the digital edition. (More on this later.) Once the overall design was complete, I balanced the remaining work by retyping the text and recreating illustrations as they were mentioned so I could use the website as I was building it and fine tune it as needed.

Figures

Wright’s figures look deceptively simple. Each had a tremendous amount of detail and presented its own challenges to recreate as accurately as possible. Below are a few highlights of the more interesting ones.

• Figure VIII about eclipses required a great deal of extra care to recreate all the intricate lines and shadows across the moon, Earth, and sun. I allowed myself another shortcut by using blends of lines to create the patterns on the shadows.
• Vicissitude of seasons had plenty of nuances around efficiently constructing the shaded spheres and viewpoints above and below them. This diagram was made on a small laptop screen when flying back from a trip to Florida. In retrospect, I would have appreciated working on a much larger screen like I usually do. I also increased the vertical space between the top and bottom rows of spheres to make use of the new space available in the altered layout.
• Figure VI about the phenomena of the moon required a lot of creative clipping masks to get the various shadows to appear the same as the original.
• A sector of the system of planets has 977 dots surrounding the sun—each one placed individually.
• The orbits and trajectories figure was the last one I created and had the most light rays than any other part of the diagram: 2,317 rays around the center circle and meticulously drawn by hand. Using NodeBox to draw these rays perfectly equidistant from each other would have looked too polished and would have produced moiré patterns when scaled down. By drawing each one, a kind of perfect imperfection emerged. The original diagram had a subtle natural texture and my recreation did as well with the help of a subtle roughen filter. The same technique was used for the rays in the Saturn and Jupiter figures.

One aspect I took some creative liberty to improve were the figure titles. They varied a lot in size and position and few were aligned. I ensured all were formatted with the same size and spacing with minimal changes to tracking as needed. Exceptions were made for the obvious differences like those for orbits and trajectories, Saturn, Jupiter, the sectors, and the vicissitude of seasons. These improvements improves the overall cohesiveness of the poster.

Recreating the figures gave me a deeper appreciation for Wright’s dedication and a better understanding of what was described in the text. The final composite poster of all the figures feels in a sense, larger than when I first found it because I now know what it took to create my version. The effort I undertook paled in comparison to Wright’s because he engraved everything by hand and printed it for what must have been a substantial cost at the time. Still, I’m glad I did it and hope others appreciate the time spent on them.

Digital edition

The digital edition of the Clavis Cælestis required a commitment that I’ve become familiar with over the years: crafting a simple but expressive online experience to explore Wright’s treatise and the poster.

Colors and navigation

Wright’s treatise was printed without color except for a few words on the title page printed in red. To add a splash of color to this digital edition, I drew inspiration from a technique I used on a previous project, Iconographic Encyclopædia, where a different color was used for each main section to give each page its own identity that contributed to a larger whole—much like Wright’s poster comprising many individual figures. Inspiration for the color came from a retro palette I found on Pinterest that I modified to suit my needs.

Early layout experiments were rough and were too reminiscent of my design for Iconographic Encyclopædia but they were necessary so I could move onto the next versions. The core of the website was going to be each section so I mocked up a test in Figma of what one would look like in its entirety. I used the section color as an accent color on any lists, tables, and figure frames. After making a few adjustments, I settled on a general direction and started building the website.

I also wanted to try something different with the navigation. Rather than having a standard bar across the top, I exercised some creative freedom and made a menu that stays visible on the left side with the current section jutting out. Clicking the menu icon would open a colorful full-screen menu. I enjoyed the design but it felt too flat so I added some depth to it by mimicking a raised 3D box with sides along the bottom and right. This design is done with a few CSS transforms applied to pseudo elements and manipulating variables like depth and relative colors. The result is a somewhat playful menu that adds a splash of color to every page. Menu items become raised by hovering over them.

For example, here’s a closer look at the first section in the first book about planets in general.

First, I set the accent color for each section by class as well as define the visual depth:

--planets: #8eaba4;
--depth: 1rem;
.planets { --accent: var(--planets); }

These variables were used to control the colors and sizes of all three visible sides of each navigation item. The right and bottom sides were created using the ::after and ::before pseudoelements respectively. A transform comprising a skew and offset based on the depth value created the appearance of right-angled corners viewed from an angle.

<li class="nav-item planets"><a href="/clavis-caelestis/planets">Planets</a></li>

.nav-item {
    background: var(--accent); /* Apply section-based color */
    inline-size: calc(100% - var(--depth));
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    position: relative;
}

.nav-item::after {
    background: lch(from var(--accent) calc(l - 10) c h); /* Darker right side */
    block-size: 100%;
    content: "";
    inline-size: var(--depth);
    inset-block-end: 0;
    inset-inline-end: 0;
    position: absolute;
    transform: translate(100%, calc(var(--depth) / 2)) skewY(45deg);
    transition: all 0.1s ease-in-out;
}

.nav-item::before {
    background: lch(from var(--accent) calc(l - 20) c h); /* Even darker bottom side */
    block-size: var(--depth);
    content: "";
    inline-size: 500%;
    inset-block-end: 0;
    inset-inline-end: 0;
    position: absolute;
    transform: translate(calc(var(--depth) / 2), 100%) skewX(45deg);
    transition: all 0.1s ease-in-out;
}

Finally, the raised hover state is achieved by reducing the inline size (width) and block size (height) and applying another transform by doubling the depth value.

.nav-section:hover::after {
        inline-size: calc(var(--depth) * 2);
        transform: translate(100%, var(--depth)) skewY(45deg);
}
    
.nav-section:hover::before {
        block-size: calc(var(--depth) * 2);
        transform: translate(var(--depth), 100%) skewX(45deg);
}

The effect was simple and admittedly a little gratuitous but I enjoyed it and had fun building it.

I had an early and lofty idea to enhance Wright’s text with visual explanations thereby rewriting some of his words. I made a brief attempt with the first section of the first book but wasn’t pleased with the results and worried that my interpretations would be incorrect. Instead, I opted to keep his words as they were with minimal formatting.

Another early idea was to make the figures interactive like those in my Byrne’s Euclid project where elements mentioned in the text (e.g., angle ICA or celestial body P) would be clickable and be highlighted in the accompanying figure. I created an early test of this for figure O illustrating parallax but decided the outcome wasn’t worth the effort required to make it happen.

Instead, I left the figures as static images shown alongside the text on larger screens, which I felt was already an improvement over referencing separate fold out sheets as in his original book.

Lists and tables

Sprinkled throughout the text is liberal use of lists using curly brackets and uniquely-aligned text to avoid repeated words. I referred to these as “fenced” and “aligned” lists. For example, the end of the introduction includes astronomical symbols used later in the book, using two curly brackets surrounding “is signified by” to avoid repeating that text between each planet and symbol.

To achieve these fenced lists, I borrowed a technique that I detailed in my blog post about making them in Byrne’s Euclid. Essentially, I created placeholders in the HTML such as <span class="fence">{</span> and run some JavaScript on page load that replaces it with a few SVG shapes that can grow or shrink based on the overall size of the group.

Aligned lists are those that appear as a list with some elements aligned with others for improved legibility, like the distances between the Earth and moon in Earth & Moon. The leftmost text is left aligned, the numbers are right aligned, and the rightmost text is left aligned. Lists like this were achieved by simply applying a fixed width to each element and aligning the text for numbers where appropriate. The repeated words are still in the HTML but styled to be invisible to the eye while still retaining semantic.

Fenced and aligned lists were also often combined to achieve more complex list layouts.

Tabes also frequently used—some simple, such as those in the Planets section but a few were much more complex and required some creative table layouts with rotated text like the table in the Equation of Time. I did my best to stay as true to the original design as possible while retaining semantic meaning. Occasionally, Wright included tables that were easier to layout in Google Sheets and then later cleaned up the HTML.

Home page

The home page was a constant source of consternation. As I retyped the text from the treatise and recreated all the figures, I created several designs of the home page, trying to come up with a way to introduce Wright’s work to someone who had never heard of it. The challenge was that this project could be explored in two ways: reading the treatise or exploring the figures. Wright’s grand poster stood on its own and I wanted to let visitors explore it without digging through the entire treatise or relegating the full poster to a separate page. I struggled for a while to design a layout that introduced these two options—bouncing between putting the treatise first, putting the figures first, and showing them in parallel.

Ultimately, I settled on an approach that introduced both the treatise and figures together with a brief introduction and ways to jump to each section. This way, readers aren’t overwhelmed with one or the other and have a choice of how they want to explore the digital edition.

The complete poster was also much too large to view as a single image so I wanted to make each figure clickable to open a slideshow to explore each one individually. The version that appears is an enlarged version from the final recreated poster. The one exception is the sectors of comets and planets. If I showed them at full size, they would either be too narrow or too tall. I cropped these each into three images to make them easier to view.

Posters

From the beginning, I wanted to create a colorized version of Wright’s figures. I developed a taste for this when doing the same for the New York and Erie Railroad Organizational Diagram of 1855 and was excited to try another. The inverted blueprint-like versions for sale on Etsy inspired me to create a similar dark version but one that wasn’t just an inverse of the original.

I gave myself the challenge of limiting my palette to the colors used on the website so there would be a connection between the two. I slowly and methodically made my way through every layer, changing all the black to white and developed a system for applying colors to common elements:

• Shadows should stay as shadows. All the celestial bodies with crosshatching to give the appearance of shading should continue to work as such instead of just inverting them. Similarly, shadows among the rays of light should remain visible but dark. Shadows were changed from black to the darkest blue to make them slightly more vibrant.
• Spheres needed colors. If a dark background was going to be used, the spheres needed colors to make the shadows visible and make them easier to identify such as bright blended oranges for the sun, red for Mars, blue and green for Earth, and shades of orange for Jupiter, Saturn, and Venus. Mercury and the moon were lighter tints of the same hue used for the background.
• Key lines should be more visible. Not all lines are equal. Wright varied the width of lines to make some more visible than others. I wanted to take this a step farther and make the thinner, less important lines dimmer as well so the more important ones were more visible.
• Colors should be used sparingly and consistently. Color usage was limited to just the celestial bodies and the figures in the central illustration, allowing them to pop on the dark background.

The final result is a set of two posters available for sale: one in antique colors (black on an antique background) like the original and in a modern color palette with bright vibrant colors on a dark blue background reminiscent of the midnight sky.

Order posters

Final thoughts

This project, like many others, was a labor of love—for astronomy, for antique books, and for spending time carefully crafting something new no one has seen before. I knew when I stumbled upon Wright’s treatise and figures that I had found something special and I thoroughly enjoyed learning about it as I stepped through it figure by figure. The entire project took about six weeks from start to finish and the posters contain nearly 42,000 objects, most drawn by hand.

Finding the complete scans at the Linda Hall Library was exciting and purchasing my own copy of the facsimile was a joy because it serves as a real-world momento of my efforts—something I like to do when possible. I hope others enjoy exploring the treatise and its accompanying poster to learn about how the universe was viewed from more than 280 years prior.

Explore the project

Source material

Unlike my previous projects, the source one was not a lengthy book with hundreds of illustrations or scientific explanations, but a single image available at the Library of Congress.

This sprawling diagram was designed by Daniel McCallum in 1855 shortly after he became general superintendent of the New York and Erie Railroad and drawn by Civil Engineer George Holt Henshaw. He created it as part of his efforts to improve accountability, operational efficiency, and lines of communications throughout the complex railroad system. Unfortunately, his insistence on enforcing rules he devised to govern all employees ultimately resulted in their resentment toward him, financial difficulties for the railroad as a whole, the first strike of railroad engineers in America, and his resignation. He was later appointed by President Lincoln to take charge of the United States Military Railroads due to his bridge and railroad expertise (Wrege et al., 2005). Despite its origins and the outcomes it precipitated, the diagram remains an impressive feat of design that up until just a few decades ago was relatively unknown.

In 1977, railroad and economic historian Alfred Chandler Jr. described the diagram’s existence in his book, The Visible Hand: The Managerial Revolution in American Business by referencing other publications that covered it shortly after it was originally published. Among them was one of his own published in 1956 about his great grandfather, Henry Varnum Poor, editor of the American Railroad Journal during McCallum’s tenure. In this book, Chandler described the diagram:

The design of the chart was a tree whose roots represented the president and the board of directors; the branches were the five operating divisions and the service departments, engine repairs, car bridge, telegraph, printing, and the treasurer’s and secretary’s offices; while the leaves indicated the various local ticket, freight, and forwarding agents, subordinate superintendents, train crews, foreman, and so forth (Chandler, 1977, as cited in Wrege et al., 2005).

Chandler didn’t include an image of the diagram in his book and it remained relatively unknown until 2005 when two researchers, Charles Wrege and Guideon Sorbo Jr. consulted with him for their article, A Bridge Builder Changes a Railroad: The Story of Daniel Craig McCallum in the 24th volume of Canal History and Technology Proceedings. In their article, they detailed Chandler’s descriptions of the diagram and included Poor’s original description from the American Railroad Journal, in which he describes the diagram as “got up in handsome style”—a turn of phrase that I thoroughly enjoyed.

Wrege and Sorbo also described its resemblance to a tree, hypothesizing that the tree was chosen because of McCallum’s history as a Freemason. However, they were disabused of this when a masonic representative stated, that

…trees or horticultural metaphors-with the exception of the Acacia as a symbol of hope, rebirth or renewal-play no role in the teachings or rituals of Freemasonry. (Wrege et al., 2005).

After much research, they proposed the idea that its organic design was based on the Salix caprea or goat willow—a plant commonly found in the counties around the railroad. They support this notion by comparing drawings of the Salix caprea’s stems and leaves to elements of the diagram and even overlaying a drawing of a Salix caprea directly on top of a mirrored version of the diagram, creating a rather messy, albeit apt comparison, noting:

The Salix caprea’s fan-shaped appearance, rounded oval leaves, and specific shape of the branches compare favorably to similar elements of the Erie Plan.

…one can readily see the close comparison of the distribution of the willow branches and leaves in the picture to the branches and leaves in the Erie Plan. The curvature of the branches and leaves in McCallum’s design follows the typical weeping branches of the Salix caprea. The fact that railroad operations, while mechanized, require great flexibility on the part of the employee, also reinforces his use of the willow in symbolic form. Finally, in comparison to the narrow lanceolate leaves normally associated with willows, the oval leaves of the Salix caprea closely resemble McCallum’s round leaves. (Wrege et al., 2005)

While this sounded plausible, it’s my amateur opinion that it was somewhat over-elegant because of its convenience. There are indeed similarities between the diagram and the Salix caprea but not enough evidence to draw a direct connection. I believe the diagram has an organic nature not because of a masonic history or connection to the local flora but because a tree-like branching diagram simply lends itself well to the hierarchical representation of the employees. Regardless, the diagram is a beautiful and functional artwork worthy of many kinds of analyses.

A great piece of ephemera was included in Wrege and Sorbo’s article in the form of an advertisement for the diagram from July 14, 1856 that appeared in the American Railroad Journal stating that it could be purchased for $1 for thick map paper or $1.75 for it mounted on rollers (about $37–65 after inflation). The authors noted,

The number of copies of the Erie Plan sold is unknown. Considering the resignation of McCallum in 1857, and the failure of the Erie in 1857, the sales of a diagram of one of the greatest railroads in the world may have been disappointing, which may also be the reason for only one known copy existing today.

Viewing such a piece mounted on rollers would have been wonderful to see.

In 2013, their article was referenced in a sidebar of an article from McKinsey titled Big data in the age of the telegraph written by then Harvard-Newcomen postdoctoral fellow at the Harvard Business School, now Berkeley Associate Professor Caitlin Rosenthal. In it she discusses McCallum’s diagram and its valuable lessons for leaders navigating large data landscapes. Some time between then and the writing of this post, it came across my radar and languished in the back of my mind ever since.

When looking for a new project, I thought it would be something fun to explore, not knowing how much time I would spend researching its origins. The brief history above is only a portion of what’s available in the various publications I mentioned and all are worth a read. What follows is an account of my efforts to restore, recreate, and expand on the diagram using modern tools.

Typography

The most appealing part of recreating the diagram was drawing the beautiful curved branches and watching the tree they represent come to life. However, before I could do that, I had to figure out if the building blocks that made it so interesting were even possible—chief among them, typography, which could be broken down into four parts: title, legend, labels, and credits.

A wide variety of typographical styles were used—ranging from simple and geometric for labels, to ornate in the title. I knew finding the right modern equivalents was going to be a challenge but one I would enjoy. My research started by messaging the talented team at Fonts In Use, a wonderful site created to “document and examine graphic design with the goal of improving typographic literacy and appreciation.” I learned about in 2023 when they posted about the typography used on the newest Metra tickets I acquired. I asked if they could identify any of the typography in the diagram and they confirmed my suspicions that all lettering was engraved by hand and not based on specific fonts.

I briefly entertained the idea of making my own fonts but I knew what went into designing one and wasn’t ready to embark on such a lengthy journey for a few characters. Instead, I spent days sifting through the hundreds of fonts I collected over the years, libraries like Google Fonts and Adobe Fonts, and other font foundries to find ones that resembled those in the diagram as much as possible.

Title

The full text of the diagram is “New York and Erie Railroad diagram representing a plan of organization: exhibiting the division of academic duties and showing the number and class of employés engaged in each department: from the returns of September 1855” and it comprised the most varied typographical collection with 11 fonts—a different one each line and 2 used on the last. Some elegant filigree also decorated the main parts of the title.

Finding a modern equivalent for the first line, New York and Erie Railroad was a challenge because of its unique ornamental style. The three closest I could find were Hickory, Bruce Ornamented No. 881, and Dusty Circus Main. I chose the latter with some minor vertical stretching because it had roughly the same visual weight of the original. Normally, I loathe stretching a font but made some exceptions with this and a few other areas on the poster to meet space limitations.

The second line, Diagram, was written in old English style and while many fonts in that style are available, the three closest I could find were English Towne, Olde English, and Same Old English JNL. The title had the added feature of thin horizontal lines in the middle for shading and a kind of shadow on the upper right of each character. English Towne was the closest but didn’t have the shading lines. To achieve these effects, I created four separate layers:

1. Outlined version of the original font with transparent middle parts
2. Duplicate of the second layer with a custom pattern of horizontal lines applied as a fill
3. Custom-drawn shapes as shadows

Representing a Plan was another combination of several layers offset to give the appearance of text elevated off the background. The two closest fonts I found were Noto Serif and Libre Bodoni—both freely available from Google Fonts. The thicker serifs on Noto Serif looked best.

The two smallest words—of and and—appeared to be the same style and the closest match I found was Bodoni Moda. I chose the bold italic style even though the original wasn’t italicized to achieve the more decorative “f” like the original.

Organization was another word written in an ornamental style and the two closest matches I could find were Rosewood and Alta Mesa Regular. Rosewood was too top heavy with shading and had shadows that were too deep while the latter was the closest match.

Like with of and and, Bodoni Moda was also used for the text, Exhibiting the division of administrative duties, but with a little vertical stretching. Oranienbaum and Times NR Condensed were considered because of their condensed nature, but Bodoni Moda had more appropriate contrast between its horizontal and vertical strokes.

Two fonts immediately came to mind for the text, Showing the number and class of employés: DIN Condensed and Barlow Semi Condensed. I’ve had the DIN family installed for many years and often consider it for text in all caps due and used Barlow in a separate professional project in recent years. DIN Condensed had the closest fit.

The typography for Engaged in each department presented an interesting challenge because its text was italicized but leaning to the left, instead of the right, which is the norm. In my research, I learned this type of “reversed italic” text is also called retalic text. It also looked like a form of script, which made finding a match extra challenging. Initially, I couldn’t find any fonts that supported left-leaning text and I didn’t want to manually skew the text because the results would look subpar at best, so I tried to find fonts with italic styles that matched the original diagram. The few I found were Imperial Script, MonteCarlo, Inglesa Variable, and Great Vibes, but none sat well with me. Fortunately, after digging through many fonts on Adobe’s site, I found one a lone retalic style, Beverly Drive. By a stroke of luck, it was also a script that somewhat resembled the original diagram.

The penultimate line of text, from the returns of, was a thin slab serif and of the three closest I found—Halant, Glegoo, and Novecento Slab—Glegoo was the closest at the small scale and had consistent width along all strokes.

Finally, the date at the bottom, September 1855, was written in two styles—old English the month and another serifed one for the year. The three I considered for the month were English Towne (again), LTC Goudy Text Pro, and Amador, with the latter being used because it was a bit more legible, despite the tall x-height of the lowercase letters. Bodoni Moda was used once again for the year.

As a finishing touch, I reproduced the filigree decorating the first five lines of the title using simple curves with varying stroke widths. Most anchors were placed along horizontal and vertical tangent lines to ensure they were as smooth and clean as possible—a common technique and one I employed two years prior when recreating the title for The Color Printer. At the bottom below the title is a very tiny bit of filigree that was very rough in the original but I did my best to clean up what I thought was the original intent.

The final title was a fairly close replica and with the spirit of the original.

Legend

The legend, or “explanations” as it was labeled, filled in the large area in the lower right of the diagram and contained a brief explanation of McCallum’s rules, an overview of the symbols sprinkled throughout, and a table of “employés” in different classes throughout the railroad.

A wealth of information was packed into that area, dominated by wide italicized handwriting that looked like a combination of print and script. The handwriting was used primarily in the explanation and interspersed with geometric print in the table of employees. The handwriting was a great style that didn’t have a good modern parallel, or so I thought. I searched for typefaces that resembled nineteenth century text and found Madisonian but it felt too formal. I broadened my search to those with more stylistic italics like Magister, Libre Bodoni, and Bodoni Moda, but none felt quite right.

Then I found Geographica and its italic style was nearly perfect. According to its description, it was “inspired by the neat, hand-lettered text on the 1700s maps of Thomas Jefferys, Geographer to King George III” and had a style nearly identical to the text in the legend. Its x-height was taller than the original and was a little more spacious but these were fine compromises for my needs. As a bonus, it had a style of superscript with dots underneath for the few spots in the lower right portion of the table that needed them.

The headings for Explanations and Symbols were set in Scotch Modern, which was also used for station labels along the the five branches of the main diagram. Explanations was stretched and spaced out a bit.

For the geometric sans serif text used for the symbol labels and in the table, I considered using DIN or Barlow again and used the former for the table title, but their condensed styles were too narrow and their regular styles were too wide for text in the table. At smaller sizes, I couldn’t find a weight that worked well. The legend—as well as many of the labels in the main diagram—also included many superscript letters with a dot underneath—a style I fell in love with over the course of the project. The following section has more detail about reproducing them and how they’re used in the personnel labels. I found that Interstate set in bold worked great for text at tiny sizes, wasn’t too wide or narrow, and the superscript size matched the original nicely.

Once again, Geographic was a great fit for the old style numbers for the number of personnel in each class and at each station.

Labels

The main diagram contained three types of labels: personnel, stations, and the distances between those stations. These labels are the heart of what gives the diagram its vintage identity when exploring up close.

Personnel labels were by far the most prevalent and written in uppercase with varying methods of abbreviating using superscript. Many also wound around groups of personnel, which added to the organic tree-like feel of the diagram. Like with the labels in the legend table, I used Interstate for each one—drawing the curves for the text to follow as close as possible to the original. Recreating the dots below the superscript letters proved to be more troublesome than I thought. I hoped I could use the dot diacritic but Interstate did not support it. I also tried using extreme negative tracking but could never get the dots to line up perfectly under their corresponding letters. Ultimately, I settled on using two layers for each label that required dots—one with the text and another just for dots—both aligned to the same curve.

This technique resulted in more tedious work but allowed me the flexibility to position them just the way I wanted by using spaces and tracking setting, especially when just one dot was occasionally used for two letters. Superscript letters were used more liberally in some areas than others, resulting in some very interesting-looking labels.

The labels for leadership positions (treasurer, land agent, auditor, etc.) and the different divisions emanating from the general superintendent role in the center were also set in Interstate. Some groups of personnel included numbers after the text that appeared to be in a different style and I started by setting my numbers in Bodoni Moda to match but they felt disjointed so I kept them in Interstate to feel more cohesive.

The label for the board of directors unlike all the others, which was appropriate because all the visual elements for them were unique. It sat in the curved space between the arrows connecting the 16 circles with inset stars to the president, alternating between or two letters between most arrows. It was also set in Bodoni Moda but with the same shading treatment as the word Diagram from the title.

As previously mentioned, Scotch Modern was used for station names with varying degrees of stretching depending on space restrictions. Whenever space allowed, I tried to keep them the same style for consistency. Names of smaller stations are written in title case rather than uppercase. Between each pair of stations was a small number representing the miles between them. They varied in style and size more than I expected and except for a few tight areas, I made sure they were styled consistently with Glegoo.

Credits

At the bottom of the diagram nestled between the board of directors, title, and legend were two sets of stylized credits for the diagram’s creators: Daniel McCallum, the railroad’s general superintendent and George Holt Henshaw, a civil engineer and draftsman.

They each follow the same typographical usage:

• Activity (Designed or Compiled and Drawn) set in Interstate bold
• by set in Geographica regular
• Job title set in Glegoo

I also took the liberty of adding my own credit in the available space at the lower left of the title as a stamp of my authorship in restoring and recreating the diagram. This area was missing in the scan on the Library of Congress’ site and without any indication that something was there originally, I felt that including my credit was acceptable.

Iconography

Sprinkled along the straight lines representing the five major lines are four symbols representing the services or amenities at each station: a locomotive for machine shops, tools for repair shops, eating utensils for eateries or saloons, and a telegraph pole for telegraph capabilities.

As I worked my way through the diagram, I noticed that the locomotives were similar to each other but no two were the same. Six were drawn in total: one in the legend, which was the most detailed and five rougher versions at major stations or termina in the diagram. My naïve idea of tracing one of them as an exact copy was significantly underwhelming. Attempts to automatically convert them to vector drawings in Illustrator were even more so. I searched through The Noun Project and Adobe Stock for better versions—trying to find a balance between hand-drawn and high-fidelity that would work at small sizes. After much trial and error, I settled on one from a set of old train icons that resembled the detailed one from the legend. As a bonus, a dark version was also available for the dark style of posters I planned to make.

The symbols for saloons and repair shops were very rough due to their small size and I wanted to match the more polished nature of the locomotive symbol so I exercised some creative freedom and used icons from Adobe Stock with some modifications. The symbol for repair shops was a little cryptic, with what looks like a wrench and some other straight tool. I later learned as part of my extended research that it was intended to be a hammer (Wrege, et al., 2005). I chose a more standard-looking hammer and wrench. The most straightforward of these to recreate was the telegraph pole as it was a simple arrangement of lines with a dot on the top.

Diagram

The main diagram was created in several stages, starting at the bottom with the board of directors, working my way up through leadership in the center, then drawing each main branch, starting on the left side and moving clockwise to the right. I worked this way so I had an easier time keeping track of what I had done but this had the unexpected benefit of easing me into the more complicated areas in the middle instead of starting with them right away.

Leadership

The first part I drew was what I referred to as the “burst,” or the lines that resembled rays of light surrounding the board of directors. In a futile attempt to create them efficiently, I tried to create evenly-spaced lines emanating from a central point and clipping paths for the jagged edges and cutouts but the results started to look too polished and the charm was lost. Instead, I bit the bullet and drew each of the 1,582 lines by hand to ensure an exact replica.

The stars representing the board of directors and arrows connecting them to the president looked like they were evenly spaced distributed around him but they weren’t, so after starting with them as such, I manually shifted them to align them with the original. I also created a custom lined pattern for the shading in the circles that world be used for all others. This pattern is a simple set of tightly-spaced lines but always at a 45 degree angle.

The larger circles for the president and general superintendent were the only two with layered stars. The 6 circles connected to the president representing others in charge of business affairs and 18 representing smaller divisions had decorative ribbons and labels on them. Again, these looked evenly-spaced but needed a manual touch to align them properly.

Personnel

I developed a sequence of steps for drawing each branch so I could keep track of what I had done as I stopped and started over the weeks needed to complete them. Using the Western line as an example, these were the steps:

First, trace the “trunks,” which were the winding and straight double lines connected to the division head. The winding trunks comprised thin and thick lines drawn with the paintbrush as closely as possible to the original with minimal smoothing, giving them a bit of dimension. The straight ones were double lines representing the five main train lines and the distances between stations.

With the trunks in place, I added the small rectangles for stations (when necessary) and the many circles for personnel, which I referred to simply as “dots.” There were two main sizes is these dots—the larger, indicating supervisors, and smaller for the lowest level of personnel. To ensure I didn’t miss any, I always placed the dots in a clockwise order. A subset of the dots had small protrusions pointing in various directions indicating flagmen or switchmen.

Next were the thin curved branches connecting all the dots and the trunk. I enjoyed this the most even though it was the most tedious. With Illustrator’s fidelity option turned up for the paintbrush tool, I was able to draw the best curves without worrying about precision. This was a lot faster than drawing with the pen tool and messing with bezier curves manually. Thicker versions of these branches were used for areas with many dots.

However, the positions of the endpoints needed polishing to line up perfectly, so after I drew them, I made a second pass to move each endpoint so it intersected precisely with a dot or connecting branch to ensure a smooth look. Again, I methodically drew each branch in a clockwise order and adjusted their endpoints on a second pass in the same order. These branches took the longest to create compared to all other parts of the restoration but the result was worth the effort.

Finally, I placed the labels and iconography, starting with station names along the straight trunks, followed by the distances between them, and ending with their services/amenities. Nearly every label for personnel groups was set along a curved line and no two were the same so each curve was manually adjusted to be as close to the original as possible. The text size varied a little in the original but I maintained a consistent size in my version consistently except for a few of the larger groups which warranted larger labels. I also took the liberty of correcting a few typos and personnel counts but the original had very few errors.

This process was completed for each major division. Below is a set of images showing the order in which each part was completed. Drag the slider to step through the various stages.

Drag slider to see the progress from start to finish.

In hindsight, creating the title and legend first, followed by the leadership areas was a wise choice because I was able to iron out many of the nuances and workflows before embarking on the long repetitive task of drawing all the branches. Keeping my file well organized and approaching it methodically meant I rarely had to redo anything and making mass adjustments was relatively simple.

At this point, the diagram was complete but I wasn’t.

Colors

As with most my projects, I wanted to add my own spin on it and for this one, I chose to create new colorized versions. While recreating the diagram, I periodically experimented with different palettes on a small subset of representative shapes, starting with generic palettes I found on Pinterest inspired by the victorian era and a vintage map.

These were fine but nothing special. They illustrated a key change I wanted to make, which was replacing the thin lines shading each circle with flat colors. I loved the shading lines from the original but wanted to make variations that were a more modern while still paying homage to the original. In an effort to give the colors more meaning, I discovered a map of the proposed route of the New York and Erie Railroad from 1834. This beautiful map of southern New York counties had a great set of colors but when applied to the small sample, they didn’t have enough contrast for the wide variety of elements I wanted to color.

After some more digging through railway ephemera, I found a wonderful advertisement for the Erie Railway from 1874, promoting the stops along its route by way of named locomotives and train cars. The Amon Carter Museum of American Art has an original and I found a restored version on Etsy. The second I saw the latter, I knew it would be the perfect source of a palette. The bold red in the title and on the equipment worked so well with the bright yellow and subdued green for the landscape. My initial pass at a color palette used a few too many colors but I liked the general direction.

While experimenting with colors, I settled on the idea of using them to differentiate between structure and people. Most importantly, since the diagram had such a strong resemblance of a tree, I wanted to use shades of green for the people as leaves. A different shade of green was used for supervisors so their presence is more noticeable. The winding branches connecting them were colored brown. The tiny protrusions for flagmen and switchmen are a bright yellow as a nod to their job of keeping everyone safe and running smoothly along the tracks. Straight lines representing the physical lines and stations along them use shades of bright red. The colors of top leadership circle vary from shades of green to highlight their different roles: light blue for the primary leadership roles of president and general superintendent to which many others report and bright red for the board of directors that govern the activities.

Colors from the Erie Railroad advertisement were also used for the other symbols representing station services and amenities. As an added bonus, I also created dark versions of the diagram—one in black and white and another in full color. The addition of these rounded out the set of posters nicely and I’m thrilled with the final results. Seeing them in person and exploring all the details is quite fun.

Order posters

Missing piece

Keen-eyed readers may have noticed that my recreation differs from the original in a small but important way: the missing piece at the top center. The missing piece cut off the farthest part of the Susquehanna line and a few of the foremen and laborer dots from the Delaware line. In all my research this small part is only referenced once as a note on the Library of Congress’ site as “missing sections along the margins.”

The lack of information nagged at me throughout the project and I spent weeks combing through maps, old books, and library records hoping to find a shred of information about what was once depicted there. I sent dozens of emails to anyone who might have had any information about it. I was only able to piece together part part of it. For the rest, I made educated guesses, calculated estimates, and exercised a little creative license.

First, I listed the few things that had to be true given what was visible around it:

• After Crosbyville, another station was 4.92 miles away.
• A station past Crosbyville had a relatively long name ending in “LLE.”
• There wasn’t enough room to have more than one or two stations beyond Crosbyville.

My first stop was Google maps to see what was 4.92 miles away from Crosbyville in New York by using its measure feature and drawing along existing rail lines. Canisteo was the only town and according to their Wikipedia page, they were indeed part of the Erie Railroad. Since Henshaw drew the stations at mostly accurate distances from each other, placing a station at 4.92 miles away from Crosbyville (now Adrian) left room for one more station to be named next to the “LLE” that was above it.

Following the train line on Google Maps, the next town was Hornell, which was an appropriate distance away to line up with the visible “LLE” text but “Hornell” was a much shorter name and didn’t fit. Digging into the history of Hornell, I found a page on the Allegany County Historical Society’s site titled “Erie Railroad” and a line of text confirming that the station used to be named Hornellsville (emphasis mine):

The Susquehanna Division’s portion of that mileage began at SR Tower, just west of Susquehanna station and ended just west of the Hornell station, no longer Hornellsville…

The City of Hornell’s Wikipedia page also confirmed that it was surrounded by the Town of Hornellsville so that answered the question of the station ending in “LLE.” The next challenge was to determine the exact distance of the station from Canisteo. The first line of the diagram’s explanation mentions that it was “compiled from the September Reports” and as luck would have it, I found a publication on Google Books titled, Reports of the President and Superintendent of the New York and Erie Railroad to the Stockholders for the Year Ending September 30, 1855, which later research confirmed was the one mentioned. It contained, among other operational and financial details, the distances between stations in table Z on page 180, which listed Hornellsville as 4.21 miles from Canisteo.

Hornellsville is also listed two more times on the diagram near the division heads for the Western and Buffalo lines. Both of those indicated that it had a telegraph station, saloon, and a repair shop. However, they both showed different amounts of employees—the one on the Western division with significantly more.

Given the number of services available at Hornellsville and the fact that they were represented as rectangles in the other area of the diagram, using a rectangle was a safe assumption. Half a small circle is visible at the bottom of the missing area, which is just about the same distance away from where a station and its agent would be for Canisteo when compared to others. Therefore, I added a rectangle for Canisteo, a larger circle, and the other half of the smaller one. I was pleased with my detective work.

However, this was the end of what I could definitively determine based on existing information. I could not find any information on the number of employees at each station beyond a casual mention of a foreman, division inspectors, subordinates and a station agent in the 1855 report (see pages 38–43). This was useful information but not as reliable as a roster or a larger report about personnel.

Below are my other attempts to track down this information:

I found a restored version of the diagram for sale on Etsy and reached out to the seller who told me that he consulted period maps and conducted his own research, later adding that he used the help of AI to reconstruct it.

I contacted the Hornell Public Library asking for any information about Erie Railroad employees around 1855 and they quickly responded saying that while they had some information on the history of railroads, I should contact the Hornell Erie Depot Museum. At first, I considered myself extremely fortunate that there just happened to be a museum dedicated to the Erie Railroad in the very town for which I needed information. Unfortunately, despite repeated emails, phone calls, voicemails, and outreach on their Facebook page, I could not get in touch with a single person either at the museum or city hall, whose phone number was the one associated with the museum. I was surprised that ended up as a dead end because I thought if anyone would know anything about my question, they would.

I broadened my search to the state level and chatted with a librarian from the New York Public Library (NYPL) who recommended I contact their Irma and Paul Milstein Division, which specializes in United States history, local history and genealogy. After doing so, they found four reports spanning 1833 to 1869 covering details about the railroad’s operations. They weren’t available remotely through their site but most were online at HathiTrust. After sifting through hundreds of pages, I couldn’t find any new information. They also provided links to Archive Grid for archival collections in other institutions, New York State Archives (NYSA), and the Library of Congress for the bulk of the New York and Erie Railroad materials. Additionally, they found the same McKinsey article by Rosenthal that I referenced at the beginning of this post and specifically called out the footnote in the aside referencing the article by Wrege and Sorbo. Finally, they recommended contacting the National Canal Museum (NCM) and the Railway and Locomotive Historical Society (RLHS). They were truly a font of knowledge and gave me a lot of avenues to explore. I’m very grateful for their assistance.

Between sending my request to the NYPL and receiving their helpful response, I contacted the Steuben Historical Society (Hornell is in Steuben County) and piqued the interest of their director but he said they didn’t have “such a thing in any comprehensive form.” He did say he would check with sources he knew about local history and would get back to me. I haven’t heard back at the time of this writing.

Heeding the advice of the NYPL, I contacted the NYSA, RLHS, and NCM. The NYSA referred me to a search on the New York State Library’s catalog for reports and maps relating to the railroad. The membership secretary at RLHS commented that I was having a hard time because “no large railroads kept central records of all their workers.” I received no response from NCM. The New York State Library stated that they didn’t have much information around railroad history and suggested I contact the Williamsburg Depot, the Railroad Museum of the Niagara Frontier, or their Manuscripts and Special Collections Unit but didn’t sound hopeful that they would produce helpful results.

The mention of Wrege and Sorbo’s 2005 article in Rosenthal’s footnote piqued my interest because it sounded like a fruitful avenue for finding information about the missing piece but also about the general history of the diagram and I was right. It reshaped my entire view of it but more on that later. With my interest elevated, I sought about finding their original article, which presented its own challenges. The NYPL mentioned that it was published in the 24th volume of the Canal History and Technology Proceedings. In trying to find that specific volume, I found records for nearly all other volumes on various sites but never the 24th. None of the the records I found for the other volumes were available for viewing online but at least there were records.

The lack of a response from the NCM is especially unfortunate because in a page on their site describing the annual symposium for which the proceedings were published, they stated,

All of the Symposium papers are available in PDF form from the Archives of the National Canal Museum/Delaware & Lehigh National Heritage Corridor. Limited numbers of some complete volumes of the Proceedings are also available at $5 per copy by ordering through www.delawareandlehigh.org.

However, there was no record of the papers for purchase on the site mentioned—another dead end.

Feeling rather defeated, I started writing this blog post and after a few pages, decided to try once again to find the now-fabled 24th volume and had another stroke of luck when I found a single record buried on the Penn State Universities Libraries site labeled as, Canal history and technology proceedings: volume XXIV March 19, 2005 / editor, Lance E. Metz. To say I was elated would be an understatement. This is the only record of that volume I found. After I chatted with one of their librarians about getting a copy of the article and they said I could request it as an interlibrary loan through my local library. I quickly did so and received a 38-page PDF of it a few days later after paying a minor $15 fee. I also was able to get the original book from which the article was scanned to see if there was any improvement in the image quality and after another few days and an additional $15 fee, I confirmed that they weren’t any different in the book.

After becoming somewhat obsessed with this diagram, this article was a gold mine. The depth of research Wrege and Sorbo did to learn about its history was a joy to read. Ironically, there’s no mention of the missing part of the scan on the Library of Congress’ site, which was a minor disappointment, but the knowledge I gained more than made up for that. Much of the introduction of this blog post was informed by its contents. The article was published in 2005 and therefore still under copyright so it cannot be freely posted here but I will send it to anyone interested—just contact me.

Since I could find no other mention of the missing piece, I decided to start making educated guesses, estimates, and exercised some creative license to fill in the last piece of the puzzle: the employees. Circling back to square one, I started with the numbers in the legend, which stated that for the Susquehanna line, there were the following employees at the stations:

• 21 agents
• 15 clerks
• 55 warehousemen, watchmen, porters, etc.
• 22 switchmen and flagmen
• 2 train dispatchers
• 2 engine dispatchers
• 35 engine wipers

In counting the circles along the Susquehanna line, I found:

• 20 larger circles, probably indicating agents
• 1 labeled clerks connected to the general superintendent
• No warehousemen, watchmen, or porters labeled
• 22 labeled switchmen and flagmen
• No labeled train dispatchers
• 1 labeled engine dispatcher
• 26 labeled engine wipers
• 67 unlabeled small dots

The only number that lined up with the legend was for the switchmen and flagmen. However, this made some sense considering the first sentence of the explanation above the table states (emphasis mine):

This Diagram compiled from the September Reports, indicates about the average number of employeés of each class engaged in the Operating Department of the Road…

Even the September report which I found earlier doesn’t have any definite numbers for the employees along each line. So if the numbers shown were averages and no other source had information, I made some estimates:

Canisteo appeared to be a smaller town than Hornell but larger than Crosbyville so I decided to make its station a rectangle. Most stations represented as rectangles had a larger dot representing a station agent and a smaller one so created the same for Canisteo.

Hornellsville was represented two other times on the diagram—once for the Western line and again for the Buffalo line. This made sense, considering Hornellsville was a fork to two destinations: Dunkirk and Buffalo according to an 1855 map on the Library of Congress. The Western line showed an engineer dispatcher with 10 wipers reporting to them and a large circle representing a supervisor with 19 employees reporting to them—4 of which were flagmen or switchmen. The Buffalo line had fewer employees with two unlabeled small circles and one switchman of flagman because it was only a projection (Wrege, et al., 2005). Looking at all the other representations of engineer dispatchers throughout the diagram, they had an average of nine wipers reporting to them so I put one engineer dispatcher and nine wipers at Hornellsville on the Susquehanna line. A simple average of the four switchmen or flagmen on the Western line and the one on the Buffalo line produced three so I added three switchmen or flagmen to it as well. Finally, I added three unlabeled dots for an extra few personnel. Labels and connecting branches were drawn in the style of the rest of the diagram.

This method of determining employees was rough but I didn’t want to leave the spot empty or partially filled so this process felt appropriate given the limited information available. Port Jervis and Susquehanna are the other two examples of the same place shown in the diagram more than once with different personnel at each so this display was not without precedent.

The story almost ended here…

In fact, I wrote most of this blog post assuming I had chased down all the leads and wasn’t going to get any more information. That is, until I thought to email Caitlin Rosenthal—the author of the McKinsey which sparked this entire endeavour. In her article, she mentioned that she located a second copy at St. Lawrence University in upstate New York. In all my research, I only came across variations of the scan at the Library of Congress. Even the file page on Wikipedia for the diagram and all pages referencing it don’t include a mention of another copy. I asked her if she remembered anything about it and while she didn’t, but she did point me to a listing of maps in the special collections department at the university’s Owen D. Young Library where the diagram was listed (fourth line from the bottom of the second page). That prompted me to leave voicemails and send emails to the team there asking if they knew about it and if they could send me a picture.

To my surprise, they sent me back two pictures of their copy—beautifully intact and one of them contained the very piece I spent weeks trying to track down.

To say I was excited would have been a great understatement. I was over-the-moon thrilled that I tracked down not only a second original copy, but that it also had the missing piece and I was able to get pictures of it so I could complete my restored diagram. To my knowledge, these pictures are the first to be shared online of this second copy. I acknowledge that could have saved myself a lot of work by emailing Caitlin in the first place but I wouldn’t have learned as much as I did or developed an appreciation for the diagram and its history if I hadn’t tracked down the original article and done all the extra research. The journey was the best part of this project.

I was also pleasantly surprised to see that my reconstruction wasn’t that far off base from the original. I correctly figured out the station names, distance between them, types of stations, and the fact that Hornellsville had an engine dispatcher with the nine wipers.

Final thoughts

I adored working on this project. It was small, relaxing, surprisingly interesting, and had an incredibly satisfying ending. The posters only took a few weeks to create and I explored a lot of great typography in the process. The deep dive into its history was unexpectedly exhilarating. I spent more than twice the amount of time researching it than creating the posters and I learned more than I ever imagined. Finally filling in the missing piece felt like something out of a movie. Writing this blog post was a joy because I loved to piecing together all my research to share with others.

I appreciate my friends and family enduring my rambling about my latest discoveries. My sincerest thanks goes out to the librarians who helped me with research and pointed me in new directions I would have otherwise never discovered. Librarians are truly the unsung heroes of many research projects.

My hope is that by publishing this blog post and offering my posters for sale is that I introduce this fascinating little slice of American history to others and fill in a very minor but long-standing gap for others doing research in the future.

See the final posters

References

• Chandler Jr., A. (1977). The Visible Hand: The Managerial Revolution in American Business.
• Wrege, C., & Sorbo Jr., G. (2005). A Bridge Builder Changes a Railroad: The Story of Daniel Craig McCallum. Canal History and Technology Proceedings, XXIV, 183–218.

Recreating Mose Harris’ color wheels from the eighteenth century seemed straightforward until it wasn’t. I’ve long admired his “prismatic” and “compound” wheels and set a small design challenge for myself to recreate them digitally. As with most projects, it took an unexpected turn, but ultimately a good one.

Source material

Harris first published his color wheels as part of The Natural System of Colours—a short treatise on color theory around 1766 as it relates to watercolors. His work was notable because it contained some of the earliest color wheels in history that showcased the relationships between primary, secondary, and tertiary colors. In 1811, a second edition with recreated wheels was published after his death. A third variation of the wheels was again created in 1963 for a newer facsimile edition. Due to the imprecise nature of mixing paints, each wheel was different from the last.

The complete first edition is available at the Library of Congress, select pictures of the second edition can be seen at Lowell Libson & Jonny Yarker Ltd. and Hansons Auctioneers, and some of the third at various resellers like Etsy and WorthPoint (listing one, listing two, listing three). In 2004, Werner Spillman published an excellent research paper comparing the various editions and providing additional details on Harris’ methodology.

Recreating Harris’ color wheels seemed like a fun small design challenge—small enough that wouldn’t even warrant a blog post like this but a few things I learned along the way warranted writing one.

Color wheel structure

Harris used a relatively simple structure for each wheel: a set of concentric circles evenly divided into 18 arcs by spokes radiating from the center, which resulted in 180 places to paint with colors. The title page of the first edition claims that 660 colors were illustrated but with 180 spots for colors in 2 wheels and 3 set of colors duplicated (orange, green, and purple appear in both wheels), the final tally was only half that at 330.

The concentric circles were numbered to indicate how colors changed if their saturation was reduced from 20 parts in the center ring down to 2 in the outermost. Harris also overlaid additional concentric circles that divided the others into 4–13 parts, creating a complex display of the original colors where they appeared darker in the center and lighter toward the outer edge. In the center, were three patterned triangles that represented the main colors used in each wheel.

The use of text was minimal in both—comprising the color names, numbers, and part quantities. Color hierarchy was emphasized with different typefaces and capitalization. Harris originally wrote the names of the primary colors in uppercase with serifs, abbreviating Yellow stylistically as “YEL.^W” and strangely written backwards. Secondary and tertiary names were written in script with the former capitalized using a serif letter. All other names were written in lowercase. In the second edition, the main colors were written in all uppercase script—hurting their legibility—and all others were written in lowercase script. The third edition used the same style as the first.

Recreating this structure seemed straightforward but took some additional elbow grease to create it in NodeBox. I could have eyeballed the measurements in Illustrator but NodeBox allowed me to create a precise replica that I later filled in using Illustrator. A tricky part was the extra divisions in the concentric circles. They increased from 3 to 12 starting from the second most outer ring. The number varied by one or two in the innermost rings in Harris’ original. The triangles were created in Illustrator, including the subtle patterns of lines and dots they contained.

Finally, I chose to mimic Harris’ original typography, using Bodoni Moda (Adobe, Google) for the primary names and numbers while Altesse was used for the secondary and tertiary names. Neither were an exact match but were close and much easier to create than tracing the originals. Using Illustrator's type on path tool, I placed the labels around the edges—an unexpectedly trying process because each one needed its own path.

The final results were very close to the original and I enjoyed seeing the polished structure created using modern methods.

Mixing colors

With the structure finalized, I turned my attention to the colors. In the first edition, Harris listed where to find the primary and secondary colors (“primitives” and “mediates”) in nature:

• Primitives
  • Red: Vermillion, Wild-poppy
  • Yellow: Kings Yellow, Butter-flower, or Meadow renunculus
  • Blue: Ultra Marine, Cornbottle-flower
• Mediates
  • Orange: Red Orpiment, Garden Marigold
  • Green: Sap-green, Leaves of the Lime-Tree
  • Purple: Hairy Sheeps-scabius, or the flower of the common Judas-Tree

Taking that to heart, I looked up and sampled colors from publicly available photos of each that I found online. The challenge was that lighting can change colors dramatically and not sources have the same colors. For example, hairy sheeps-scabius (Jasione montana or sheep’s bit) is much bluer than a Judas tree (Cercis siliquastrum). I used my best judgement to find images that I thought represented Harris’ original choices. Since the original colors aged significantly over the centuries, there was no way for me to evaluate how accurate my colors were but my goal was to create realistic colors.

Mixing digital colors to mimic physical pigments is not an easy task and involves more than simply overlaying one color on top of another and adjusting opacity. Complex calculations are needed and are still being developed to create realistic results. For example, combining blue and yellow should yield shades of green but built-in blending methods in most graphics programs produce muddy results.

During my project to recreate The Color Printer, I learned of Mixbox, which does a great job at producing realistic color mixtures but required coding to get it to work and its license prevents it from being used in many tools so its usage is limited. Trycolors is another tool that uses similar algorithms and provides a helpful tool to precisely mix colors—taking into account the optical strength of darker colors via a “tinting strength” option to create adjusted, more realistic results.

Using the six colors sampled from the photos I found online, I created all 21 base colors. I used equal parts of each to create secondary and tertiary colors and a two-thirds ratio to create those in between.

Harris indicated that saturation was based on a 20-part mixture. Since his wheels were painted with watercolor, I assumed the mixture was based on a ratio of pigment to water. I tried to mimic this by mixing my base colors with white as a substitute for water. For example, 10 parts red combined with 10 parts white created a light pink. Similarly, I used black to mimic painting colors on dark paper—something Harris didn’t do but I wanted to see how it looked. Carefully and methodically creating each color combination resulted in four complete color wheels: a light and dark version of both prismatic and compound wheels.

Remixing colors

I even went ahead and started designing posters but the more I looked my color wheels, the more they felt…lacking. The colors were mixed “correctly” based on the tools I chose but they felt hollow and flat. The fact that I mixed colors with white and black to replace water didn’t sit well with me so I started to consider other methods of creating them.

I briefly entertained the idea of buying watercolors and recreating the wheels in earnest but stopped short of doing so for several reasons. I couldn’t find a reliable precise way to measure out “parts” of colors and wading into the world of choosing the right paints, brushes, paper, etc. was too daunting for what was supposed to be a relatively small project. Plus, even if I painted my own, I didn’t have the equipment to create a big enough picture of it to place on a poster.

Instead, I looked toward digital painting apps that allow realistic color mixing. The graphic at the top of Mixbox’s homepage was enough to deter me from trying most of the apps shown to have inferior results: Photoshop, Procreate, Adobe Fresco, and Clip Studio Paint. I did try Adobe Fresco, which produced some encouraging results, though there still wasn’t a way to measure out specific parts of colors to get reproducible mixtures. Plus, I couldn’t find a way to export images more than about 4300 pixels square. I typically need to export images 18000×12000 pixels for my posters.

My research lead me to Rebelle, which touts “hyper-realistic” painting features and color mixing. After I took a crash course in learning how to navigate its interface, I found the results to be very promising. Mixed colors looked realistic and their paper options added a nice realistic texture to the colors instead of the flat versions I created on my own. Plus, it allowed for very large canvases and exporting in the resolution I needed.

Rebelle had a wealth of brush settings, which was a mixed blessing because they required a lot of trial and error to find what worked best but having the options was better than not having them. Varying the amount of water in a brush only affected how colors were absorbed into the paper on which they were painted but opacity had the most realistic parallel to Harris’ saturation levels.

The most useful of the settings was the blending method, which allowed me to completely overpaint colors, overpaint and blend, or blend existing colors.

Before I started creating colors in earnest, I also changed my sources of colors from being sampled from photos. I chose to sample colors from Daniel Smith Artists’ Materials, a popular site selling watercolors and used their organic vermillion, cadmium yellow, and ultramarine blue as the basis for all mixtures instead of also sampling secondary colors.

Using blending mods, I created the all the swatches for each wheel. Rebelle doesn’t have an option to specifically blend colors based on number of parts so I eyeballed the blended colors to be roughly equal parts of each. To do this, I drew a line of two colors and used the blend brush to blend them together.

With the base colors configured, I imported the outlines for the structure as different layers and filled in each arc using a process very reminiscent of what I would have done with real paints: select an area to paint, paint the color, and watch it dry. The drying part was an interesting process to observe. Rebelle shows the drying process and gives options for “blowing” on paint to dry it faster or push it in different directions. Occasionally, I would paint an area and immediately deselect it to start painting another one but before the paint had dried, resulting in the paint bleeding into neighboring areas. Not something I anticipated when painting digitally but it makes sense and I made sure each area was dry before continuing.

Rebelle also allowed the canvas to be changed, which impacted any colors painted on it—re-blending them with the new setting. This allowed me to create dark versions of each wheel without repainting them. The final results were color wheels that looked a lot more realistic and were more satisfying to me personally because I know the colors were mixed from just three primary colors: red, blue, and yellow.

Poster design

The main goal for this project was to create modern editions of Harris’ wheels and offer them as posters for those that enjoyed the originals as much as I did. Many places offer posters of Harris’ original wheels and have for many years. They’re very appealing and naturally work well as decorative posters. My take on them was that I recreated them from scratch.

Since Harris only wrote a handful of pages about the wheels, my initial designs included the full text on a poster showcasing both prismatic and compound color wheels. My idea was to mimic the visual complexity of antique double hemisphere maps where the focus was two large circular visuals surrounded by decorative imagery or other details. Unfortunately or serendipitously, the text was longer than I thought and trying to fit all of it on a poster would require it to be too small to be legible and it was distracting.

Once I came to terms with not including the full text, I explored variations that included scans of the original wheels from the first and second editions in the corners to show how the wheels have evolved, finally settling on one that included them plus Harris’ list of where to find the six primary and secondary colors in nature.

Additionally, I created a light and dark version of each wheel as standalone posters without the extra information, but showcasing my modern recreations. They’re similar to many others’ but unique because they’re remade from scratch using modern digital methods and unique dark versions are also available.

Color data

As I’ve done for previous projects, I catalogued all the colors mixed for this project and made them available for free as hex codes in a Google spreadsheet under the CC0 1.0 Universal (CC0 1.0) license. There are a total of 627 colors:

• 33 primary, secondary, tertiary, and quaternary colors
• 594 tints and shades of those colors painted on light or dark paper (codes for paper colors are in the dictionary tab)

If any readers use the colors in their project, I would love to hear about it.

One-page explainer

Recreating these color wheels proved to be interesting enough that I wanted to document it in a simpler manner than this blog post so I created a long one-page explainer that covered the process more holistically. The design is deliberately simple with no interactivity, large pictures, and minimal copy so anyone can enjoy the process I went through without diving into the details like in this blog post.

Final thoughts

This was a fun short project done over the course of just a few weeks–a departure from the usual months-long efforts I usually undertake. I love the long-term projects but hope to do more smaller, short-term projects like this in the near future.

I’m well aware of the absurdity of this project. The idea of digitally sampling colors from photos of physical objects to mix them digitally so that printed posters could be made sounds convoluted because it is. I could have gone out and bought some watercolors and done my own version but over the years, I’ve developed a strong fondness for reproducing antique books in part or in whole online—not because someone needed me to do it but because it’s fun and allows me to exercise my design skills. If others discover them and enjoy them, that’s wonderful and if they want to order a poster, that’s an added bonus. I’ve used skills from every project in later efforts so while recreating Harris’ color wheels doesn’t make much sense now, it may later on.

I used to have boring health. I never had more than the flu, been admitted to the hospital, and I could eat whatever I wanted, whenever I wanted. In late 2023, that changed when I developed chronic nausea.

The nausea started on November 20, 2023, with what I thought was nothing more than a mild upset stomach and has continued every day since, with varying intensity without any clear triggers. I’ve seen a dozen doctors, tried many medications, and have been subjected to more tests than before I became ill. Nothing pointed to a clear cause and no treatment has had lasting effects.

Chronic nausea is invisible and debilitating.
I’m learning how to be me again.

I never gave much thought to what I ate. I ate when I was hungry, enjoyed going to work, lost myself in my projects, and visited family regularly, eating out often on trips. Now, I carefully monitor everything I eat and have up to seven small meals a day. I’m only able to eat small amounts of food at a time because I feel extremely full if I have anything resembling a complete meal. I’ve learned to eat through the nausea. I rely on foods that are easy to digest and eat roughly every two hours so I can get enough nutrients to maintain a constant weight. I used to travel every year to visit family but have had to cancel more than a year’s worth of trips because there have been many times when I could barely leave my house to run errands, let alone fly to another state. I take frequent naps, not because I’m tired, but because they allow me to escape the awareness of how I feel. My life revolves around how poorly I’m feeling and it’s hard to focus on much else.

My doctors initially diagnosed me with gastroparesis, which means food didn’t pass through my stomach as fast as it should, and as a result, ferments and causes nausea. Later, that diagnosis was broadened to include functional dyspepsia and visceral hypersensitivity—both of which are vague umbrella terms that essentially mean I have an upset stomach with no clear cause and no cure.

When I realized the nausea was becoming chronic, I started doing one thing I could control—collect data about it. At the end of each day, I took up writing basic notes about how I felt that day, any treatments I tried, and assigning a number to it from 0 to 10 based on how nauseous I felt.

Originally, I tracked this to help my doctors better understand how I was feeling and create new treatment plans but that never happened, despite mentioning it to every doctor I’ve seen. Instead, I use it as a point of reference to remind myself what I’ve tried and to identify trends.

What I’ve found most interesting is the regular intervals at which my nausea flares up—about two weeks. This was surprising because I didn’t expect there to be such regularity. I’ve learned to consider this pattern when evaluating a treatment’s effectiveness. If a treatment had a meaningful impact beyond two weeks, it would be considered effective. Unfortunately, few have.

I’ve seen a range of doctors over dozens of visits in an effort to find relief, including my regular doctor, gastroenterologists, surgeons, therapists, a dietician, and a neurologist. The conversations I’ve had have typically been less than an hour long and comprised me giving a too-brief summary on how I’ve been feeling, reviewing tests results, some general questions about any changes in my habits, and a suggestion to try anti-anxiety medication, over-the-counter medication, or continue waiting to see if my symptoms improve on their own.

From November 2023 to May 2024, I saw my gastroenterologist, psychologist, and dietician on a regular basis. By summer, I started to feel better—even without medication—so appointments were scaled back. The nausea never completely subsided but felt manageable. However, it increased substantially toward the end of June, which prompted me to consider seeing other doctors to help me cope. I met with a neurologist, who was kind enough to listen to my story from beginning to end over the course of two hours. The outcome was similar but I was glad I had the chance to tell him my full story. I started seeing a psychiatrist to see if off-label use of psychiatric medication would help but as of this writing, I’m still evaluating its effectiveness.

On two separate occasions, doctors recommended trying gut-directed hypnotherapy. During the winter from December 2024 to February 2025, I decided to try it out since I felt I had tried so many other methods and I was fortunate enough that my insurance covered the cost. I attended seven virtual sessions over two months and listened to recordings each morning between appointments. The experience was pleasant and my therapist was nice to talk to and listen to. I experienced a decrease in nausea as the sessions went on but that also coincided with other medications I was taking so its effectiveness wasn’t definitive.

Appointments have been emotional roller coasters. Before each one, I naively started to hope that a recent test or experience with medication would reveal something new, or my doctor would have a new treatment to try. Often, the outcome is hearing that everything “looks normal” or that my problems are due to anxiety, which are two of the most crushing responses to hear, especially when I feel far from normal. Weeks or months have often separated appointments, partly because of availability, but also because trying new treatments takes time. Waiting months to see doctors or try treatments only to be told the same result after a short 30-minute visit is a constant source of frustration.

None of my doctors could identify a clear cause for the ongoing nausea but two key events may have contributed:

• On September 19, 2023, I tested positive for COVID-19. Having been vaccinated, it seemed to be a mild case with common symptoms—such as congestion, loss of smell, loss of taste, and of course, nausea. Unusual symptoms included vertigo and a numb toe. After 12 days, I felt normal again and had no lasting ill effects.
• On November 2, 2023, I caught the stomach flu and felt nauseous during the last day of a vacation in Florida and collapsed after standing up too quickly, hitting my head on the way down. I’ve always been somewhat prone to vasovagal syncope but only succumbed to it a handful of times. After coming to in less than a minute, I vomited and had a panic attack. The nausea subsided a few days later with no lasting ill effects. Doctors suspected it was little more than a stomach bug.

These two events were far enough away from my initial onset of chronic nausea that none of my doctors could definitively say if either was the cause of my nausea but believe they may have damaged some of my gastrointestinal nerves. Unfortunately, knowing a potential cause doesn’t necessarily result in an effective treatment.

Procedures I’ve had include numerous blood draws, CT scans, gastric emptying studies (GES), ultrasounds, and a failed pharmaceutical clinical trial. Early on, a lot of the standard tests were performed to rule out obvious causes like obstructions, cancer, etc.

The only test that showed something conclusive was my first gastric emptying study. Out of all the tests I’ve had, it was the most pleasant because it simply involved eating some scrambled eggs laced with a harmless radioactive tracer along with a piece of toast and taking scans of my abdomen over the course of four hours to see how the food moved through my system. After four hours, I should have had 10% or less in my stomach but in December 2023, I had 41% remaining, which indicated gastroparesis. Based on that, I was prescribed a few medications to make my gastrointestinal muscles work more efficiently but none had a lasting effect. The second study I had in September 2024 showed 8% remaining, at which point my gastroparesis was considered resolved but my symptoms persisted.

There was some concern early on that I may have median arcuate ligament syndrome (MALS) because one of my arteries appeared more compressed than expected in an ultrasound but that was ruled out after a follow-up ultrasound and a consultation with a vascular surgeon, who didn’t feel there was cause for concern.

ER visits bookended 2024—one in January for excess stomach acid caused by stopping an acid-blocking medication and again in November for a suspected small bowel obstruction, later thought to be enteritis. The latter required staying in the hospital for four days with an NG tube in my nose to drain my stomach (not a fun experience). My nausea subsided while the tube was in place but came back a couple days after being discharged. Despite the circumstances, the lack of nausea was a welcomed, albeit brief relief. During my hospital stay, my many tests were punctuated by panic attacks. Prior to becoming sick, I hadn’t had a panic attack but quickly learned what they feel like so I know what to expect in the future if I feel one coming on. The hospital staff were angels that provided immeasurable help throughout my stay in the hospital and I will be forever grateful for them.

I’ve tried numerous over-the-counter and prescription-strength medications since my nausea started with varying levels of success. Few medications had an immediate effect, so I often had to wait weeks to determine if they helped and they often came with side effects.

The earliest medications I tried were over-the-counter like Dramamine and FDgard but they did little to help and thankfully had no side effects. When those didn’t work, Zofran (often prescribed to cancer patients going through chemotherapy) was prescribed but only lasted a short while. Zofran did cause constipation so more medication was needed to keep that at bay.

Acid-reducing medication like omeprazole and pantoprazole were prescribed, thinking that my nausea was due to excess stomach acid, but they didn’t touch the nausea. I learned the hard way that stopping pantoprazole suddenly is not recommended because doing so caused excess acid and my first trip to the ER.

To help with motility, or the movement of food through the digestive tract, I tried Reglan for about two months. It had no positive impact on my nausea but did cause strong hunger pangs before meals, which implies it had some positive effect on motility. My muscles also started twitching occasionally, which could have been signs of early tardive dyskinesia (a common side effect). It can also become chronic and incurable if left untreated so once the twitching started, I discontinued it.

Erythromycin was prescribed toward the end of February and was the first medication with a noticeable positive effect and may have contributed to why I was able to spend about two months after my regimen without medication. It’s primary use is as an antibiotic but is used off-label to treat delayed gastric emptying (gastroparesis) and nausea in lower doses. The only negative side effect was a strong sense of hunger before meals. When my nausea started to increase at the end of June, I was prescribed a second round but it wasn’t as effective—a common experience for those taking it long term.

In August 2024, I learned of a clinical trial for Tradipitant—a new drug that was supposed to help reduce nausea in gastroparesis patients. I had to go through a screening period but made it into the trial and took it regularly for two months. Ultimately, the medication didn’t have any positive impact on my nausea but also didn’t cause negative side effects. While it was a lot of time to spend on an experimental treatment that didn’t pan out, I’m glad I did it. Otherwise, I would have forever wondered if it could have helped me.

Since September 2024, I’ve also been on increasing dosages of mirtazapine for depression and an off-label use of reducing nausea as well as Pepcid AC to keep stomach acid at bay. The side effects have been minimal and manageable. From December 2024 to March 2025, I tried Marinol—a synthetic form of cannabis to help with nausea, appetite, and fullness. Over the course of 80 days, I had a hard time telling if it had any measurable effect. There were periods of low nausea but nothing lasting. Even with insurance, it was prohibitively expensive and I often had to travel to pharmacies hours away to get prescriptions filled. As a result, I decided to taper it off per my doctor’s recommendation. Unfortunately, a week after I stopped entirely, I experienced the worst prolonged flare to date that lasted most of March—likely due to withdrawal.

Two over-the-counter medications have proven to be surprisingly effective: ginger and pectin lozenges. When my chronic nausea began, I wrote off ginger because I had tried Dramamine ginger chews with no success. Toward the end of December 2023, I bought several kinds of lozenges to give them another try and was pleasantly surprised to find that UpSpring Stomach Settles ginger lozenges helped when my nausea was mild and Halls Throat Soothing drops helped when I was feeling the effects of excess acid. Both helped within minutes and even though they only lasted a short while (hours at most), having them available has been a big help physically and mentally. Both are available on Amazon and Walgreens.

Throughout this ordeal, my weight has also been a constant focus. I’ve tracked my daily weight since August 2022 purely out of curiosity after seeing how others have tracked their weight and shared how it was affected by diets, medical conditions, life events, etc. I found it interesting to see how my weight fluctuated based on diet, exercise, travel, and even sleep. In an effort to keep it accurate, I developed the habit of weighing myself first thing in the morning and last thing at night and tracking the data using the Health app on iOS. This highlighted a problem that I was unaware of when my chronic nausea first started: I stopped eating enough.

When I was nauseous, the last thing I wanted to do was eat so I simply ate less in a futile effort to keep it at bay. As a result, I started shedding pounds and not in a healthy way. Looking back to before I caught COVID, my weight hovered just below 170 lbs. and my height was 5′9″. I lost some weight during COVID then it fell off sharply once the chronic nausea started. At my lowest in March, I weighed about 146 lbs. I struggled a great deal to find foods with enough calories and nutrients to maintain a healthy weight. My sessions with my dietician helped me figure out what I could eat and get me back on track. Over the next several months, I slowly inched back up to about 161 lbs. by June. Unfortunately, the increasing nausea around that time and subsequent hospital stay in November resulted in more weight loss, but I am slowly doing my best to gain it back.

A few of my doctors have recommended that I stop tracking all this data to improve my mental health and stop focusing on how I feel. While I understand why, I continue because I won’t be able to remember everything and I still hold out hope of finding meaningful information in all the noise. If nothing else, my experiences may prove useful for others going through similar situations. For better or worse, it’s become a cornerstone of my illness.

The hardest thing to come to terms with is that I likely won’t get better. There’s always the chance that my chronic nausea could go away on its own but that uncertainty is daunting. My family and friends have been invaluable in helping me through this long chaos. I love them more than they could ever know. There are more options I can try and I intend to try everything I can until I find something that works.

I will do everything I can to make my health boring again.

Update March 1, 2025: The charts in this blog post have been updated with data from February 2025 and will continue to be updated monthly for the foreseeable future. A paragraph has also been added that describes my experience with gut-directed hypnotherapy.

Update April 1, 2025: A paragraph has been added that describes my experience with Marinol withdrawal.

Author’s notes

I am not a medical professional. This blog post does not constitute medical advice. The information in this post is about what I’ve tried as well as what has or hasn’t worked for me. Consult your doctor before making medical decisions.

This blog post was inspired by Giorgia Lupi’s excellent 1,374 Days of COVID, chronicling her life-changing experience living with long COVID.

“Patience” was this project’s theme. Breathing new life into Les Liliacées and Les Roses—two of Pierre-Joseph Redouté’s most well known collections—taught me a lot about it during the 11 months this project took to complete.

Simply put, Redouté’s illustrations are stunning. His attention to detail in stippling and watercolor has earned him the title “the Raphael of Flowers” and is considered the greatest botanical illustrator of all time. By restoring his illustrations, I had the opportunity to become intimately familiar with his techniques and develop a deeper appreciation for his efforts.

Redouté’s work has crossed my path a number times over the years but it didn’t catch my attention until I was researching source material for Illustrations of the Natural Orders of Plants several years prior. The main deterrent then was that it was only available in French and I was limited myself to only English-based projects at the time. Since then, I wanted to find a way to create a project based on his works—but one that was a little different than just posting scans online and selling them like so many have already done.

Structurally, Les Liliacées and Les Roses are relatively simple and similar to other collections of scientific illustrations—both showcase large illustrations paired with brief descriptions about their characteristics and nomenclature. Les Liliacées comprised 486 plates of 476 lilies published in 8 volumes between 1802 and 1816 while Les Roses comprised 169 roses published in 3 volumes between 1827 and 1833. The title, Les Liliacées is slightly misleading because it includes representatives of the lily such as amaryllis, orchids, irises, and more.

Each illustration depicts a single lily or rose (with a few exceptions) posed to accentuate the bold, yet delicate nature of the flowers and the stems supporting them adorned with leaves of all shapes and sizes. Most lilies include a detailed root system at the bottom and have a couple of greyscale sketches of enlarged parts of the flower such as pistils, petals, stamens, etc. Most roses are only depicted from the stem upward. Below each is the Latin and French names written in beautiful calligraphy. While the leaves take up the most space in most illustrations, the flowers are the focal points—exploding with color from impossibly thin stems, nestled within enormous leaves, or sprinkled throughout delicate branches. These would be the focus for this project.

The beginning of the video below from the Joel Oppenheimer Gallery provides a nice overview of two of Redouté’s illustrations and discusses the techniques he used.

Finding good source material

Since Redouté is so well known, his illustrations are readily available on many sites that appreciate his work. After some digging, I found the best results on the Internet Archive contributed by the Biodiversity Heritage Library and the Library of Congress. They had the best quality scans by far and at resolutions larger than any I’ve worked with on previous projects—averaging at around 4500×6700 pixels. Links to each are included below.

Note: At the time of this writing, the Internet Archive is recovering from an attack that took down their services so their links may not work correctly and their scans may not appear on the Biodiversity Heritage Library’s site.

Les Liliacées:

• All volumes: Biodiversity Heritage Library
• Volume 1: Internet Archive / Biodiversity Heritage Library
• Volume 2: Internet Archive / Biodiversity Heritage Library
• Volume 3: Internet Archive / Biodiversity Heritage Library
• Volume 4: Internet Archive / Biodiversity Heritage Library
• Volume 5: Internet Archive / Biodiversity Heritage Library
• Volume 6: Internet Archive / Biodiversity Heritage Library
• Volume 7: Internet Archive / Biodiversity Heritage Library
• Volume 8: Internet Archive / Biodiversity Heritage Library

Les Roses:

• All volumes: Library of Congress
• Volume 1: Library of Congress
• Volume 2: Library of Congress
• Volume 3: Library of Congress

My sincerest thanks and appreciation goes to these websites. Their willingness to make their collections freely available to the public is invaluable.

Designing the digital edition

How do you design a site that highlights such monumental work? By letting it speak for itself. A guiding principal I had early on was “grand elegance.” I wanted to create a design that lets the beauty of Redouté’s work shine while the rest gets out of the way. Most online galleries include small thumbnails of each illustration, showcasing the full compositions but diminish the beautiful colors of each flower. Others show only a subset of plates and none include the original descriptions.

These collections are perfectly fine in their own right. They provide a wealth of information about each plate and serve their audiences well. I wanted to do something bigger and bolder—something that focused on the flowers and their colors.

My site structure was simple by design: a home page, a page for each plate where it can shine, clear and interesting ways to browse the two collections, a page about the posters for sale, and a page about the project. The plate, home, and browsing pages have a lot of interesting details. The others are relatively standard.

Plate pages

The first page I designed is where visitors would spend most of their time examining each plate and its accompanying description. My plan was to create a template that would work with every plate but showcase them in a way so each page stands on its own with strong imagery. I also wanted to display the plate as large as possible, essentially hitting visitors over the head with each illustration’s beauty. Early inspiration came from the National Audubon Society’s gallery of birds drawn by John Audubon himself. On large resolutions, the focal point of each illustration fills the screen, followed by the original description and a link to view the full plate.

The layout is simple but effective. I liked the large images but they are a little jarring with a bird’s large eyes staring back at me. Still, the idea struck a chord and inspired me to try a few of my own variations.

My first attempts (top row above) were rough, as most usually are. I took cues from the Audubon Society and my own earlier projects but the results didn’t live up to my vision yet. I liked the idea of filling the screen with the full illustration but there wasn’t a one-size-fits-all solution for framing the flowers nicely across all plates. The fourth iteration (top right) was the spark of an idea that I ended up using in the final design. I found that I particularly enjoyed seeing the scientific name of each flower in a large serif typeface so I incorporated that into the next several iterations.

The next few designs (bottom row) introduced a darker palette to make the page feel more welcoming with a dark forest green since some shade of it appeared in every illustration’s leaves. The darker colors added a much-needed contrast to the main areas of the page. The eighth version (lower right) is when things really started to click. Using varying shades of green and subtle shadows created layers of content and added a nice sense of depth without looking tacky. Using a large version of the illustration as a subtle page background texture also served as a nice way to add visual variety to the page template.

During these experiments, I discovered the typeface I would use for the project—Google’s Literata. I’m a sucker for large bold serif typography and Literata worked well for the modern, yet classic look I was developing. It’s easy to read at small sizes for body copy, has a lot of character in its italics style, and has a healthy amount of contrast in the bold weight at large sizes—perfect for this project.

There was still the problem of showcasing each illustration’s flower. Showing the full plate diminished it too much. The white background also didn’t help because the small flowers became hard to see. That’s when I got the idea to try a dark background and work on an all-dark design. I hadn’t created a dark design from scratch for some time—the last one being for Mathematical Instruments in 2022. As a test, I spent a little time roughly replacing the white background with a very dark grey color and thought the result looked great. (Little did I realize what I was getting myself into. More on that later.)

The last experiment finally gave me the “wow” moment. Adding a hero image with a dark background brought it to life. I loved the cropped look and the large title with a faded overlay. That immediately struck me with the flower’s beauty and Redouté’s attention to detail and encouraged me as a viewer to want to see more, so having the full view with the accompanying description below it felt very natural. There was also a nice balance to the page with the positions of the image and text swapped in the bottom half from their positions in the hero.

The final design came to life over the course of building out the rest of the project. After the dark background was added to each image, I determined the best position for it to be placed in the hero area to frame the flower(s). The one-size-fits all solution I was looking for only needed a little customization for each hero image.

I was so pleased with the result that I looked forward to seeing how each hero image would look and still enjoy browsing through them. They also work very well on all screen sizes. Below are a handful of full page screenshots and hero images.

There are four key elements to the final design: hero area, full plate, description, and background:

The hero area showcases a magnified, cropped view of the overall plate on the right with its names and plate number overlaid on the left. Both Latin and French names are included like in Redouté’s descriptions. The Latin name is written in large bold type to complement, but not overshadow the character of each flower. A subtle gradient between the text and the image ensures legibility. On narrower resolutions, the overlay appears toward the bottom since horizontal space is at a premium and it anchors the cropped image nicely. To the left and right of the title are links to navigate to the previous and next plates in numerical order. The full-resolution image is loaded as a background image for the display rather than a crop to save on the need for creating multiple versions of the same image. It’s “cropped” with a simple combination of background-position and background-size.

The full plate is available in two colors in the left bottom half of the page. Each plate was restored and made available with both light and dark backgrounds (more on those later). Every plate can be magnified to see the high resolution version. Several lilies were represented with multiple plates (e.g., Pitcairnia latifolia and Sagittaria sagittifolia) where one plate showed with the entire plant and the other a magnified version, a few plates included two smaller lilies, and one was spread across two plates with a third used for a large greyscale sketch of its bulb (Amaryllis josephinæ). All roses were only illustrated on one plate each. In cases where multiple plates were used for a single flower, links were provided to switch between the plates.

The description for each flower was transcribed from the original scans and kept in French as it was written. I didn’t have the resources to have them translated to English and didn’t want to rely on an automated translation service because the latter is often prone to errors. However, at the bottom of each description is a link to translate it into other languages if readers want to read it in their own language. While scrolling through the description, the full plate remains in view so it can be referenced.

Finally, the background is another enlarged version of the high-resolution plate and adds a nice subtle texture variation to the pages. The full plate and description are elevated above it with shadows and the description has a translucent lighter background color that blurs the background image under it to ensure legibility.

In an effort to save time and resources, the same full-size original image is used three ways on these pages (hero, full plate, and background) rather than creating multiple versions of the same file. This saved on server calls and eliminated the need to crate multiple versions of the same image. The full-size images can be fairly large, but they’re the only image loaded on each page so it was a nice compromise.

Browsing plates

The gateways to each plate are the browsing pages. From the beginning I wanted to create collages of lilies and roses arranged by color as a fun way to explore them. Rough versions of each were created as a quick test. They were hastily cropped, pixelated, and the background was removed with a subpar quick-and-dirty method, but they were just tests and confirmed that collages were worth exploring.

Before restoring images in earnest, I had to figure out how to build the collages. The approach I took with British & Exotic Mineralogy was too heavy-handed because while the collages were a big part of this project, they weren’t the sole focus. The advanced zooming and panning capabilities weren’t needed and I didn’t want to generate the plethora of images needed for those features. Instead, I opted for a simpler approach—one large scrolling collage for each set of flowers. On smaller screens like tablets and phones, the browser’s native zooming and panning capabilities allow for detailed exploration.

The hover effect would be achieved with SVG shapes acting as masks to expose selected parts of a second image that showed the hover state. I made a rough proof of concept which I included below.

The example above is includes just two images: one with seven blue circles representing what will eventually be flowers and a second image with those circles as light grey, representing the hover state of the eventual flowers positioned on top of the first. A hidden SVG comprises paths outlining the hotspots of each circle. A small bit of JavaScript dynamically applies the mask-image property to the hover state image so only the area outlined by the SVG path is shown, creating a faux hover state. This way, only two images need to be loaded for the collage to work instead of an image for every circle.

With the collage functionality figured out, I turned my attention to the more utilitarian grid views. The collages couldn’t be designed in earnest until flowers were extracted from all 600+ plates and collages couldn’t be the only method of browsing so, I focused on designing the grid views. In addition to color, I wanted visitors to be able to browse plates alphabetically, by the order in which they were published (timeline), and by scientific classification. Only lilies had details on different classification methods so browsing by classification is not available for roses.

Designing a nice grid view may seem easy but there are nuances to making it enjoyable without being overly repetitive. Unlike the other online galleries, the flowers were the focus and not the full plates. My initial idea was to keep it simple and show nothing more than flowers with titles.

Setting aside how much work would be required to extract all the flowers, the first result was lackluster. The flowers popped visually but felt plain with all the whitespace. Normally, I’m fan of whitespace but this design didn’t fit the grand elegance theme I was striving for with this site. Nonetheless, I used this design while I restored each plate—constantly tweaking sizes and spacing. Another design filled the whitespace with borders and background textures but this felt too heavy-handed and not as inviting to exploration. There was too much visual noise.

The final design was a mixture of the earlier ones—simple cards with clear delineations between them. Large shadows below each flower made them jump off the screen and the blurred backgrounds on each card added a nice sense of variety to the repetitive grid pattern. Plus, the backgrounds didn’t require extra imagery or code to generate. Each card’s background is the same image of the flower, but magnified, blurred, color adjusted, and made semi-transparent using CSS. The card itself has overflow: hidden applied so I was able to achieve a similar “cropped” effect as the hero on plate pages.

In the timeline view, flowers are grouped by volume and include a number (or numbers) of the plates illustrating them. Each volume shows the years during which the plates were created. The descriptions of lilies included additional classification methods as outlined by Antoine Laurent de Jussieu, Jean-Baptiste Lamarck, and Carl Linnaeus, indicated by a line under the Latin title. Lamarck’s name was used occasionally in place of De Jussieu’s so I allowed for browsing classification by De Jussieu/Lamarck and Linnaeus.

The pages for browsing and plates were the first pages I coded quickly after only attempting a few rough mockups. I’ve learned from other projects that building and starting to use the digital edition as soon as possible rather than perfecting mockups has two strong benefits:

• Using the site as a real user lets me discover nuances and make improvements to the experience throughout the timeline of the project rather than waiting until the very end. I am my own beta tester and it helps tremendously.
• Testing new ideas is often easier in code than in mockups. For example, adjusting the design of the browsing experience and plate pages (spacing, image size, etc.) is a lot more efficient in a browser at multiple sizes than crafting clever mockups in Figma with components, variables, etc.

I acknowledge that I’m a team of one and this workflow doesn’t always work for larger teams. Still, for passion projects like this, shortening the path to a working version as much as possible is a big win.

I restored illustrations by alternating between volumes of lilies and roses. First I worked on volume one of Les Liliacées, then volume one of Les Roses, followed by volume two of each, and so on. Since there were eight volumes of lilies and only three of roses, the entire collection of roses was finished first, and as a result, that was the first collage I made. I’ve become no stranger to making collages—specifically those arranged by color—considering I made them for hummingbirds and minerals, but the challenge of the packing problem always comes back to haunt me. I developed a decent methodology that I described in my blog post about making the minerals collage, but that didn’t work well with the collages for this project.

The main challenge is determining the tightest arrangement of irregularly shaped images without overlaps and arrange them by color. The last part is the trickiest. Without that, arranging the images of roses would have been relatively easy: place the largest ones spaced out nicely, then fill in the gaps with the smaller ones. Arranging them by color throws a nice wrench into that. First, I had to figure out how the main groups of colors could be nicely arranged. Then, position the largest of each group evenly spaced out but also roughly where I think their color group would appear. This was a big guessing game and required countless adjustments.

As I restored each image, I kept track of the main color for each of them and kept a running log of this to see how the final groups ended up in the end. There were four main groups of rose colors: yellow, white, pink, and purple. However, the pink could be split into subgroups so I ended up with six total groups: yellow, white, light pink, pink, dark pink, and purple.

Out of 169 roses, only 4 were yellow and yellow didn’t blend well with white, pink, or purple so I knew it needed to be on one end of the collage’s spectrum. There were also only a handful of purple, or darker-colored roses so they were going to be on the other end of the spectrum. The majority would be white and shades of pink. Once I had a nice arrangement, I added a subtle background comprising a second collage of large leaves from a few rose plates. The leaves add a nice texture to the final result. A hotspot for each rose was created in Illustrator and exported as SVG paths for masking.

The same approach was taken for the lilies collage but it was more challenging because it contained 476 images—nearly three times the amount in the roses collage. There were nine main color categories: white, yellow, orange, vermillion, red, pink, blue, purple, and green.

Even though, white lilies dominated the collage, there were a healthy mix of other colors so I could arrange them in a nice gradation from top to bottom.

Like with past collages, the best tool I found for creating them was InDesign, because it efficiently handles large volumes of lined images very well. Neither Photoshop or Figma handles many high-resolution images very well without freezing, choking, or crashing.

The sizes of roses and lilies are consistent with the size at which they were drawn. Flowers were drawn a wide range of sizes and I wanted to preserve that to add variety to the collages rather than trying to scale them all to the same size. They’re shown at uniform sizes in the grid views.

I was very pleased with the final collages. Both showcase all the beautiful colors Redouté used and they’re fun to explore. The goal of the collages is to let visitors explore by color and navigate to the plate pages for more details so names of each flower were left off.

Home page

The home page has a limited purpose—to introduce the project and drive visitors to the main areas, so I kept the design fairly simple. Like other areas, the home page design went though several iterations. A design technique I’ve been using on previous digital editions is showcasing a random illustration as the hero image every time the page is loaded. I did this on the home pages of Illustrations of the Natural Orders of Plants, Iconographic Encyclopædia, and Picturesque Seats of Great Britain and Ireland. I like this approach because it showcases the variety of images available if someone visits the home page multiple times.

My initial ideas centered around showing a random lily paired with a random rose with simple large links to each collection. These designs ultimately didn’t work because they divided the attention too quickly and hindered the ability to focus on one thing to understand the purpose of the project. After I ironed out the design of the hero on plate pages, I decided to reuse that same concept on the home page hero with a few action buttons, followed by two large links to the lilies and roses collections. It’s a simple design but works well.

Breathing new life into illustrations

As I alluded to earlier, restoring images became a major part of this project—taking up around 80% of the overall work. Specifically, making the version of each illustration with a dark background required an enormous amount of manual work, but I enjoyed it. My early plans were to restore images with a clean white background and extract the flowers to be used for browsing. However, once I created a test hero image with a dark background, I was hooked and really wanted to see how all other images looked with a dark background—not just for the hero images but for the full plates.

So in mid-November 2023, I committed to restoring all 655 plates with both light and dark backgrounds and 11 months later, I finally finished. Let me explain why it took so long.

The first step in restoring the image was simply cropping. I cropped out the edges and text, focusing only on the illustration and any sketches. The calligraphy on each plate was beautiful but I wanted to focus on just the illustrations so text was not included in my digital edition.

Color restoration

Adjustment layers were used to fix the yellowed and aged colors so they look more vibrant and as true as possible to the original intent when they were illustrated. To achieve this, I needed to adjust the white balance by using the white point of an image. The white point can be found by using a semi-transparent threshold layer to highlight the lightest pixels. By default, a threshold layer is set to 255 and appears as a solid black layer. As the slider is moved, pixels that are lighter than the threshold turn white. I used a threshold layer set to 30% opacity, which made the entire image a transparent grey and then lowered the threshold level until I saw pixels turn from grey to transparent white. One of those pixels was the white point in a levels layer.

Next, the colors needed to be adjusted to fix the yellowing that happens with paper as it ages. I found that most images just needed some minor adjustments to the red and blue levels to fix this. Some images also needed an additional curves layer to increase the contrast a little.

Background replacement

Background replacement took the longest. Of the many options Photoshop offers to remove backgrounds, the manual approach worked best. I tried as many as I could find and devised a few of my own techniques but they fell short of the quality level I wanted. I wanted to preserve as many details as possible—and there were a lot of details.

Creating just a clean white background for every image would have been time consuming but not as bad because flowers were already drawn on lighter paper. The methodology for this would have been the same as what I did for the images in Illustrations of the Natural Orders of Plants—use a semi-transparent threshold layer as a guide to highlight the non-white areas and carefully brush them out.

The problem with this method is when a dark background is applied, a very visible white halo appears on all the edges because the edges were originally drawn on light paper. Since I wanted to add a dark background to all images, I had to find a way remove that halo or reduce is as much as possible.

Photoshop has some built-in tools that seemed promising but fell far short of my expectations. Three are illustrated above on a small part of Daisia iridifolia for comparison with the manual method and the original as a point of reference.

• Original is the original scan after basic color restoration.
• Magic wand tool selected a lot of the background pixels but the edges were still rough and it selected too many pixels on the thin stems.
• Background eraser tool worked like a brush tool and its name implied that it removed backgrounds but it really only removes similar colors. Its tolerance can be adjusted to find more or fewer similar colors but it still left behind a lot of other splotches of colors and made edges too blurry. Plus, it removed too much from the flowers since it only looked for colors and doesn’t know what the shape is.
• Select subject detected the main object from an image and selected it and while it didn’t leave behind too many splotches on the background, it was too greedy in selecting pixels and selected too much of the flower.
• Manually painting the background was the slowest but gave me total control over the smooth edges, tight corners, and thin stems.

This is just one image as an example. All of these built-in features faired much worse when finer details like leaf serrations, thorns, hairs, or roots were present. One method I came up with on my own got closer than others:

1. Select all contiguous background areas.
2. Create a dark solid color layer with the selection applied as a mask.
3. Invert mask so only the non-background areas show though.
4. Blur mask by about one pixel.
5. Adjust the curves of the mask sharpen the edges and reduce halos as much as possible.
6. Temporarily, apply thick stroke to the mask to highlight any errant pixels not selected in the first step.
7. Use the brush tool to on the mask to erase the highlighted errant pixels.
8. Remove stroke and touch up any remaining details.

This method worked pretty well on images with well-defined edges like the stems of Rosa hudsoniana but not rough edges like the leaves of Rosa brevistyla, Rosa cinnamomea, and Rosa orbessanea.

Every “quick” method previously described resulted in a significant amount of time needed to clean up all the edges and fine details. I tried using combinations of all of them for a couple months but none seemed more efficient than simply making the layer mask manually by carefully and slowly tracing along every edge. So that’s what I did for all 655 plates. No matter the complexity, I traced every flower, every leaf, every stem, every root, and every hair to preserve all the details and ensure that Redouté’s hard work looked as good on a dark background as it did on a light one.

The timeline above illustrates the time spent restoring and replacing the background of all the images in each volume. Earlier volumes took longer because I was designing and building out the website, figuring out efficient methods, and tackling a few personal issues. Once I settled into a steady schedule of spending every free moment I had on the project, later volumes were completed more quickly. The last volume of lilies had several more plates than other volumes and some of the most complex images, which is why more than a month was needed to complete it.

I’m not exaggerating when I say the process taught me new levels of patience. Some images took only a couple hours because they had long smooth edges, and not a lot of details.

Most images took several hours or sometimes a couple days, even if they had smooth edges, because they included many overlapping leaves or petals.

The most time consuming images had tedious details like complex root systems, tiny hairs, serrated leaves, hundreds of thorns, or thousands of leaves. Images like these took several days to complete…each. Below are some of the most complex and time-consuming images to trace and replace the background.

While the manual process took a while, I did find small ways to make it as efficient as possible. Below is a short video showing the pace at which I traced each image in real time. The display switches between a dark background and a light background with a blue overlay. The blue overlay is Photoshop’s brush preview mode which showed what would show through the mask. I was repeatedly flipping between the two using keyboard shortcuts to paint the edges.

The default shortcut for swapping foreground and background colors is the x key but since I’m left-handed, I remapped that to the / key so I could always keep one hand on the mouse and one hand on the keyboard with minimal movement.

For very complex areas like the leaves of the images mentioned above, I traced elements individually, selected them, then added them to the main mask.

In the images above:

• Red is the main mask representing what will be the dark background.
• Green is the area already traced to show through the mask.
• Blue is the brush preview of a separate mask, which I would usually trace out for a few leaves at a time, select, and then add to the main mask.

The final step of replacing the background was updating the small sketches included on many of the lilies plates. These sketches were done in black only so I cleaned them up as much as possible so they looked good on a white background, created copies, and inverted them so they appeared as white on the dark background. A few of them were mixed with the full-color illustrations but that just required some precise masking to ensure they looked good on both light and dark backgrounds.

As the above images hopefully show, restoring images was a substantial effort. Below is a full collection of every rose and lily to give a sense of scale.

Extracting flowers

After the background was replaced for each image, I created a separate mask for the flower or set of flowers I wanted to extract to use on the browsing pages. Most of the time, this was very straightforward because the flowers’ edges are well defined. I tried to isolate one full flower from each plate but sometimes had to isolate a group of flowers because one would be too tiny. The goal was to find a good representative image for each flower.

A handful of images had objects obscuring flowers like stems, leaves, or other petals. For these, I exercised my artistic freedom to “erase” these objects using Photoshop’s clone stamp or generative fill features. I tried to keep usage to a bare minimum and only needed to adjust a handful of flowers. The images shown on the plate detail pages always show the original unaltered image but the flowers on the browsing pages and collages show the altered versions. The generative fill worked quite well for this most of the time but sometimes the stamp tool and a bit of elbow grease worked best.

Transcribing descriptions

Redouté’s illustrations are clearly the focus of his collections but each one was also paired with a brief description about its characteristics. These descriptions are mostly consistent across all illustrations but have a few differences:

• Both roses and lilies:
  • Names (Latin, French, and occasionally varieties)
  • Various references to its nomenclature in other publications
  • A description containing a mixture of a general description, historical information, and observations.
  • Occasionally, a few footnotes are included to correct errors or provide more information
• Lilies only:
  • A line about additional family classifications
  • Enumerated explanations of the smaller sketches
  • An occasional additional general description about the family as a whole
• Roses only:
  • An occasional list of varieties of the rose with descriptions and/or nomenclature references

I couldn’t find these available as regular text anywhere online so I transcribed them from the original scans. Scans uploaded to the Internet Archive are usually run through OCR so a plain text version is available but the ones I could find were mostly nonsense. Unlike the scans of the images, the description scans were of a much lower quality, which probably contributed to the poor results.

Fortunately, and much to my pleasant surprise, macOS’s Preview did an excellent job recognizing even blurry text so I took screenshots of each page, pasted them into Preview, and copied the detected text. macOS’s Preview wasn’t perfect and I tried my best to catch all the errors but some may still have slipped by, which I will correct as I find them. Text was then pasted into simplified copy of Tiny that I run locally to edit it and format it into clean HTML.

One curiosity I didn’t understand was the presence of what looked like the symbol for Jupiter (♃). It only appeared in the history section lily descriptions and mostly in the first four volumes. It only appeared a few times in later volumes. If any reader knows the purpose of this symbol, please contact me and let me know. I’m interested in learning about it.

Designing posters

When I started this project a year months ago, I had the goal of creating posters of all the flowers in Les Liliacées and Les Roses. I wouldn’t know if they would turn out well until I finished restoring all the plates. It was a gamble, but one I was willing to take. The two types of posters I thought could be interesting would be one showing all plates of both collections in their entirety, and another of just the flowers in colorful collages.

The first and only one I made showing plates in their entirety was for Les Roses. The idea was promising and looked striking on the digital view of the poster but the printed version wasn’t great. All the details were lost and the text was so small that the dark color bled into it, making it difficult to read. The overall poster was also just too chaotic to digest. Showing them in numerical order also didn’t add any value. It was worth a try.

Two other early versions showcased the roses in a circular arrangement with a similar gradation to the interactive collage but without labels like a bouquet, and another trying to mimic the colors of some of the roses. I also applied the same collage of rose leaves to the background. Both were intriguing but still left me wanting more. The uneven distribution of flowers bothered me but I kept it them in the wings until I finished all the lilies images before trying different versions.

Since I built the interactive roses collage well before finishing the lilies, I had a lot of time to use it and I came to really like its arrangement so I wanted to create a similar design for a poster.

I naively tried to recreate it in poster form and add labels but seemed to forget the lessons I learned on my hummingbirds posters—the most important being: place the images first, then labels. I foolishly tried to position all the labels in the same position relative to each flower and tried a variation where I placed each flower with its label at the same time instead of all flowers first. The results were frustratingly subpar. Once I remembered my process for the hummingbirds posters, I started over again but with the interactive collage. After spacing those out to fit a poster layout, I placed the labels where they fit best and tried not to move the flowers much. The result was much better.

The lilies poster was substantially more complex because of the same challenges I encountered with the interactive collage but also because I needed to add 476 labels and wanted to try a different color arrangement. Rather than a blend from top to bottom like the interactive collage, which would have felt unbalanced in poster form with all the white lilies at the top, I opted to put all of them in the middle with the other color groups surrounding them. This proved to be a lucky choice because it allowed me to place the lighter shades of some colors closer to white the darker, more vibrant colors toward the outer edges.

With the lilies placed, it came time to add the labels. Given the lilies were packed so densely, I wasn’t sure that they would fit but I approached it methodically by placing each label in numerical order of the plates (label for the first plate first, second plate second, etc). This proved to be better than trying to label all the flowers from one edge to the other because it allowed me to place them evenly throughout the poster and make minute adjustments as needed. This way, I made adjustments evenly throughout instead of shifting everything toward one direction or another. Plus, placing them in numeric order allowed me to keep track of them and make sure I didn’t miss any. This process of adding labels can be seen in the images below which show the poster with no labels, first 100 lilies labeled, first 200, and so on until they’re all labeled.

Drag slider to see the progress of arranging the lilies poster labels.

The final poster turned out better than I expected. It’s dense, but the wide range of colors is clearly visible and all the flowers are labeled.

Making this “Making of…”

I don’t usually write about my writing process because I’ve never considered it particularly special but found this post interesting for a few reasons that I wanted to share.

When I started this project back in November 2023, I worried that I wouldn’t have enough interesting behind-the-scenes information to fill a blog post. This is a common worry I have with most blog posts, but especially this one because I thought the creation process would be relatively straightforward. Still, I pressed on and “scribbled” notes in a Google doc as I worked on it. These notes contain everything from other sites found during research, technical articles for building the site, inspiration, and anything else that comes up during the lifetime of the project. This has proven to be one of the most valuable ways for me to take notes over the years because it’s fast, free, and always available to edit on all of my devices. As I reached the end of this project, Google added tabs to docs, that allows for easier organization—a welcomed enhancement.

When I finished the project and it came time to write this post, I struggled to get started but after creating a rough outline and forcing myself to write anything, I became incredibly focused—spending days doing stream-of-consciousness writing during every free moment I had on any device that was available. Much to my pleasant surprise, I found more than enough to write about…and a long list of images to create as supporting material.

During writing, I added placeholders where I want to insert images. Then, after the first draft and basic edits were made in Google Docs, I converted it to clean HTML and added it to my site so I could preview it as I added images. In years past, I used to create a plethora of Photoshop files for these, which unnecessarily cumbersome to manage. In recent years, I’ve used Figma and it’s made a world of difference. Instead of dozens of disparate files to sort through, I create a single Figma file with pages for mockups, ideas, and images for things like this blog post. Plus, I can work on the images from anywhere instead of syncing files back and forth between devices. This isn’t a groundbreaking use of Figma but it has greatly improved my workflow over the years. However, I still found the need to use Photoshop to save images with better compression for the web. I usually export an image from Figma then use Photoshop to scale it down and save for the web. After all the images and their captions were been added, I re-read the post several times and making the final edits before publishing.

Soon after I completed both posters, I ordered test prints to see how they would look. To say I was pleased would be an understatement. The test prints turned out perfectly. The colors were incredibly vibrant, the text was very legible even though it was small, and all the details were showed up beautifully. Sometimes, smaller details get blurred but not this time. Setting my work in print never gets old. The digital world is so easily manipulated but printed materials have a finality to it and requires a commitment of time, money, and resources. Seeing these posters in person for the first time was a wonderful experience and a nice reward for completing the long 11-month project. The images I’ve posted above don’t do the posters justice. I wish I had a better camera to take closeup photos to showcase all the details.

Final thoughts

I have a bit of a love-hate relationship with long projects like this. I love that I have a goal that I’m slowly but surely working toward but hate that it takes so long to achieve it. I love knowing that I’ve got something to keep me busy but hate that I don’t make time for other projects. I love seeing the final result but hate when it’s over. A lot happened during this project and I’m excited for everyone to explore Redouté’s work in a new light.

Explore

Hummingbirds are the closest living descendants of dinosaurs like the T. rex—one of many fascinating facts I learned while working on the digital edition of A Monograph of the Trochilidæ, or Family of Humming-Birds. Gaining unexpected knowledge has to be one of the best parts about working on a project.

As has become common with my digital editions, I stumbled upon the subject matter by accident browsing through rare book catalogs online. It’s become an oddly satisfying pastime of mine to peruse them in the hopes of finding something that catches my eye and triggers a new interest.

Source material

Hummingbirds are fascinating animals and comprise far more species than I imagined. From their ability to hover in the air to their beautiful plumage, they are a standout in the animal world—so much so that many ornithologists of the past had a hard time agreeing on how they should be classified. Hummingbirds caught the attention of English ornithologist John Gould early in his career and he spent much of the later years of his life up until his death compiling an impressive catalog of them.

Gould published several monographs on birds but his greatest interest was focused on hummingbirds. He accumulated a large collection of hundreds of species and traveled around the world to see them while corresponding with other ornithologists about their own collections.

Between 1849 and 1861, Gould published one of his most famous works titled A Monograph of the Trochilidæ, or Family of Humming-Birds, comprising 5 volumes issued in parts and 360 strikingly beautiful illustrations of hummingbirds. Accompanying each illustration was a brief description of the bird that included details on its habitat, anatomy, behavior, and more based on his personal experiences with them and others’.The monograph is considered one of the finest examples of ornithological illustration ever produced, as well as a scientific masterpiece. Included in the lengthy introduction was also a complete list of 416 species.

A supplementary volume by R. B. Sharpe was published in 5 parts between 1880 and 1887 after Gould’s death with an additional 58 plates and many descriptions written by Gould before his death. Though Gould is often named as the main author and illustrator, his wife Elizabeth Coxen and Edward Lear are known to have contributed heavily, with Gould taking credit for their work.

Much to my pleasant surprise, the scans of Gould’s monograph available were some of the best scans I’ve come across for any project. They were high resolution, great quality, had great color, and no pages were missing. That alone motivated me to consider making a digital edition. Scans can be found on the Internet Archive, contributed by the Biodiversity Heritage Library, which has more details about each:

• Volumes I–V: Biodiversity Heritage Library
• Volume I: Internet Archive / Biodiversity Heritage Library
• Volume II: Internet Archive / Biodiversity Heritage Library
• Volume III: Internet Archive / Biodiversity Heritage Library
• Volume IV: Internet Archive / Biodiversity Heritage Library
• Volume V: Internet Archive / Biodiversity Heritage Library
• Supplement: Internet Archive / Biodiversity Heritage Library

Introducing a monograph

A key goal I had for this project was to find an interesting way to introduce the subject of hummingbirds to new visitors. I wanted to highlight the large variety of hummingbirds in Gould’s monograph on the home page as a way to engage visitors so I planned to create a murmuration that included a hummingbird from each illustration. Ironically, hummingbirds travel alone and not in flocks, but displaying them in a murmuration still felt like a fun design exercise.

As part of an early rough mockup for the home page, I created a wave-like murmuration of placeholder bird symbols. The idea was that the flowing nature of the birds would encourage visitors to scroll down and be introduced to the areas of the monograph. Even after cobbling together a rough working version, I enjoyed the experience of scrolling down and watching the birds shift back and forth with each new topic.

Happy with early results, I restored about 100 illustrations to see how it would look comprising the actual illustrations. One of the challenges I encountered in creating this graphic was positioning each illustration evenly. As far as I knew, there wasn’t an easy way to evenly distribute irregular shapes (hummingbirds) in another irregular shape (murmuration). However, there was a way to distribute a set number of points in an irregular shape randomly, which I could use as guides to start and then arrange the images manually.

To make the murmuration, I did the following:

1. Roughly outline the shape for the murmuration in Figma.
2. Export the shape as an SVG.
3. Import the SVG into NodeBox and position points inside the shape using the scatter node.
4. Take a screenshot of the points generated by NodeBox and import that into Figma.
5. Manually place an illustration on each dot.
6. Manually shift illustrations around so they’re evenly spaced.

While this involved a lot amount of manual work, it was a lot more efficient than guessing what the spacing should be on the fly. The random distribution of points calculated by NodeBox was enough to ensure that illustrations were spaced out enough at the start so there was minimal guess work in how much they needed to be spaced out for the final image. I used a similar technique to make the collage for British & Exotic Mineralogy where I started with a grid of points and then shifted them around methodically to find their final position.

I had to wait until I restored all the illustrations to make the final murmuration that featured a bird from each one. However, I also wanted to sort them by color, which created an additional challenge: how could I distribute 400+ illustrations evenly and arrange them by color efficiently? As I restored each illustration, I sampled the key identifying color from it and kept it in a database while I was building out there rest of the digital edition. Once I had those colors, I sorted them by hue and then placed them in that order during step five above. That way, when I spaced them out in step six, it formed a subtle spectrum starting from reds, purples, and oranges at the top and transitioning to yellows, greens and blues at the bottom.

At each curve of the murmuration is a highlight of the digital edition to explore: all the illustrations, Gould’s original introduction, and more information about the project. To ensure these stayed in the correct positions at all screen sizes when the murmuration graphic was was resized, I employed what I thought was a clever idea: I measured the rough vertical size of each curve and made sure each highlight always fit in that gap. The murmuration is always as wide as the browser so that governs the size of the section containing each highlight, which is measured in percentages and absolutely positioned in a container holding them and the murmuration.

<div class="overview">
    <img class="murmuration" src="…" />
    <section class="overview-section overview-title">…</section>
    <section class="overview-section overview-illustrations">…</section>
    <section class="overview-section overview-intro">…</section>
    <section class="overview-section overview-about">…</section>
</div>

At smaller screens sizes, highlights no longer fit nicely in the gaps but are still positioned on top of them while the illustration is faded so they’re more visible using gradient masks.

All illustrations included one or more hummingbirds paired with a unique plant and drawn against a lighter background of pastel colors. Quite a few included a scene from nature like clouds, water features, mountains, etc. I wanted to build on that and include something similar on the home page to give the large murmuration some depth and pay homage to Gould’s plates. I achieved this by including very faint images of clouds at the of the page and mountains at the bottom (which also appear at the bottom of all other pages). These images are unique because they were not taken from an illustration but generated in Photoshop with the new generative fill feature. Simple prompts such as “watercolor clouds” and “watercolor mountains” were used to generate them and they were blended into the background with some more CSS gradient masks. I have mixed feelings about AI-generated imagery but generating these images for this purpose felt like an interesting experiment that worked out well.

Browsing illustrations

Included in Gould’s monograph and supplement are 418 beautiful plates of illustrations of 422 species (some plates include multiple species) along with descriptions or other entries of a total of 537 species (not all species were illustrated). Some were described with a few sentences and others with simply a name and some references.

The monograph was organized so that the first volume included a lengthy introduction of more than 140 pages containing among other things, the preface, a list of subscribers, and general information on nomenclature, other publications, and anatomy of hummingbirds. After the general information, the bulk of the introduction comprised a complete list of all the species and illustrations with brief descriptions and references organized by genus and subfamily. The rest of the first volume contained 41 plates paired with longer descriptions and volumes 2 through 5 only contained plates with their descriptions. Plates were numbered in the introduction but those numbers were not included on the plates themselves, which made cross-referencing somewhat challenging for the average reader. The supplement included a brief introduction along with the remaining plates and descriptions.

One challenge I set for myself was to design a pleasant way to browse this complete classified list of subfamilies, genera, species, and plates. With so many beautiful illustrations available, I wanted to use them as a way to punctuate the long list and differentiate the genera and species mentioned. To do this, I gained a deeper understanding of its structure:

• The first volume was dedicated entirely to the subfamily Phaëthornithinæ.
• Volumes two through five covered the other subfamily, Trochilinæ
• The supplement was a collection of birds discovered since the first five volumes were published.

These three groups weren’t enough so I had to break them up into more digestible sections. Breaking it up by volume was the next logical grouping but even that wasn’t enough. Upon closer examination, I found that Gould included periodic descriptions that introduce groups of genera within the Trochilinæ subfamily within each volume in addition to at the beginning of each. These descriptions served as the perfect way to break the content into more digestible chunks:

• Volume I: Phaëthornithinæ
• Volume II: Trochilinæ and genera Eupetomena, Sphenoproctus, Campylopterus, Phæochroa, Aphantochroa, Dolerisca, Urochroa, Sternoclyta
• Volume II genera: Eugenes, Cœligena, Lamproæma, Delattria, Heliopædica, Topaza, Oreotrochilus, Lampornis, Eulampis, Lafresnaya, Doryfera, Chalybura, Iolæma
• Volume II genera: Heliodoxa, Leadbeatera, Aïthurus, Thalurania, Panoplites, Florisuga, Microchera
• Volume III: genera Lophornis, Polemistria, Discura
• Volume III: genera: Prymnacantha, Gouldia, Trochilus, Mellisuga, Calypte, Selasphorus, Atthis, Stellula, Calothorax, Acestrura, Chætocercus, Myrtis, Thaumastura, Rhodopis, Doricha, Tryphæna, Calliphlox
• Volume III: genera: Loddigesia, Spathura, Lesbia, Cynanthus, Cometes, Pterophanes, Aglæactis, Oxypogon, Ramphomicron, Urosticte
• Volume III: genera: Metallura, Adelomyia, Avocettinus, Avocettula, Anthocephala
• Volume IV: genera Chrysolampis, Orthorhynchus, Cephalepis, Klais, Myiabeillia
• Volume IV: genera Heliactin, Heliothrix, Schistes, Augastes, Petasophora, Polytmus, Patagona
• Volume IV: genera Docimastes, Eugenia, Helianthea, Heliotrypha, Heliangelus, Diphlogæna, Clytolæma, Bourciera, Lamphropygia, Heliomaster, Lepidolarynx, Calliperidia, Oreopyra, Eustephanus, Phæolæma, Eriocnemis
• Volume V: genera Cyanomyia, Hemistilbon, Leucippus, Leucochloris, Thaumatias
• Volume V: genera Amazilia, Pyrrhophæna, Erythronota, Saucerottia, Hemithylaca, Eupherusa, Chrysuronia, Eucephala, Panterpe, Juliamyia, Circe, Phæoptila, Damophila, Hylocharis, Sapphironia, Sporadinus
• Volume V: genera Chlorolampis, Chlorostilbon, Panychlora, Smaragdochrysis, Phlogophilus
• Supplement: additional plates

The design of each of these sections included three key parts: a banner showcasing a one of the plates featured within it, Gould’s original description, and a collage comprising each plate grouped by genus. Optionally, if there was enough room, an individual plate was also featured.

Each collage was custom designed to show all the plates in that genus in in a structured but organic layout adhering to an underlying grid. There were 14 collages in total and clicking a genus within each one takes visitors to a page with details of the species within that genus.

On the genus page is Gould’s original text with plates that were referenced in context. The original monograph only showed text and referenced plates by volume and number. Including an extracted image of a bird from each plate gives the reader a better idea of what to expect and makes reading the list more interesting.

Clicking each image shows a page for that plate including the original restored illustration, and its accompanying description. The splash of color behind the names is based on the key color sampled from the plate during its restoration. Each page also includes links to related species when they’re mentioned.

Splitting up the original lengthy classification list into these smaller chunks and using images to delineate them makes for a much more engaging experience and brings the beautiful illustrations to the forefront. Browsing a complete index can still be useful so an index of all plates was also provided. I designed this to be a simple alphabetical list.

I iterated through several designs for these pages before settling on the final design. Early designs included thumbnails of the full color illustrations instead of just the extracted birds, larger thumbnails, smaller thumbnails arranged in boxes of varying types, but none were enjoyable to browse. They were still good to try because elements from all of them lead to the final design.

Building on a concept

One of hummingbirds’ most well known abilities is hovering almost perfectly still in the air. This idea of elegant flight and is what inspired the visual elements of the digital design.

Chief among them was the subtle elevation applied to most elements. The boxes on the home page, the collages, the circles in the index, and the boxes around the species links all have a subtle but noticeable drop shadow that elevates them from the background—in a way, giving them flight. All the hummingbird thumbnails also slightly extend beyond their boundaries to give the impression that they’re in flight. Additionally, any time a visitor hovers over the thumbnail of a hummingbird, it appears to float a little much like a real one would. This effect achieved with some simple CSS transforms and blend modes and I feel it adds a nice touch.

Every time any page other than the home page is loaded, a random hummingbird also appears in the upper left near the name of the site and it too appears to float when hovering over it.

The typography is a subtle nod to the elegance of hummingbirds. Vidaloka is used for the display typeface and has a beautiful elegance that shines in large sizes—especially with ligatures like æ and œ. PT Serif is the workhorse used for the main body and works well for large blocks of text. PT Sans rounds out the collection for captions and references.

Giving a poster life

I had hoped to find an interesting way to showcase all of Gould’s illustrations on a poster but didn’t have concrete direction beyond that when the project started. Creating the murmuration for the home page gave me the idea to create one that would work well as a poster. Little did I know how much work would be involved.

At first, I wanted to try to make a realistic shape of a murmuration but after researching photographs and illustrations of murmurations, I struggled to find a way to easily experiment with shapes that would comfortably fit on a poster. Most photos of murmurations I found were beautiful but my attempts at imitating them left a lot to be desired. Then it dawned on me to try generating some shapes with AI and things started to click. I used Adobe Firefly and the prompt “curved murmuration in the sky” to generate a handful of images.

The results were fascinating and gave me the push I needed. After generating several images, I was most inspired by the one of the firsts that appeared—the greyscale one in the preceding set of images. Its general shape with elegant curves served as a good basis for the final shape.

To create the murmuration for the poster, I followed the same steps for the one on the home page but what I did’t previously mention was the prep needed to organize the files so they could be used efficiently in Figma and InDesign. Since I wanted to arrange them by color, I had to rename the files based on their order after sorting by hue. Then, import those files into Figma and InDesign. Interestingly, I found NodeBox to be most useful in prepping the files. Those more skilled than me could probably take care of this with a simple script but I used what I knew.

1. Generate a CSV of filenames and colors (e.g., 001-grypus-naevius.jpg,#c66135).
2. Import that CSV into NodeBox
   1. Extract the hue
   2. Sort files by the hue value
   3. Use concatenation to generate commands for a batch renaming file with numbers based on the new order (e.g., mv 001-grypus-naevius.jpg 043-001-grypus-naevius.jpg).
   4. Export the commands from NodeBox to a CSV
3. Clean up the renaming commands CSV and save as a text file.
4. Put a copy of all the images and the renaming file into a folder and run the renaming file.

Next, came the poster assembly but with some modifications for managing them efficiently in InDesign:

1. Import the murmuration shape into InDesign and size to fit the the poster.
2. Manually place an illustration on each dot (first image from left above).
3. Horizontally center all the illustrations and move to the side (second image from left above).
4. Manually place the largest images back on the image first, then progressively smaller images—rotating and resizing as necessary to fit (third and fourth images from left above).

Horizontally aligning images after they were placed was important because it allowed me to see the distribution of color based on the overall shape. Over the course of making many collages for past projects, I’ve learned that ensuring all objects fit is most efficiently done by placing the larger objects first. This horizontal alignment also made the larger hummingbirds stand out so they were easier to move over. As long as I kept them roughly in the same vertical position, the color gradient from top to bottom was preserved. I even added some faint clouds and mountains to the top and bottom to give the birds the appearance of flight.

Unfortunately, the poster felt lacking. While working on it, I wanted to know the name of each hummingbird. I tried adding a legend of all the genera under the title with the idea of numbering each bird but that wasn’t enough. I firmly believed adding a legible label to each bird would be impossible and require too much work. After all, it took hours just to get all the birds to fit comfortably on the poster on their own. However, after a week of being uneasy about it, I started adding a few labels to see what was possible. Much to my pleasant surprise, I was able to add a label to every bird and they were legible when printed on a standard poster size. The labels increase the visual density of the poster but they also make it far more enjoyable to explore. The process of adding them took a solid day to complete.

One final nagging thought stuck with me: “What about a dark version?” I couldn’t help but wonder if a dark version of a poster would look good. I thought it might but couldn’t be sure and there wasn’t an easy way to test it because all the images I had generated were JPGs. These worked fine for the first poster because I could set the blend mode to multiply in InDesign and the white background would disappear. I needed PNGs with transparent backgrounds for a dark version and those had to be created manually from the Photoshop files I created while restoring the images. The process took four extra days but I was able to prepare the PNGs and slowly got them in place. The result turned out better than I had hoped and the colors stood out even better than the light version. I liked both styles so they’re both available for purchase.

Final thoughts

This project turned out to be unexpectedly fascinating. Learning about the different types of hummingbirds over the two months spent on this project was great fun. The Loddigesia mirabilis and Topaza pella are some of my favorites with their long decorative tail feathers. I also enjoyed figuring out new ways of creating collages like the murmurations and I’m sure I’ll use those skills in future projects.

Explore the project

Fifteen years have passed since the last official update on my Metra Ticket Gallery. An update is long overdue considering the number of tickets has grown dramatically to nearly 1,400. It’s about time I gave a new one about the latest additions and improvements.

During the 19 years I’ve ridden on Metra, I’ve been very fortunate to get in touch with many other collectors who have made generous contributions to my collection. Even the staff at Metra itself have been kind enough to contribute to my collection several times and include my letter about my gallery in their 30th anniversary newsletter (PDF) back in 2014. I’ve enjoyed meeting everyone and hearing their stories about riding the train or cultivating their collections. I’ll admit, I’ve felt a little strange meeting up with people in train stations and restaurants to exchange unmarked envelopes for plastic bags—as if making a nefarious deal—but everyone has been wonderful and I’ve enjoyed every encounter.

With the launch of the Ventra app in 2013, digital ticket sales have increased steadily and while paper tickets aren’t going away any time soon, their long-term future is likely limited. I’ll happily continue buying the paper tickets for as long as they’re available—partly because I want to continue to add to my collection but also because they add a welcomed bit of physicality in an increasingly digital world.

Blast from the past

Since I’ve used each ticket from 2004 onwards, my interest trends toward older tickets from before I started riding the train. I still enjoy seeing each new designs as they come out each month but there’s something almost magical about seeing older designs from the 1990s, 80s, and even 70s from before Metra was formed.

The biggest highlight is from my most recent trade with Cory, a fellow collector. He has a very impressive collection and was kind enough to trade me some of his older tickets from the 70s and 80s for duplicates of mine from recent years.

Among the tickets I received from him were 10 Burlington Northern Railroad tickets from the 1978 and 1979 have quickly become some of my favorites for their bold and unique design. Metra wasn’t formed until 1984 so these tickets technically aren’t “Metra tickets” but I included them and other older tickets in the gallery because they’re monthly tickets from a train line that would eventually become Metra. Since the 90s, designs on Metra tickets have been very detailed with ornate patterns, illustrations, or photos but these tickets from ‘78 and ‘79 stand out for their bold simplistic design. I love the strong typography showing the valid zones of travel (A and B) and the splashes of color from the diagonal stripes on an otherwise plain design. Splashes of color made a resurgence from 2009 to 2015 with pastel backgrounds but they didn’t hold a candle to these early predecessors.

Also included in the tickets I traded with Cory were tickets from 1971 through 1980 from Burlington Northern and Chicago Northwestern trains. Until I saw these, I had only one ticket from 1973 of a similar style and longed for more. I was thrilled when I saw these other designs. The ones for Burlington Northern with the massive thin numbers were printed on very thick stock and have an ornate pattern behind them. The bold sans seif typefaces used are quite nice. The others from Chicago Northwestern are varying shades of pastels with a mix of serif and sans serif typefaces and include several large logos behind them.

A significant contribution to my collection came in the form of many tickets made for the turnstiles on the Metra Electric line (formerly Illinois Central). These tickets were magnetized and had a unique style that continued for decades. The ones I have in my collection range from 1981 through 2003 and have become a little fragile over the years as the magnetic material they’re printed on ages. More pictures and information available at Chicago Transit & Railfan.

For a brief period in the late 90s, monthly tickets featured detailed illustrations of many stations throughout the Metra system as well as when they were constructed. These are some of my favorites because of the beautiful detail that comes with the line-based style of illustrations. They only lasted for two years from 1997 to 1998 so not all stations were illustrated.

In the early 90s, ticket designs varied significantly with new typography and visual styles appearing each month. I can’t say these are some of my favorites but I recognize that this may have been in an effort to curb counterfeiting. However, I do enjoy some of the typography from the 1990s tickets. I owe a big thanks to fellow collector John for these and others.

Filling the gaps

Like many other Chicagoans, I stopped commuting into the city when the COVID-19 pandemic hit in 2020. Wanting to continue my collection, I contacted Metra to see if they could send me any old unused tickets each month. It was an unusual request and I managed to get one ticket but couldn’t get more. I resumed commuting in June 2021 for a new job but had a noticeable gap from March 2020 until then.

Fortunately, I contacted them again recently and they were able to help me fill in some of the gaps. A few trades with Cory as mentioned above also helped fill in others. The only month I’m missing from that period is April 2021 but I was very happy to fill in most of the gaps.

Design updates

When I first designed the gallery, I only had one of each ticket so I kept the design simplistic by arranging the tickets by year and showing one ticket for each month. As the collection grew and I started acquiring more variations of tickets, I continued showing one per month but displaying the variations of tickets when they were clicked.

This design worked fine but meant that a significant portion of the collection was hidden, including some of the more interesting designs. With the recent additions, I decided this was a good time to give the gallery a facelift to make the ticket designs more accessible.

The new design showcases all tickets for each year rather than just one for each month. Tickets are still shown in chronological order but also numerical order for duplicates and variations so changes in design are more easily seen. Thumbnails images are also larger than before and tickets can now be viewed as a slideshow to reduce the clicks needed to explore each design.

Future plans

When I started riding the train, I had no intention of collecting tickets and certainly never imagined that nearly 20 years later, I would have a collection approaching 1,400. It’s been a great journey over the years and I’m looking forward to continuing it. My sincerest thanks goes out to my fellow collectors and Metra staff that have helped me build my collection: Thank you John, Cory, Helen, Denise, Louine, Tom, Michael, David, Robert, Katie, Elizabeth, Michelle, and more whose names I may have forgotten.

I’m always on the lookout for more tickets so if anyone has any or knows someone who has any is willing to sell or trade, please let me know.

Unlike previous projects, I designed the poster based on Earhart’s 1892 treatise, The Color Printer before giving much thought to the design of the website. In fact, I wasn’t going to make a full digital edition but completing the poster made it so much more approachable and enjoyable.

Working backwards

My workflow for digital editions generally involves designing the website, building it, and then making a poster based on the materials and knowledge I gained while doing so. This time, I did the opposite because I wasn’t sure if a website would be interesting enough. I try to add something extra to each digital edition to enhance it beyond the original source material and early on, I didn’t have a good idea of what I could add to The Color Printer. In the end, the poster and website ended up influencing each other.

Source material

I first learned of Earhart’s treatise in August of 2020 when I was looking for inspiration after completing British & Exotic Mineralogy. In the years since then, I revisited it several times but never had the inspiration to work with it until recently.

During my research, I found three sets of scans for The Color Printer—all at the Internet Archive and for reference, have numbered them based on the order in which they were found: scan #1, scan #2, scan #3. None of the scans was without its flaws but they complemented each other to serve as a reliable set of source material.

Designing the poster

The goal was to include all the colors Earhart created in the poster. His engravings for each set of colors (full base colors, mixtures, tints, and overprinted colors) were beautiful and made his treatise stand out from other, which typically used simple squares or rectangles. He designed these to showcase how a single color can take on different appearances based on whether it was printed as a solid color or with lines of varying thickness—also called half-tone, quarter-tone, and tint lines.

Using these to represent the colors on the poster sounded like a fun idea but I didn’t want to spend the time photoshopping hundreds of the same image in different colors from the original scans. Instead, I decided to recreate each of the as vector graphic shapes. This way, I could more easily adjust the colors and have more control over the quality of how they appeared.

The results turned out great and the line thicknesses had a similar affect on the colors as the original at smaller sizes: thicker lines made colors appear darker while thinner lines made them lighter.

With these shapes created, I experimented with layouts. Early versions are rarely pretty but it’s important to start somewhere. Before I started sampling colors, I needed to determine if all the shapes could fit comfortably on a poster and a good layout quickly presented itself.

A tangent about tools

Again, breaking from previous workflows, I used Figma for the poster’s design instead of my usual tools of Illustrator and InDesign—probably the smartest decision I made for the project. I’ve been a slow adopter because of my long history with Adobe tools but have become more and more familiar with Figma in the last few years out of curiosity and professional necessity. For this poster, Figma was the only viable tool. I used Illustrator to create the color shapes because Figma’s vector editing still feels foreign and lacking but managing the layout in Figma was so much nicer than anything I could have hoped to achieve with Illustrator or InDesign.

The shapes were highly detailed and with so many in one document, management and performance often becomes a serious issue with Adobe products. Illustrator could have probably handled it but InDesign chokes with too many vector objects that aren’t imported as external files. InDesign has useful styling capabilities but Illustrator doesn’t. Neither have the features like auto layout, components, or instance overrides like Figma.

If I used Illustrator or InDesign, I would have had to create a hundreds of Illustrator files (one for each shape and color) and import them into InDesign. Then, spend a lot of unnecessary time arranging them into rows and columns with labels—something I’ve done many times for past projects. Even with InDesign’s spacing tools, this can be a painful process without something like auto layout because it’s very repetitive. Figma made this much easier because I made a component for each shape and used a lot of auto layout containers to keep shapes spaced evenly while I resized them.

I made numerous spacing and formatting adjustments and seeing them automatically take effect made the editing experience very enjoyable. Plus, Figma handled all the complex shapes perfectly and performance never suffered. As someone who group up with MS Paint, I’m continually amazed at what’s possible—especially in a browser. I can only hope that if Adobe’s acquisition of Figma goes through, these useful features make their way into Adobe’s other products.

That beautiful title

After settling on a basic layout, I focused on the title for a bit. The original cover of The Color Printer had a ornate gilded title that was too beautiful to replace with a stock typeface so I set out to recreate it as a vector. Initial attempts at using Photoshop to create a raster graphic and Illustrator to generate a vector automatically were substantially subpar and they not suitable for use on a poster. Instead, I created a vector shape from scratch. The spirals were a bit challenging but I was pleased with the result.

Colors

The next hurdle was getting the colors right. Restoring antique colors is not an easy task—especially when attempting to restore printed colors in a digital medium. Since there wasn’t a single point of reference for how they looked when originally printed, I took some liberties to achieve a modern interpretation that is as true as possible to what I thought Earhart intended. The first plate for each of the three scans has base colors 1–12 that were mixed for all the other colors. A comparison between these showed that there were noticeable differences between them.

Colors naturally age over time so the challenge was finding a way to restore these and all others consistently. I didn’t want to restore them to be too bright and vibrant but instead, retain a little of the antique feel to them while giving them more vibrancy. This meant that the same color adjustments I made to the first 12 should also be made to all the other plates because they were mixtures made from them. My goal was to use simple adjustment layers in Photoshop without manually adjusting individual colors.

I initially liked the results from #1 the best but the green looked too teal and when the adjustment layers were applied to other plates, those colors looked too unnatural. I couldn’t get the green to look more green without negatively affecting other colors. The colors for #2 were so far off that I couldn’t find a comfortable set of adjustments to make all the colors look nice. The green looked better but the blues, yellows, and purple were far too bright and saturated. I finally settled on the colors from #3. They appeared closest to what I assumed Earhart would have produced but with a little aging still visible. The green is slightly less green than #2 but the rest of the colors aren’t oversaturated and appear distinct enough from each other.

I thought a fun experiment would be to use Mixbox to mix the 12 base colors based on Earhart’s mixture ratios to produce new digital versions of the mixtures. Mixbox is an intriguing color mixing code library that mixes colors digitally but as if they were pigments for printing. The results were interesting as illustrated below but were different enough from my own color adjustments in Photoshop that I decided to stay with my own.

Looking at swatches of the colors I manually sampled from each scan, the differences between each one are noticeable.

As a true test, I applied the adjusted colors from each scan to the poster and #3 felt the most natural. As an extra adjustment, all colors are set on a light cream background and have their blend mode set to multiply so they blended well with it and didn’t appear too bright against it. This process of sampling and applying colors was tedious because they needed to be sampled and applied one at a time but the work was worth it to find a set that looked best.

Faux overprinting

I couldn’t find a blending mode that accurately reproduced the effect of printing one color over another. Mixbox got close but not enough, so I also sampled each overprinted color from the scans. Each set of shapes representing overprinted colors was actually three separate shapes with no overlaps: two for the separate colors and one for the overlapping color, which was an intersection of the two shapes. The shapes for the separate colors are not the full shapes but the shape with the other subtracted from it.

Test prints

After what felt like endless adjustments an fine tuning, I ordered a test print of the poster to see if the details would appear okay and the text would be legible. I was pleased with the result but was also pleased to see that there was plenty of room to make most elements larger for legibility. So I bumped up the sizes of nearly everything, darkened the background color to make it more visible, and ordered a second test. Unfortunately, the second test came back blurrier than I would have liked, despite uploading what I thought was a high enough resolution (18000×16000 at 300ppi). It was clear there was some double printing so the problem wasn’t with the image I uploaded. I argued with Zazzle for a bit and eventually got a reprint. However, that still wasn’t great. I was about to give up hope and consider a redesign that didn’t rely on so many fine details but ordered one final test print—not of a raster image but of an Illustrator file. I exported an SVG from Figma, sized it Illustrator and uploaded that file to Zazzle. In hindsight, I should have done that to begin with but I didn’t because large raster images have worked for me in the past. Regardless, that did the trick and the final test print looked fantastic. All the details looked excellent as seen below.

Designing and building the digital edition

While waiting for the test prints to arrive, I mulled over the idea of creating a complete digital edition. Considering I had all the assets from the poster and the treatise was relatively short at around 230 pages, I figured it could be a nice side project to accompany the poster. Once again—breaking my pattern of thinking the reverse: that the poster would accompany the digital edition.

Organization

Earhart’s treatise only comprised a handful of chapters and 90 numbered plates of illustrations. Other illustrations were scattered throughout the text. The plates were spaced unevenly throughout, requiring the reader to do a lot of searching to find the plate being referenced. One goal for the digital edition was to place plates and illustrations where they were referenced in the text so they were easier to examine in context. Another was to consolidate some of the shorter chapters into single pages. I organized the book into five sections:

• Colors & Mixtures (home page): Introduction to the project that also contains the full lists of mixtures, tints, and overprinted colors from the first part quarter of the book.
• Complementary Colors: A shorter chapter with optical experiments for determining which colors are complementary.
• Harmony of Colors: The longest page with guidance for determining which colors work harmoniously when printed and a complete list of all the plates and their illustrations.
• Combinations: A complete list of the 3,600+ color combinations listed near the end of the treatise with added color swatches.
• Printing: A combination of the shorter sections at the end of the treatise covering job composition, printing presses, rollers, inks, papers, tail pieces, initial letters, and embossing.

Typography

For page titles and headings, I chose DM Serif Display to complement the original decorative title. They are never very close to each other in the design so the similarities don’t clash but instead, it carries the title’s elegance throughout. Bitter was used for body copy, both large and small, because it felt like a nice modern interpretation of the original typeface used. Its large x-height and thin weight kept it nicely legible for large blocks of text and I enjoyed the little bit of character in its italic style. Figure captions and asides were set in Alegreya Sans—a typeface that quickly became one of my favorites along with its related families when working on Iconographic Encyclopædia. It’s old style numerals and great legibility at small sizes made it complement the other typefaces nicely.

Reusable shapes

Having created most of the necessary shapes for the poster, I wanted to find a way to use them efficiently online. The best approach I found was to use SVG symbols where each shape defined in a single large file. To achieve this, I combined all the parts of a shape in Illustrator into a single compound path. Every stroke was outlined so it would scale to the size I needed and clipping masks were used to slice shapes.

The final compound shape was then exported as an SVG and put into a symbols.svg file with the other shapes. Each path had a currentColor value added to the fill so it would work with the color I assigned it in the CSS later on. The values were extremely long due to the complex shapes but ended up being about the same file size as if I exported the shapes as an SVG without converting them to compound paths.

The great part about this approach is it gave me a single place of reference for all shapes instead of loading separate files or trying to inject a large amount of SVG code into my pages. Each symbol was then referenced using a simple HTML snippet:

<div class="mix-img c19">
    <svg aria-hidden="true" width="665.77" viewBox="0 0 665.77 279.47">
        <use href="https://www.c82.net/images/color-printer/symbols.svg#mix"></use>
    </svg>
    <div class="mix-num">19</div>
</div>
<ul class="mix-parts">
    <li><mark class="hl hl-base c1">1 part of 1</mark></li>
    <li><mark class="hl hl-base c4">1 part of 4</mark></li>
</ul>

Things got a little hairy with some of the shapes as I’ll get into later but this worked well and made generating the lists of mixtures, tints, etc., much easier and didn’t negatively affect browser performance.

Color system

Hundreds of colors were generated for this project so a way to manage and apply them efficiently was key. I used a system similar to what I used on Iconographic Encylopædia—scoped CSS variables. All colors were defined in a separate CSS file that was broken into two sections: color values and scoping.

The section for color values had all the hex codes for each color. Most were named for the ID Earhart assigned to them (e.g., --c1: #ff2b27 for red, which had the ID of 1). Then, in the scoping section, I set the scope for that variable based on a class with the same name and the necessary foreground color when text was on it (e.g., .c1 { --accent: var(--c1); --foreground: #fff; }). This allowed me to use var(--accent) in my main CSS file to apply the color assigned to an element as long as it had the appropriate class.

For example, see the HTML snippet above for mixture #19. It uses the c19 class, which maps to the following:

.c19 { --accent: var(--c19); --foreground: #fff; }

Then, var(--c19) maps to the color #ff513d. The CSS for the mixture shape is as follows:

.mix-img {
    margin-bottom: 0.6em;
    position: relative;
}

.mix-img svg {
    color: var(--accent);
    display: block;
    mix-blend-mode: multiply;
    width: 100%;
}

.mix-num {
    color: var(--foreground);
    font-size: 2rem;
    left: 50%;
    line-height: 1;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.mix-parts {
    display: flex;
    font-size: 1rem;
    justify-content: center;
    list-style: none;
    margin: 0;
}

.mix-parts li { margin: 0 0.3em; }

The var(--accent) variable is applied to the SVG color which turns the shape reddish orange and var(--foreground) makes the text white. My colors CSS file is several hundred lines long because of all the different colors and two lines needed for each but it’s a manageable system and makes applying colors anywhere as easy as setting a single class on an element.

Highlights

Something fun I wanted to add was an icon next to colors where they were mentioned to reinforce what was being described. I was going to use simple circles but that felt too plain. Throughout the treatise, there were several categories of colors mentioned—each with their own shapes (rings for full base colors, diamonds for mixtures, etc.)—so I decided to use symbols corresponding to those plus a few others. The poster originally used simple circles below each illustration and I liked how they looked on the digital edition so the poster was updated to use the same symbols.

I marked these up using the <mark> element and used the same color classes from before to represent the colors mentioned:

    <mark class="hl hl-base c1">Red</mark>
    <mark class="hl hl-base c2">Orange</mark>
    <mark class="hl hl-base c3">Yellow</mark>

The color wheel on the Harmony of Colors page was the basis for most of the colors discussed there so I used rounded rectangles, which were somewhat similar to the rounded wedges. Metallic colors like gold didn’t have official shapes so I used circles with an added shine. The addition of these highlights made for busier text in some spots but I felt it helped more than it hindered.

Texture

As I did for the poster, all graphics and colors are set to mix-blend-mode: multiply so they blend with the cream-colored background—giving them a slightly warmer feel. Wanting to take this feeling a bit farther for the digital edition, I also applied a very faint noise texture to every page. Finding the right balance so it didn’t feel annoying took some trial and error but I thought it worked well. The faint texture on all the colors also makes them feel a little more tangible—as much as that’s possible in a digital edition.

Metallic specimens

Two sections of the original Harmony of Colors chapter showcased how metallic colors can be printed with other colors. The first was three plates showing how they looked on red, green, and black enamel. These images required extra care to adjust because their original colors were largely a guessing game. I used the colors from scan #3 as a guide and adjusted the colors from scan #2 to match because the latter was of a higher resolution.

The other section showcasing metallic colors was plate 62, which demonstrated how red, blue, yellow, gray, and black interacted with gold bronze when printed in solid colors, halftone lines, and tint lines. Reproducing these shapes in SVG seemed overkill, so at first, I was going to simply adjust the colors in Photoshop and post the plate as a large image. This nagged at me because reproducing them felt achievable even though it would involve a lot of extra work, so I spent extra time creating the SVG shapes for them.

First, I reproduced the basic shapes in SVG. Then, I had to understand how they were printed. The text describes the overlapping colors as follows:

In the first cut they are perpendicular; in the second, horizontal; in the third they run diagonally from the right, down to the left; and in the fourth they run diagonally from the left, down to the right, so that when the four cuts are printed over one another, each color is plainly visible; especially so if the reader will examine any one of the figures on Plate 62 with a small magnifying glass.—Earhart, The Color Printer

This means that the four different cuts were used in the same order for any given color combination. For example, yellow on blue on red on gold produced the following pattern:

Like with the overprinted colors, I couldn’t simply overlap the SVG shapes and apply a blending mode like multiply because that produced colors that don’t match the original scans. I had to sample the overlapping colors from the scans and set the color to just the overlapped areas to them.

The catch was that accurately representing overlapping colors meant that I had to employ the same technique as the overprinted colors and create separate SVG shapes for each overlapping combination. With each specimen comprising 1–4 colors, that meant 1–15 shapes for each one and a total of 31 SVG shapes in the symbols file—each one with a very long path. This meant many shapes were needed to accommodate all possible combinations of shapes: 1 for a solid color and 15 each for halftone and tint lines. Each specimen is a combination of 1 to 15 of these shapes stacked on top of each other with a color applied.

Finally, once I got the shapes set up, I organized them in a way that resembled the original scan with some basic modifications like the highlight icons and the position of the smaller groups. All this work generated hundreds of lines of HTML, a lot of SVG code, and nearly 1,000 lines of JSON for how shapes were combined. As I expected, this was overkill for squares that only measure 70×70 pixels but I’m pleased with the results—even if they are buried near the bottom of the lengthy Harmony of Colors page. The final specimens also looked very similar to the original scan, which was a nice bonus.

Pyrenees Mountains

A fun section to bring to life was the series of prints made for the Pyrenees Mountains. Earhart created 11 plates—each with a different color printed in sequence on top of each other (impressions), resulting in a final image surrounded by a gray frame. I cropped these images and added a slider below them so readers can watch the image come to live in a brief flipbook-like animation.

Combinations

Toward the end of Earhart’s treatise is a list of thousands of two- or three-color combinations that he considered good, very good, or excellent. This list was systematically organized by principal color (e.g., combinations with red, yellow, blue, etc.) and included both base colors and mixtures as principal colors. The combinations were listed as regular text with numbers referring to the colors created earlier.

Of course, I couldn’t simply reproduce the list as ordinary text. This was a list of color combinations without the colors. I had to see what all these colors looked like to see why he classified them the way he did. After a bit of elbow grease, I transcribed the numbers into a spreadsheet and played around with ideas for a single comprehensive chart to visualize them. However, I quickly realized that there were just too many (3,683 combinations) to produce anything visually interesting without looking messy. Below are some early attempts at visualizing the 2,275 two-color combinations.

Ultimately, I opted for clarity over cleverness or artistic endeavors and reproduced the list in its entirety with swatches added so readers can see what each combination looks like.

Final thoughts

Switching things up and working on the poster first was a fun change of pace. Even though I didn’t plan on turning this project into a full digital edition, I’m glad I did because it gave me a chance to try new things and I’m really pleased with the results. This is now the fourth project I’ve created that focused on an antique color guide—the first three being Werner’s Nomenclature of Colours, Goeth’s Colors, and 17th Century Watercolors. There’s just something fascinating about digging through antique color guides that never ceases to pique my interest.

Explore the project

Architecture has repeatedly grabbed my attention since I was young—from studying it in high school and creating buildings in video games to designing websites for firms winning architectural awards. It’s fitting that my interest is piqued once again for a digital edition of one of the oldest and most well known architectural publications: Palladio’s treatise, The Four Books of Architecture.

Palladio’s treatise must have come up dozens of times during my research for other projects but it never caught my eye. For reasons that escape me, it finally did and I had a great time learning about its long history while creating its first digital edition.

Finding source material

First published in 1570 as four volumes (“books”) The Four Books of Architecture was an architectural treatise written and illustrated by Italian architect Andrea Palladio covering a broad range of topics influenced by the Greeks and Romans. It is often regarded as one of the most important, influential, and most studied architectural publications. Subsequent editions were often released as one publication containing all books but occasionally only featured parts of a single book. Apart from a brief preface, the treatise’s books contain succinct explanations and guidance on architectural design complemented by more than 200 plates of engravings illustrating the concepts and structures described.

The first edition I found on the Internet Archive was the 1738 English edition by Isaac Ware, hailed by its own author and others as the first most faithful translation from the original Italian version with engraved plates truest to the original.

Of note are Ware’s remarks in his preface, which include strong opinions about two of the English editions that preceded his:

The first, and in all respects the best of the two, was done in the year 1721 by Mr. Leoni; who has thought fit not only to vary from the scale of the originals, but also in many places to alter even the graceful proportions prescribed by this great master, by diminishing some of his measures, enlarging others, and putting in fanciful decorations of his own: and indeed his drawings are likewise very incorrect; which makes this performance, according to his own account in the preface, seem rather to be itself an original, than an improvement on Palladio.

The other work (published in the year 1735) is done with so little understanding, and so much negligence, that it cannot but give great offense to the judicious, and be of very bad consequence in misleading the unskillful, into whose hands it may happen to fall.

—1738 Edition by Ware

I can’t help but enjoy the sharp-tongued eloquence of these two criticisms. They both set the stage for the author’s promise of his own efforts:

To do justice therefore to Palladio, and to perpetuate his most valuable remains amongst us, are the principal inducements to my undertaking so great and laborious a work; in executing of which, I have strictly kept to his proportions and measures, by exactly tracing all the plates from his originals, and engraved them with my own hands: so that the reader may depend upon having an exact copy of what our author published, without diminution or increase; nor have I taken upon me to alter, much less to correct, any thing that came from the hands of that excellent artist.

From the same motive I have chosen to give a strict and literal translation, that the sense of our author might be delivered from his own words.

—1738 Edition by Ware

These three translations were just a few of the dozens that were published. During my research, I found a few useful lists of all the editions that were published. The lists include mostly editions of The Four Books of Architecture but they also include others.

• Internet Archive: List of available scans of Palladio’s works
• Architectura: Bibliography of most editions, some with links to scans
• Center for Palladian Studies in America: Archived page listing Palladio’s works

I compiled my own combined list of the entries and included it on the About page of the digital edition to supplement highlighting what I considered milestone editions.

Choosing an edition to use as the basis for my digital edition was influenced by Ware’s comments and the introduction to the first modern printed edition by Dover Publishing in 1965. Dover’s introduction supports Ware’s claims of being the most faithful. With these comments in mind, I chose to base mine on Ware’s 1738 English edition, which was also the basis for the 1965 modern printed edition.

…remedied by a faithful and accurate reproduction of the original plates, and an exact translation of the text. The man to accomplish this was Isaac Ware.…The edition came out in 1738 and can certainly be considered a successful accomplishment. Indeed the accuracy of the reproductions is amazing.

—1965 Dover Edition

Interestingly, based on the lists above, there’s a large gap in publication for the 1800s. There were dozens published between 1570 and 1800 but I wasn’t able to find any after that until the modern editions started with Dover’s in 1965. I wasn’t able to find a reason for this or determine if I missed them somehow.

Setting goals

With the source material chosen, the next step was to decide on an approach to the digital edition that provided an improved experience to the printed editions. The goal was to make exploring the plates easier while reading the accompanying text.

One of the challenges with most previous editions is the order in which plates and text are placed. Plates always appeared after their text but not immediately, so keeping track of plates and their correspond text was difficult. For example, Book 4 starts of with 10 pages of text comprising chapters through part of chapter 8, followed by the 10 plates they referenced. Chapters 8 and 9 follow, but the latter is again interrupted by more plates. Plenty of page-turning is required to see a plate and its description at the same time.

The digital edition ensures that all plates for a chapter are visible at all times (on larger screens) and accessible via in-context links available on all screen sizes.

As with my other digital editions, a secondary goal was to create posters based on Palladio’s work for those that might like a souvenir after exploring it. I designed five posters—one for each book that included a collection of illustrations it contained and a fifth as a comprehensive visual outline of the entire four books. I’ll go into more detail about them later in this post.

Creating the design

Symmetry and proportion play a big part in Palladio’s work (Palladianism) so I attempted to pay homage to that in my design of the digital edition. The most prominent example of this is the home page design, which showcases a simple title flanked by links to the four books, akin to how Palladio designed his villas with a large central structure connected by hallways to smaller structures on either side. The title takes up half the width and the columns of the links are a fourth. The site’s navigation also has a connection to this concept with its title in the middle of two navigation lists.

These design concepts are only showcased on larger screens because of the available screen real estate. Proportions are still a large part of the site’s design on all pages.

Palladio’s books comprise chapters—many of which reference accompanying plates. As stated in my goals, I wanted to keep these plates visible when reading on larger screens, so those chapters with plates are split in half with text on the left and plates on the right. The plates stay visible while scrolling through each chapter and only scroll out of view when moving to another chapter. I used a similar technique on my Byrne’s Euclid and Illustrations of the Natural Orders of Plants digital editions.

Since the number of plates vary for each chapter, they’re scaled to fit on the screen based on how many can fit in a square grid. For example, if there are two to four plates in a chapter, they’re shown in a 2×2 grid, if there are five to nine plates in a chapter they’re shown in a 3×3 grid, and so on. The most plates in a chapters is 16 so the grid only needed to grow to 4×4.

Exploring the detail of the plates is key so they’re clickable to launch larger versions for zooming in. The original 1738 edition included plate references in the margins where they were described and I kept these as part of the design but made them links to also launch the larger versions so readers can use either method for exploring them.

Each book is quite long so a table of contents was necessary to jump around on a page and serve as another method of exploration. I chose to implement a design similar that used on my Iconographic Encylopædia digital edition which uses a block-based approach to show the outline. This design was also influenced by the poster that showcases the entire outline of the four books.

Restoring illustrations

Palladio made his 213 engravings on wood and Ware later reproduced these as engravings on copper plates. The amount of detail included in both is impressive, especially considering they were created by hand without the aid of modern technology. Ware’s plates were also mirror images of Palladio’s. I wasn’t able to find a definitive explanation for this but assume it’s because his method of engraving involved tracing the original, which when printed from an engraving, would create a mirrored image.

The largest scans of Ware’s engravings I could find on the Internet Archive were a decent size (1879×3000) but I would have preferred them to be larger to see more of the fine detail.

The restoration process was a nondestructive one that I’ve refined in several past projects. While some automation helped, plenty of manual work was still required to prepare the scans for the way that I wanted to use them. The goal was to remove the background so all that remained were the lines of the illustration itself.

Drag slider to see the progress from start to finish.

The steps involved were:

1. Straightened and cropped roughly
2. Added hue/saturation adjustment layer to convert to greyscale
3. Added levels adjustment layer to set the white point based on the lightest area
4. Added threshold adjustment layer with 30% opacity as a guide for which pixels are pure white
5. Added levels adjustment layer and lower the highlights point of the slider just enough to turn the lightest pixels pure white. This couldn’t be moved too far to avoid washing out the whole image. Repeated for the next lightest areas with masks they only affected the desired pixels.
6. Added curves adjustment layer to darken the whole image. Repeated for specific lines that needed darkening.
7. Added a white color fill layer with a mask and used the paintbrush to hide out all the remaining unwanted pixels of the background that couldn’t be removed with adjustment layers.
8. Turn off threshold layer and crop to edges

The penultimate step of using the white color fill layer to hide remaining unwanted pixels was the most time-consuming because adjustment layers can only do so much without negatively affecting the image. It was necessary because without it, the images would have appeared to have spots or dirt when displayed on the site.

Images were saved in greyscale so I could set their blend mode to multiply in CSS with mix-blend-mode: multiply to make them appear yellowed without changing the colors of the images themselves. I prefer this approach for greyscale images because it allows for adjusting the background color and lets me offer images for download in a neutral palette without creating new files.

I briefly entertained the idea of redrawing each illustration as vector graphics in Illustrator (digitally “re-engraving” if you will)—naïvely thinking that it would be an entertaining task with great results. However, after completing only half of one plate, I decided against it because the process wasn’t enjoyable and the plates weren’t in high enough resolution for me to make out some of the finest details. I also felt that restoring the original plates would be more appropriate.

Formatting text

Typically, I’ve been able to avoid retyping text for digital editions but this time, that wasn’t the case. Retyping everything by hand was the most efficient. The Internet Archive had the full text available, but it was run through OCR which, apart from the usual tradeoffs, added many extra spaces and incorrectly converted the long s’s ( ſ ) to f’s. The time it would have taken to clean up the generated text would have been much more than simply retyping everything. Plus, chapters were fairly short and by completing one chapter at a time (retype chapter 1, restore its plates, retype chapter 2, restore plates, etc.) the process was broken into small enough chunks to avoid being onerous.

I decided to make a few minor changes to the text to make it more legible for its modern format—namely updating the old style spelling. For example:

• Replaced each long s ( ſ ) with a lower case s
• Used modern spellings (e.g., chuse → choose, expence → expense, fabrick → fabric)
• Removed unnecessary abbreviations (e.g., finish’d → finished, fell’d → felled, shelter’d → sheltered)
• Removed apostrophes from pluralized words ending in vowels (e.g., loggia’s → loggias, portico’s → porticos, palestra’s → palestras). There were a few spots where both versions of a word were used such as in book 4, chapter 16 where both “cavettoes” and “cavetto’s” were used in the same paragraph.

For the typefaces, I chose Crimson Pro for body and display text and Alegreya Sans for smaller text. Both felt easy on the eyes and Crimson Pro had just enough character in its italics to stand out without being too showy. The light weight worked best rather than the regular weight. Names were written in small caps in the original text and while Crimson Pro didn’t have a small caps variant, I decided to keep this part of the typography because it still worked without appearing too garish. Both were also designed for longer texts and stayed readable at most sizes.

Designing posters

Designing the posters was a bit of an adventure. When I first found The Four Books of Architecture during research for other projects, I assumed that no part of it would work well as a poster. There were too many detailed images that couldn’t be organized in interesting ways.

However, after working on the table of contents design for Iconographic Encyclopædia, I thought a similar grid-based approach could work as a poster for Palladio’s work, where an entire outline could be shown including every book, chapter, and part of a plate. Trying to fit the entire plate for every illustration on one poster simply wouldn’t work because the dimensions of each plate vary and there’s too much detail but I thought it would be interesting to focus on a key identifiable aspect of each one. Before I restored all the illustrations, I spent a little time putting together a first rough draft and the results were promising.

The first draft was a start but lacked a focus and blocks blended together too much. A particular challenge was finding a way to comfortably display the title box while keeping it aligned with the grid. There were only a handful of sizes that would work with the number of boxes in the entire poster. To help with this, the grid of blocks is made using one large text box in InDesign and wrapping its contents around the title box. This let me resize the grid, change styles, and reposition the title box while the blocks would reflow around it instead of moving them one by one manually. This method was temporary for finding a layout that worked. The final result would be arranged manually to ensure a precise layout.

For the second draft, I tried a vertical orientation and more prominent blocks for books, chapters, and its title. Both the orientation and grey colors felt off but the red colors for the books worked.

The third draft was the first time that I felt I had zeroed in on a format that worked with bold, dark blocks for the chapters.

I briefly thought the dark colors overshadowed the illustrations and tried a version with them but felt it was a step backwards to the problems with the first version.

A problem with these early versions was the placement of the red book blocks, particularly the one for the second book. The blocks were ordered left to right, top to bottom, and the second book’s block always ended up near the right edge, which felt strange. I tried a few more variations including a vertical flow with the title at the bottom, which felt disorienting.

It wasn’t until towards the end of the project that I tried something more radical and entered the title and all the text in each block—trying once again to pay homage to Palladio’s love of symmetry. To my pleasant surprise, it worked well.

I started working on the visual outline poster very early on in the project and filled it in as I completed restoring each image. Working on it this long allowed me to fine tune many aspects and try new ideas, which paid off. It was also the only poster I was planning to make until I became familiar with the contents of each of Palladio’s books.

As I built out the digital edition, I thought that it would be fun to create posters for each of the primary collections discussed in each book: orders of columns from the first book, houses from the second, bridges from the third and ancient temples from the fourth.

Each one presented its own challenge. I wasn’t any real order to how the houses, bridges, and temples were discussed in the books so I chose to arrange them in a simple aesthetically pleasing way.

The first one I created was for the second book, showcasing houses or villas designed by Palladio around Italy. The images for these were so varied that finding an arrangement that worked was the big challenge. I opted for arranging them roughly by scale—using the size of the doorways as a rudimentary guide.

Second came the ancient temples. Several of these were created by combining two illustrations into one—one half being an external view and the other being some level of an internal view showing its structure. A floorplan was included for when an elevation or two halves weren’t illustrated.

Third was the poster for bridges. There were only nine bridges illustrated but the proposed design for the Rialto bridge (which was never built) spanned two plates, which I combined into one. This large plate served as a great anchor for the poster.

The final poster I created was the one for the five orders of columns: tuscan, doric, ionic, corinthian, and composite. It’s different from the others in that includes the brief descriptions for each order and full plates as they were engraved. These are Palladio’s own words as translated by Ware with no edits. Four plates were created for each order except for corinthian, which had an extra one. I chose to only show the four that matched the style of the others.

Final thoughts

I’m very pleased with this digital edition and the final collection of posters. They’re a great way to explore Palladio’s amazing work and Ware’s impressive efforts to reproduce and translate them. The entire project took about six weeks to complete. I was surprised to find that a digital edition of Palladio’s work didn’t exist beyond scans and was excited to have the opportunity to create this one.

Explore the project

I work best with existing material—whether that be images, ideas, spreadsheets, documentation, books, etc. That material defines the boundaries I need to create something more. When I stumble across a nice chunk of material (like a unique old book), excitement really sets in. This is what I felt when I found Nicolas Bion’s treatise on mathematical instruments from 1709.

During my usual perusal through antique book dealer websites (doesn’t everyone do this?), Bion’s book caught my eye because it was short compared to my past projects and integrating its illustrations presented an interesting design challenge.

Research

As I’ve done for every project, I conducted research to learn more about the original treatise. This first step can be a roller coaster of emotions as questions get answered and more are raised. Is the book important? What’s known about it? Who’s the author? Is it one of a kind of part of a series? Which edition is best? Has anyone else done anything with it?

The edition that caught my eye was the first English translation for sale on Biblio, titled The construction and principal uses of mathematical instruments. The description revealed that its author, Nicolas Bion, was an engineer and tool-maker, it had some significance, and that there were other editions. However, not much was revealed about its translator, Edmund Stone, or the other editions. A quick search for more info led me to Stone’s Wikipedia page, detailing that that he likely lived in poverty—unfortunate considering his talent. I also came across the personal website of Gordon Bell, a former Microsoft researcher, that lists books that he owns—including the first English translation of Bion’s treatise. His description gives a little more insight into Bion and Stone. Interestingly, Bell states that, “Bion interpreted ‘mathematical’ broadly for the work contains information on devices used in a variety of scientific and engineering fields.”

After reaching the authors, I was hunted down scans of each edition. I like to know how many editions have been published to get as sense of how a book has evolved and which one is the best to use. The treatise’s Wikipedia page was of little help beyond confirming some dates and titles but after digging, I found scans for each on the Internet Archive and Google Books.

Pictured above from left to right are the title pages from each edition:

• 1709: French, 1st edition
• 1716: French, 2nd edition
• 1723: English, 1st edition
• 1725: French, 3rd edition (alternate scan)
• 1752: French, 4th edition
• 1758: English, 2nd edition 1972 reprint

The final edition comprised nearly 500 figures of mathematical and scientific instruments and their uses across 30 plates. References to them were sprinkled throughout eight main topics called “books” and a supplement—each containing several chapters.

During this research, I learned that Stone added additional chapters that detailed additional English instruments to books one, four, and six in the first English translation. He also wrote an extensive supplement for the translation’s second edition detailing modern instruments which included four additional plates of supporting illustrations. This second edition was also seen as the most complete and authoritative among the others so I chose to use it as the basis of my project.

Design

Unlike my previous digital editions, which were designed have a more antique feel, I wanted this one too be more modern, but still a few nods to its antiquity.

Typography

As is evidenced in my past projects, I’m partial to serif typefaces so choosing the right sans-serif typeface was a bit of a challenge, but one I forced myself to undertake to try something different. After trying a few, I found that DM Sans available from Google Fonts was very legible for large blocks of text and had both modern and old feeling to it that worked well—modern because it was much newer than Bion’s treatise but old because it’s reminiscent of older geometric typefaces like Gill Sans.

DM Sans worked well for body copy and headings but I needed another to highlight the figure labels referenced throughout the text. Later on, I would slightly regret making this decision because of the amount of time needed to format these labels one a time by hand. Initially, I used Source Serif Pro but felt its combination with DM Sans was difficult to read and hurt more than it helped. I ended up switching to Zilla Slab, a slab serif typeface, because its modern feel blended well with DM Sans. The italic style also had a bit more character, which helped lower case letters stand out more. Using a red accent color also helped the labels stand out without being distracting and connected with the same color used in the figures.

Color

Bion and Stone didn’t use any colors in their original books beyond a little on the title pages, but I opted for a single vibrant accent color combined with a very soft and subdued background similar to the 1723 and 1725 editions. Just for fun, I also added a faint texture to the background to soften the colors even more. It’s nothing more than a simple random noise texture made in Photoshop with about 10% opacity.

It wasn’t until I was about halfway through creating this digital edition that I decided to include a dark mode as an additional experiment. Instead of using a standard greyscale palette, I chose a rich dark blue that I refer to as “midnight.” The red accent also had to be brightened a bit to offer sufficient contrast. I wasn’t sure if I’d like the dark mode since I’m not usually a fan of them in general, but found that I really enjoyed using it.

Layout

For a while, I’ve wanted to experiment with a layout that makes heavy use of an underlying grid, including visible gridlines as borders. This seemed like the good project for experimenting with that idea. The layout pattern I chose to go with was faintly visible borders around key areas and within each was an underlying 6+8 compound grid with some padding around it. It’s not the same as adhering to a strict grid for the entire layout but the main “blocks” of the layout use this underlying grid.

I also needed to find a way to integrate the figures into the text rather than relying on readers referencing plates. I encountered the same challenge for my Iconographic Encylopædia project but because the plates were so rich and beautiful, I chose to keep the plates and only integrate tiny versions of each figure that expanded when clicked. The plates in Mathematical Instruments weren’t as decorative and it was organized with distinct passages for every figure so I didn’t want to use the same approach.

Early experiments were focused on the first chapter of the first book. Of the variations I tried, I preferred the ones that spaced out the text when figures were referenced in the text rather than treating the figures as secondary by having the text always wrap around them. The figures also appeared frequently enough in spots that it didn’t make sense to try to force this to work.

I took a block-based approach where I designed several layout templates for each scenario the content required based on whether the figure was square, wide, or tall; whether the text was long or short; and how many figures were referenced. Occasionally, two or three figures are referenced at once so blocks were needed for those as well. In total, 10 layouts were created to accommodate all the references to figures and headings in the treatise.

Added focus was put on the figures by making them extend beyond the boundaries of their surrounding text while still adhering to the grid and giving them a subtle shadow. This, combined with the headings to separate sections, created a nice visual cadence to pages, regardless of how many figures they contained.

Transformation

As always, the most time-consuming portion of a project like this was the process of transforming the original materials into their online form beyond just scans. Fortunately, after spending 13 months going through this process for my Iconographic Encylopædia project, which clocked in at around 3,000 pages and 13,000 figures, the Mathematical Instruments treatise paled in comparison with around 300 pages and 500 figures and only took a month. Still, it had its own nuances that could not be easily automated.

Extracting the figures was relatively simple and was done using the same process used on those from the Iconographic Encylopædia, the details of which are outlined in its making-of blog post. The only modifications I made to them was changing the letter labels to red to match the accent color and a connection could be made to their mentions in the text.

Cleaning and formatting text ate up the most time but I still found it enjoyable. The scanned text was initially converted by the Internet Archive as part of the scanning process and was integrated into its viewer so text that appeared on the scan was selectable so I could copy it instead of manually typing it—a very helpful start. As I’ve done for previous projects, I customized an instance of the TinyMCE editor with some formatting options and keyboard shortcuts. Using the editor allowed me to quickly apply formatting without manually typing HTML.

The process for formatting the text one chapter at a time was:

• Copy the chapter’s text from the Internet Archive into the editor.
• Correct any obvious misspellings.
• Replace instances where the long s ( ſ ) was incorrectly interpreted as an f, l, etc.
• Apply formatting to figure labels, which are the red letters referencing notes in the figures
• Add special symbols
  • Typographical: curly quotes (‘ ’ “ ”) and accented characters (é, á, etc.)
  • Mathematical: equations, prime symbols (′, ″), and arithmetic (×, − etc.)
  • Astronomical: celestial bodies (♃, ♄, ☉︎ etc.) and signs (♐︎, ♋︎, etc.)
• Italicize text to match the original (proper names, publication titles, emphasis)
• Add links to other chapters or publications when referenced
• Fix spacing around punctuation
• Review the generated HTML source from the editor to correct any additional misspellings I missed on the first pass

During this process, several interesting patterns in the writing style emerged—likely because the treatise was published in the eighteenth century:

• Nearly every noun was capitalized. Example: “On the first Face of this Rod are placed two Diagonal Lines…”
• The word “it’s” was used as possessive form rather than a contraction. Example: “…divide each of the four Sides of it’s Faces into two equal Parts…”
• Periods were not included after honorifics. Example: “Mr Picart, and other Frenchmen of the…”
• Conversely, periods were used liberally at the end of headings, dates, and table labels. Example: “…in a Treatise published at London, in the Year 1702. called the Sea-Man’s Practice…”
• In addition to emphasis, italicized text was used for most proper nouns including people’s names, cities, buildings, and planets. Example: “…long ago by Sir Isaac Newton, as appears in…”
• Several common words were abbreviated with apostrophes like “thro’” instead of “through” and “fix’d” instead of “fixed.” Example: “…these will all pass thro’ the Poles of the World…”
• The long s ( ſ ) was regularly used. Example: “This to me is a ſufficient Proof of the Exactneſs of that old Inſtrument.”
• The word “et cetera” was written as “&c.” Example: “A Line of Numbers of but one Radius, which is numbered 1, 2, 3, &c. to 10…”

Over the years, the long s and &c. abbreviation have become two of my favorite antique stylistic trends. They used to make older text difficult to read but I’ve seen them so much that they’ve become second nature. A while back, I tweeted that “&c.” should be brought back because it’s delightfully cumbersome and I still believe this. I thoroughly enjoy the long s because it looks great in italics and it’s fun to use.

After all the text for the treatise was formatted, the penultimate step was to correct the remaining misspelled and non-misspelled words. As I made my way through each chapter, I kept a running list of words that were incorrectly digitized from the scans into other words but were spelled correctly (e.g., “flood” instead of “stood” and “mail” instead of “shall”). This mistakes occurred due to the normal imperfect nature of digitizing text but also because the long s looked so much like an “f” or “l” and other common ligatures were misinterpreted. A standard spellchecker wouldn’t find these but I could search through all my code and review them manually to make the necessary corrections. I identified about 140 of these words.

The final step was to run spellcheck on each chapter. The simplest way to do this was to copy the text on each page, and paste it into Word as unformatted text, and change it to light grey so the red lines under misspelled words stood out. I then searched through all my code to correct each misspelling so that by the time I got to the final chapters, few corrections needed to be made. To my surprise, after all the manual editing preceding this step, very few corrections needed to be made.

Assembly

Even though I did some initial design early on, it was only enough to get the ball rolling. I didn’t create mockups of every screen—just key parts to get my vision “down on paper.” A good portion of the design was developed while I formatted the text and populated the content. I’ve done this for most of my projects because it allows me to see how everything feels with real content and use it like others would.

For example, the home page underwent several revisions because the more I used it, the more I realized a reader’s needs were different from my ideas. For example, I thought a creative layout with representative figures for each chapter would be fun to browse. The reality was that it was tedious and made the structure difficult to understand. Plus, some chapters didn’t have figures. For another design, I tried to embrace the fact that chapters’ lengths and figures varied with an adventurous grid-based layout but it looked far too cumbersome and was even more difficult to understand than the earlier attempt. I ultimately settled on a much simpler layout with one representative figure per book and a simple text listing of each book’s chapters. This subtly showcased the variety of content while keeping it easy to understand.

The layout and typography was also constantly tweaked as each chapter was added. I built my own little module for handling the aforementioned block-based sections so making changes was efficient and didn’t necessitate editing every page manually.

Creating the dark mode was a fun extra project because I hadn’t coded one myself before. I’ve designed and used them but never implemented one. I built upon a basic example from CSS Tricks that also taught me how to base mine on a reader’s system preferences. This way, the site loads light or dark mode based on a reader’s preference but lets them override it using the button in the upper right if they prefer.

Since the figures were in greyscale, I was able use the same image files for both light and dark modes by using CSS filters to invert them and adjust their hue to maintain the red accent. It was a fun trick that only works in some situations like this where the content is known and controlled.

:root {
    /* Light mode */
    --img-blend: multiply;
    --img-filter: none;
    --img-opacity: 1;
    
    /* Dark mode */
    --img-dark: screen;
    --img-dark: invert(100%) hue-rotate(-172deg) saturate(540%);
    --img-dark: 0.8;
}

.fig-thumb img {
    filter: var(--img-filter);
    mix-blend-mode: var(--img-blend);
    opacity: var(--img-opacity);
}

Posters

Since the beginning of this project, I wanted to make a poster of the figures from the original treatise but my plans changed about halfway through. The initial idea was to include every figure on one poster with labeling but that wasn’t feasible due in part because there wouldn’t have been enough room for everything to be legible and because the majority of them weren’t useful or interesting without context.

There were two types of figures illustrated in the treatise: instruments and diagrams. The instruments were more elaborate and an interesting view on centuries-old tools. The diagrams were annotated guides on how to use them that were most useful when read alongside the written descriptions. I chose to only include the instruments in the poster to keep it manageable, legible, and interesting.

The biggest challenge was finding a way to arrange all the figures comfortably. There are only 208 physical instruments but arranging them with their names and grouped by the books in which they are referenced required a lot of experimenting. I started with a horizontal orientation but couldn’t find an arrangement that sat well with me. A vertical orientation felt more natural and came together more easily. The style closely mimiced that of the digital edition—including a dark variation.

Reflections

This was another labor of love. The entire project took about a month and I had a great time working on it. No one asked for it but I wanted a fun design experiment and it did not disappoint. I forced myself to go a bit out of my comfort zone to design something more modern than previous projects and was very happy with the results. I hope others enjoy it as well.

Explore the project

Way back in 2014, a Dutch manuscript about mixing watercolors from 1692 made a splash in the blogosphere, because while it was centuries old, few had given it much attention and it was such a beautifully preserved thorough account of how watercolors were mixed back then. Ever since then, I thought it had potential as a fun project but avoided creating one due to language barriers and other reasons that turned out to be unfounded.

Source material

The manuscript, titled Klaer Lightende Spiegel der Verfkonst, was written by Dutch artist A. Boogert and contains details about mixing (tempering) “pure” colors to create many others for painting. It’s impressive not only because its nearly 900 pages are handwritten but also because of its thorough systematic nature of mixing colors in specific ratios and providing details on how to create them.

Following a 2-page poem written for and about Boogert’s intended audience, the manuscript contains a 73-page introduction about the colors to be mixed and two “books” that make up the main body of its content.

The first book illustrates the effects of diluting 42 “pure” colors with varying amounts of water. Results were painted on numbered plates, each containing three samples of each color with the same amounts of dilution and paired with a description of the mixing process. Among the 108 total samples, are a few plates of blue, yellow, silver, and gold shown with only 1 or 2 swatches because there was little to no effect of dilution.

The second book is the heart of the manuscript, which contains a thorough account of mixing pure colors with each other according five specific ratios, which were represented on each plate showing the results of mixing two of the pure colors in five ratios (1:1, 2:1, 3:1, 1:2, and 1:3). Not all pure colors were suitable to be mixed but Boogert meticulously detailed the effects of mixing 31 pure colors in nearly every combination, resulting in an impressive 323 plates and 1,615 total samples. Additionally an index of 365 repeat samples referring to each of the numbered plates was created.

The only known copy of the manuscript is held at the Bibliothèque Méjanes in Aix-en-Provence. High resolution scans of it are available on their site, Bibliothèque numérique and at the Internet Archive with the title, Traité des couleurs servant à la peinture à l’eau.

Erik Kwakkel, a medieval book historian at The University of British Columbia in Vancouver first posted about the manuscript in 2014, describing it as “an unusual peek into the workshop of 17th-century painters and illustrators” and “a feast to look at.” Thanks to his post and likely due to the manuscript’s beautiful colors, it quickly gained popularity, being featured on sites like Open Culture, Gizmodo, and Colossal, which is where I first noticed it.

Deciphering the manuscript

My interest in antique books was in its infancy back in 2014 and my first digital edition wouldn’t be created until four years later but the book lingered in the back of my mind as something interesting to investigate later. Eight years and many projects later, with a healthy interest in antique books, I looked at Boogert’s manuscript with new eyes. I considered creating a project based on it shortly after completing the digital edition of Werner’s Nomenclature of Colours, but originally decided against it because I didn’t speak Dutch and at nearly 900 pages, it felt too large and daunting. The latter became moot by comparison after completing Iconographic Encyclopædia, which took 13 months and weighed in at a hefty 3,000 pages. Language was the remaining barrier.

To date, I’ve only used source material written in English simply because it was the only language I spoke. Boogert’s manuscript intrigued me to the point of wanting to see how much I could decipher on my own and with the help of others. The hand painted colors were also so beautiful that I felt compelled to create something based on them.

Erik’s blog post and others’ were a helpful start in understanding the basics of the manuscript but didn’t dig deep enough for what I need when I take on a new project. I like to absorb everything I can about source material, its author, and anything else that has been written about it so I have a deeper understanding about its purpose when it was created. Unfortunately, very little came up in searches for it.

My initial plan was to transcribe the text and use Google Translate to get a basic sense of what was written but even getting to that point proved challenging because the handwriting was difficult to read and I wasn’t familiar with any Dutch linguistic nuances, especially from the 17th century. I was constantly wondering if the words I transcribed were even accurate.

For example, it took me a while to figure out that what I thought was the letter “c” was really the letter “e” in most words. The long s was also regularly used and while I’ve become used to it from other projects, it’s similarity to “f” in handwriting and even “l” still took effort to understand. Other challenging letters included “h,” “n,” and “r,” which all looked similar. Words would also often be broken to a second line without hyphens or run together with others inconsistently. The handwriting was beautiful but quite challenging!

Getting nowhere, I reached out to anyone who might be able to provide more info or help with the translation. I emailed Erik because he mentioned the manuscript was to be the subject of a PhD study, contacted a few Dutch translators on Fiverr and publicly asked for help on Twitter. The responses lead to some interesting results. On Twitter, Elmine Wijnia pointed me toward Transkribus, which specializes in handwriting recognition from old texts. It had a hard time with the manuscript but it will definitely be a useful tool for future projects. Ian Johnson was kind enough to offer his father’s services who is a medievalist specializing in old and middle English and middle Dutch.

Most importantly, he found an article by Truusje Goedings that provided a wonderful detailed analysis of Boogert’s manuscript (Dutch, English translation). This proved to be a lightbulb moment because even though it was in Dutch, running it through an online translator was enough to provide me with the insight I needed to understand the manuscript’s purpose, structure, linguistics, and even a bit about Boogert. After absorbing this information, Erik informed me that the author of the PhD study he mentioned was Truusje Goedings, the same author of the article. This led me to assume the article was a precursor to the study or the study itself. Either way, it was just what I needed to take the next steps.

Key among the insights was the part where the article described the names of the colors in the manuscript:

Dat waren volgens hem 39 kleuren: zes soorten zwart, drie soorten wit waaronder zilver, vier soorten blauw, tien soorten geel (inclusief goud), vijf soorten groen, negen soorten rood en twee soorten bruin. Ter vergelijking: Goeree noemde in zijn Verlichterie-kunde 37 kleuren.

Omdat zij de structuur van Boogerts boek bepalen, volgen hier de rond 1690 in Delft gangbare ‘Namen der kleuren’, nodig om ‘alles seer natuerelijck naert leeve te konnen schilderen, af te sette en te kleure’. Dat waren ‘Swart: lamp swart, been swart, wyn rancke swart, smeekoole swart, broot swart, oosstinjen int; Wit: loot wit, schilp wit, schilp silver; Blauw: indijgo, blauw ascus, lack moes, smalt; Geel: lighte schijt geel, bruijne schijt geel, masticot, gitte gom, hooge en laage geele operement [2], geelen oocker, geel beesije, safferaen, schilp goudt; Groen: spaens groen, gekrisstallijseert spaens groen, berght groen, sapgroen, tervart; Roodt: fermilioen, meenij, roon operement of rust geel, Root krijt, Roon oocker of bruijn root, lack, bresijlje verf, varrembock verf (pernambuco), orlijaen verf; Bruijn: bruijnen oocker, bitter of roet uijt de schoorsteen.

This states that Boogert organized 39 colors into seven groups (blacks, whites, blues, yellows, greens, reds, and browns) and lists the names of each. However, the colors listed in the article vary a little from the manuscript and even there, they were written in slightly different ways in some parts. For example two pages in the introduction list all the colors to be mixed:

These colors are also repeated with some slight variations at the top of each page facing a set of painted swatches where they describe how a pure color was diluted or they were mixed with other colors.

I cataloged these and came up with 42 colors in the order they appeared in both books:

• Blacks: lamp swart, been swart, wijn ranke swart, broot swart, smeekoole swart, oosstinjensen jnt
• Whites: loot wit, schilp wit, schilp silver
• Blues: indijgo, ascús, lack moes, lack moes met potas, smalt
• Yellows: lighte schijtgeel, bruijne schijtgeel, masstijcot, gitte gom, geele oprement, hooge geele of oranje operement, geelen of lighten oocker, beesij geel, saffraan, schilp goudt
• Greens: spaens groen, gekrisstallijseert spaens groen, berght groen, sap-groen, tervart
• Reds: fermilioen, menij, roo operement of rúst geel, root krijt or roo daerden, roon oocker of brúijn root, florentijnse lack, bresijlje oúdts verf, bresijlje verf met potas, farrenebock hoúdst verf, farrenebock hoúdst verf met potas, orlijaen verf
• Browns: brúijne oocker, bitter of roet úijt de schoorsteen

Feeding these into online translators didn’t produce great results. Fortunately, one of the translators on Fiverr, Wessel Vink, took a personal interest in my project and while he wasn’t able to decipher the challenging text himself, pointed me to the Dutch translation service, Bureau glossarum, which provided the translations I needed. Both Wes and the team at Bureau glossarum were wonderful to talk with, affordable, and incredibly helpful. The translated results are:

• Blacks: carbon black (soot black), bone char black, vine black, bread char black blacksmith’s char black, East Indies ink (carbon black)
• Whites: white lead, white shell, silver shell
• Blues: indigo, sky blue, litmus, litmus with potash, smalt or cobalt glass
• Yellows: light stil de grain yellow, brown stil de grain yellow, massicot, gum resin, yellow orpiment, high and low yellow orpiment, yellow ochre, stil de grain yellow, saffron, gold shell
• Greens: verdigris, crystallized verdigris, malachite green, sap green, green earth (terre verte)
• Reds: vermillion, minium, red orpiment or rust yellow, red chalk, red ochre or brown red, shellac, brazilin paint, brazilin paint with potash, maverick (young bull) paint (ox blood), maverick (young bull) paint (ox blood) with potash, annatto paint
• Browns: brown ochre (umber), creosote or chimney soot

I would have loved to translate the entire manuscript into English but it would have been prohibitively expensive and like many of my projects, this was a passion project which means there’s no funding beyond my own wallet. It would be fantastic if someone eventually had the resources to translate it in its entirety.

Data and design

While seeking out translations, I started thinking about what kind of data could be extracted from the manuscript. The colors themselves were an obvious choice but after learning about the book’s structure, I wanted to know more about the mixtures. The second book was structured as listing a list of all the mixtures but for one color at a time. For example, all the colors mixed with bone char black, then all the colors mixed with white shell, etc. but never mixing the same two colors twice. Essentially, it was listing the values in from a matrix diagram as if all the colors are listed on the horizontal and vertical axes, so that’s what I made to start.

Before I began this process, I was under the impression that all colors were mixed with all others but this was not the case. Only 31 were mixed and not all with each other. Working on the matrix inspired me to turn that into the focal point of the project and make it interactive as well as turn it into a colorful poster. To my knowledge, no one had taken the time to list all the colors that were combined in the manuscript, let alone visualize them.

I noticed two curiosities during this process:

• There was no plate numbered 113 and no indication that it was skipped or removed from the scans. The register/index at the end of the book supports this because the numbering goes from 112 to 114.
• Plates 261 and 262 are listed with the same color combination (oranje operement and brúijne oocker) but have different results. For this reason, I assumed that plate 262 was supposed to be labeled as a combination of oranje operement and bitter of roet úijt de schoorsteen which is consistent with the systematic organization of the rest of the mixtures.

I started designing the poster by playing with rough ideas about how to include a large matrix on it. Early attempts were uninteresting but after stumbling upon the idea of a roof-shaped matrix diagram from the Data Viz Project, I found that rotating it 45° proved to be the most intriguing. I also tried to remove rows and columns for pure colors that weren’t used in mixtures but that lead to an inaccurate diagram so I opted to keep them in to represent the entire book more fully and accurately.

Each cell with an “x” on the matrix diagram represented one combination of two colors but also five mixtures in specific ratios, which were listed on the page facing each mixture. For example, plate 130 and its accompanying description shows the mixtures of sky blue and massicot (a type of lead oxide) and swatches numbered 1 through 5 representing the mixing ratios:

1. One part sky blue with one part massicot
2. Two parts sky blue with one part massicot
3. Three parts sky blue with one part massicot
4. One part sky blue with two parts massicot
5. One part sky blue with three parts massicot

To represent these colors, I used a simple stack of rounded rectangles in a similar layout to the original plates, but with added overlap. My hope was that by doing this for each cell, the result would be a very colorful diagram that blended from one color into the next.

Thus began a lengthy process of extracting all the swatches and generating a hex code for each. I decided to select the hex code manually rather than taking an average of all its colors because many swatches had variations in coloring due to aging and I wanted to find the best representative value. Cropping all 2,088 swatches into individual images and extracting the hex codes took about 4–5 days of work.

While collecting the data, I used NodeBox to generate the initial version of the matrix diagram to experiment with its nuances like sizing and spacing. My process was to crop images and generate hex values for 10 plates at a time and feed them into NodeBox and watch the diagram get filled out. This felt magical in a sense because I felt like I was painting a picture with centuries-old data that had never been seen before in this way. During this process, I also found that they were difficult to distinguish on a lighter background so I opted to use a darker background to help them stand out more.

The result was really intriguing, satisfying, and begged to be made interactive. I wanted to be able to select any cell and see the original painted swatches. The SVG from NodeBox would have required a lot of manual editing to make it manageable in a browser and generating my own SVG felt like it would have been more complicated than it was worth so I kept things “simple” and recreated the diagram using plain HTML and CSS. The diagram is ultimately just a grid of cells rotated 45° but in order to get it to align and behave as I wanted, I built it using nested unordered lists and flexboxes rather than using grids. The basic structure is:

<ul class="wc-matrix">
    ...
    <li class="wc-row">
        <ul>
            <li class="wc-cell wc-pure" data-color="Bone char black" style="background: #090906;" data-plate="2">
                <span class="wc-cell-title">Bone char black</span>
            </li>
            ...
            <li class="wc-cell wc-mix" data-color1="Bone char black" data-color2="White shell" data-plate="43">
                <span class="wc-swatch" style="background: #2f2f2f;"></span>
                <span class="wc-swatch" style="background: #323232;"></span>
                <span class="wc-swatch" style="background: #575757;"></span>
                <span class="wc-swatch" style="background: #636262;"></span>
                <span class="wc-swatch" style="background: #4f4f4f;"></span>
            </li>
            ...
        </ul>
    </li>
    ...
</ul>

Everything was also based on relative values so it’s fully responsive. For example, just two variables control the all the sizing:

--gap: 2px;
--cell: calc((100% / 42) - var(--gap));

When these were combined with aspect-ratio: 1 / 1 set on the main container to ensure a square layout, the rest of the CSS for alignment, positioning, color, etc. fell together fairly nicely. One line of CSS with three transforms rotated and positioned the matrix: transform: scale(72%) translateX(-32%) rotate(45deg). Interestingly, more CSS was needed to create the legend than the matrix diagram.

Data that powers the diagram comes from two JSON files: one for the pure colors listed along the left side and another for the mixtures.

The final result is a fun diagram that allows for each mixture to be clicked to see the original painted swatches.

Posters

While working on the visualization, I was also thinking about what kinds of posters could showcase the beautiful colors Boogert created. I knew I wanted to showcase all the colors in several ways and each presented its own interesting challenges.

I used InDesign for all three posters because it allowed me to link images rather than embedding them (thus keeping the file size down) and still perform admirably with so many images on one page—something I discovered when creating my British and Exotic Mineralogy poster.

My original plan for a poster of the matrix diagram was to show the same diagram but include images of the actual swatches for each color rather than a flat color like the legend on the interactive diagram. This proved problematic because trying to import so many shapes into InDesign at once triggered some safety measure that prevented it. However, it let me paste them piecemeal. Even so, the shapes would have been so small that using the textures on the swatches would have been too small to be worth the effort so I kept the poster simpler by using the hex values and focusing on the overall picture made from all the mixtures.

Determined to create a poster with images of all the swatches, I chose a simpler design for the second poster that replicated the design of the original plates and displayed them in the order they appeared in the manuscript. The top portion shows plates of the pure colors and their dilutions when available. Below each mixture of colors is a pair of swatches and numbers indicating the pure colors that were blended to make them. Creating this poster was a very manual process, requiring each image to be placed by hand but also relied heavily on object styles for efficient minor global adjustments.

In addition to posters focused on being informative, I was very interested in creating one that was more decorative but still based on the underlying data. I had been following many generative artists on Twitter for a while and they inspired me to try creating more abstract images with no words to explain them. I was no stranger to creating abstract images after having cut my teeth on fractals years ago. After a first few unimpressive attempts showcasing various arrangements of colors and mixtures, I stumbled upon one that proved simple yet intriguing, representing all the mixtures as “doorways” and organized by color. Each box includes the image of the real color painted in the manuscript and each set of boxes represents the mixing from one pure color (largest) to another (smallest) and the ratios of mixtures in between.

To make this poster, I created the first concept in NodeBox but that only used hex colors. When I extracted the original swatches as images, I named them with their plate numbers (e.g., 001-1.jpg for the first swatch on the first plate). Next, I used a small bit of JavaScript to parse my spreadsheets of extracted data to generate the list of images needed to import into InDesign. Finally, I wrote a custom InDesign script that took that list of images and arranged them on the poster. Having only written one other InDesign script before, this was especially challenging because I had to recreate the entire design in InDesign that I first created in NodeBox but with images instead of hex colors. The documentation for scripting in InDesign has never been the best but I was able to finagle a working script with the help of the InDesign ExtendScript API reference.

Final thoughts

I’m glad to have finally created a project based on Boogert’s impressive manuscript. One day, I hope someone is able to put a full English translation online. This was a short project—taking only two weeks—but as with my other projects, I had fun learning new things about something old and new techniques to create visualizations.

Explore the project