Category Archives: Core Concepts Part 4

Vintage Typography

I just wanted to include some lovely old photos belonging to my dad. Here’s the front of one of them, I’m not too sure of the date here, but this is my great grandmother. You can see the photography took place in both India, and the UK.

dads photoC

 

dads photoA dads postcardD

Needless to say, I do normally spend more time looking at the front of pictures!!! I hope my ancestors will forgive me for finding both sides intriguing…

Dads photo1

Hierarchy

“Using about 500 words of Lorum Ipsum (or other dummy text) you are going to 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.”

 TV Listings Magazine

Here’s the budget tv listings magazines, shown on a previous post. Depending on the price point, they are either very busy and colourful, or slightly calmer (eg The Radio Times)

image

We were asked to mock up a page, and give 3 different font pairings for each magazine page. I used my font management tool to browse different font options, with the relevant text typed in.

font screen shot

 

NOTE – It really makes me cringe that I have mis-spelt her name throughout!!! Unfortunately I didn’t spot this until my tutor pointed it out. It would have been very helpful to ask someone to proof read.

I also thought it would be fun to include an image, which isn’t easy when it comes to getting permission, but I did find this one. Here it is, imported into Indesign. (Please click to enlarge)

It would be great if “Shelia” looked a bit less clean cut, and maybe a bit older too… I can’t help  but imagine big hair and a nice bit of red lippy!

This font is Cooper Std. I chose it as its a bit playful and chunky!

Sheila screen shot cooper

And Gunshuh. This looks a bit typewritten, which I think suits the style of a “confession”!

Sheila screen shot gungsuh

And Hobo… its chunky, curvy, and not too serious.

Sheila screen shot hobo

I then had to think about font parings, and wrap the text around “Shelia”. This was fairly straight forward, as I just drew around her with the pen tool, and set the text wrap accordingly.

Here’s  Hobo and Calibri (12pt) I named my fake magazine TV Crazy. So tasteful eh. I quite like the leading tight, each row of letters look like they are sitting on each other.

hobo and calibri yellow

Next is Gungshu and Arial (12pt)…slightly more tasteful colours this time.

gungshu and arial

And Cooper Std with Cordia (12 pts).  (Cordia fits in a higher word count than the other body copy fonts)) You can see that I’ve chosen sans-serif  12pt  fonts for each one, as I think they all contrast OK with the headers.

cooper and calibri2

For comparsion, here’s Hobo and Asperjita, which is a serif font. Despite the mix of serif and sans-serif, because Hobo is curvy, I think this isn’t such a good pairing.

(Please click to enlarge).

hobo and asperjita

 

Computer Magazine

I looked through several photoshop and web design magazines for reference with this brief. As you might guess, the photoshop ones are reasonaby colourful, but the web design ones tend to be quite pared down and no-nonsense!

image

image

I chose to go fairly minimalist, and mock up a double page spread on (fictional) anti-virus software. I really think the whole article works best in a plain sans-serif font but I experimented a bit along the way.

This is Calibri with Minion Pro. As  you can see, I separated the paragraphs with a line break, and included a table with a score for each product.

computer calibri and minion pro

This is Futura with Baskerville for the final section below the table. Futura doesn’t seem particularly well suited to the large body of text, but it was interesting to see that for myself. I adjusted the kerning between the “f” and the “t” in the header, and the leading in the body copy.

futura and new baskerville

 

Finally, here’s Calibri again, but extended throughout the article except for the final section at the bottom, which is Cambria (which seems quite clear to read in italics) I also decided to justify the text this time, as an alternative option.

computer calibri and cambria

On reflection, I think I’ve made the drop caps a bit weedy – I used the same font size as the sub-heading, but on looking at this with a fresh eye, I think it could be larger. Also, maybe the colour evokes something like a tax form?!! Which is as about as excited as I get about anti-virus computer software – maybe I went a bit too boring!

Newspaper Review Section

As this page is for a book review,  I re-used one of the covers I made for a previous unit. (Obviously the emphasis here is really on typography, but its fun to include images!)

I looked at various newspapers, and they seem to have quite a lot of similarity in style. I chose to make mine the size of the local paper, simply because 500 words fits on it with loads to spare. I’ve used 5 columns, and stuck to serif typeface only. I feel that it works best to use the same font family, and simply vary the size and weight.

Here’s the first variation in progress, you can see I’ve just imported 500 words, which leaves a great deal of empty space on the page!

Newspaper screen shot Adobe Caslon

My first thought was to insert the picture at the beginning of the article. but on looking at actual newsprint, they tend to put pictures in a few columns into the piece, so I did the same, and split the page, as though another article appears below it.

News rview Page Caslon

I noticed not all papers actually use  justified text, so I’ve gone for left aligned (ragged right) for the version above. The other fonts I tried out were Garamond (justified) and Cambria. The former is noticeably more delicate, and fits in a bigger word count.

News review Page cambriaNews review Page cambria

This is my final version in Adobe Caslon.

News review Page Caslon full page

 

I’m fairly pleased with this, but its not perfect! I really do like this kind of task though, I can’t really say why, i just love it!

Looking at print

“Collect as many newspapers, newsletters, magazines
and brochures as you can. Start by going through them and dividing them into the ones that
immediately look easy to read 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”

First I took apart a magazine to see how its structured –  it was easier to cut it up to see how the same fonts are repeated in each section, and how similar information is grouped (eg within a circle, as a style of sub-heading, using line, shape and repeating colours etc)

image image image image image

Next I focused on layouts that were particularly inviting to read. Here’s Cyclist magazine, and Cosmopolitan.

image image

As you can see, the article from Cyclist magazine has gorgeous drop caps. The body copy varies between articles, product reviews are sans serif, but this one shown has a serif font. The point size is quite small, but the leading is generous, so the extra horizontal white space makes it easy to read. The number of text columns elsewhere in the magazine doesn’t exceed three, and the average word count is about 7 per line. (Um, not sure how many characters that is, but  7-13 words are considered fairly comfortable to read). You can also see white space above, and on the left hand margin, which makes it feel nice and airy.

Ditto for cosmopolitan, there’s plenty of whitespace. The left hand article had very small snippets of text, averaging only 5 words across. But each item is short, and broken up horizontally, to give our eyes something to hold onto.

imageimage

More examples.. Cyclist magazine uses a maximum of three main columns, but also uses a small narrow one to insert extra info. Again, the mini column has plenty of space above it, so it doesn’t feel cluttered. On the right, Pro Cycling magazine, again, white space, three columns ( and a very classy illustration!)

image image

This a a special anatomy edition of a magazine I picked up. Its not a huge long article, but all the information is grouped very clearly and leads your eye around the page. The limited colour palette helps to make it feel calm and unified.

image

This advertising broshure from Abel & Cole is lovely. Again, uncluttered, matt paper, friendly readable font…The egg page text is centre aligned,  but because its surrounded by the shape of the eggs, it doesn’t jar with the left aligned text on the other page.

 

image image

And now for the slightly less readable! First up is this tv listing magazine. Its meant to to fast, fun and frantic, so it does the job! Its sans-serif, 4 columns, slightly closer leading. The margins are narrower, there’s less whitespace, lots of colour, and everything is shouting for attention!

image

But there are repeating elements, with the colours, and everything is neatly left aligned..

And then there’s this… As you can see the contents page is partly left aligned, then centre aligned at the bottom.

image image

The yellow text glow and the gradient fill on the lettering might need a re-think…The pull quote is inserted strangely, and the general impression is cluttered. BUT the body copy is left aligned, in two columns, in a consistant font, which does make everything quite readable.

image image

I would just like to pause here, and say its all very well chuckling at bad layout, but I’m still learning! It doesn’t take much for my laptop screen to look as mis-matched as this!!!! I think its one thing to recognise good design, but quite another to try and re-produce it.

Which is the next bit of this task!

“Now select one of the designs from your research that you like and think works. Using
the dummy text, try and copy the layout and design as closely as possible. You will need
to measure the margins and column widths. If you don’t have the exact typeface get as
near as you can. If you are copying a page that includes photographs just leave 10%
tinted boxes to indicate their position.”

I chose to copy this page of Cosmopolitan. There are plenty of pages with a more decorative font, but I don’t have anything all that similar, and I really wanted to try and get a reasonable match.

image

My first job was to get a ruler and measure the margins etc within the article, and try and find a match for the fonts. I noticed the main header is (hopefully) Baskerville.  As I mentioned before I have a version of this font family, but not an exact match. Still. its close, so this is a good start. Unfortunately I can’t identify the sans-serif font used in the footer, and coloured capitals within the article. Based on the shape of the capital “C”, my nearest equivalents are Arial and Cordia. I went with Cordia though I know its not perfect!

Next I set up my page in Indesign, with 18mm margin left and top, 3 columns,with a 3mm alley between them. I roughly counted the number of paragraphs, and generated some suitable dummy text, and got started.

The header “Generation GUILTY” is “Bertold Baskerville Book, at 65, and 75 point size. The subheading is 15 point italic, which I repeated within the blue circle. The body copy is 10pts.

I tried to keep some consistancy, and used Cordia at 10pts for the footer. However the text at the top reading “Cosmo trend” is 19pts, and the coloured text in capitals is 13pts. I know you have to keep an eye on usiing too many font sizes, but hopefully this sticks fairly closely to the original page…

Here’s the first version on my screen. it took me a while to find the option to turn off text wrap for the text placed onto the circle! And to use “Insert Special characters” for the bullet points. (Otherwise the whole paragraph becomes indented)

Screen shot Indesign

I then saved it as a pdf and printed it off to see what it looks like!

image

Two things struck me, the blue is completely different, and I’ve got a line break after each paragraph, while theirs are indented. Oops.

Here’s my new version on screen. Please note the bright blue…

image

And in print. I know. The print colour is never the same as on screen!

image

 

image

Despite the colour difference, I’m fairly pleased with this. I did noticed the final column seems a whisker lower. Grrr! But this is better than I was expecting. Phew! I love doing this!!!!!

We were asked to try a second article and see what happens when we adjust the leading, tracking etc…

I wanted to try this layout with the small column in Cyclist magazine. Here it is…

imageCyclist page

As you can see I don’t have a match for the drop cap, and I made it too large. I left the small title and footer off this time – just because its rather time consuming, but this column layout was a challenge, because of its uneven sizing. Despite looking up the correct way to do this, I can’t find a perfect solution – but apparently CS6 has variable column widths. (I’m using CS5)

Anyway, as you’d expect altering the format of the text changes all the spacing and how the text fits on the page! I hope you’ll excuse me not uploading what this looks like centre aligned, or with tighter tracking…it looks horrible!

Here’s more leading, with a different font – Advent, in a slightly smaller point size.

Cyclist page extra leading

Its still very clear – but you can see now takes up more room because of the extra leading, so my text has spilled over and would need a re-think as to how to fit on the page!

If The Face Fits – Part 2

“Now identify which fonts you would use in the following commissions:

A short story in a woman’s magazine entitled “I thought I loved him; now I’m not
so sure” (Text 1300 words and headline font)

An advertisement in a parish magazine asking for more helpers on the flower
rota (A6 landscape)

A poster to advertise an after-school club for boys aged 13 – 14. (A3 sized)

Your friends’ engagement party (A5 sized)”

We have been asked to mock-up each of these commissions, so this has been the perfect opportunity to not only experiment with fonts, but also get to grips with Indesign. I mentioned previously, this is the part of the Adobe suite I’m least familiar with, so its been fun using it…

I’ve only just scratched the surface, and there’s plenty more to learn, but having learnt to wrestle with unpredictable layout with web design, this is much easier because it stays put!!! Hmm. I shouldn’t get over confidant about these things should I?

Women’s Magazine Short Story

I downloaded 1300 words of dummy text first, to get an idea of the size of the article. It extends over more than one page, but here’s just the first page for now. Common advice is to use a sans serif font for the headline, and serif for the body copy (or vice versa) The point being to avoid fonts that are too similar, as it can all look a bit mis-matched.

First font pairing: Titan One (Headline), Minion Pro (Body text).

Hmmm. Boring!

IthoughtILovedHimB

Second font pairing: Mistral (Headline), Arial (Body text)

I think this has potential…(maybe sort out the leading)

IthoughtILovedHim Mistral

Third font pairing: Katerino (Headline)  and Myriad Pro (Body text)

This is my favourite! I worked it up a little further, using a character style for the first line of each paragraph. The text is set quite large at 14 pt, so it covers three pages, including a placeholder picture. It does fit in a double spread at 11pt,  but I wanted to make the text large enough to be clear on screen.(…and have room to play with text wrap around an image)

(Please click to enlarge)

3 page katerino

3 page katerino2

 Parish Magazine Advert

I thought about this one from various angles. Is the parish magazine very formal and conservative? Or a bit more modern? Do they have the budget for colour?

The first font I considered is Trajan. Its a formal sort of font, I imagine might be used within a church setting. The only problem is, I only have one weight, and the font is all capitals. So what should I pair it with for smaller sized text?

Here’s a basic mock-up, to see what text works…First Trajan with Sitka (12pt)

trajan sitka-01

I don’t think this combination works very well. the small text isn’t very clear, and the relationship does seem to have the problem of being similar-but-unrelated.

Here’s Trajan and Candara. I chose Candara as it has a slightly delicate feel, and  is sans serif. I think traditionally it was thought that serif fonts are generally more readable over larger blocks of text. But you can see why sans serif is widely used on screen. Its definately clearer!

Trajan Candara-01

Here’s a black and white mock-up for low budget printing (I imagine the parish magazine needs to watch its pennies)

Church Flowers 1-01

I think maybe I went a bit overboard playing with the flowers here! They are made from asterisks of different sizes. Fun!!!

Next I returned to Sitka to see the subtle difference it makes when you stick to one font family. This is all Sitka below (Sitka Banner at 43pts and Sitka Text Italic at 12pts). But I don’t like the the way I’ve styled this at all – it doesn’t convey the subject matter very well. Bit bossy and shouty/business-like?

A6 Landscape Church Flowers Sitka

Its not easy on the eye to read capitals spread over four lines either!

Sitka again – nope, I think this just looks rubbish. Even though its the same font family, it just doesn’t pull together at all. I think all one weight, lower case would look better.

Church Flowers Sitka2-01

Here it is in Bradley Hand

Bradley hand-01

The design still looks a bit weedy to me though, so I’d like to try a different idea.

Assuming the church has the budget for colour, and is wanting a rather more up-to-date sort of style, here’s my final idea.

This is Bickham Script and Myriad Pro.

A6 Landscape Church Flowers Sitka

And reversed out using Bickham Script and Candara.

Church Flowers candara and bickham2

 

 

Hopefully it might appeal to a modern female audience (not that men aren’t invited to help with flowers but somehow I think more ladies will be interested in this sort of thing!)

 After School Club

I looked through the text to see how to group the information, and where to place the emphasis. Then I did a basic arrangement again to get started. This is a large scale poster  but obviously I couldn’t actually upload it at full size!

The font is Angelina. I included the stars as a bit of interest, and right aligned the text. (Though this needs a tidy) I get the feeling this is a bit nicey-nice for the target audience though!

Boys club right aligned

 

How about Stencil Std Bold? I could have used army colours for a different effect too. Angelina remains right at the bottom as a contrasting bit of text. I prefer this, as I think it has more emphasis.

Boys club stencil bold

 

And this font is Scratched Letters. I had to scratch the question mark, as it doesn’t include one.

 

scratched lettersDone2-01

 

And here it is tilted!

 

scratched letters

Your friends’ engagement party

This is obviously meant to be relaxed and fun, going on the text provided. It also says the couple would like it to look like a night club flyer. I hovered between slightly tasteful and kitsch depending on the font. I think this was my favourite brief!

This is Clive Barker, with some gradient backgrounds, with Myriad Pro. I don’t think these work that well…They need a bit more oomph!

Engagement2-01Engagement3-01

Next is the retro Airstream, which doesn’t look like much until you add a stroke to the letters.

Engagement-Airstream3-01Engagement-AirstreamBlue-01

And Angelica with Calibri. I like this blue gradient!

angelica and calibri-01angelica and calibri2-01

I’m not claiming these are tasteful!!!

Its hard to know when to stop with all this experimentation, as you could go on and on with trying different fonts, but hopefully my choices make some sort of sense!

If The Face Fits – Part 1

“Create your own sample book of typefaces on your computer that you can refer to.
Organise them into:
• Serif for continuous text; readable at small sizes and those suitable for headings.
• San-serif for continuous text; readable at small sizes and for headings.
• Script fonts that look handwritten with a pen or brush.
• Decorative fonts only suitable for headings or ‘fun’ uses.
• Fixed width, techno and pixel fonts for use on the web or to give a computer
appearance.”

I’ve made some attempts to organise my fonts previously, by simply typing all of them into Illustrator under the headings of serif and sans-serif. It takes hours, and then I found I had to look through all the documents to try and view what I was looking for.

This exercise is great, as it made me think “Right. Time to look into Font Management Tools.” There are plenty of useful online reviews discussing various commercial downloads such as “Suitcase”, and others. I eventually settled on “Nexus Fonts” to organise my fonts (its free – yay!). You can create categories to group relevant fonts together, I’m sure its far more basic than some, but it certainly does the job for now. My entire font collection isn’t vast – but it’s already proved to be FAR easier to organise my fonts. Its also very easy to delete them, which I find is helpful too.

Once I’d installed Nexus Fonts, I could start creating font categories, and name them whatever I liked. You can then drag and drop your fonts into the newly created folders. Some of these are self-explanatory, others are maybe a bit eccentric, but make sense to me! I’ll no doubt carry on re-naming and refining as I go along. naturally this takes hours… But is well worth it.

Here’s a screen shot. Currently showing all fonts installed on my computer, rather than any specific category. (Categories listed on the left)

NexusFontScreenShot

The little TT and O symbols  next to the font names refer to Truetype, and Opentype. I never remember…hang on..looking it up…Its to do with formats…

TrueType was developed by Apple, and then licensed to Microsoft. This is a slightly older format, and not always cross compatible, as each company made their own adjustments.

Opentype is a newer format, developed by Adobe and Microsoft, which is crossplatform. Sometimes considered to be a better format than truetype.

Right.

Serif Fonts Body Text

Here’s a screen shot of some of my serif fonts. Actually only a few are available in a useful number of weights, such as Minion Pro.

Serif Body21

Serif Suitable for Headings

Serif Header 5

San-Serif Body Text

At first glance, I have a reasonable amount of sans serif fonts suitable for body text, but obviously the ones without italic and bold are less useful.

Sans Serif Body1

The majority of my fonts are Windows system fonts. I know some designers are sniffy about using any pre-installed fonts, but never mind, this is what I have for now. I found several of the Thai font families (such as Browallia, and Cordia) are very small. How do I know they are designed to support Thai?  Its thanks to this Microsoft info:

http://www.microsoft.com/typography/fonts/family.aspx?FID=230

Its a list of all their system fonts, and a bit of info about each of them. I found myself clicking on each name to view background info on the fonts! Ahem.

By the way, I also got curious about what some of these letters stand for such as UPC. It stands for Universal Product Code. Apparently this means the font is compatible with barcode technology. (I stumbled upon a scary forum where a man was asking how he could create his own barcodes, as he finds them fascinating. Gulp. I thought typography was anorak-y!!!)

Sans Serif Body11

. The letters UI stand for user interface – ie good for screen use.

Sans Serif Body19

Vrinda supports Bengali. Lovely letter shapes!

vrinda

We were also asked to show which sans-serif fonts suitable for body copy were available as Regular, Italic and Bold. I haven’t pictured them individually but here’s my category  selected in Nexus Fonts. Briefly they are: Arial, Browallia, Calibri, Candara, Corbel, Cordia, Deja Vu, Freesia, HP Simplified, Iris UPC, Meiryo, Myriad Pro, Segoe UI, Utsaah, Verdana…Not many at all!

I don’t think I’ve entered Segoe into my main sans-serif group! Grrr! More organising!

sansSerifRegBandItalic

 Sans Serif Headings

Here’s some of the fonts I feel are more suitable for headings, or small amounts of copy.

SansSerifDisplay1-01

 Script and Handwritten Fonts

Script-01

Handwritten 5

Fixed width, techno and pixel fonts

monospaced

This could go on and on…Oh! I haven’t shown any decorative fonts, or my retro category….

OK. I’ll stop now!

 

Vernacular Typography

It gets quite addictive noticing typography, logos and signs… Though I don’t think I’m alone – a new estate agents have opened in Tavistock with an eye catching design. Several people I know have noticed it too!

image

There are quite a lot of resources online in reference to vernacular typography. Here’s a definition I found useful. “A visual vernacular is a look native to, or associated with a particular era, culture or region…such as ‘very French’ , ‘street’ or ‘rural'” There is naturally a lot of discussion about how much big business signage has taken over our local spaces, and how little variation there is now. I have struggled to find signage that really fits the definition of vernacular. The following maybe does represent small businesses that are open to the public, and that have evolved over time, creating layers of different fonts, and ‘generations’ of signs all blended together.

. image

This is from a campsite in Westward Ho. I like the way the blue has faded unevenly. On the same site, there are signs blue tacked to the door. I think these could be written in any language, and we would all know they are pieces of information about the room you are about to enter!  No matter where you are, it seems likely that information is printed off the computer, not hand written

. image

And there are these elegant signs, I’m guessing they were put up at during improving and landscaping the site.

image image image

Another campsite I know well, it’s Langstone Manor, within dartmoor national park. Here’s a photo of their old sign.

. image

They have a lovely new sign now

image

really like the colour too, and the welcome in different languages! The brown tourist signs are another thing you see a lot in Devon

. image

The other thing that remind me I’m not in a city, is the amount of country pubs.

imageimageimageimage

I think you can tell by the signs they follow a pattern – simliar greens and reds, with gold serif lettering. Another kind of typography which goes back a long way, is carved into stone.

imageimageimageimageimage

Waymarkers have been around for centuries.  There is so much granite on dartmoor, it makes sense to use it! You might be able to see that one of these dates from the 1970s, continuing a long tradition of working with stone.

A Typographic Jigsaw Puzzle

 “This exercise is designed to help you to look at typefaces more closely…
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”

jigsaw

I looked up some information first…This typeface was made by type designer, writing master and printer, John Baskerville (1706-1775).

Further information here

http://historygraphicdesign.com/index.php/the-age-of-information/corporate-identity-and-visual-symbols/67-olivetti-company-giovanni-pintori

http://www.linotype.com/702/johnbaskerville.html

http://www.myfonts.com/fonts/bitstream/baskerville/

I was a bit stumped with this for a while, as I was unsure what we were being asked to do! At first I thought the phrase was already written in order. Then I started to see the shapes were randomly positioned, and how they might join up.

I then looked at Baskerville in detail, which helped me to look for the letter parts, especially as I noticed details such the “x” is made up of different width strokes, or the shape of the letter “q” etc…

Here it is:

baskerville

I used layout paper to trace each of the letterforms as I found them. On the left, I’ve marked how I connected all the component parts…

I’m not sure i have got this totally correct – but I did my best! You can see I ticked off each letter ’til I knew I’d found the whole alphabet.

imageimage

Next once I found all the parts I could, I took a fresh sheet of layout paper, and drew the baseline, and median line, as suggested. Here are the finished letters displaying the phrase “the quick brown fox jumps over the lazy dog”.

image

Even with tracing these letters, i was struck by how hard it is to be neat! Spending this amount of time scrutinising a font certainly does make you notice the detail. Also, despite being careful, I can see some of the style is lost, and the letters aren’t as elegant as they should be. My fault, I obviously need more tracing practise!