Design Fundamentals 2: Project 3 Part B

Link to site –¬†


The typographer I was assigned was Eric Gill.

I wanted to go for a more minimal look, and I used his font, Gill Sans. I also used the font Cormorant Garamond, which is a serif font that works nicely with Gill Sans. The Garamond font reminds me slightly of his non-typographical work, because of the details on its letters.

My first idea was to use a red hue picture, but it didn’t work well with the design.

A lot of his earlier work (drawings/paintings) are black and white, and he always had a lot of white space, so I decided to go for a simpler theme, with simple details to help bring out the layout and design. I decided to use a black and white colour scheme with a dull red as the accent colour.

Below are some layouts and designs that I tested out.

I also tested out having the quote overlap with the text, but I saw that it did not work very well, and worked better without overlapping the picture.


Below is the final design for the header. I used similar tracking to that of his book, An Essay On Typography. Wider tracking, that helps with the readability of the letters.

The biggest challenge for me was trying to differentiate the background from the foreground. Designing a background that did not distract the viewer away from the subject was tricky, but I just lowered the opacity on the background and it helped bring emphasis on the content. Instead of a jpg/png image, the header above is coded (text on top of picture), which was challenging at first, but quickly resolved using position: relative and position: absolute attributes.