Part 4 – Exercise 2: A Typographic Jigsaw Puzzle

The typeface Baskerville has been deconstructed so it only contains the strokes, serifs and bowls that are common to all the letterforms. Your task is to try and put it all back together again to read the quick brown fox jumps over the lazy dog.

  • The yellow letters are where I have duplicated an element of the typeface.

Thoughts on This Exercise

Having spent some time looking closely at typefaces, has your appreciation of them
increased? If so in any particular aspect? Do you think that understanding more about
how typefaces are constructed will be useful to you in future?

Having looked much closer at typefaces, I now realise how many small and subtle features of a typeface combine together to give it its overall look. Typefaces are certainly more complex than I thought! Typically, I would read text quickly and/or the text is quite small, so the small design elements of a typeface are barely noticed. Now I am more likely to notice the style of terminals on a serif font, the degree of contrast between thick and thin strokes, the angle of stress or distinguishing features such as a tail of a ‘Q’ or ‘R’.  I can now better see the subtle design elements of a given typeface.

I do think that being able to recognise how typefaces are constructed will be useful. In my work building websites, I sometimes have to try to identity a typeface from an existing logo or printed marketing document, in order to match the font on the website – or if I can’t match it exactly, to find a typeface that is similar. Understanding the nuances of how a font is constructed will certainly help with that.

Advertisements

Part 4 – Research Point: Identifying Fonts

Choose a magazine, for example the Big Issue or Heat, and look at the main typefaces they use for the body text and headlines. Go to http://www.identifont.com and use the programme to identify the fonts.

From Waitrose Magazine:

From the National Trust Magazine:

From TV & Satellite Magazine:

Part 4 – Exercise 1: Playing with Words

Using the following words create typographical representations that present both the word and a suggestion of its meaning.

Sad Safe Sardonic Saucy Scholarly Serious Shadow Shattered Shy Short Silly Sinking Skimpy Sleek Smart Snowy Sodden Soothing Sordid Sophisticated Speed Squat Squeeze Stiff Stodgy Stoned Style Supine Swagger Sweet

Start this exercise by working on A4 sheets of paper. Set the words in 48pt Helvetica Bold, print and cut out the words and then arrange them and stick them to a sheet of paper trying to capture the meaning of the word visually. Think about the composition, using the white space of the page to help you construct your meanings.

The word is hiding away at the bottom right of the page. You need to look down the whole page before you see it. The letters are huddled together as though they don’t want to be seen.

The word ‘safe’, surrounded by protective ‘walls’.

The slight curve of the word represents a sardonic smile.

Saucy – bouncy letters give a sense of fun. Positioning the word at the top of the page means it is a bit of an extrovert and not afraid to be seen.

Squat – the letters have been shortened to make the word shorter than it should be. Positing the word at the bottom of the page gives the sense that it is small.

The positioning of the word is intended to look like a crossword puzzle or game of scrabble.

The letters are positioned to look like a serious, frowning face  (try squinting!).

The tall upright word is casting a shadow.

Silly – the letters are scattered to give a sense of fun and playfulness, as though they are dancing across the page – You also have to look closely to notice that they are also in the wrong order – as though the word is teasing or playing a joke.

Shattered – the word breaks into shards as it falls and hits the bottom of the page.

The word is trying to hide in the bottom, right of the page. You have to look down the whole page before you see it.

Squeeze – the letters are being squeezed.

Short – the word is positioned at the bottom of the page to give the sense that it is small. It is also ‘peeping’ over the edge of the page, as though it is not quite tall enough to see over the edge.

The letters are sinking into the page. The word is positioned at the bottom of the page to enhance the sense that they are moving downwards.

Skimpy – part of the word is missing.

Stodgy – the letters sticky and clumped together.

Smart – the letters are intended to look like the working-out of an anagram.

Sleek – the letters are angled to give a sense of being streamlined and aerodynamic.

Circles are cut out of the word to look like falling snowflakes. The word also looks like it is standing in a snow drift.

The word is crumpled and torn as though it has been soaked in water (which is was!).

The letters are positioned in a gentle, calming curve, like a smile.

The letters are positioned as though they are looking through a peep hole.

An abstract layout, intended to look like modern art.

The letters travel diagonally across the page to give a sense of motion and dynamism.

Stiff – the letters are rigid and upright and positioned up against the side of the page.

Sweet – the word has bites taken out of it, as though it was good to eat.

The letters are ‘floating on the ceiling’, and afterwards, the last letter has come down and is crashed out on the ‘floor’.

Style – the last two letters are intended to look like a jaunty hat or french accent.

Swagger – the letters are intended to look as though they are ‘walking’ with a confident gait.

The word is lying along the bottom of the page.

Then work digitally using any of the software you have available. Explore how you can set text at a slant, at different sizes, in different colours and fonts. Try using filters in your software for other effects.

Faded, rather insignificant, dreary grey letters, in a plain, unassuming typeface. huddled protectively together and hiding away in the bottom corner of the page.

A solid and sturdy, no-nonsense font. The drop shadow enhances its presence. You know this word will protect you, like a superhero.

This typeface has a flippant, disparaging feel. The letters have been slightly flattened to enhance the ‘shifty’ feel. Red gives a sense of wickedness.

This is a quirky, fun and cheeky typeface in warm, vibrant colours. The positions of the letters suggest bounciness and energy. This word is a bit of a cheeky show off.

A serious serif typeface, in black, like you would see printed in text books and literature. The formatting of the letters is intended to look like a mathematical formula.

A serious, sensible, formal serif typeface with large, no-nonsense letters in sensible dark grey. The underline and position of the word at the top of the page, gives an additional sense of importance to the word.

A sturdy, bold typeface with thick strokes, casting an elongated shadow in the same font.

A typeface with a colour and texture intended to look like glass. The letters break into many fragments when they hit the ‘ground’ at the bottom of the page.

A pale and delicate typeface with letters so small and insignificant you barely notice they are there. They are also hiding at the bottom of the page. You need to look down the whole page before you see them and even then, you might miss them.

A squat typeface positioned at the bottom of the page, to enhance the fact that this word is short in stature.

Letters in a mix of typefaces and lively, fun colours, dancing merrily across the page.

Ornate letters with a metallic gold effect, intended to look like heavy gold artifacts sinking into the sand at the bottom of the sea. The positioning at the bottom of the page enhances the fact that they are sinking downwards.

A thin, lightweight, handwritten typeface feels insubstantial on the page. This effect is enhanced by parts of the already ‘barely-there’ letters being rubbed out.

A decorative, thin, elongated typeface. The letters are leaning to the right to give a sense of being smooth and streamlined. This word is elegant and black, like a black cat.

A formal but contemporary serif font in eye-catching colours. The ‘M’ is intended to look like a bow tie. The word is positioned in the centre of the page because it is looking good and is proud to be seen.

A dark grey font with no sharp corners to enhance the effect of snow settling on these letters which would cover any sharp edges. Cut outs are intended to look as though the word is embedded in show.

A typeface in the colour of water, with drips.

The calming mantra of a repeated word, presented in gentle waves. The colours are intended to represent the tranquility of deep water.

The anonymity of a typed blackmail or ransom note. This typeface has a somewhat sinister feel.

A modern, sans-serif hairline-weight font with generous spacing between characters, positioned a little low down on the page to give a contemporary feel.

Red and dark grey are quite masculine colours, the colours of sports cars or danger. The red letters are zooming across the page, leaning into the wind. The trail of grey, slightly blurred letters, suggest motion, the points where the letters had been previously or perhaps, the remnants of a car exhaust.

A fat typeface with wide strokes.  The position of the this word at the bottom of the page enhances the fact this this word is short.

These large letters have been squeezed in the middle, like they are being squeezed by a fist or like a waist is squeezed by a girdle. The rounded font gives a sense of the letters being malleable.

A stiff type face with straight lines and jagged edges. The position of the two ‘F’s suggest walking with a rigid gait.

A plump and rounded typeface that fills the width of the page. The word’s position at the bottom of the page suggests that it is heavy and immobile. The colour is intended to look like dough.

The letters float across the page and have a psychedelic pattern.

An elegant cursive font in a classic royal blue colour. The drop shadow gives the word extra presence. The word is positioned at the top left of the page, so it is the first thing you see.

A lazy typeface with rounded edges, lying along the bottom of the page.

A decorative serif font, boldly taking up the width of the page. The different sized letters suggest that the font is moving towards and away from you.

A friendly, plump typeface in a pink candy-stripe colour like the paper bags you used to get sweets in.

Thoughts on This Exercise

At first, I really struggled with the first part of this exercise. I could not get to grips with how I could visually represent words when I was working with print-outs of the words and consequently could not change the font type, font size or colour. However, once I got going, I really enjoyed this part of the exercise. I actually found the very limited parameters in which I had to work, quite liberating. Effectively, a lot of the options for how I could have represented the words, had been taken away from me and I instead had to work with a very limited set to ‘tools’, i.e. the print out of the word, a sheet of A4 paper, scissors and glue.  I really had to focus on getting creative to find ways to represent the words and spent quite a lot of time, sketching and thinking of ideas before I actually stuck anything to paper.

Some words were quite easy  to represent, with quite obvious solutions, such as ‘shattered’. Others were much more difficult, such as ‘smart’.

I think for this part of the exercise, the most successful words are those where there was no obvious way to represent the word and I really had to think hard to find a way to represent it. I think my ‘peephole’ idea for ‘sordid’ and ‘modern art’ idea for ‘sophisticated’ worked the best. I was also pleased with my idea of representing a face for ‘serious’, and the wet, torn paper for ‘sodden’ but felt that these did not execute quite so well.

It was also very interesting to see the extent to which the use of the white space of the paper and the position of the word on the page could contribute to the meaning. I made the mistake of putting more that word on a sheet, primarily to save paper (!) and realised quite quickly that the words started influencing each other when they were positioned together on the page. You immediately start to question what the relationship is between the two words. In hindsight this was a mistake.

I found the second part of this exercise much easier to complete but also much less fun to do. The options of being able to change the typeface, font size or colour, or to be able to add a digital effect to the text, gave much more scope for how to visually represent the word but it was almost too easy to arrive at a solution and I felt that I was less likely to really think creatively. I also found that I was distracted by the technology, so I would spend more time working out how to apply a specific effect than thinking on whether that effect was really the best way I could think of to represent the word.

I think that the words which have worked best in the digital part of this exercise are my mathematical formula effect for the word ‘Scholarly’, as being able to manipulate the fonts to represent a formula worked particularly well.  The word ‘smart’ with a bow tie, just about in the position where it would be on a person, also worked well and being able to use a fat and rounded typeface in the colour of dough for the word ‘stodgy’ I thought was also very effective.