Typography Rules

vocabulary list
assignment pdf

1. Intro

Typography is the one discipline that graphic designers seem to love the most. There are 1000s of books about it. A graphic designer’s job often includes photography, packaging, web design, coding and a lot more, yet typography is the one territory that I consider the “premier league” of graphic design. Graphic Design is Picture, shapes (including white space) and most often, type. Pictures are said to say a 1000 words, still, most graphic design assignments include a headline and text.

There are some rules of typography that have been established, like, we read from left to right (or in Hebrew and Arabic from right to left) and many more depending on size and arrangement that helps the reader guide through the content easily. If we break those rules it should be on purpose to help the message, otherwise, it looks like a mistake and will confuse people. Usually we don’t notice the typography, and that’s a good thing, otherwise, there might be something confusing us. They say that typography is

When Steve Jobs built the first desktop personal computer, he remembered his typography class in high school. He build-in a hand full of typefaces with the system, which at the time, was ground-breaking and a forward-thinking step. Some laughed at it because the computer screen was so bitmapped that the type looked like an 8-bit computer game. Too rough to display the fine details of most letterforms. But it set Apple apart from its competitors and set the ground for Apple’s popularity with graphic designers.

Typography is also the backbone of any graphic design. They say that a picture can say more than 1000 words, but most graphic design relies on messages with words, which use letterforms.

They also say that good typography is something everyone sees but nobody notices. Knowing just a few rules and conventions you can change from an amateur to a professional.

Whenever I look at resumes at work or at my portfolio classes, I am stringent to double-check typography rules, just like typos. To typeset your work perfectly will set you apart from the rest, and in today’s competitive world of design, it will give you the advantage you need to survive it.

2. Most importantly: Intent – Know Your Content.

For any written content, the font you select gives the very first impression. With the pictures, layout, and the typefaces you set the tone before the readers have even started to read the first word. The readers are already getting an idea of what they are looking at.

That means you need to know the content, and the goals before you can find the most suitable typeface. A great-looking poster is not successful if it doesn’t attract the right audience. This requires becoming an expert at understanding the subject and users for every new job you start. One should make an invite to a party on campus and it should be graded on how many people show up.

Examples: David Carson’s Surf magazine, a pharmaceutical flyer. Emigre’s Designer’s Republic, one of my own flyers and .

So, the very first thing to think about is understanding the intent of the content. It might help to make a list of the goals and message the writer trying to convey, and a description of the audience and context. Without understanding why we are doing this, it would be plain guessing to do it right.

some stereotypical typeface examples:

Some contexts and audiences may allow for a lot of design, but we need to be careful not to draw too much attention away from the actual writing. A long text all set in a script font would be painful to read, and readers are used to a handful of typefaces (called the workhorses) that readers became very familiar to read like Helvetica, and News Gothic, or Times Roman and Georgia.


Here are the biggest categories and their general intents:

PDF

3. Visual Hierarchy of Headlines and Text

The graphic design elements of a design need to guide the reader, who are trained to decode these elements in a hierarchy. Usually, there is the main headline (h1) at the top, possibly with a tagline or sub-header (h2). And there is the main text paragraphs (p), and some small captions next to pictures. If elements have contrasting characterists , their differences can take on dominant or subordinate positions in the composition. These contrast can include size, weight, colro, or space.

The readers have become familiar with this system; if we break these conventions, it will cause confusion. One can break it on purpose to attract attention, like a headline on the bottom.

Note: Importance is not the only size and color, it could also be archived with the open space surrounding it.

On this flyer, the most essential info is the date and the title, the subheaders are the places, the text elements are the names of the DJs, and the captions are their associated record labels.

hierarchy gives order

Sometimes an order is not what we are looking for. A poster, for example, is more than a mere public announcement. This goes back to intent, the audience can ask for a more intellectual approach. Like these posters of studio CMYK from Germany. The posters are for theater performances in what used to be East Germany. Breaking the rules was a form of disobedience against the regime. After the wall came down it still continues as a style to break the middle-class and bourgeois rules. As always, context is everything.

• hierarchy gives order

3. Alignment

left: most common, more impersonal, can create a strong “rag”

centered: more formal, conservative, grounded. Used at formal invitations

right: weird, hard to read, could be useful for captions using the “Law of Proximity” (see below)

justified: can create “rivers” in narrow columns. It is often used in publications because it is easy to read, space-saving, and since there are several columns next to each other and the space in between would look scrambled if it was justified at such narrow measures. (Narrower measures are easier to read than long ones, long lines make us tired)

5. Line Spacing (Leading) and Line Length

Leading — pronounced ledding — is the spacing between lines of type.

The space between the lines creates pauses and visual balances. For most text, the optimal line spacing is between 120% and 145% of the point size. Most word processors, as well as CSS, let you define line spacing as a multiple. Or you can do the math—multiply your point size by the percentage. (The text in this paragraph has a line spacing of 135%. It looks fine.)

For wider “Measures” (line lengths), a more open line spacing is preferable because the eye of the reader needs to travel back to the beginning of the next line. This is an exciting topic, especially for typography for web browsers, where the width can vary depending on the device or preferences of its users.

Line Length (Measure)

Too long or too narrow line lengths are hard to read. In short, justified columns, the effect of “river” will easily become a problem. Some rule often quoted is that body text should be 2-3 roman alphabets long.

6. Letter Spacing (Tracking or Kerning)

Letter Spacing adjusts the horizontal distance between letters, also called Tracking. Kerning is an individual adjustment, for example, if a small o follows a capital T (To). Then the o moves closer into the empty lower space of the T.  When you use capital letters together, that spacing looks too tight. That’s why you always add 5–12% extra letter-spacing to text in all caps or small caps, particularly at small sizes.

Look at this Scholastic logo: it looks pretty evenly spaced. But if you look closer you will see that the space from the right bit of the L is actually much closer than the other spaces, because of the large hole that the letter “L” and “A” create on top.

• most fonts are letter spaced for 10-12 pt text. At other sizes, you might need to add or subtract some space

7. Contrast

The contrast of the color or the vertical and horizontal lines in a typeface will affect readability too.
Contrast (the difference between 2 colors)

Thin serifs will melt into a dark background and swallow up the type

Content on patterns or photo backgrounds is also problematic to read.

8. Clarity & Consistency

Most important is not what more you can add, but what you cannot take out anymore.

They always say that it’s not what more you can add, but what you cannot take out anymore. When you add graphic elements, they ask for a reason to be there. That reason could be to be graphics, like a Designer’s Republic poster has no reasonable content, on purpose), or a Call-to-Action (CTA).

A call to action (CTA) is a statement designed to get an immediate response from the person. It’s used in business as part of a marketing strategy.

And don’t stuff content to the edges of the paper’s edges.

Use stylesheets in the programs to make changes globally throughout the document. Websites use stylesheets called CSS. It makes it easier to change the size of all headers at once without forgetting some, which would be inconsistent with the rest.

Once you established a visual system, keep those styles as one visual language. Inconsistency looks amateurish.

 

 

For example: To indent a  paragraph at the beginning sets it apart from the last text block and therefore makes it easier for readers. You can also add a space between the paragraphs instead. Doing both is called “belt and suspenders”; it’s redundant and draws unnecessary attention to itself.

9. The Law of Proximity

Our brain perceives these elements to be one group.

This law applies to line spacing too. If the space between words is bigger then between the lines the text looks disjointed.

10. Anatomy of Type

There are some funky terms typographers use. It’s nice to know them and some are quite cute too, like the tail of an “a”, or the ear of a “g”.

pdf that explains it step-by-step

11. Details

– Avoid a single word at the last line, called widows or orphans, they create attention. It’s not visually stable and creates unplanned white space. Give it a friend.

Solution: widening textbox, editing text (may not be an option), text size, soft-returns (shift-return), add non-breaking space (web  ), kerning.

– Paragraph breaks, try to keep them on the same page. Keep at least 2 lines together.

– Avoid line-breaking Hyphens (like the word twenty-two). Hyphens break the reader’s concentration (i use 15 letter min), never hyphenate titles or names or email addresses.

– Use ALL CAPS sparingly (unless you are told to as in a marketing job), they scream.

– Set acronyms in small caps (like NASA or ASAP), or Initials (CIA or FBI). They often over-power the rest of the text. Small caps are uppercase letters at a small letters’ height. Add a little letter space, but not periods.

– Hang punctuation in a text to get proper visual alignment and look professional. Punctuation is hung outside of the actual text block. Also for right-aligned sentences. This law is only used at a larger text, not body text.

– How to use symbols that are not on the keyboard: Diacritical marks, accent, that indicate different pronunciation. Especially with names, like François. Degree symbols, or monetary, or math. Access special characters tips: google a list of symbol list, for web: google “characters entities,” but not all typefaces include these special characters. And also at my last name: Dästner

Hyphen -, En Dash –, Em Dash —

This is important because your resumé depends on it.

Em dashes can replace commas, colons, pauses, abrupt changes of thoughts. Use Thin spaces around them, not full spaces. Connect thought using Em-dashes.

En-dashes are used for ranges of time, duration, distance. Or like New York–New Jersey border, also use thin spaces around them

Hyphens, dashes: Five-Dollar Bills, Re-sign vs. resign, Cross-section, Twenty-One, phone numbers, SSN, double names, minus sign is different

Curly vs Straight Quotes

Replace missing characters with apostrophes, but if you type Bread ’n’ Butter, copy/paste right curly to the font. Other examples: the ’40s, not the 40’s

Back to Graphic Design Course Material Main

references:
Butterick’s Practical Typography
Blog by Oranda Velarde
Blog about Typography in Use
Erika Lupton’s http://thinkingwithtype.com/

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.