written April 18th, 2009 · 0 comments

I don’t know about you, but I go crazy when I see bad typography, especially in established magazines and ones that I greatly admire! Most of the mistakes I see are so obvious to me and seem so careless, that it is just plain aggravating! How could a good designer miss some of these mistakes? (At least I assume there are educated or knowledgeable designers working at such magazines — but I could be wrong.) I don’t think these mistakes are done on purpose as a deliberate design choice either. When the leading is so tight that the text becomes a blob of letters that no one wants to read or it looks messy, it doesn’t look creative or trendy, it looks amateurish!

I was taught that when you want to push the boundaries of traditional design (such as using unconventional leading or other forms of spacing) you have to do it so that it looks deliberate, not like it is a mistake. And this is what I feel I find quite often . . . mistakes, or poor design judgment (I can’t say, I don’t know the designers). I do not want to insult any of the magazines that I have scanned for this entry, because many exhibit incredible design sometimes or have since changed their design(er). I am just pointing out what bugs me as a designer when I read magazines and how easily these mistakes can be avoided to look 100 times more professional!

Take a look…

Here are some examples of not enough leading that is very obvious and inappropriate.

Obviously the letters here in Hüller are frustratingly close to the line of text above.

Here the dots of the i’s are hitting the text above. Why oh why?

The tight leading makes this almost unreadable (or at least the desire to read it is taken away through this design) and I would argue that the letter spacing is also too tight. When I came across this call out in a magazine, I had no interest whatsoever in reading it. The text here is no longer legible, instead through compressing the space around the letters and words, the text has become a field of color and texture, like an image.

Here are some examples of column widths and rags that look rather ridiculous.

Here the columns are very narrow, which makes it uncomfortable for one to read the text. The short line length makes our eyes engage in too much movement, which distracts one from the text that one needs to read at a comfortable pace. There doesn’t seem to be any reason why the columns are so narrow, except perhaps for a preexisting grid. For an article in a magazine that is this long, I think the designer should make it comfortable for one to read it. Smaller, shorter texts (like call outs) can be more creatively designed with short line lengths, but something like this just doesn’t make sense to me, because this text is in a magazine and meant to be read.

An example of a bad rag. Period. The use of hyphenation is imperative here, which the designer has avoided, especially when the column width is so narrow!

Another bad rag. For the same reason.

A realllllly bad rag. Why are people scared of hyphens? When used in moderation, the designer could have made this rag much more even and visually unobtrusive. Right now, that rag screams, Look at me! A rag should be smooth and pulsating, like an even wave.

 Bad spacing — of all shapes and sizes!

This kind of stuff bugs me. It used to be an innovative design device, then a trend, and now just a boring old trick. But here it doesn’t even make sense. To break up a word like this, should bring new meaning to it, not confuse the heck out of the reader as to what this says.  I had to read it twice to see the whole word. It’s not even that visually appealing.

Something about how the lines with parentheses bugs me.  If I could correct where the line with parentheses was placed, adjust the leading and increase the letter spacing, it would look like this (done in Photoshop):

——

This bit of typography bothers me because it is obviously supposed to look nonchalant and cool. (Just throw the text into a text box, hit right justify and done.) The list just flows on, irrelevant of the content, and it is too hard to read, and again, my eyes scan this text but do not want to decode the mess of texture. This mess is a list, a useful one in fact, of prices that one might really find interesting if they could read it.

First of all, if one looks closer, all of the items listed except for the flowers are Humana. This fact could have been used to simplify the text and organize the list in a less complicated way. What could also help is the use of a bit of hierarchy in the list, with changes in the item placement, font weight or color. (The leading here is negative — not enough, which I also would change.) I could think of many many different ways to redesign this:

I only changed a few things here. I divided the list between the lines without breaking up the items from their prices. I replaced the word Euro with the symbol (this increases the speed with which it can be read and decreases the amount of extraneous text). I moved Humana into parentheses below all the Humana items, also to decrease the amount of words. Without changing too much of the designer’s original intent, I’ve increased readability tenfold.

Here, I put the items in a traditional list form only because I think it makes the most sense, since the design does not take up much more page space. One realizes this is a list right away. If such content is in a magazine, I assume it is to be read, and not just fluff filling out empty holes on the page, so let it be read! I also differentiated between items and their prices by using two weights, regular and italic.

Here I added color to heighten the hierarchy. Since the list is about prices, I chose to put the amounts in black rather than the items in black (this gives them more visibility and attention).

Here I tried the colors in reverse and added a little slashed line to imitate a receipt.

This is my final off-the-top-of-my-head sketch for typographic improvements with a bit of creativity thrown in. I think you can see my point now that there was little thought put into the designing of this text.

(to be continued)