Exercise 1 Playing with words

The brief

Create typographical representations with the given list of words representing the word and suggesting its meaning.  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.  

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.

Figure 1 Helvetica Bold 48pt cut-outs
Figure 2 Helvetica Bold 48pt cut-outs

Cutting the words

Limiting variables in order to study 48pt Helvetica black letters on white paper was insightful. It encouraged me to experiment with visual language by examining the form of the letters and the white space surrounding the letters.

I have taken the liberty to cut into the letters as well, for example, with the words ShyShort, Skimpy and Sinking.  I have done this to manipulate the weight of the word Skimpy or the height of the word Short.  By allowing white space between the characters of Sad, I created the visual meaning of being disconnected, unhooked or detached, as sadness makes one feel this way.

With the word Sardonic, I used white space between the characters to convey an unsettled feeling of friction and strife.  The characters in the word show the same by not flowing but rather looking disjointed and set in different spatial planes.  The word Silly has the characters also set in different spatial planes to convey the feeling of being different to the expected human behaviour.

Scholarly has a bouncing effect, with the characters alternating slightly above and under the baseline of the word.  This conveys a childlike feeling that is evident in the way children write.  Serious have no variations out of the norm to convey careful application rather than a joking or half-hearted feel.

The letters Stodgy and Squeeze are stacked and placed closely together to communicate a feeling of density.  The characters of the word Shy hide behind each other, trying to be smaller or invisible.  I especially like the visual meaning the word Shy captures in this cut-and-paste method.

The word Squat is split to emulate the two heavy plates on each side when doing a barbell squat.  Of course, it will depend on the context of the word, but as it is open to interpretation, this is one way of capturing the meaning.

I have taken these cut-outs and included them in my mood boards to explore the words further before eventually going to software rendering.

Before further exploring each word’s visual meaning, I attended one of Ellen Lupton’s short online courses on Typography Design.  The course had more to do with brand design, but Lupton’s methodology of selecting typography for a specific purpose was very helpful. Ellen Lupton says she research and learns everything she can about a subject and only then starts to create.  In figure 3, Lupton showed her students all the logotypes that were created with the typeface Helvetica. (Lupton, 2019)  

Figure 3 Logo types created with the typeface Helvetica

Sketchbook

In figure 4 are some sketchbook ideas to get my ideas flowing.  I collected photos in nature where I can see the letter “S”, drawing in the sand and creating an “S” with plants, pearl couscous and muesli.  

Figure 4 Sketchbook and Mood board Ideas

Spider diagrams

By being cautious against turning too quickly to the computer and cutting the ideation phase short, I began by collecting ideas and brainstorming in my sketchbook. This approach enabled me to unlock and deepen solutions.  Once I had a clear understanding of what I wanted to achieve, I took the concepts to my software for rendering and exploring what my software could do. 

Presentation  

As presentation is an important part of Graphic Design, I wanted to establish a consistent background to showcase my letters once they are completed with the software effect and rendering.

The Golden Ratio

I decided to research Will Paterson, a leading Graphic Designer specialising in Logo Design, Hand Lettering, Brand Identity and a teacher in Graphic Design.  He worked with well-known brands such as Adobe, Instagram and Scrawlrbox.

Paterson mentioned the Golden Ratio and the Fibonacci sequence in his teachings.  It has been used by artists, designers and architects for generations to produce beautiful proportions. (Paterson, 2022)

Once I obtained more knowledge about guides, proportions and the Fibonacci Sequences, I created boxes of colour to present the rendered words I had created.  The boxes of colour are not just a background structure to show the word but also convey the feel and mood of the word.

Figure 5 Golden Ratio

Sad

The word Sad could have counterforms resembling tears or droopy teardrop terminals. (Figure 6) The mood board consists of lettering using watercolours, sensitive transparent colours and uneven letterform edges.  The colours for Sad are muted, with mostly a blue undertone or even completely grey, conveying the absence of being happy (colour).

Figure 6 Mood board and digital exploration – Sad

I have chosen Adobe Illustrator for this exercise because I need more experience in this application, and it is specifically suitable when working with text.  The vectors are scalable without losing resolution.

The large “S” top left shows the font called Recoleta, and on the right it shows how I digitally transformed the typeface with the warp tool as well as the blur tool.  I referred to the Adobe Illustrator manual to familiarise myself with these tools and watched several instructional videos.

Recoleta font with teardrop terminals is ideal for the word Sad.  The blur effect resembles what the world looks like when your eyes are welling up with tears.

Safe

The word Safe communicates bars, security, and a feeling of contentment and groundedness, back to womb or bed, so I used heavy lettering in my mood board to convey a strong, secure and solid feel.  The colours are warm and grounded, such as browns, beige and yellow ochre.  

Figure 7 Mood board and digital exploration – Safe

I explored creating elements with the blending tool in Adobe Illustrator that looks similar to three-dimensional tubes.  I then made a path with the pen tool drawing out the word Safe.  Next, I replaced the path with the three-dimensional tubes to get the above effect in figure 7.  I used the rough setting in effects to achieve a fluffy effect.  This text communicates a safe feeling with the warm colours and comfortable felt-fabric texture.

Sardonic

I used cool colours with purple and blue undertones to communicate Sardonic’s meaning.  I chose the letters with a satirical feel that is almost jester-like in appearance. 

Figure 8 Mood board and digital exploration – Sardonic

Under the warp tools in Adobe Illustrator, I used the fish eye tool to create the effect in figure 8.  The font Lehmann Regular was my first choice to carry the cynical mood of the word Sardonic.

Saucy

The mood board for Saucy consisted of watercolour ground swirled onto the paper and then painted with a rich caramel gouache to achieve a textured effect.  This mood board will become part of my visual diary, and although I don’t use every idea immediately, I might return to it later.

Figure 9 Mood board and digital exploration – Saucy

The typography for Saucy has a syrup feel with soft corners and flowing lines.  This makes the lettering look like it is melting.  The colours are warm dessert colours such as chocolate, caramel, strawberry, berries and vanilla.

Scholarly

I have chosen childlike typography for Scholarly to emphasise the childlike character of the word.  The colours are primary red paired with less intense yellow, green and then a “blackboard” black to create a colour palette that flows together instead of intense colours with hard contrast.  Children are innocent and vulnerable, and the colour palette does not need to be all strong primary colours.   

Figure 10 Mood board and digital exploration – Scholarly

I explored wax crayons, colour pencils and paper cut-outs, which set the stage for finding the three fonts in figure 10.  The typography Hey Eloise Regular (top) has a crayon feel and doesn’t need further rendering.  I like the bright application, and adding more texture will take away from its opacity. 

Serious

The visual language could mirror corporate, formal, constraint and even life-or-death situations.  I have chosen a clean, san-serif text with a traditional maroon, grey and rich cream to capture the feel of Serious.  The context of Serious will influence the colour palette.

Figure 11 Mood board and digital exploration – Serious

If Serious is used in a medical setting, I will include more blues, and if used in an agriculture context, I will use more greens.  When used in historical circumstances, one could rather use a traditional serif font.

Shadow

The mood of the word Shadow makes me think of the shadow of trees that protects us from the sun—the cool shade of a tree.  Of course, there should first be light in order cast a shadow.  It can also have a sombre connotation.  Shadow is the absence of light.  Psalm 23 (KJV) speaks of  “though I walk through the valley of the shadow of death”, which means going through difficult times.  

Figure 12 Mood board and digital exploration – Shadow

I placed the “d” of the Helvetica cut-out in the middle and set the other letters behind the “d” to explore having the letters in each other’s shadow.  I used colours of nature for the word Shadow together with the typeface Ingebord Block.  I like the mid-tone it creates with the lines, which are very similar to shadows.

Shattered

Shattered can mean many things.  It can be an emotion, invasion, stress or feeling unsettled.  Either way, it is mostly an unpleasant visual message, so I chose cool colours.  It can also be high prices shattered by the seller, which has more of a positive message.

Figure 13 Mood board and digital exploration – Shattered

Claredon Wide Stencil Regular is a font that appears broken up into segments.  I have decided it will be more effective to use Arial Black Regular and render the text by creating pieces that look like shattered glass.  Selecting “create outlines” and then drawing triangles over the text with a pen tool, selecting “divide” in “pathfinder”, and then pulling the pieces apart is how I created this effect in Adobe Illustrator.

Shy

This interesting effect was created in Adobe Illustrator by drawing a stroke path in the shape of the number eight.  I then duplicated the shape and used the blend tool to create a tube of eights.  I created a path through the middle of each letter of the word Shy, selected the paths together with the tubes and then selected “replace path”.  I achieved the movement of the sheer-looking lines by using the “warp” tool and pushing the sheer lines outwards.  The results are the sheer letters, as seen in figure 14.

Figure 14 Mood board and digital exploration – Shy

I have chosen a colour palette that resembles muted colours to express the sensitive character of the word Shy.  Shyness can mean wanting to feel invisible or hide away, blush, insecure or even uncomfortable and self-conscious.  I used these thin thread-looking textures to show the vulnerability of the word Shy.

Snowy

Snowy makes me think of winter, ice cream, magical, cold, white, quiet and ice.  I included colours like silver and blue to resemble the visual meaning, but also warmer colours like chocolate brown and other warmer colours to convey knitwear for those cosy times in front of the fire.

Figure 15 Mood board and digital exploration – Snowy

I created outlines of the text Snowy and then selected the knife tool to make a freehand cut on the top of all the letters and coloured it white.  I then created a copy of this selection and went to effect> stylise>scribble to get a snowy effect on top of the text.  I then used the direct selection tool to manipulate the snow until I was happy with the effect.

Short

In Afrikaans, we have the phrase “Kort en Kragtig”, which translates to “Short and Powerful”.  While it may not be an exact equivalent of “Short and Sweet”, it does establish a connection between the words “Short” and “Potent”.  I used a bright orange together with green and light yellow to express the word Short.  These colours accurately capture the word by communicating stocky, child, unique, and dwarf.

Figure 16 Mood board and digital exploration – Short

I used the font Antique Olive Compact and tried out the 3D rendering in Adobe Illustrator by inflating the letters and experimenting with a smooth texture material and lighting.  The outcome looks like little plastic shapes that seem almost childlike and very smooth.  I like this lettering for the word Short, which represents the word’s meaning well.  It can also be used for the word Smooth or Scholarly.

Silly

I brainstormed words associated with Silly and came up with concepts such as cartoons, circus, clown, comics, and comedy.  I am using bright colours to capture the playful mood of the word Silly.  The typography, inspired by comic books or with a playful touch, will enhance the visual message.  

Figure 17 Mood board and digital exploration – Silly

Script text, in this instance, can effectively convey the intended meaning.  I feel that the typography and bright colours are enough and don’t need any further digital rendering or modifications.

Sinking

Sinking has many possibilities for digital rending or modification to enhance the word’s meaning.  I especially like cutting into the bottom parts of the letters to signify the ocean skin or the rim of the water.  This gives the feel of the letters sinking into the water.

Figure 18 Mood board and digital exploration – Sinking

Another way of expressing the word is having a letter floating on top of the water, as seen in figure 18, the Helvetica cut-out letters.  

I used a monospaced font and a driftwood texture effect on the word Sinking for the digital rendering.  I created the texture by using a photograph from my visual diary and converting it to vectors using image trace in Adobe Illustrator.  Next, I used that texture as a clipping mask to get that textured look. 

Skimpy

Skimpy can be flimsy, thin, sexy and insubstantial. I used a script font in a thin stoke without any contrast for the word Skimpy.

Figure 19 Mood board and digital exploration – Skimpy

The colours are flesh and pastel colours to complement the visual meaning of the word.  I explored the glyphs available for this particular font and found the seductive flourish of the “S” to be fitting for the mood of the word Skimpy.

Sleek

The word Sleek can mean smooth, glistering, straight, sophisticated, glossy or silky, depending on the word’s context.  I used Sleek in the context of straight and smooth.

Figure 20 Mood board and digital exploration – Sleek

The “pen tool” in Adobe Illustrator, together with the “divide tool” in “pathfinder”, was used to create this effect.  I also used a gradient to give the appearance of the middle section of the word coming forward and the rest of the word falling backwards.  

Smart

Smart can be associated with power and knowledge.  The other words that come to mind are clever, intelligent, sophisticated, and formal.  I used red, gold and black to convey the visual meaning.

Figure 21 Mood board and digital exploration – Smart

The typography uses a traditional serif font with high contrast to create a powerful and potent effect.  This high-contrast design evokes a sense of strength and sophistication while still conveying a modern and wise aesthetic.  The high contrast gives the word a strong yet sophisticated feel that feels modern but still wise.

Sodden

I have chosen the typography Droog Heavy for the word Sodden.  This is a solid-looking letterform to enhance the meaning of wet through, saturated, soggy, dripping and wet.  The colours are slightly muddy and cool colours to carry the visual language of heavy with water.

Figure 22 Mood board and digital exploration – Sodden

Soothing

I have chosen warm and comfortable colours for the word Soothing together with a script text called Lemongrass Regular.  Other words associated with Soothing include hush, comfort, pacify, calm and quiet.

Figure 23 Mood board and digital exploration – Soothing

The softer flowing lines of the font communicate a calming and peaceful tone, while the analogous colours enhance the typography.  No other rendering was needed for the word Soothing.

Sordid

Vile, unsavoury, sleazy and foul are the words that came to mind when I brainstormed the word Sordid.The colours are all murky to set the right tone and contrast it with a green-blue to convey the sharpness of the word Sordid.

Figure 24 Mood board and digital rendering – Sordid

The typography has sharp and uneven corners to communicate tension.  I decided on HVD Rowdy as the text as it has the unsettling contrast between the actual letters, as seen in figure 24.  The “S, O and D” is heavy and solid, while the “R and I” are lighter.  This creates extra tension in the word Sordid.

Sophisticated

Sophisticated means experienced, knowledgeable, worldly, worldly-wise, enlightened and cosmopolitan.  Navy blue paired with an ochre yellow contrasting with a brilliant white are the colours I have chosen for the word Sophisticated.

Figure 25 Mood board and digital exploration – Sophisticated

I have chosen a traditional serif font Baskerville Display PT to carry through the traditional ochre yellow and navy to communicate the meaning of Sophisticated.  A few days after doing this mood board and display, I encountered a bakery with a similar brand identity as my word Sophisticated.

Figure 26 Similar typography and colours as the word “Sophisticated”

I found this interesting because Paul Patisserie is a family company built upon a foundation of time-honoured production methods passed down for five generations.  The company was discovered in 1889 near Lille in the North of France.  The same words come to mind when I view this brand, e.g. experienced, knowledgeable and worldly-wise.  It can be said that these colours and typography are evident in conveying a mood of sophistication.

Style

Speed can mean fast, tempo, rate, momentum and pace.  It makes me think of energetic colours like orange, bright yellow, silver and Cerulean blue.

Figure 27 Mood board and digital exploration – Speed

I used a san-serif text called Forma DJR Display Italics and rendered it in Adobe Illustrator by creating outlines and then using the pen tool to break it into sections.

Squat

Squats have been popular for many decades, but with the rise of social media and fitness influencers, there may be more visibility and awareness of this particular exercise.  Squats are a compound exercise that works multiple muscle groups and can be performed with or without weights, making it a versatile exercise. (Andrews, 2015)The words that come to mind when brainstorming the word Squat are glutes, balance, sitting on one’s haunches, difficult, exercise, heavy, strong, metal plates, barbell and fitness.

Figure 28 Mood board and digital exploration – Squat

In my mood board in figure 28, I explored several fonts that can work well.  The colours are silver, derived from metal plates.  I also used red, orange, black and white.  These are all colours associated with energy and fitness.

Squeeze

I brainstormed words I could associate with Squeeze and devised the words baby cheeks, stress ball, citrus fruit, play dough, fat rolls, and soft toys.  I concluded that bright citrus colours could work well to convey the visual message of Squeeze.

Figure 29 Mood board and digital exploration – Squeeze

I used the 3D effects in Adobe Illustrator to achieve juicy-looking text.  I played around with the material and lighting until I achieved the desired effect.  I started with the Ice Cream Standard font but changed it to Hegante Black for heavier text to carry the 3D rendering better.  I was overall pleased with the outcome, but if I use this for a project, I will manually change the terminals of “S” and “E” to be similar to the “Z” to create consistency and more of a rounded feel for the word Squeeze.

Stiff

I especially like the result achieved with the Helvetica cut-outs while exploring the word Stiff.  The “i” in Stiff is isolated and is slightly tilted to the left to emphasise the visual meaning.  Words that came to mind when exploring the meaning of Stiff are inelastic, straight, ungiving, rigid, hard, inflexible and firm.

Figure 30 Mood board and digital exploration – Stiff

I experimented with gradients to see if I could create a vertical effect by fading some of the horizontal planes.  I am not enthusiastic about this effect for Stiff and think it will work better for words like, fade, invisible and mysterious.  Nevertheless, it is a good tool to have in my pocket for future use, and the Helvetica cut-outs best explain the word Stiff’s visual meaning.

Stodgy

Lumpy, heavy, indigestible or leaden are words that come to mind when brainstorming Stodgy.  The typography Confiteria Script Black is my first choice for this word.  The heavy line weight of the script text seems like it could “move” slowly, which indicates a heavy and solid feel.  I especially like the contrast in line weight of the descenders.

Figure 31 Mood board and digital exploration – Stodgy

I explored the swirl effect under 3D in Adobe Illustrator to achieve an almost waffle-looking text with the Helvetica cut-outs that I converted to vector using the image trace option.  The colours can be associated with stodgy food.

Stoned

Stoned has three meanings, according to the Oxford dictionary.  The first definition is “very drunk” or under the influence of cannabis. The second definition is “(of a fruit) having had the stone removed.  “add 50g of stoned black olives,” and the third is “past tense: stoned, throw stones at”.

The mood board of figure 32 focuses on Stoned in the context of being intoxicated and also having the stone removed.

Figure 32 Mood board and digital exploration – Stoned

The capital letter “S” is from the font Ohm Bold and is ideal for signifying an intoxicated feel, while Stoned in green on the right side will be more appropriate for removing a stone.  The psychedelic colours relate to being drugged out.  The word Stoned can be refined depending on the context of the phrase.  I used the 3D effect in Adobe Illustrator to achieve the effects in figure 32.

Style

Words that come to mind when exploring Style are elegance, grace, poise, approach and flair.  I have initially chosen a colour palette of white, green and wine-red.

Figure 33 Mood board and digital exploration – Style

The font is Aktiv Grotesk Regular, a sans-serif with a modern and simple feel.  I prefer my first colour choice in the mood board (figure 33) as it is more fitting with the contemporary font and has a cleaner feel.  The cream and earthy colours of the digitally rendered piece are more traditional. 

Supine

I am going to explore the word Supine in a Pilates context.  Lying supine means lying on your back, face upwards.  I have chosen modern analogues colours that convey a holistic visual meaning and are also bright and positive.  I contrasted these colours with a calm blue and an orange peach. 

Figure 34 Mood board and digital exploration – Supine

The typography of Ofelia Text Regular has an open, modern and balanced feel.

Swagger

Swagger can be a strut, stride, prance or behaviour in a very confident way.  It can also be arrogant and self-important.  I used bright colours to convey the confidence associated with the word Swagger.

Figure 35 Mood board and digital exploration – Swagger

The typography is Bookmania Bold, and I used the glyphs to exaggerate the text.  

Sweet

The colour palette of Sweet is ice-cream or sweets colours that visually express the meaning of sugar.  The font is a script text with bouncing characters and communicates a fun and playful mood.

Figure 36 Mood board and digital exploration – Sweet

My reflection on this exercise

  • Overall, the typographical representation of each word was insightful and encouraged me to become more familiar with Adobe Illustrator.
  • I had to resolve the problem of how to present my work which forced me to work with grids and guides.  I learned to create several grids in Adobe Illustrator to fit my needs. 
  • I had to revisit my notes on “Understanding Colour, Part 3, Exercise 4, and study the Adobe Illustrator manual to find out how to use tools like the warp tool, all the pen tools, pathfinder tools, blur tools, 3D tools and many more.
  • Now that I am more familiar with text effects in Adobe Illustrator Software, there can be a better understanding between my sketchbook and digital processes.  It helps to know what can be done in my software when I start the design process in my sketchbook.
  • Going forward, I can use the clipping mask to clip patterns and textures to my letters.  I can also create seamless patterns as a background.
  • Explore more with the blur tool to create different “tubes” to replace the path of letters.
  • I can combine hand-lettering and existing fonts to create customised text.
  • I will use guides and grids from now on, as it saves unnecessary frustration.
  • The Golden Ratio elevates layouts and renders polished and professional design work.  I will include these ratios in my design process for future work.
  • Mood boards and spider diagrams helped me to have a focused methodology.  
  • Limiting variables in order to study 48pt Helvetica black letters on white paper encouraged me to be more creative.  I can use this method for idea generation in future projects.
Figure 37 Most successful work

Figure 37 is a compilation of my most successful work where I feel there is an exemplary flow between the colour, text and digital rendering.  The visual language is clear and direct, and the image has good contrast and is interesting enough to capture the audience’s attention. 

Works Cited

Paterson, W. (2022, July 21). You Tube. Retrieved from Will Paterson Design: https://youtu.be/MxiqsEm159U

Lupton, E. (2019, July 15). Domestika. Retrieved from Typography Design for Brand Storytelling: https://www.domestika.org/en/courses/4489-typography-design-for-brand-storytelling

Andrews, E. (2015, June 17). Seven squat variations that will strengthen you lower body. Retrieved from ACE Fitness: https://www.acefitness.org/resources/pros/expert-articles/5474/7-squat-variations-that-will-strengthen-your-lower-body/

Leave a Reply