Typography - Lovecraft

A quick project to create a single page that featured a quote and design to support a mood. I decided to work with a blackletter font and match it with a horror quote and atmosphere.

Date: January 2014
Tech Stack: HTML, CSS
Responsibilities: Front-End Development, Design
Type: Lab

Project Links:
GitHub Repository
Live Page

Origin & Goals

This project stemmed from a project in a web development class: “Choose two quotes or song lyrics and create two web pages that display the quotes in different styles.” The subject of this page was a serious quote by H.P. Lovecraft; an author who influenced a large amount of my favorite horror-based shows and books.

Functionality & Design

The development for this project was very simple: Just plain HTML and CSS!

I wanted to highlight the dark and serious subject of the quote as well as the man who wrote it. To that end, I selected black as the background and an off white for the main text (off white to reduce any stress on the user’s eyes). The red used for the word “fear” was originally brighter, but I decided that a slightly more muted red would contribute more to the serious atmosphere.

The typography I chose was a combination of a blackletter font (Deutsch Gothic) and a heavy san serif font (Archivo Black). Blackletter styles of fonts are associated with a gothic aesthetic, and by nature look more serious. The san serif font was chosen so that more emphasis was on the main quote, but also so that there was balance in the design.