The Most Useful Conventions of Typography

vocabulary list
assignment pdf

When Steve Jobs build 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. The screen resolution was pretty rough to display the fine details of most letterforms, and it would take a few rounds of improvement to make them look less bitmapped, but it set Apple apart from its competitors and set the ground for Apple’s popularity with graphic designers.

For any written content, typography gives the very first impression. Before we even start to read, we already get an idea of what we are looking at. The very first thing to look at fro any content is its intent. Without understanding why we are doing things it would be plain guessing to do it right.

Intend

• most important: the typeface needs to match the intent of the content.

Hierarchy

The Graphic Designer needs to guide the reader, who is used to conventions of a hierarchy of elements. Usually, there is the main headline (h1), a tagline or sub-header (h2), the main text paragraphs (p), and captions. The readers have become familiar with this system; if we break this convention, it will flare confusion of the readers. 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

Alignment

centered: more formal, conservative, grounded
left: more impersonal,
right: weird, hard to read, maybe 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 and space saving.

Line spacing (or Leading)

Line spacing is the vertical distance between lines of text, the space between each line. It 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 the beginning of the next line.

• if the line-spacing is too tight or too large it’s difficult to find the next line to read and makes the readers tired.

Line Length (Measure)

Too long or narrow is hard to read, ought jagged margins. Unless it’s justified, which is adding white spaces, creating a river effect, 50-78 characters are considered ideal. Complicated typefaces maybe less. Justified length is better for long lines. Set body text 2-3 alphabets long.

Letter-spacing (or 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.

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

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.

Clarity & Consistency

Most important is 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 graphic, 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 to the rest.

Game on shapes of Type: https://shape.method.ac/

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.

The Law of Proximity

If text is close to another text or element they seem to belong together. 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.

Anatomy of Type

pdf that explains it step-by-step

 

Nitty-Gritty

• 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. 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 Initialism (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

Prime symbols (for inches and feet) are like straight quotes, not curly quotes. Single curly quotes are for nested quotes (inside a quote). “ ‘ ” ’ (option+curly quote). Straight quotes: straight quotes:´ ˝ (command+shift+e, or command+shift+g), for web use character entities

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.