Design thoughts

The brief

Choosing a suitable piece of literature – focus on presenting the text in a suitable typeface, creating a colour scheme which both aids legibility and underpins the context of your chosen piece. Restriction: Use of images is not permitted.

The text

I spent a while looking for a suitable piece of text before settling on the closing speech from Charlie Chaplin’s The Great Dictator. I wanted to work with a piece of writing that was emotive and inspiring.

One of Chaplin’s characters in the film, a Jewish barber, is mistaken for the dictator of Tormania and is called upon to deliver a victory speech following the annexation of Ostelitch. Instead, he denounces fascism and calls for kindness, tolerance, and democracy. The speech begins by criticising the current state of the world and builds up in tempo and rhetoric towards the end. I have tried to illustrate this with my choice typeface, size, and colour.

Typography

Jason Santa Maria’s article on web typography was at the front of my mind as I considered different type options for this piece. I wanted the message of the text to be reflected by my chosen typeface. The typeface had to be suitable for body text, so a larger x-height was important for readability. It also needed to have personality—but not too much that it distracted the reader. Finally, I wanted to convey a range of emotions and levels of intensity in the writing, so a versatile typeface with a number of styles was preferable.

Chaparral

After some searching I found Chaparral Pro by Carol Twombly. Chaparral has slab serifs which aid readability, and varying letter proportions giving it a more human and friendly feel than more geometric alternatives. It gives a good balance of clarity and personality without being too noticeable. A theme throughout the speech is balancing the usefulness of machines with humanity. I think Chaparral expresses this message well

Fallbacks

Having used Typekit to serve web fonts it was important to have a good backup in case of failure. I started my search for web safe fonts at cssfontstack and after some experimentation with ffffallback I selected Calisto MT as my main backup. Calisto is an old style serif which is highly readable and versatile enough to display all of my styles except the lightest weight. It also matches up nicely to Chaparral, my original web font. I arrvied at my full font stack with further experimentation. In the end I didn’t select a slab serif fallback. I was more concerned with providing a good reading experience than sticking rigidly to a type category.

Modular scale

While researching typography I read some articles by Tim Brown. I decided to implement the modular scale mentioned in his article more meaningful typography. I picked a size which looked most comfortable for reading body text—in my case 24px and plugged that, along with a meaningful measurement, 12px and the golden ratio into the calculator at modularscale.com. I used numbers on my scale to set font size, line height, padding, widths and margins for most of the site. I did occasionally deviate from the scale, but I generally I stuck with it. Using the scale reminded me to think in terms of a typographic system and to consider hierarchy and verticle rhythm.

Colour

I used grey tones to express a dull, gloomy feeling as the ‘dictator’ is introduced and his speech begins. As the speech progresses and optimism builds, the background lightens and the words become clearer. I really wanted to final part of the message, the call for humans to unite in the name of democracy, to be as clear as possible. Ultimately I hoped to re-create the level of emotion in the speech.

References