Author Archives: DLangley

Exercise: Lorum Ipsum

  By | |
Leave a comment

Exercise: Lorem Ipsum (Graphic Design 1, pg.99)

Select one of the designs from your research that you think works. Using Lorem Ipsum dummy text try and copy the layout and design as closely as possible. Having completed your first example try another one. Make notes in your learning log.

I looked at two examples from my research so far; the Time Magazine article ‘Two Hermiones’ and My Cat ‘A Changing Nature.’ I don’t think I was complacent about this exercise but it certainly seemed more difficult than I had imagined. Given the number of variables, from font size and typeface to alignment and leading, it took some time to try and get something resembling the original article. I’m not sure I was entirely successful in achieving absolute copies (for example, I couldn’t find the right typeface for ‘A Changing Nature’s’ header) but it did give me a valuable insight into layout choices.

Having achieved an initial copy for both articles I then experimented with different layouts and it was very interesting to see how even subtle differences can have an impact on legibility and readability.

Two Hermiones:

 

I created several versions from the copy:

  1. Justified all lines including heading
  2. Justified all lines, hyphenated, with adjusted leading
  3. Left aligned, ragged and hyphenated

The justified all lines with adjusted tracking initially looks very orderly and legible however it is not very easy to read, and in design terms the header doesn’t look right. I think the similar version but without adjusted tracking is harder to read because of the lack of white space. The left aligned version is for me the most readable, but again the heading and subheading do not work in design terms.

Changing Nature:

I also created three versions for this article:

  1. Justified all lines
  2. Left aligned leading adjusted
  3. Centred

The left aligned version is quite close to the original but the subhead and text box items are justified. It is interesting to see that the different tracking makes this look more ragged and less legible. The justified larger text doesn’t work because of the additional white space it introduces. The justified all lines again looks neat but is harder to read, it is also easy to see the ugly white rivers that run through the middle of the columns. I did the centred version just for fun but it definitely highlights the issue of how layout can affect legibility and readability.

 

Exercise: If the face fits 2

  By | |
Leave a comment

Exercise: If the face fits 2 (Graphic Design 1 pg.94)

Identify which fonts you might use in each of the following commissions:

  • A short story in a woman’s magazine entitled ‘I thought I loved him; now I’m not so sure.”
  • An advertisement in a Parish magazine asking for more helpers on the flower rota
  • A poster to advertise an after-school club for boys aged 13 – 14
  • Your friends’ engagement party

I started the process in a way that has now become familiar, a few sketches and some online searches. This helped me identify the kinds of messages and tone I wanted to deliver for each commission. It was particularly useful for the Parish magazine and the After-school club because these are not things that are very familiar to me.

I thought I loved him:

Having looked at a number of womens’ magazines in an earlier exercise I decided this article was likely to have at least one image included and would be two or three columns in format. The heading sounded like quite a personal story and it made me think of love letters, or scribbled notes left for a partner. I then worked up four versions with the following combinations:

  1. Header – Brush Script 40pt; Body – Lato 12pt
  2. Header – Segoe Script 56pt; Body – Lato 12pt
  3. Header – Montserrat 60pt; Body – Mr.Eaves XL Mod OT 12pt
  4. Header – Segoe Script and Montserrat 56pt; Body – Lato 12pt

I decided to use a script header that looked like it had been written across the page, possibly something like a quick journal entry.  In version one this was paired with a san-serif Lato as I thought it was quite readable and contemporary. I don’t think the  Brush script worked especially well as it is possibly a bit clichéd and not that easy to read.

In version 2 I moved onto to Segoe Script because it looked like a more believable handwritten script. I dropped the opacity in the image and went to a black typeface that stands out more. I stayed with Lato for the body because I thought it had some echoes in the ‘t’ and ‘u’ shapes.

Rather than just stick with script I did try a san-serif header in version 3 which I paired with another san-serif typeface that looks slightly more formal that Lato but to me shared some of the shapes of the Montserrat. My view on this version was that is does not look very appealing and is unlikely to encourage someone to read it.

Version four shows a mixed header combining script and a san-serif typeface. I wondered if it might help convey the change of tone from the ‘I was in love’ to ‘maybe I’m not’. I don’t think this works as I had hoped because the san-serif has become too dominant. I went back to Lato for the body as I thought it worked with both header typefaces.

For me it is the second version with the Segoe Script that is most effective, I think the header text draws attention and  suggests a personal story.

Parish Magazine:

I tried three approaches to this poster – all of which I realised on rereading the brief to post the work are wrong because I did them portrait rather than landscape! Anyway, I decided that the emphasis for this commission should be something eye catching, a clear ‘call to action,’ with an emphasis on the ‘artistic’ element of the volunteer role.

  1. Header – Myriad Pro 107pt; Body – Century Schoolbook 60pt/21pt
  2. Header – Perpetua Titling MT Light 80pt; Body – Palatino Linotype Regular 60pt/21pt
  3. Header – Perpetua Titling MT Light 80pt; Body – MS Ref San Serif 56pt, Palatino Linotype Bold 24pt

I decided to start with a clear san-serif header and a serif body text that lends itself to a ‘church’ type identity. Artistic is italicised for emphasis, and coloured to match the church interior. The more detailed information is combined in a box at the bottom, working on the basis that the earlier layout will have attracted enough attention to encourage the reader to read down.

Having originally just put the header in place on its own I added the cross to underline the ‘can you’ – reinforcing the ‘we need you’ message. I wasn’t sure if it was a bit clichéd but it seemed to add some balance.

In version two I added a serif header and made ‘artistic’ regular. Version three uses a san-serif body and a larger point size for the footer text, which is also reversed out in a different colour box. I think the second version has a more ecclesiastical feel but in terms of an advertising poster I think the third version would probably be clearest to read at a distance.

After School Club:

I used three approaches to the typography:

  1. Header – Eras Bold ITC regular 98pt; body – Century Gothic regular 36/27.5pt
  2. Header – Eras Bold ITC 110pt; body – Century Gothic regular 46/30pt
  3. Header – Most Wazted regular 136/67/62pt; Proxima Nova regular 48/34; body – Amsterdam Graffiti 96/102/129pt

I was a bit stumped with how to approach this one other than having the Manga character so my first version is very legible but a bit boring, the figure tends to dominate.

The second version I decided to play a bit more with the typography and used the ‘bored?’ in a vertical format as if it was weighing down on the figure. I used some colour accents to bring out the activities and the fact that they are free.

In the third version I went for graffiti types and created a more informal format, the text is run slightly behind the figure as if he is leaning up against the poster. I feel is the most successful of the three. This one also got the vote of my family!

Mandy & Josh:

I used three typeface combinations paying particular attention to the ‘club night’ part of the brief:

  1. Header – Techno Hideo regular 60/36pt; Body – Myriad Pro Condensed 18pt
  2. Header – Snap ITC 60/36pt; Body – Showcard Gothic 14pt
  3. Header – Fresno Black 60pt, Fresno Inline 45/36pt; Body – Agency FB Bold 17pt

This was the last design I worked on and I think it was the one I enjoyed the most. I wanted to create something that had a very strong club night feel and started by looking at a range of techno typefaces. Of all the designs this was the one where I experimented more with different typefaces, using colour and shape for emphasis. I think this was also the first time I started to see the typefaces as design shape as well as ‘words’ with particular meaning. I wanted the message to be clear but also wanted the typeface to create a particular tone and composition. I think the third design was the most successful in achieving this.

Research Point: Magazine typefaces

  By | |
Leave a comment

Research Point: Magazine typefaces (Graphic Design 1 pg. 97)

Go through the print material you have collected and divide it into ones that look easy to read immediately and those that don’t. Is this due to the typefaces used, the way the type is laid out – the number of words per line and the column width, or its alignment?

Work out from your examples what the designers have done to make things more legible and readable.

I can see that this activity could easily become a bit of an obsession! It was fascinating to note how fast I made the decision about what I felt was easily readable and worked well for me. It wasn’t until I started measuring and analysing the characteristics of the pages that I realised how much sits behind that almost instantaneous decision. I looked at a wide variety of print materials from the “Lakeland” catalogue and “Your Cat,” to “Time Magazine” and the “British Journal of Photography” (BJP) on the basis that this would give me some very different house styles to consider.

As I started deconstructing the layout I was very aware that my needs in terms of legibility and readability may not be the same as everyone else’s. I wear varifocal glasses and have a slight astigmatism in my left eye; for the most part I take my glasses off when I’m reading but that is dependent on type size.

In the end I analysed eight pages from six magazines, ranging from those I thought were quite legible and readable to examples I found very difficult to read. Rather than try and do everything on the computer I photocopied the pages that I wanted to look at and marked them up by hand. I was then able to scan them and add them to my learning log.

In order of preference in terms of my ability to read them, from best to worst, the articles are:

  1. A Tale of Two Hermiones: Time Magazine
  2. A Changing Nature: Your Cat
  3. In Print Lotus: BJP
  4. Labour of Love: Good Housekeeping
  5. The Mood: Elle Magazine
  6. Video: People Management
  7. You don’t want to alarm anyone…: People Management
  8. Experience: Elle Magazine

The first two were very close and I was surprised at choosing a justified text as this is usually harder to read. I think the centred headings and use of white space is probably what worked for me. It is a very simple layout, which is something I have taken note of.

I was also slightly surprised with ‘Your Cat’ because it is the only one I looked at that has four columns. I was attracted by the quite informal header typeface, and the San-serif body text with no more than six or seven words per line I found very easy to read. I think this was helped by the ragged, rather than justified edge. Overall, the tone set by the typeface seemed causal and friendly.

The BJP has used three equal width columns with a serif text and a bold sub header. My critique of this design would be that the typeface is a little small for me, but that may be expected as the emphasis seems to be more on the photographs than the text.

The Good Housekeeping page I just find really messy and I’m not sure where my eyes want to go. It uses six colours, mixed cases, regular, italic and bold typeface. It feels like the whole toolkit has been thrown at it. The serif typeface with ragged edge is reasonably clear to read but the overall design put me off reading.

Elle Magazine’s ‘The Mood’ uses a more limited typeface range and has more coherence than the Good Housekeeping page but it is too small for me to read comfortably, which I find off putting particularly because all the paragraphs run together without any space between them. The tone of the typography feels quite formal and probably aimed at a readership that I am not part of.

Both the People Management pages look overloaded to me. There is so much going on I am inclined to just flick past them. I think it has not long been redesigned to a smaller format, which I suspect was intended to make it look more contemporary. The heavy solid lines on “You don’t,” and the mix of colours and symbols and text on “Video” make the typefaces leap about on the page for me. The typeface on “Video” is also too small.

Again it was a close decision but Elle Magazine’s “Experience” is the least successful from my perspective. Small dense serif text, uneven column widths, justified text, narrow side margins all make this page very unappealing and something I am unlikely to read. The designer has used indents and the large capital “M” in an attempt to break things up but I don’t find it effective.

This was a really useful activity in terms of thinking about my own work. It has highlighted for me that I have a preference for a simple clear typographic layout but that I shouldn’t rule things out too quickly – like using justified text – as there seem to be ways to make it work in terms of readability and legibility. I was surprised to see the extent of the variation within each of the magazines in terms of design. Most seem to stick to two to three typefaces but these can have different formats, type sizes and colours.

 

 

Exercise: If the face fits 1

  By | |
Leave a comment

Exercise: If the face fits Graphic Design 1 pg: 94

This exercise comes in two parts, the first being to create a sample book of typefaces. Organising the typefaces into:

  • Serif for continuous text, and headings
  • San-serif for continuous text and headings
  • Script fonts
  • Decorative fonts
  • Fixed width, techno and pixel fonts

Identify which typefaces have bold, italic, black or light fonts.

Oblong sample book page

I took two approaches to this first part of the exercise. The first being to start to create a sample book and the second being to use software to organise the typefaces.

I decided to use the sample book as an opportunity to take the plunge and use InDesign. I have used other packages before like Publisher but a couple of earlier attempts to get to grips with InDesign were not entirely successful. I decided on a landscape format with a very simple design so the typeface could be easily identified and I could feature the different formats.

I learnt a number of things in setting up the sample book:

  • How to set up an apply master pages
  • How to set the document language
  • Turning off hyphenation
  • Fill and stroke
  • Adjusting typeface and characters
  • Locating and adding glyphs
  • Using past in place

I’m not convinced I produced the samples as efficiently as I could have but at least I’ve got started.

As an alternative I also signed up to MyFontBook, which allowed me to quickly identify and tag the typefaces on my computer. This is a great way to do the work of the sample book quickly but I’m glad I started with InDesign before I used this.

I can see how useful the sample books might have been in the past and can be helpful as a quick reference guide now; this feels like the start of an on-going process. I have only done two of each form of typeface in my sample book so far but have found the process very good for familiarising myself with InDesign and the typefaces on my computer. It was useful to see the different formats that typefaces come in (reglar, light, bold, italic etc.) and the different tone they can each evoke from fun and informal to serious and formal.

 

Save

Save

Save

Save

Research Point: Vernacular typography

  By | |
Leave a comment
Collage of vrnaclar street signs, handwritten and printed

Research Point: Vernacular typography (Graphic Design 1: page 90)

Vernacular typography can be very well crafted but it can also be crudely created signs done in a hurry. Either way it is using typography and lettering to create visual communications Take a look around you and identify some vernacular typography that you find interesting. Document the results.

Collage of vrnaclar street signs, handwritten and printed

Vernacular typography

I happened to be in Kentish Town for a meeting and it provided a perfect opportunity for looking at vernacular typography. In an age where digital reproduction is so easily available I confess I hadn’t expected to see many handwritten signs, but once I’d spotted one they seemed to be everywhere. I particularly liked the Laurent Perrier one because its message is so clear.

I also like Strollers mainly because it made me laugh. This is a coffee shop for all!  But the coloured type looks a little faded, the positioning of ‘retired people’ is slightly odd, and the lack of opening times seems to be a bit of an omission.

Save

Save

Typefaces around you

  By | |
Leave a comment
Collage of typefaces from a journey to London

Street Typography

I used my trip to see the Crewdson show at the Photographer’s Gallery in London as an opportunity to look at some of the typefaces I encountered on the way. To say they were ever present seems like an understatement. Typography was there in every aspect of my journey from my number plate and parking ticket to underground adverts and Emergency call systems.

The most common feature, with the exception of the Royal Academy logo, was that all the typefaces were sans serif. A couple used a script typeface. They were also a mix of all uppercase and upper/lower case. By the time I got home the exercise had almost become overwhelming, and it was interesting to note how much I probably screen out everyday.

I was intrigued that most of the typefaces were sans serif because my understanding was that serif type is easier to read (although Poole’s research suggests this is not a clear cut debate). Sans serif typefaces certainly look more contemporary but for me it highlighted the importance of the relationship between design and purpose, particularly where the intention is to convey a specific message.

Save

Save

Save

Save

Save

Research Point: Magazine typefaces

  By | |
Leave a comment
Paragraph of text from Elle magazine with analysis marks
Paragraph of text from Elle magazine with analysis marks

Typeface analysis

(Research point: Graphic Design 1, page 87)

Choose a magazine and look at the main typefaces they use for the body text and headlines.

I had bought a number of magazines to use for the various exercises and research points and decided to use ‘Elle’ magazine for this activity. This is not a magazine I’m particularly familiar with and it seems to have a very distinctive style so I thought it would be a good starting point. I used various online tools (Identifont, WhatTheFont and Font Matcherator) with mixed success. The various searches gave five matches for the main heading:

  • Nimbus Roman Modern Compress D
  • Euphonia Latin
  • Redeye serif bold
  • Ambroise Std Francois Demi – this was the closest match as far as I could see

On further research a couple of blogs suggest it is Didot, which having seen it, I think is correct. I am obviously getting a bit typeface nerdy because this blog piece on Didot’s history was fascinating!

The brief was just the kind of challenge that Hoefler & Co. loves: we were asked to create a typeface that works like no other, a Modern which — unlike the commercial cuts of Bodoni — would have hairline serifs, and maintain them over a range of sizes. From the Didot collection we chose the grosse sans pareille no. 206 of Molé le jeune as a historical model, and extended the scant material in Didot’s 1819 Spécimen des Caracteres with quite a bit of invention: italics designed to work at large sizes, a range of different weights, and the many characters that Didot’s workshop never made. In the service of the design’s thin hairlines, we drew each of the family’s six styles in seven different “optical sizes,” each designed to be used at a different range of sizes, for a total of forty-two fonts.

The ‘July’ subhead got 9 matches:

  • Vedo Book
  • Irma Light, Regular & Medium
  • Cyntho Pro Regular
  • Relay Wide
  • Family Bird
  • Relay Wide Light

It looks to me like Relay Wide Light is the closest match. At the beginning of the activity I noticed I was broadly scanning the words and the typefaces but I was then looking in more detail (see the image above). The sorts of things I started picking out were:

  • Bowl shapes
  • Whether there were serifs
  • The position of serifs – were they either side of the line or just above/below, right or left
  • Where serifs sharp or rounded
  • Angles – this was noticeable particularly on the ‘S’ character, did the top and bottom line up or where they slightly offset

This was another good activity for really looking at typeface construction and understanding the characteristics that enabled me to decide which typeface is the closest match. It was also interesting to see that although a magazine like ‘Elle’ has its own house style much of its content includes advertising with additional typefaces. I was struck in looking through the magazine at just how many typefaces are included; this must make presenting a consistent style challenging.

Once I had finished my typeface searches I came across this blog piece, mystery solved!

Domaine and Galaxie Copernicus in use for Elle UK by Suzanne Sykes & Mark Leeds in the UK.

Suzanne & Mark have really mixed it up with three totally different typeface families, including a forthcoming sanserif from Mário Feliciano. On paper and in theory, these typefaces shouldn’t “mix”, but in Elle they totally work. It’s a testament to the typographic skills of the designers that they’ve created a sympathetic environment for the fonts to thrive! The magazine is thoroughly contemporary, as it needs to be, and the pacing various throughout. Some spreads verge on controlled mania, others are calm and tastefully restrained.

Save

Save

Save

Save

Save

Save

Research Point: Typography 2

  By | |
Leave a comment
Images of protest placards

Protest Typography

Our civilization is based on the alphabet and numerals. These elementary marks have no semantic meaning, but have been assigned roles as visual substitutes for speech sounds and arithmetic quantities. (Meggs, 1992)

…typography with its ability to corporealize language can be a capable tool of intervention against issues that concern us as citizen-designers. In order to understand typography’s capacity as a means for design activism there is the need to perceive typography as part of a greater system, –a network that includes written communication, language, technology, politics and society. (Özkal, 2016)

Typography, it seems to me, has a crucial role to play in capturing our thoughts and putting them out in the world. Often this is probably done without much thought – we just happen to use whatever is set as the default on our computer or device. I remember for a long time in the organisations I worked for everything was Times New Roman for day-to-day communication.

Having worked with a designer when setting up my consultancy business I am aware that the relationship between the typeface used and the message you want to convey is very nuanced. We worked through a series of questions around the tone I wanted to set, as well as practicalities like legibility and readability. The typeface was saying something important about me and the character of my business.

I would argue that typography has an innate power. I have been collecting examples of protest typography on Pinterest and it is interesting to see that in most images of marches in particular, the placards are ubiquitous. The protest typography I have looked at so far seems to have a number of common characteristics:

  • It is designed to ‘shout’, to be big and bold
  • It is generally black, although reversed out typeface, and sometimes red are also used
  • Whether handwritten or printed it is predominantly all caps
  • It is also generally san serif, with quite a slab typeface
  • The message is usually conveyed as succinctly as possible – of the 117 images I have pinned so far the word count is generally between three and seven
  • Some are ‘designed’ and mass produced, others are handwritten on found materials

Its role seems to be to reinforce an uncompromising point. A statement that makes it clear what the bearer thinks about the issue in hand and that this view often sits in opposition to what might be regarded as a dominant ideology. I think this is what Oskal (2016) is referring to when he talks about being watchful of the invisible actors in typographic communication. This leaves me with a question about whether typography in itself is benign, is it purely the application that positions it?

Letters in their attempt to confront letters, create a crack that makes us become more watchful; hence recognize the invisible actors in typographic communication. Typography can work with or resist these actors, but in whichever way, to use its capacity it is necessary to perceive typography in its relation with other systems, such as language, technology, ideology and politics. (Özkal, 2016: 8)

References

Meggs, P. B. (1992). Type and image: The language of graphic design: John Wiley & Sons.

Özkal, Ö. (2016). Letters against letters: Typography as a means for Design Activism. Paper presented at the 5T Design & Resistence Conference Proceedings.

 

Save

Save

Save

Exercise: A typographic jigsaw puzzle

  By | |
Leave a comment
Sentence created using a deconstructed typeface

Exercise: A typographic jigsaw (Graphic Design 1. pg 89)

Using the deconstructed typeface provided try to put the elements together to create the phrase:

The quick brown fox jumps over the lazy dog.

Sentence created using a deconstructed typeface

Typeface jigsaw puzzle

As instructed I drew a baseline and a median line and then traced the various elements provided to see if I could construct the sentence. I also printed a larger version of the sentence to help me identify the shapes. This was fascinating in that it really highlighted the nuances of the typeface construction and was more difficult than I thought it would be. I used all but two of the pieces provided which I was pretty pleased with. There were a couple of points where I felt like I was looking for a shape I couldn’t find which was a bit confusing.

This was a very absorbing means of looking at the anatomy of a typeface and showed the importance of its construction. Things I might otherwise have taken for granted. In some ways it reminded me of doing calligraphy classes at school, not something I especially excelled at because it required an attention to detail I was not good at. I distinctly remember discussions about the pen strokes and creating particular bowl shapes.

Save

Save

Save

Save

Exercise: Playing with words

  By | |
Leave a comment

Exercise: Playing with words

Create a set of typographical representations that present both the suggested word and its meaning. Start by working on paper then move on to working digitally. (Graphic Design One: p. 83)

Scissors, scrapbook and words being cut up to show their meaning

Visual Words exercise

As suggested I started with scissors, glue and paper. I initially thought it would be quite hard to convey different meanings with a single typeface at the same point size, but once I got going the ideas seemed to flow. I think I ran out of steam towards the end and a couple of words defeated me but overall I was intrigued by how much could be done within the constraints of the exercise. It also served as a useful starting point for working digitally. The full set can be seen in the Playing with Words PDF.

I wasn’t sure if my digital skills were up to the task so I did a few sketches before I moved onto working in Illustrator and developed the ideas in terms of using different fonts and adding colour in some cases. I love words so this was a great exercise for me.

A range of words designed to look like their meaning

Visual Words

 

The exercise challenged and helped develop my Illustrator skills; while I was frustrated a couple of times in that I couldn’t get to exactly what I was aiming for, for the most part I was able to get close enough. The new Illustrator methods I learnt included:

  • Using pathfinder to join shapes
  • Using Object expand, creating a new layer and adding triangles with the pen tool. Then using object – divide – divide objects below – ungroup. By moving the individual elements I created shattered
  • Creating outlines and using Distort envelope – make with top envelope to morph text into shapes
  • Saving artboards as separate files

My family seemed to prefer squeeze and skimpy but I think my favourites are sodden, shattered and shy

Save

Save

Save

Save