Typography Commandments

Typography Commandments

1. Thou shall use rich Black

This is a tip that every beginner should know. It  passes down on a line of wisdom from art director to junior or its learned trough trial and error. If  you choose a black text for print it is very important to   make sure  you are using  rich black and it doesn’t contain any other colors. On the computer screen ,the eye can be easily fouled but the printer will always may have a different representation of the same black.  There are many different possible ink combinations – the most common “rich black” contains percentages of all 4 inks: 63C, 52M, 51Y 100K. This particular variant owes it’s popularity to Adobe Photoshop – when an RGB file is converted to CMYK, areas that are absolute RGB black (R0, G0, B0) will wind up with this combination, unless certain default settings have been changed. Other possible flavors of “rich black” are “Cool Black” (60C, 0M, 0Y, 100K) and “Warm Black” (0C, 60M, 30C, 100K).

black-inks

2. Thou shall not mix the wrong typefaces

When using more than one fonts, you should always pay attention what fonts you mix. OK, both of the fonts look good , and that’s great and important but  it is also significant how the two work together. It is preferable choosing  fonts that are similar( first example)  rather than using very different typefaces like I did in the second one.

22

32

3. Thou shall not use too many fonts

Although sometimes tempting, using many fonts can be very confusing for the reader and  the layout will lack unity. So it is better to stick to using two , maximum three different typefaces.

41

4. Thou shall not abuse centered text

Centered text can be perfect for a title , but not  for a long text. Our eyes are used to read from left to right so it’s always better to choose a left aligned text ( of course the opposite is suited for the cultures that are used to read for right to left ). Also centered text has appears more often to be  jagged and broken ending up in an unwanted amateurish appearance.

52

5 .Thou shall not misuse serif fonts

The standard style for most content on the Web is sans serif fonts, such as Arial or Verdana. That is because  sans serif fonts are easier to read on-screen, they look pretty good when their size is reduced, and they tend to retain their visual appeal across different platforms and browsers. Also there is no room for a serif font in a book or magazine where a good readability plays an important role.

But Serif fonts  can be used with success  for titles and subtitles on many sites and that can lend a nice effect on heavily sans serif pages.

61

6. Thou shall not use similar values of color

I’ve seen this happening too many times. A poor contrast between the color of the text and its background will ALWAYS  result in a poor legibility. So it may appear like a good combination between two similar colors but this combo it’s simply no good if the text can’t be read properly (for more information check   Understanding Color -part II ).

similar-values

7.Thou shall check the text yourself

It may appear easier to just copy paste the text you received but it is safer to check for yourself for any misspellings or punctuation errors . And if the text allows you, it is even safer to double check . I remember the case of a friend of mine who had to pay from his own pocket some expensive business cards because he misspelled a name and didn’t check before sending them to the typography.

14

8. Thou shall use proper leading

The leading (the spacing between text baselines) is another important characteristic of the text. Too small or excessively big values make the reading more difficult. The difference between a text badly set (or one with the nasty double spacing) and a text with correct leading is like the night and the day. You need to experiment a lot because each font requires a different leading.

leading

9. Thou shall use proper tracking & kerning

Tracking or letter spacing is  similar to leading only it is applied to a group of letters. Kerning it’ s a little more exact , increasing the value between specific letters. Both of them are  very important because they  prevent letters from running into each other, especially during print and also  they improves readibilty. (for more info check out Typography, type and typefaces )

tracking

10.  Thou shall not use inappropriated font

Just because a font looks good it doesn’t mean it’s the right font for your composition. Before choosing a font , take a time to study the shapes and sizes in your layout. Do you have thick or thin shapes, round or square , is there a lot of detail or the layout is simple . Reflect all these attributes into your font !  For example if you have a lot of  round shapes ,it is better to follow that line with your font instead of using a square font.

sq-circle

rd-circ

So, make sure you always adjust your font with the rest of the layout so that they complemet each other. This way your composition is nicely balanced.

44 Comments on “Typography Commandments

  1. 11. Thou shall not confuse typography with grammar. Poor English speakers usually speak another language that you can’t understand.

  2. You forgot one: Thou shalt never, ever use Comic Sans or Papyrus lest ye seek mockery of great proportions! ;)

  3. Is that a deliberate mistake where you begin an article on typography with your h1 heading crashing into the h3?

    Otherwise an interesting piece covering the basic rules we all see broken every day. You just might want to practice what you preach ;)

  4. I also wondered if you spelled ‘from’ as ‘form’ (which wouldn’t be caught through spell check) to purposefully bait the smug, overly-critical finger pointers such as myself with nothing better to do than distract people from the ‘spirit’ contained in the message by drawing attention to imperfections in the vessel by which it is delivered.

    I like your message. Great ‘rules’ to type by. Thanks for taking the time to remind us to pay attention to our details.

    • Guys like you keep guys like me on my toes, unless, ofcourse, you’re a gal.

  5. “Also there is no room for a serif font in a book or magazine where a good readability plays an important role.”

    That goes against every readability study I’ve ever seen. Books and magazines *thrive* on the readability of a serifed font.

    “10. Thou shall not use unappropriated font”

    I do believe you mean “inappropriate” fonts. Unappropriated has an entirely different meaning, and while it’s true that thou shalt not use unappropriated fonts, your circle graphics suggest that you meant “inappropriate” rather than unappropriated. :-)

    • I see you’ve changed the order of the top 10 and you’ve also changed “unappropriated” to “inappropriated” — closer! :-)

  6. I do have an issue with your rich black point. It may be true for web copy but print copy (especially small text sizes and light weights) should always be 100% K, if one of the plates is off register in print you’ll get blurry colored halos around the text.

  7. I second zenmonkey on the rich black. As a designer in an ad agency, I’ve found the more plates my text uses, ESPECIALLY small text, the blurrier and more illegible it becomes when it prints.

  8. While there’s always an exception to every rule, these are pretty good. However, I tend to steer clear of rich black since it can create issues printing. I suppose if you’re going to use rich black in type, don’t do it any smaller than 12 points as it may cause it to look blurry even if the registration is off by a dot.

  9. Good points, all. However, the letter spacing on the headlines is way too tight.

    I would add the following:

    Commandment #11: AVOID RIVERS. If the space between words (caused by left and right justification) is large enough to sail a barge through (as in this article and way too many websites), please do all typographers and readers a favor by making your text left justified/ragged right. Or, if you cannot bear to have one side ragged, please take pains to adjust kerning/tracking line by line. Let’s not fall prey to the same bad typography prevalent in print newspapers!

  10. Good idea and article – these things should be sitting in the backbone of every graphic designer.

    Although I don’t agree completely with some of the commandments:

    1. NEVER rich black in text or in black backgounds with a lot of inversed text under 12 pt (for print)

    2. Rivers, wrong leading and wrong letterspacing/tracking/kerning completely ruin any otherwise well-designed product.

    3. I think you’ll find very few books printed with sans serif fonts?!! According to the rules of readability, it is actually the other way round, when it comes to text in print.

    • Couldn’t agree more. I couldn’t even read most of the article, the “shall” kept contrasting and bothering me so much. If he’s going to nitpick all of these typography flaws, it stands to reason that something this easy to fix should be corrected.

  11. NEVER USE RICH BLACK ON BODY TEXT!

    This is a nightmare to print, because of registration. Use it for headlines/display text.

    • I agree with you Angela. I’d go further and say that a lot of this is rubbish. The post is full of typos and reads as if its been scraped from other websites…

  12. Nice, but I’m not sure the example for item 10 is really a great one. The square font against the circular graphics could actually work, because – if done properly – it could present a sense of conceptual contrast or irony.

  13. As its been said a couple time, NEVER EVER EVER use rich black for body copy.

    Also, for “cool black”, you don’t need 60-cyan, 100-black. 40/100 would do just fine and not risk as much oversaturation of ink.

  14. Rule #1 for readers of this post:

    Thou shalt not make an ass of thine self by nit picking every little wrong detail.

    So there are a few disagreements. Deal with it. You still read it, didn’t you?

    Buncha’ picky gits.

  15. If thou art designing an ad for a newspaper, thou shalt use ONLY 100K for black. Do NOT use rich black, you will be requested to change it to accommodate the press. And if thou submit thy ad in RGB, a curse be upon thee.

  16. The whole serif/sans-serif thing is debatable. Some people argue that serif fonts are easier to read, as the serifs naturally lead the eye from one letter to the next. If serif fonts have no place in magazine/book text, then why are most, if not all, novels written in serif fonts? Because they're easier to read. I've always been taught that SANS-serif fonts should be for headers, and SERIF fonts for body text.

    As I said, you can make the argument for both sides. The way I see it is this: sans-serif for web page body text, serif for print body text. And the opposite for each medium's header text. :)

  17. The whole serif/sans-serif thing is debatable. Some people argue that serif fonts are easier to read, as the serifs naturally lead the eye from one letter to the next. If serif fonts have no place in magazine/book text, then why are most, if not all, novels written in serif fonts? Because they're easier to read. The way I see it is this: sans-serif for web page body text, serif for print body text. And the opposite for each medium's header text. :)

  18. “The leading (the spacing between text baselines) ” is a good answer for me.

    Leading has two meanings? One is the spacing between text baselines. The other is the spacing between underside of one line and upperside of the next line. No?

  19. Anyone who is a professional designer or has been through 4 years of school for it knows these kinds of things and some of what is listed is wrong. I hate how “everybody” thinks they are a graphic designer and they just google stuff found all over the web and take it as their golden rule of design.

    #1, Rick Black should only be used for web design and headlines, NOT body text. Unless of coarse your goal is to tick off your printer and/or make the reader think they need a new glasses prescription.

    #2, Sure I agree, but this is subjective for the most part. His examples are obvious.

    #5, Serif fonts are better for print like magazines and books. And you use 100% black to print them. The serifs help lead the readers eye from one letter to the next, thus helping reduce strain on the eyes helping to read longer passages of text. That’s why serifs exist. Sans serif is better for the web because it has a simpler design with less clutter and serif can look blurry or cluttered when reduced very small.

    Of coarse, beauty is in the eye of the beholder, but that’s the basic rule.

    #6, YES, But I think this is more of an issue with web design than print because anyone with any experience would not do something like this and most new designers with degrees in google start off on the web doing things like this.

    #7, A graphic designer is NOT a copy editor. Repeat, a graphic designer is NOT a copy editor. With that being said, I still run a 2-minute spell check and fix any mistakes I notice. As much as it’s not my problem, I don’t want my client to end up with the problem either. They may not be able to afford to hire me for their next project if they eat this cost.

    #8 & 9, You learn how to do this in Graphic Design 101. They belong here.

    #10 is subjective, as most design is, and definitely not a “Commandment” of typography.

    • I want to add, about #7, I recently made a mistake because I had to re-type a very long and cumbersome chart full of technical data because the client didn’t supply me with the raw data in anything other than an image embedded inside a Word document. Not only did it need reformatting to match the style of the publication, it was low resolution and blurry. It was faster and easier to re-type it than to take 3 days going back and fourth through the chain of command to get the raw data from the author. (this was not a freelance job and I was not in contact directly with the author of the article) So I retyped it.

      When the proof came, the author got a copy (electronic to verify layout and whatnot) he notified the publication editor who told me. I swapped some data in 2 different cells by mistake. So I fixed it and submitted a new file, noting the corrections, to the printer. My 2nd proof was correct, but their press operator grabbed the wrong file and printed from the 1st one by mistake. We saw it when our extra copies were delivered after shipping. It was a $20,000 job.

      The printer took responsibility and agreed to print a correction in the next publication, but this mistake, had it been reprinted and re-mailed, could have cost the small printing company a big price.

      And I can’t fault them 100% because had I not made the mistake, they wouldn’t have had a wrong file to accidentally print. Had the author sent me better files, I may not have made the mistake. If my company had a policy to submit raw data and original files for all charts, tables, graphs, and photographs, I would have had better things to work with and it would not happened. I am typing up a policy for a request to put in place as we speak. (or as I write)

      So, the fault usually lies mostly with 1 party, but all in contact with the process hold some sort of blame.

      I don’t however think there is any excuse for a designer to send business cards to a printer with a misspelling in their client’s name. A graphic may not be a copy editor, but a business card has what, 10 words at most. The most important being the person who’s paying you–so spell their name right. It’s the designers job to make sure they are correct in the business card example.

  20. When I look at your RSS feed it gives me a page of strange characters, is the malfunction on my side?

  21. Still so many typos.

    ‘Trough’ instead of ‘Through’, ‘Its’, instead of ‘It’s’

    ‘Fouled’ instead of ‘Fooled…

    You should read the 10 Commandments of Creating Credibility Through Correct Spelling and Grammar.

Leave a Reply

Your email address will not be published. Required fields are marked *