Archived entries for

Good typography in Indesign – hanging punctuation

This post follows the series on good typography, and specifically how it can be achieved in InDesign. The last one was on how to achieve correct bullet points and can be found here. It also follows ones based on setting up a baseline grid, and paragraph and character styles.

Like the previous one, this article was influenced by a series on good typography by Mark Boulton. Mark rightly states that hanging punctuation such as speach marks has really suffered at the hands of graphic software and is commonly being used the easy and, you guessed it, incorrect way

I have borrowed these links from Marks site, and as you can see it clearly shows the  correct way to deal with quotation marks. Punctuation such as this should not indent the  line of text. Rather it should exhist outside the column  which gives a neat line down the page. It is the same with bullet points. The idea is that the viewer can scan his or her eye down the margin and see clearly bulleted points, or paragraphs that are quotations.

incorrect_quotes

correct_quotes

Anyway, so that is the correct way to deal with punctuation marks, but how best to achieve it on InDesign? In fact this is really simple in most cases, and does not require a long tutorial. It is done by using the story pallette, which can be found in window>type & tables>story.

story

Woah, were getting a little ahead of ourselves here, so lets take a step back and start from the top. This is our page. I have randomly repeated a quote, with examples of it in body copy as well as large at the top of the page, much like a title might be. A you can see, the quote marks are pushing the first line in, making it look messy. NOW we bring up the story pallette (window>type & tables>story). Highlight the paragraph or select the textbox, it doesnt matter as it will optically align everything within that box, and select the optical margin alignment tick box. Now enter a value in the alignment box. A good place to start is the size of the text, so if your text is 12pt, start at 12pt, however, in this example I have gone right up to 17pt for my body copy. In truth the tool is not perfect and kind of shuffles everything a bit. It also can be a bit fiddly. But given the circumstances it does give the best option for quickly sorting the punctuation.

ex1

On my larger text I have gone up to 47pt. It kind of depends on the font. Anyway, thats it. Thats how to do correct quotation marks in InDesign. Hope it helped. You can see that the example below looks much neater than when we started. I’ve always thought that its the little details that make good typography, so its definetely worth doing. Good luck.

finish

Ikea – good or bad typography?

ikea_fonts

Recently a client suggested to me that because they couldn’t use their custom font for all materials, for example online, in word or power point, perhaps they should switch all literature to Calibri to match the digital stuff. You can see what they were thinking…a brand, any brand is based on consistency right? Its the repetition of a feature or attribute over and over, until people begin to recognise it and associate it with your particular company. Obviously my reply was ‘no way!!!’. The problem with screen fonts I explained is that, yes you can have it consistent across all platforms, but it is also consistent with about 25% of all other online stuff out there. In order for it to be recognised, it also requires differentiation, otherwise everything blurs into one and you will never stand out or be recognised.

So I wonder now, wether this was actually happened with this whole Ikea thing. Perhaps the non-designer people got frustrated that their power point presentations to big investors or something kept having font issues with everything slipping all over the place. For a moment as well I considered the possibility that this whole thing could be a massive hoax or PR stunt. Obviously not, but I was straining to find a logical explanation to the switch from a custom made font that echoes structure, stability and a little class to a basic web font. And it is a web font, I mean that is what it is designed for. Perhaps that’s the point then, that Ikea are embracing new technology and throwing mother nature a bone by switching all communications online. Surely though they still have a need for in-store signage? Still, to me none of these explanations offer any logical reason.

From a visual point of view there is little doubt that futura would have the upper hand over Verdana. Verdana is designed specifically to appear on pixels and lacks the detail, intricacy and subtlety of a good typeface. “It has open, wide letterforms with lots of space between characters to aid legibility at small sizes on screen,” explains Simon l’Anson, creative director at Made by Many, a London-based digital-consulting company. “It doesn’t exhibit any elegance or visual rhythm when set at large sizes. It’s like taking the family sedan off-road. It will sort of work, but ultimately gets bogged down.”

I find the argument that the switch is cost based a strange one. “It’s more efficient and cost-effective,” says Ikea spokeswoman Monika Gocic. “Plus, it’s a simple, modern-looking typeface.” I mean surely its more expensive to switch than stay the same? And surely if they have a custom made version of futura, they have pretty much brought the rights.

The response to the whole thing has been massive. Designers worldwide have started petitions with numerous blogs to be found. None of which I have found are in favour of the switch I might add. Ikea spokes people have admitted they have been shocked by the whole thing. So what happens now? Will the 2011 brochure fall back into the arms of the ever faithful, handsome and reliable futura? After all, thats what happened when Coca Cola tried to change one of its trademark features. Before long the secret recipe was back on the shelves and the ‘new coke’ slung into the archives of branding disasters. And that was before the digital age where arguments and opinions tend to spread much faster than you can put together an ikea table.

ikeaverdana

3894020865_9e3480594c

beforeandafter_futura-vs-verdana

ikea-verdana



Get Adobe Flash playerPlugin by wpburn.com wordpress themes

Copyright © 2004–2009. All rights reserved.

RSS Feed.