I don’t remember how I came across Codex Transportica, except that it happened very late into the night and I was about to shut down my computer, but one click of a button, one look at that site made me spend another hour or so online. Two things came to my mind almost simultaneously: I’d love to feature this site in my Behind The Scenes Of Exquisite Web Typography series and what kind of a sci-fi fan am I if I’ve never heard of the book The Codex Transportica before. So I did a quick search on Google and the only other sites that mentioned this book were linking back to that same Codex Transportica blog.
In order to ensure my sanity, after reading a couple of blog articles and checking out the futuristic vehicle drawings and comments, I filled out the contact form and hoped that soon someone will get back to me with the answers to my questions about the history behind the Codex Transportica, its designer(s), illustrator(s) and writer(s).
What is true?
Here’s the true story about the mysterious ‘book’ and its creators straight from the horse’s mouth.
Nick Pearson loves to doodle, and was playing with an idea of drawing some strange looking vehicles and posting them online. He did some brainstorming with the fellow members of the DonationCoder forum and the project Codex Transportica came to life.
“To keep things as flexible as possible the ‘book’ was going to require translation—thereby allowing us to write things that we could then contradict later on if we didn’t like it—we could simply say it was a bad translation first time around.”
Later on Tim Smith came on board and the two of them formed a perfect team of a designer and a writer. Nick draws a vehicle, passes the illustration over to Tim who then devises a pretty plausible description of the futuristic machine.
When is it OK to use Times New Roman?
Nick Pearson is also responsible for the design of the site. The type choice (ubiquitous Times New Roman), justified text, the gradient of the paper-like background, hand-drawn figures and icons, striking Victorian wallpaper and the gorgeous header make the site resemble a book.
Times New Roman was criticized by some as an unsuitable typeface for online reading (opting for Georgia or other faces instead). But with the right type treatment it’s possible to bring out the best of the good old Times New Roman. Two of the most effective techniques to give a non-typical look to any typeface is to experiment with leading, achieved by line-height in CSS, and white space in the form of letter-spacing in CSS.
That’s exactly how Nick Pearson made the content of his site legible and unstrained for reading online: he kept the body text at the default size of 16px but added a generous line-height of 26px. In addition he restrained the content area to 434px wide, which keeps the line lengths to the optimal 60-70 characters long.
In fact, Nick sticks to Times New Roman throughout the entire HTML copy of the site: menu links, navigational post links, article titles, comments. And everywhere Times New Roman looks different thanks to varying font sizes, letter-spacing, font-weight and colours.
How to add some authenticity to the site?
The first thing that catches the eye on Codex Transportica site is the opulent header image that resembles an antique red leather cover of the ‘book’ with the washed out embossed gold lettering and the ‘worn out’ dark patches.
Nick has re-created the ravishing ornate letters C and T from a book called “Alphabets”, published by L’Aventurine. I’ll try to get myself a copy of this book filled with stunningly drawn alphabets, which are all copyright free.
For Codex Transportica Nick has chosen the monograms designed by a 19th century German designer Karl Klimsch. I managed to locate one of his books with 2,100 Victorian Monograms on Google Books so that you could take a closer look at the amazing work by Karl Klimsch.
I also ordered a copy of this book from the local book store and will share some designs with you on Inspiration Bit as soon as the book arrives.
The lowercase letters in Codex Transportica are displayed in Birch Std that goes really well with the ornate capital letters.
All the other text in the header is displayed in a familiar Courier New, which adds authenticity to the whole mysterious ‘book’ experience on this site. I’m also very fond of the beautiful grey background wallpaper that somehow reminds me of Rudyard Kipling. I guess because of some Indian/British influence that I see in the background pictures. I asked Nick to tell me a bit more about the wallpaper:
The background to the website is a tile I managed to put together from a bad photograph of real Victorian wallpaper (I think it is Victorian).
The drawings and the writing, which is composed not without a good sense of humour, deserve a special attention. I highly recommend you to carve a bit of time for yourself to sit down and read a few chapters of Codex Transportica. You’ll get transported to a very strange future that at times feels like the society went backwards in its development, and other times you’d be left in awe at what could be possible to accomplish had the science learn the way to transform one’s phenomenal imagination into reality.
What can be improved on Codex Transportica?
Even Nick considers his site to be a “beta” and will be tweaking it as the time permits, so I’ll try offering some constructive criticism here and encourage you to do the same in the comments below.
Although I commend Nick’s decision to stick to Times New Roman throughout the HTML text of the site, I’m not crazy about the menu titles at the top, they look like typical Times New Roman on sites dated back in the 20th century. I actually tried displaying them without the added weight:bold, and to me that made the menu links look better.
Some of the book chapters list other related topics at the bottom of the article, currently they are displayed in exactly the same font style and size as the main copy of the site. I would like to see a different type treatment for those links that would allow them to standout and cause less confusion to the site’s readers.
Hopefully Nick will pay more attention to styling the comment and contact forms on the site. Right now they show up with a standard HTML treatment, default font sizes, colours and styles, and look unattended. I’d like to see them equipped with a style suitable for this blog.
I studied some underlying code of the site and it definitely needs to be cleaned out here and there: there are occasional nested divs with some redundant styling applied to them.
I do like though a few interesting programming goodies on the site, like the icon/link for displaying Random Posts on the blog, the links to the latest and oldest articles, as well as the previous and next ones, and the mobile version of the site.
What are your thoughts, suggestions for the Codex Transportica? If you’ve missed my previous articles in Exquisite Web Typography series, be sure to check the past issues: Part One, Part Two, Part Three and Part Four.