Tag Archives: Typography

A5: A Fairytale Rework

  By | |
Leave a comment

My final rework has come about in response to feedback from my tutor about how some of my final pieces lose the energy of my original sketches as I move them into the digital packages. It is also a fun but reflective piece on my own journey through Graphic Design One and how sometimes I may have let Wendelin Witch get the better of me about the rules I should follow.

I decided for this last piece to throw caution to the wind and just let loose, I also wanted to work backward and forward between digital and analogue to see what difference that might make. I wasn’t too sure how to approach it but I was so taken with the Serif Fairy book that I thought about a much younger readership and a fairytale type approach. My tutor also suggested a ‘zine format could be a useful way of revisiting A5.

So I sketched a quick story board and Wendelin the TypeWitch was born!

8 cell storyboard skethces for a fairytale

Storyboard sketches A5 rework

I hadn’t decided if I should work in InDesign or Illustrator but in the end created a range of assets in Illustrator which I then printed and used to create analogue collages. It is designed to be an A5 stapled pamphlet and I have left it deliberately rough and ready, avoiding the temptation to tidy things up!

This process was great and I wish I had felt confident enough to do it earlier on. I know my tutor was encouraging it but I wasn’t sure how to go about it. I guess I needed to feel I had a bigger toolkit before I could get there.

Family feedback seemed to think it was fun, but felt I was mean to melt Wendelin at the end!

Save

Save

Save

Save

Save

A type of island: San Serriffe!

  By | |
Leave a comment

San Serriffe

On 1 April 1977 the Guardian produced a 7 page travel supplement on the tiny tropical republic of San Serriffe, “a small archipeligo, its main islands grouped roughly in the shape of a semicolon, in the Indian Ocean”, which was apparently celebrating ten years of independence.

The country was in fact completely made up as an April Fool’s joke. The name San Serriffe and the shape of the islands were just the first clues; everything connected with San Serriffe was named after printing and typesetting terms.

The name itself refers to sans serif typefaces; Bodoni, the capital, is a variety of typeface; the two main islands are called Upper Caisse and Lower Caisse; the indigenous islanders are known as flongs, a mould for making type, and the whole Republic is ruled over by the dictator General M J Pica, named after a unit of measurement in type. The Guardian

I howled with laughter when I found this, it really appealed to my sense of humour. I love the detail that went into the joke and was amazed by the follow up coverage it has also generated.

What was interesting was how many of the clues I could now spot having done section 4, it was made all the more delicious because I could join in the joke and spot most of the typographic terms. Something I doubt I would have been able to do before the course!

Save

Save

Exercise: Magazine Pages

  By | |
Leave a comment

Exercise: Bike Magazine (Graphic Design One page. 107)

For this exercise I looked at ‘Bike Magazine,’ which seems to be based predominantly on a two-column format. Where there are exceptions these are full-page images, full-page data tables or three column reviews. I was surprised to see the prevalence of quite large images, although given that much of it is about different bike models, I probably shouldn’t have been. The typeface throughout is serif, and variation comes from different weights and sizes.

I took the two-column grid and large photograph format and created five variations based on the headline, ‘You are what you eat.’ Although I had already noticed it in other exercises it was fascinating to see the different tones set by the layout, images and typeface choices.

  1. Fruit image, Sanserif heading and body text: Has a slightly neutral tone, and I would imagine the article to give me some broad information about the benefits of a healthy diet
  2. Fruit image, Serif heading and sanserif body, three column layout: gives a more formal tone and I would imagine would probably contain a science based approach to diet
  3. Burger image, sanserif heading, subheading and body text: I think this one is interesting in that I can imagine the article could equally be talking about the issues of junk food and obesity, or promoting veggie burgers, or gourmet burgers
  4. Burger and Filo parcel, text all sanserif: this could be a comparator piece between junk food and fine dining, or extoling the virtues of the variety of English cuisine. I could imagine this in something like Good Housekeeping
  5. Filo parcel, script and serif heading, subheading and body: lots of white space and the cool blue tones speak to me of fine dining. I could see this as an article talking about a particular restaurant, dish or ingredient in glowing tones

It is really helpful to see how even small changes can change the tone and possible message a design is communicating. This is both rewarding and a little daunting, in that it can feel a bit overwhelming when faced with so many possibilities. I suspect this highlights the importance of a clear brief and good relationship with a client.

Assignment 4: Show Me (Part 3: Designs)

  By | |
Leave a comment

I decided that I would work on two concepts for the final Show Me designs – a minimalist approach, and a Pop Art style.

Minimalist

I started with the Minimalist version and initially sketched out an alphabet to explore the minimum strokes that are needed to allow a letter to be legible. Fortunately, the word ‘type’ has capital letter forms that seem to lend themselves to this style – I’m not sure some of the rest work as well!

Hand drawn minimal alphabet

Minimal alphabet sketch

 

I then did a number of sketches of both the word ‘type’ and the possible layout.

I wanted to keep the cover sparse with a minimum of information. It features the title, symbols for the 3 sections and a bar code. I decided I would limit my palette to black, white and red, and I would use sanserif typefaces. I did a search for some minimal typefaces and looked at my existing collection. I then chose to use three typefaces – Infinity, Source Sans Pro, and Futura PT.

After looking at my sketches, and asking for some feedback from my family, I decided I preferred the version with the word ‘type’ descending across the page. Using InDesign I created the cover and began laying out the pages. This proved quite challenging in terms of how to provide the information and keep a simple layout with lots of white space. As a result I have gone with two double pages to keep the design consistent. I also elected to use a square format because it worked well with the cover typeface. I created three versions:

Version 1: I used a basic grid to set out the information, and added red to draw out particular elements and create breaks in the layout. Having initially tried the last page arranged vertically, I couldn’t get it to looked balanced so I moved to horizontal rows instead. I used Infinity for the large question mark because it echoed the cover typeface. I also created the visuals for the last page. I found several possible cats but decided on an outline version as it worked better with the rest of the format. I then adapted it in Illustrator to create more of a question mark tail.

(Click on cover image for slideshow)

Version 2: based on the first version but I changed the question mark typeface and went bolder with the red. I added tints behind the main body text, as well as more space between the headings and paragraph text on the final page.

Version 3: I reduced some of the red on the second page and changed the format on page four reducing the size of the question mark and putting the header across the top.

Pop Art

I used the same development process as for the minimalist version; some sketching and background research. I was particularly struck by Peter Blake’s ‘Dazzle Alphabet’ and looked at how I might create something with that influence.

Peter Blake images and Dazzle Alphabet © Peter Blake

Using Adobe Draw I sketched out an idea for the cover, I used this method because it is fast and I find this works well when I’m thinking things through. It is also really easy to use fill colour so I can see the composition develop quickly. I had originally thought I would use this as a base drawing, which I would then tidy up in Illustrator/InDesign.

However, I remembered some earlier feedback from my tutor about the final design losing some of the urgency and freedom of my original sketches. I decided to be brave and use this original digital drawing as the cover, this felt risky because its messy but it seemed to work with the Pop Art theme and I wanted to challenge myself to develop it. This proved quite difficult particularly having started with the minimal design, as soon as I used a grid structure in InDesign the layout started to tighten up again and there was a mismatch between the inside pages and the cover.

At this point I was close to dropping the idea and trying something else, but after researching some typefaces I thought I should carry on and keep developing it. I liked the contradictions of something being handwritten but now infinitely repeatable being used; it felt in keeping with the critiques underlying much of Pop Art about consumerism and mass production. I went on to develop three versions:

Version 1: uses bold block colours and lines drawn with the mouse so they are evidently hand drawn.  I decided on typefaces that echoed comics/80s advertising type text – Brush Hand New, From Where You Are and Lato. I also introduced repeating motifs, which was also a feature of Pop Art. I wasn’t sure this version pushed the concept far enough so decided to make changes.

Version 2: I changed the block colours on the inside pages and added a ‘whaam’ type motif with the 2000yrs. I also added black strokes to some of the typography to add to the popular culture type feel. This looked better but I thought the colours were still not quite right.

Version 3: For this version I went red on pages two and three, which I think works better with the splash motif. I also made the archetypal structures in the background a little more prominent.

I think overall the minimalist version is probably the most successful and I have a preference for its clean structure. I made a minor change to the last question mark (back to Infinity typeface), and removed the orphan from the quote on page one. I see this as the final version.

However, I am really glad I experimented with the other version, it is more fun and vibrant and in a style that is definitely out of my comfort zone. With each version I felt I was getting braver and I think this was important in terms of recognising some possible self-limiting assumptions I carry. It is hard to shrug off the notion of what ‘proper’ design looks like and be less constrained and more playful. I think I am starting to get better at experimenting and taking a risk on an approach that might not work out.

 

Save

Save

Save

Save

Save

Save

Save

Assignment 4: Show me (Part 2: Type behaving badly)

  By | |
Leave a comment
he word type wih the letters cut out so they are hinged

When I was researching protest typography for my Pinterest board I was really intrigued by the idea of typography and power. Having read an article by Co.Design and its focus on power and the role of DIY typography I found the work of Emily Schofield’s and her Situationist Typography.

“Typography is a tool of communication and it has to abide by these rules to be efficient,” explains the graphic designer, “so on what level can a letterform express protest? Can it break out of its supposed structures?” Initially, the designer experimented with many forms in print, playfully obscuring and dissolving letter but her move to digital type brought a broader application: “Can it be a typeface that actually acts, that doesn’t work? That’s what the digital can do, you can create action in a typeface.” Projects of protest

Schofield created an online programme that took a word you typed in and then morphed and disrupted it. This got me thinking about type behaving badly and how I might develop an alternative design. Rather than work digitally I started by cutting up the word ‘type’ and arranging it differently.

I then thought about cutting out the letters but in some ways that would simply produce a similar effect to reversed out text online. So rather than cutting the letters out completely I decided to try them being hinged. That got me thinking about what might sit behind. Initially, I was going to use a flat colour or possibly some texture. Then I thought I might put the word ‘type’ repeating behind. Thinking about the origins of typography in the West I eventually decided to use a copy of some pages of the Gutenberg bible.

I used a slab letter typeface (Myriad Pro) and decided to put the hinges in different places so the letters all sat at different angles. I made a prototype with just paper (version 1), I then repeated it with a heavier weight card (version 2). I then offset the letters, defying the rule of type being orderly and conforming to the rules.

I really liked the results but was a bit stuck on how I might use them as part of a design for the assignment. While they photograph reasonably well their sculptural nature doesn’t really translate to the 2 D page or monitor view. Maybe this is anti-type and no-one else gets to read it! Time to move on.

Assignment 4: Show Me (Part One – development)

  By | |
Leave a comment
Mindmap show research for a typographic design assignment

Brief:

Design the font for use on the cover of a magazine called type and write a short article for the magazine using a range of typefaces, with typographic illustrations, drawing on all that you have learned in this section. The article should include sections on:

  • What makes a typeface interesting
  • How a typeface is constructed
  • Question marks
Mindmap show research for a typographic design assignment

Show Me mindmap

I began with my usual process of creating a mind map. A brainstorm of all the things that came to mind as I was thinking about the assignment. This raised a number of points:

  • The physicality of the production of type and how much of the history remains in the terminology we use
  • Its variety and the fact that typefaces are constantly evolving and morphing
  • A formalised anatomy and underlying rules for how best to work with type
  • How typography has been integrated into different artistic movements
  • Its role in conveying messages and therefore having a notion of ‘audience’

Three ideas emerged in terms of where I might take the design:

  • A minimalist approach
  • A Pop art/collage style
  • An approach based on the materiality of type and its origins

I had also been sketching, just playing with different approaches and layouts. I think it’s fair to say I’m not the most accomplished at hand drawn type but it helped me evolve the designs I would focus on.

I used a couple of online tools to try and help develop a typeface. One was based on my handwriting, which I deliberately exaggerated:

Example of a handrwitten typeface

Handwritten typeface

This was fun to develop but I don’t think it was ever going to be a serious option for my designs. I tried FontArk but found it difficult to use and it kept crashing.

I also went back to some of my earlier research, and examples in my visual diaries around Pop Art and minimalism. I continued collecting for my Pinterest boards and following feedback from my tutor for Assignment 3 I have started using my ‘Swipe File’ board as a more eclectic collection place, just pinning things that catch my eye rather than being organised into a particular theme.

I found a number of online resources like ‘Thinking with Type,’ that were really useful in terms of understanding type construction and design ideas. Alongside this I watched YouTube tutorials and did a lot of reading around the subject. I found ‘The Typographic Workbook’ particularly helpful.

I was starting to formulate my design ideas but realised I needed the text for the articles so I knew what I was working with in terms of content. I may not have followed the brief precisely but I decided to go with the aspects of typography that interested me. The first was around how typographic design needs to focus on both the micro and macro levels. This is important in relation to how we read and the fact that we don’t read letter by letter but scan and pause allowing time to process the visual information when we pause.

In terms of construction I suspect that was supposed to be about ascenders, decsenders, ligatures etc., but I was fascinated by the more fundamental construction. Western capital letters are based on five archetypal structures that apparently have remained unchanged for nearly 2000 yrs. This was intriguing and I could see how it might be incorporated into a design.

Alphabet laid out to show the five underlying structures

The five archetypal structures

I found a really useful thread on Quora about the origins of the question mark and this suggested some of the visuals I might include.

The research stage helped highlight a number of choices that I would need to make  as I approached my designs:

  • Tone
  • Style – serif or sanserif
  • Readability and legibility
  • Relationships and layout

Save

Save

Save

Save

Save

Save

Save

Save

Exercise: Hierarchy

  By | |
Leave a comment

Exercise:Hierarchy (Graphic Design 1, pg. 99)

Design three different pages:

  • An interview with a TV actor in a listings magazine entitled: Will Sheila tell the naked truth?
  • A review of a new piece of hardware or software in a specialist computer magazine
  • A book review in a newspaper’s weekend edition

Research these types of publication and identify three different combinations of typefaces appropriate for each magazine. Set these combinations so that your header is above 12pt in size, your body text is 12pt or below and subheadings sit in between in your hierarchy.

Naked Truth

Looking at the listing magazines there is a reasonable variation in format. Most of them seem to include blocks of colour and images. Some are based on a very standard grid with up to three columns. I decided to go for two columns with san-serif body type, (Lato, 12pt). I added a large header (Futura PT 36pt) in bold within a colour block to grab attention. The sub headers are Lato Bold in 18pt and I added a callout box in 24pt. I find the listings magazines quite busy in format so I wanted typefaces that would be reasonably clear amongst the other elements. I also adjusted the leading and tracking to try and even out the ragged end a little. Justified text using the three columns seemed to have too many rivers making it harder to read. Overall, I think it was reasonably successful in replicating the format of listings magazines, but I’m not sure it is a very creative interpretation.

Technology

Technology magazines vary in their typeface use from very contemporary to quite traditional, but many seem to favour serif with justified paragraphs so I decided to use Museo Slab with Minion Pro. The main heading is 60pt (Museo Slab), the call out boxes are 18pt with body text at 12pt. I wanted to wrap the text around the mobile phone image rather than keep it in columns and this took me a while to sort out. After some persistence I finally made it work and decided to tilt the image so it carried across all three columns.

I ran the header into one word because it is still readable as a sentence but I liked the way it lined up on the page. It makes a clear statement about the content of the article. I didn’t use subheadings because they would break the flow but added highlight boxes with larger point size for emphasis instead. I was quite pleased with this layout because I think it fits in its genre and is clear and readable. It also forced me to keep improving my InDesign skills.

Book Review

Having looked at the format of some different newspaper book reviews it seemed to me they all had a fairly clean grid layout. Most included an image but these were relatively small. They were either all san-serif or a mix of serif and san-serif. I decided to set myself a challenge and use three typefaces for this layout – heading in Corbel (60pt), subheading in Roboto Bold (20pt) and body in Merriweather regular (12pt).

After trying both formats I decided to go without hyphenation even though it makes the right edge more ragged. The format is very plain but I think it does what is expected of a book review. My sense is that the focus has to be on the review and that the design should not get in the way.

This slideshow requires JavaScript.

Of all the exercises and projects in this unit this is the one I probably found the most difficult, and not necessarily because of the design requirements. It was more about the frustration of feeling I didn’t have the level of skills I needed. I am sure there are improvements I could have made but it seems there are so many variables to change in terms of point size, paragraph layout, weight, leading, kerning and so on. I found the more I fiddled the worse it got. So in some ways it feels like each design is a compromise where I have achieved the best I can given my current level of expertise. I hope that each is at least recognisable as an appropriate format for its genre.

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.