Stories of the Macabre

Stories of the Macabre

Originally posted on October 7, 2014

You can find and read the stories at:
storiesofthemacabre.tumblr.com

I like to pretend Edgar Allan Poe was first introduced to me as a child by my elementary school goth librarian who wore the classic "this is my costume" tee shirt every year around Halloween. The orange shirt fit perfectly in season with her long frizzy black hair and was completed with the lack of enthusiasm she maintained year round. Mrs. Knight was very real, she just never read us any Poe — which is unfortunate because it seemed so much more fitting — moreso than reading the illustrated classics version by myself in 3rd grade, or reading the text for a hot second in high school. But I've been wanting to catch up on it again, so for the month that holds one of the best Holidays, along with the anniversary of Poe's death, I though it only made sense to design and illustrate 7 of his most macabre stories.

 

Goal//Timeline//Things used

With the goal in mind, I created a generic timeline in my head that had a final deadline of the first week of October, and if I failed to meet it I would consider myself a useless human being. It worked (as usual)! The timeline for my project ended up being something like this: 

9/16: Come up with concept, deadline and medium
9/17: Start putting stories into Tumblr and start modifying CSS
9/18: Make typographic adjustments and add proper emphases in proper places
9/19: Finalize design layout and selected stories
9/22: Read The Black Cat, take notes, sketch illustration and bring it into illustrator
9/23: Repeat with the Tell Tale Heart
9/24: Repeat with The Pit and the Pendulum
9/25: Repeat with The Fall of The House of Usher
9/26: Repeat with The Masque of the Red Death
9/29: Repeat with the Premature Burial
9/30: Repeat with the Facts in the Case of M. Valdemar
10/1: Make modifications to illustrations and start making the design look good on mobile
10/2: Make any final tweaks to typography and finalize mobile design
10/3: Sick, but project completed
10/6; Write blog post
10/7: Present Blog Post


Things used for the project: 

• Tumblr (default theme), html and css & media queries.
• Pencil, notebook, wacom tablet, illustrator. 
• The Elements of Typography by Robert Bringhurst
Books and Printing: A Treasury for Typophiles by Paul A. Bennett
The Fall of the House of Usher and other tales by Edgar Allan Poe
 

Inspiration//Historical Context

Typography: Since Poe was considered to be part of the Romantic movement, which originated in Europe towards the end of the 18th century, it was important that the typeface be a representation of the period. The decision was between Caslon and Baskerville, both typefaces which were cut in 18th century Europe, were well known for their readability and unobtrusiveness. Both Caslon and Baskerville were extremely popular in books, with the help of Benjamin Franklin who was a fan of Caslon and especially Baskerville. It's also very convenient that Tumblr has a modified version of each one, something I needed to take into consideration.

Illustration: Aubrey Beardsly (one of my favorites), an artist from Europe Illustrated a handful of Edgar Allan Poe Stories towards the end of the 19th Century, as well as Harry Clarke, a book illustrator from Ireland. With these two artists alone, there do not need to be any more illustrations based off of Poe's work, for I was almost going to ditch the illustration aspect of this project entirely. With the bar clearly being out of reach, I decided to not view it as an attempt, rather a simple practice run of a mini series of illustration on a conceptual level, but I was still make it black and…french vanilla. In this frame of mind, I learned how to read through the material, quickly articulate an idea based off the provided text, sketch it, and produce it in less than a full days work.  


Final Design

For the Final design I went with a modified version of Caslon and set it at 22/34 since the x-height is higher that of Baskerville. Being an old style typeface, Caslon doesn't have as much of a contrast between the serifs as the transitional typeface, Baskerville, does. Due to Caslon's characteristics, it is easy to create darker color on the screen when the same type is used paragraph after paragraph, therefore the leading needed to be increased more than Baskerville would. I added a one lead indentation for each new paragraph and made the average line length of 65 characters to prevent people from reading the same line from the same horrible death over and over, then justified the text (don't judge) to give it the style of a book with big beautiful margins. I kept the colors to a minimum and used only red for the occasional accent color for links and the "printers mark", where I gave myself just a bit of credit.

After coming to a resolution around how much space I wanted to surround all my em dashes (stylistic decisions!), I realized I should probably make it look decent on mobile as well. In order to make them specific to mobile, I added media queries that would automatically right align the text to prevent an insane amount of rivers (oceans, actually) and made sure the capitals after the drop cap remained on the first line only. I haven't coded in a while, so it was cool to make all the small changes myself that people don't always care about.

A lot more went into this project than expected, lots of reading, lots of small tweaks and modifications, but I enjoyed working on everything and got to learn a lot in the process. There were plenty of rabbit holes I could've fallen down, but if I did, I would still be working on this project.

Enjoy!

Taxes: It Never Ends

Taxes: It Never Ends

Lessons From Misfits & Black Flag

Lessons From Misfits & Black Flag