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.


Typography Project 2

Letterform Construction



Final choices

Uppercase – Before

Uppercase – After

Lowercase – before

 Lowercase – after


Paragraphs of Type

I chose excerpt #2 because it seemed like an article I would read in a newspaper or a news site. Most news sites and newspapers use Serif fonts for their articles, so I chose the font Bitter.  I added a line height of 1.5 em to show a bit of distinction between lines, as a long article with a lot of words can look overcrowded. I also chose a narrower width, to give it a more news article feel.

The settings I used:

           Column width: 25em;

            Font-family: ‘Bitter’, serif;

            Font-size: 1em;

            Leading: 1.5em;

            Tracking: 0em;

Trying out different column widths:


45 em


35 em

25 em

Expressive Type

To find different ways to express words, I wrote down what I saw/visualized when I read the word. I tried my best to show what I visualized without making it look like an illustration. I started with just using the words, black type on a white background, but when I started expressing the word popcorn, I thought of the red background with yellow type – this can help visualize popcorn as this is the stereotypical popcorn picture.

I decided to use a serif font for the word popcorn, because when written in lowercase, the serifs almost look like kernels. I also liked the look of a modern serif typeface, it gave the word a playful look, which can be associated with the word popcorn because of movies, fun, and entertainment.

I used different shades of yellow, to show value. Another reason is that not all the popcorn in a bucket will be the same colour. Some will be bright yellow and some will be light yellow. When I added the red background, it started to look like a logo for popcorn. I also like how the dark red background brings emphasis to the bright yellow text.

Instead of placing the text on a straight line, I piled it all together, rotating a few letters. This gives the illusion of popcorn, like it was put on top of a table.

Final Product