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.

Codex Transportica

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.

the \'book\'

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.

font treatment

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.

ct_header

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.

karl_klimsch_monograms

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.

Recent Bits
Related Bits
Behind The Scenes Of Exquisite Web Typography – Part Four
Behind The Scenes Of Exquisite Web Typography – Part Three
Behind The Scenes Of Exquisite Web Typography – Part Two
Behind The Scenes Of Exquisite Web Typography
8 Bits From The Past
Striking Web Sites with Font Stacks that Inspire
Meticulous Design: Dramatic Headlines
Behind The Scenes Of Inspiration Bit
Comment Bits

18 Insightful Bits in response to “Behind The Scenes Of Exquisite Web Typography – Part Five”

  1. Thank you very much for featuring the website, Vivien.

    You’ve done a fine job and I’m grateful for your suggestions for the website. I shall add them to the list of things I need to do – hopefully they’ll be done soon.

    Other suggestions and criticism are welcome if anyone else cares to add them.

  2. Bob Marchman

    I agree that this was a good treatment of Times New Roman, but I would strayed from justifying the text. The first thing that jumped out at me when I viewed the body text was tributaries of white space rivers in the paragraphs. Now, I’ll be the first to admit, I’m a snob for these things and not the average reader. The problem is that with such generous leading, it exposes the issues that the web still has with justifying text even more. From what I understand, there are some javascript libraries floating around out there that try to minimize this, as well as account for proper hyphenation (which css and html cannot do, yet).

    Overall, great looking site. I am nitpicking above, but I did find the site to be very enjoyable. Bookmarked.

  3. Nick, you’re most welcome. Thanks for getting back with the details answers to all my questions about your remarkable project/site. Good luck with v2, look forward to seeing it.

    Bob, thanks for your insightful comment. White space rivers is a common problem on the Web where sites justify the text. Such a nuisance :( I too came across some Javascript fixes for that issue, but wouldn’t it be great if the browsers/html/css could handle the justified text without the help of JS?! Let’s hope that one day they would.

  4. Thanks for the remarks, Bob.

    I shall look again at why I justified the text as I do take your point about the rivers of whitespace. At the time of designing I probably decided that left-justified text looked even more odd due to everything else around it – or maybe I just didn’t even think about what I was doing.

    I’ll test a few text layouts soon.

  5. What a jewel! It reminds me of The Superest.

    I love the 2,100 Victorian Monograms book you shared, too, Vivien. I’m going to order a copy! I bet it’ll be a great resource for my letterpress printing.

  6. Thanks, Lauren. I just received the copy of 2,100 Victorian Monograms. So inspiring. I highly recommend you to get one. I’ll try posting some of the ornaments from this book on iBit soon.

  7. Like you, I came across the Codex Transportica recently (probably late at night, too) and like the site a great deal. The one thing that I don’t like so much is the title in faux plastic tape in the header. The faux plastic tape seems stylistically at odds with the rest of the design to me – like, if I had a beautifully bound vintage book with elaborate gilt wording on the cover, I wouldn’t go sticking plastic tape on it.

  8. That’s an interesting point, Tracey.

    I thought some people might have trouble reading the main title so I put the tape there to make things clearer. Using tape rather than something else seemed more believable to me as I’m sure I’ve seen it done for real. I also liked the justaposition of the two typefaces – to me, it implies that what you are about to find on the website isn’t serious, it will be quirky, etc., etc. I also liked the idea of not being respectful to the book, the header does imply that I have hacked the cover of the book apart to fix it to a wooden frame. Perhaps I have overthought what I was trying to convey.

    I’ll see if anyone else agrees with you and consider removing it. I guess no one has trouble reading the main title anyway so there really isn’t any need for the tape.

    Thanks for bringing it to my attention.

  9. The plastic tape title made the site seem even more in the Steam Punk style to me. I didn’t mind it from a stylistic point of view, but now that Tracey mentioned it, it is redundant. Maybe if it were at the bottom instead? Or that style used for one of the navigation menus (next/last or main)? I can understand why you put it there, Nick, but I’m not sure it’s needed.

    Oh, and could you make the header graphic clickable? I know you have the home button right below, but it’s such a convention to have the title lead back to the homepage.

  10. Tracey, thanks a lot for adding an interesting perception to Codex Tansportica with your comment. Personally I wasn’t too crazy about the glow around the letters on that tape, but I was so smitten with the rest of the design, that it didn’t bother me, plus I liked the deep blue background colour on that type.

    Now, since we started this discussion, Nick, how about using the same technique you did to get that aged piece of paper for “frequent revelations into pioneering future…” tagline, place a similar strip of paper on top of the book cover with “Codex Transportica” on it. That way it would look that you’ve ripped a piece of paper from the book with its title.

  11. Ah, yes, I will make a note of making the header link back to the home page. Good point, Lauren.

    As for the black tape – it stays. I’ve had positive comments for it from trusted sources now so I’m reassured that it gives a more handmade feel to the design – which is exactly what I wanted.

    The glow around the letters is meant to resemble the stretching that occurs on the plastic. I’ve discovered this isn’t what happens in reality but when the glow/blur/stretching is removed the tape looks less real – to me, at least.

    I still may remove it but as I can’t please everyone I’m content to leave it there. When I start the site changes I will consider taking it.

    I shall also consider doing as you say, Vivien, with the ripped paper idea. That is a good compromise. But in defence of the tape, the ripped paper is a little obvious – that’s why the tape was used. I can’t remember seeing that black tape used before in this kind of design and yet it is an instantly recognisable item. Perhaps if I think of something I consider equally non cliché to replace it with then I’ll do that. But the ripped paper idea is certainly a good candidate for now.

    I do need to create a few more links/buttons near the top so that area of the header may get eaten up with such things. The tape will then be forced to go.

  12. Nick, you’re right to stand by the design elements that you feel comfortable with. While the plastic tape is a sticking point (sorry about the pun) for me, I also think you’ve done a great job of creating the effect. It’s the only sticking point in a lovely website design.

  13. There’s a special kind of whimsical madness going on in this site, and I like it. Thanks for letting us know about it, Vivien. (My wife knew Douglas Adams — the Hitchhiker’s Guide fellow — very well for decades. I wasn’t fortunate enough to meet him myself, but from what I know of him, I think he’d like the Codex.)

    And I like the black tape — provides a nice jarring discontinuity that for some reason works with this design. :)

  14. You’re welcome, Michael. Glad you liked the Codex. Did you show it to your wife as well? :)

  15. Did you show it to your wife as well? :)

    I did. She agreed, Douglas would have been fascinated with the site.

  16. Thank you for such a great endorsement, Michael. I’d never thought about Hitchhiker’s before, but I now see the similarities now that you’ve mentioned it.

    It seems that inspiriation for the Transportica may really just be everything I enjoyed as a child. The Hitchhikder’s Guide to the Galaxy was certainly one of those things.

    I’ve not asked where Tim, the writer behind the inpsired vehicle descriptions, gets his ideas from. I would expect him to be a fan of Douglas Adams too.

  17. If Douglas were alive, he’d raise a glass in honor of the Codex.

    It seems that inspiriation for the Transportica may really just be everything I enjoyed as a child. The Hitchhikder’s Guide to the Galaxy was certainly one of those things.

    And probably whack you for reminding him how old he was :)

  1. Sunday Type: dilbert type | i love typography, the typography and fonts blog

    [...] inspiring Flickr groups on typography Behind The Scenes Of Exquisite Web Typography—Part Five Hand drawn floral type Affordable calling cards—via. Sparky Type oh, I heart [...]

Selected Bits

PopularBits

RecommendedBits

FavouriteBits

PersonalBits

Hi, I'm Vivien. Thanks for visiting my Inspiration Bit. I often find myself scouring the internet looking for either answers to many questions I have or websites that inspire me, sites that I can learn from. On what topics you might ask — any topics that interest me, anything from web design to typography and art, from blogging to entrepreneurship, from programming to open source.
read more…
When I'm not blogging, I design web sites, teach programming, play with my daughter and try to balance family, work, friends and a somewhat active social life on