Skip to content

Wayne State University

Aim Higher

Mar 24 / Reem Khawatmy

Type crimes

Graphic design is a burgeoning industry. With the rise and ubiquity of the Internet in the last decade, web design especially has become prevalent. Other forms of graphic design include print, mobile, illustration, and typography. Typography refers to any design involving the arrangement of letters or alphabetical symbols in a space. Every design geek has taken a course in typography and knows the vast importance of it, yet basic type-crimes (errors or faux-pas in typography design) can still be seen virtually everywhere. While many are quick to dismiss the rules of graphic design, Ron L. Peters in his book Do Good Design emphasizes just how important good design is in our society: “Design creates culture. Culture shapes values. Values determine the future. Design is therefore responsible for the world our children will live in.” Practicing good design is of utmost importance, and good typography is crucial to good design as a whole. This list takes a look at 10 commonly occurring type-crimes:

(Note: to clear up further confusion, a “font” is a specific weight or style such as Arial 16 Bold, whereas “typeface” refers to the broader, all-encompassing Arial).

 

 

 

10

 

Computer Styling

(stretched type, compressed type, etc.)

pastedGraphic.png

In essence, a good font should be left alone. It can be made bigger or smaller to accommodate the space it occupies, but it should always retain its original ratio. It should not be stretched, compressed, skewed, or any other applicable distortion. As a rule of thumb, if the font looks pixelated, something is wrong. The program Adobe Illustrator is better than Photoshop in this way, because it uses Vectors as opposed to pixels — so your type should never look pixelated in Illustrator. Overall, type is supposed to look crisp and harmonious, not tweaked into oblivion.

 

9

 

Too Many Signals

 

pastedGraphic_1.png

Signals such as: bold, underline, all caps, oblique, and italics are all uniquely different ways to add emphasis to type. Italic type for example is reminiscent of the strokes in calligraphy, and it has a cursive form as well as a Roman influence (named italic in part because it was developed in Italy). Originally, it was often used to help people save money, as it required less space. When the typewriter came out, underline largely replaced italics. Oblique is by some accounts a type-crime in and of itself; it is simply slanted type and not the actual cursive, true italic form. Signals should only be used when appropriate, and should not be overdone.

 

8

 

Orphans & Widows

pastedGraphic_2.png

 

One of the most common type-crimes; designers will cringe upon hearing these words. The terms are often used interchangeably, although they are not the same: an orphan is a lone word at the end of a paragraph, and a widow is a word or part of a sentence that ends at the bottom of a paragraph and carries over onto the top of the next paragraph. They are considered type-crimes because they create unaesthetic gaps in text and make it more difficult for the reader.

 

7

 

“Dummy” Quotes & Hanging Quotes

pastedGraphic_3.png

 

There is a difference between hatch marks and quotation marks. Hatch marks are used to denote feet and inches, and often surface in math (indicative of equal length for triangles in geometry). Hatch marks should not be used in lieu of Quotation marks. Quotation marks should also hang outside of the text. In a clean design, the Quotation marks remain outside.

 

6

 

Incorrect Use of Hyphens

 

pastedGraphic_4.png

Technically more of a grammatical error, yet just as applicable to design as it is to grammar. Hyphens are used to hyphenate compound words, to break words, and between non-continuing numbers such as phone numbers. En dashes are used to connect continuing or inclusive numbers, example: time and dates, page numbers, and so forth. Em dashes are used to denote a sudden break in thought that causes the end of a word. They enclose words or phrases and create strong breaks in the structure of sentences. Interesting note: the “en dash” received its name for being the length of a standard sized letter “n,” and likewise the em dash with the letter “m.”

 

5

 

Poorly Justified Type

 

pastedGraphic_5.png

Designers will be familiar with the term “river,” which is what happens when type is poorly justified — large unsightly gaps will appear throughout the paragraph — the end result looking like several rivers of white space are flowing throughout the text. These often appear in newspapers.

 

4

 

Rags

 

pastedGraphic_6.png

A good designer can always find a way to make a paragraph look relatively straight and crisp at the edges. If a paragraph has lines sticking out and the margins are uneven (most margins are flushed left, meaning the rags would be sticking out to the right), it can be distracting and unsightly.

 

3

 

Poor Kerning, Tracking, & Leading

 

pastedGraphic_7.png

Kerning refers to the amount of space between letters in a word. A word may look untidy due to too much space between some letters, or not enough. Tracking is essentially kerning but applied to the entire sentence, paragraph, or body of text, and not just certain letters within the word. “Leading,” (from the literal lead bars that used to be in the press) refers to adjusting the space vertically between lines of text. Any design program worth its money will have simple commands to increase or decrease the kerning, tracking, and leading of words and sentences. (In most Adobe programs you simply highlight a word and press alt + the arrow keys).

 

2

 

Embossing & Drop Shadows

 

pastedGraphic_8.png

There is great debate about the drop shadow. It is said that when a certain New York Times magazine printed their headline with drop shadow, hundreds of designers called in the following day to the extent that the NY Times had to disconnect their phone temporarily. While it is a way to draw emphasis to type, many are unsatisfied with its unnatural, gimmicky feel. Similar to #10 on the list, embossing and drop shadows are text effects that are best left omitted.

 

1

 

Bad Typefaces

 

pastedGraphic_9.png

Potentially a controversial item on the list, there are several typefaces that are widely believed by designers to be rubbish and never to be used. Examples include Comic Sans, Papyrus, Jokerman, and Hobo. Even the ubiquitous Times New Roman is frowned upon by many designers who believe it is best kept to its original purpose: newspapers. Many of these typefaces such as Papyrus (famously used in James Cameron’s Avatar) have drawn a lot of scrutiny for being misused and overused. One font in particular known for its overuse is Helvetica. So prevalent in fact is the overuse of Helvetica, that in 2007 a documentary film came out about it. It is a great film and the author of this list highly recommends you see it!

 

Next image

pastedGraphic_10.png

 

 

 

 

 

 

 

Getting your typography correct is not an easy thing to do. Like graphic design as a whole, is has to be both aesthetically pleasing and functional.

Just like you do in a logo, when you’re working with big blocks of text in a print or web design, you have to put a lot of thought into how the type is working.

We’ve assembled 13 crimes against type you need to avoid. It’s not an exhaustive list — there are other things that can trip you up as well (oh, the difficulties of being a designer), but it’s a good place to start.

 

 

 

 

 

 

 

 

 

 

 

 

 

pastedGraphic_11.png

 

 

An example of creative management for a lot of text, by Atelier Martino&Jaña for the European Capital of Culture.

1. Start off with the right fonts

pastedGraphic_12.png

Yes, this one is subjective. There’s always going to be a debate over the usability of fonts between designers and clients alike. But there are fonts that are popularly liked and those that are popularly disliked.

Comic Sans is almost always disdained, and Helvetica is so frequently a top choice, that it’s overused in popular culture.

When making your design put thought into the font you choose. Do a little research! Is your font unprofessional, illegible or overused? Try something else.

2. Be selective with the typefaces you use in your projects

pastedGraphic_13.png

There are SO MANY font faces out there. Why not use a bunch of them all in the same piece? It’ll mix things up. Ha — just don’t do it.

You only need 2 or 3 — one for the title (maybe subtitle), and one for the body. As my high school math teacher used to say, “Keep it Simple, Skippy.” Simplicity looks and reads better than chaos.

3. Pair your fonts with thought

pastedGraphic_14.png

There are typefaces meant for titles, and typefaces meant for body. Don’t mix them up!

Typically, the way to go for the title is a bolder typeface, generally a sans-serif, but sometimes a decorative one. For the body — serifed fonts are created to look and read better in large bodies of text.

4. Pay attention to hierarchy

pastedGraphic_15.png

If you’re laying out different segments of text in a design, think about how these bodies of text are going to relate to one another. There has to be a hierarchy — a clear title, potentially a subtitle and a body. You can achieve this by the right font choice as well as sizing and choosing the right signals (bold, italics, underline, etc.)

5. Trust your typographer

pastedGraphic_16.png

Fonts are created with love and joy, and it takes a lot of work to make them work. Don’t mess with a typeface to try to get it to fit into a certain space. It ruins all the hard work the type designer did.

If you need to, change the font or typeface (aka use Futura instead, or Helvetica Condensed if you need to), but don’t stretch it out with your computer.

6. Kern, track and lead

pastedGraphic_17.png

3 important type concepts: kerning is the space between specific letters in a word. Tracking is the degree of space between all letters and words in a paragraph. Leading is the space between lines in a paragraph.

You’ve should get them all right to make your text work, and while typing the words gives you a good start, these 3 elements might not be built into the type as it’s rendered in your graphics software. You may have to do some edits to make them work better.

7. Keep your signals simple

pastedGraphic_18.png

A signal — such as bold, italic, underline, all caps, etc. is used to emphasize important segments of text. You don’t want to confuse your readers by mixing up or using too many signals. Keep it simple and choose one. Maybe 2.

8. Colors are your friends

pastedGraphic_19.png

Color can make or break your text. There has to be a high level of contrast between the text and the background so your design is readable. Who can read black text against a dark blue background, or yellow text against a white background? No one.

9. Choose your quotes carefully

pastedGraphic_20.png

There are multiple kinds of quotes out there. Smart quotes are for — you guessed it — quotes. They’re the little 6′s and 9′s that you see on the left. Dumb quotes are for expressing height. Such as, I am 5’6″ — straight up and down.

10. Don’t double space at the beginning of a sentence

pastedGraphic_21.png

Many of us learned to use double spaces at the start of a sentence. We were wrong. Just one will do.

11. Only justify if you need to

pastedGraphic_22.png

Aligning the body of your text can be hard, for sure. But you can’t depend on justifying text to make everything look neat and tidy. If done poorly, it creates what are called “rivers” of white space — those lines you see running down the middle of the text.

If this is happening with your justified text, it’s better to align it to the left and keep your rag (see definition below) clean.

12. Keep your rags clean

pastedGraphic_23.png

Rag is what you get when you’re not justifying the text — it’s the way the more ragged side of each paragraph looks. You don’t want this to be a big mess, you want it to be neat and tidy. It keeps the design looking clean.

13. Stay away from orphans!

pastedGraphic_24.png

The word beans highlighted in red is an orphan, or a word left alone in a line at the end of a paragraph. Don’t leave orphans hanging around. Find a way to bring that word back into the paragraph.

14. And widows.

pastedGraphic_25.png

The same goes with widows, or a single line from a paragraph that carries over to a new column. It’s not pretty to see the leftovers of a sentence or paragraph standing all by themselves, so make sure they stay with the rest of the family.

The most important thing to remember here is: rules were made to be broken! Learn these rules thoroughly and follow them most of the time. But when you have it down, feel free to experiment.

 

 

 

 

Screen Shot 2014-03-24 at 10.36.36 PM Screen Shot 2014-03-24 at 10.36.28 PM Screen Shot 2014-03-24 at 10.36.18 PM Screen Shot 2014-03-24 at 10.36.08 PM Screen Shot 2014-03-24 at 10.35.26 PM Screen Shot 2014-03-24 at 10.35.38 PM Screen Shot 2014-03-24 at 10.35.48 PM Screen Shot 2014-03-24 at 10.35.58 PM Screen Shot 2014-03-24 at 10.35.14 PM Screen Shot 2014-03-24 at 10.35.04 PM Screen Shot 2014-03-24 at 10.39.41 PM Screen Shot 2014-03-24 at 10.39.22 PM Screen Shot 2014-03-24 at 10.38.37 PM Screen Shot 2014-03-24 at 10.38.50 PM Screen Shot 2014-03-24 at 10.39.00 PM Screen Shot 2014-03-24 at 10.39.10 PM Screen Shot 2014-03-24 at 10.38.26 PM Screen Shot 2014-03-24 at 10.38.13 PM Screen Shot 2014-03-24 at 10.38.03 PM Screen Shot 2014-03-24 at 10.37.51 PM Screen Shot 2014-03-24 at 10.36.59 PM Screen Shot 2014-03-24 at 10.37.09 PM Screen Shot 2014-03-24 at 10.37.16 PM Screen Shot 2014-03-24 at 10.37.31 PM Screen Shot 2014-03-24 at 10.36.49 PM

Mar 24 / Reem Khawatmy

Project 4 process work

Arrogant, Splatter

 

Screen Shot 2014-03-24 at 2.46.23 PM Screen Shot 2014-03-24 at 2.46.12 PMScreen Shot 2014-03-24 at 2.46.33 PMScreen Shot 2014-03-24 at 2.46.41 PMScreen Shot 2014-03-24 at 2.47.16 PMScreen Shot 2014-03-24 at 2.47.21 PMScreen Shot 2014-03-24 at 2.47.29 PMScreen Shot 2014-03-24 at 2.47.36 PMScreen Shot 2014-03-24 at 2.47.42 PMScreen Shot 2014-03-24 at 2.47.49 PMScreen Shot 2014-03-24 at 2.48.48 PMScreen Shot 2014-03-24 at 2.48.28 PMScreen Shot 2014-03-24 at 2.48.16 PMsolatter SplatterScreen Shot 2014-03-24 at 2.50.14 PM

Feb 26 / Reem Khawatmy

Project 3

Screen Shot 2014-02-26 at 12.54.42 PM Screen Shot 2014-02-26 at 11.50.19 AM Screen Shot 2014-02-26 at 11.45.34 AM Screen Shot 2014-02-26 at 11.45.17 AM

Feb 17 / Reem Khawatmy

Project 2

 Font Mannerisms

cover-01regular-01 italic-01 bold-01 bold1-01 8 words-01 anatomy-01 part part1-01 part2-01 parts-01 comp3-01 word-01 word2

Feb 17 / Reem Khawatmy

Classmates links

https://blogs.wayne.edu/justina

 

http://blogs.wayne.edu/ranahammoud/

 

http://blogs.wayne.edu/justineallenetteross

 

http://blogs.wayne.edu/ominoussilhouette/

 

http://blogs.wayne.edu/dismantlemydisguise/

 

http://blogs.wayne.edu/sambone/

 

http://blogs.wayne.edu/reemkhawatmy/

 

http://blogs.wayne.edu/mydesign17/

 

http://blogs.wayne.edu/kgbdigital/

 

http://blogs.wayne.edu/sarahg14/

 

http://blogs.wayne.edu/ariellespring/

Feb 3 / Reem Khawatmy

Glossary

PostScript

Adobe System’s page description language. Programs like Macromedia FreeHand and Adobe Illustrator use PostScript to create complex pages, text, and graphics onscreen. This language is then sent to the printer to produce high quality printed text and graphics.

OpenType

The OpenType™ format is a superset of the earlier TrueType and Adobe® PostScript® Type 1 font formats. As jointly defined by Microsoft and Adobe Systems, it is technically an extension of Microsoft’s TrueType Open format, which can contain either PostScript font outlines or TrueType font outlines in a single font file that can be used on both Macintosh and Windows platforms. It can also include an expanded character set based on the Unicode encoding standard plus advanced typographic intelligence for glyph positioning and glyph substitution that allow for the inclusion of numerous alternate glyphs in one font file.

 

typeface

The letters, numbers, and symbols that make up a design of type. A typeface is often part of a type family of coordinated designs. The individual typefaces are named after the family and are also specified with a designation, such as italic, bold or condensed.

 

glyph

The word glyph is used differently in different contexts. In the context of modern computer operating systems, it is often defined as a shape in a font that is used to represent a character code on screen or paper. The most common example of a glyph is a letter, but the symbols and shapes in a font like ITC Zapf Dingbats are also glyphs.

font

One weight, width, and style of a typeface. Before scalable type, there was little distinction between the terms font, face, and family. Font and face still tend to be used interchangeably, although the term face is usually more correct.

connotation

the associations a particular font brings to the readers interaction with it; what it reminds the reader of, the feelings or thoughts that arise when looking at it.

denotation

An analytical descripton of a specific font, its serifs, bracketing, terminals, weight of strokes, etc.

Modern:

A style of typeface developed in the late 18th century that continued through much of the 19th century. Characterized by high contrast between thick and thin strokes and flat serifs, Modern fonts are harder to read than previous and later typestyles. Some later variations of Modern include the Slab Serifs with bolder, square serifs (often considered a separate style altogether) and the related Clarendon style with less contrast and softer, rounded shapes. Also Known As: Didone | New Antiqua.

Humanist:

Lineale typefaces based on the proportions of inscriptional Roman capitals and Humanist or Geralde lower-case, rather than on early grotesques. They have some stroke contrast, with two-story (double-story) a and g.These are the most calligraphic of the sans-serif typefaces, with some variation in line width and more legibility than other sans-serif fonts

Transitional

The typefaces of this period are called Transitional, as they represent the initial departure from centuries of Old Style tradition and immediately predate the Modern period.

Transitional Characteristics

  • greater contrast between thick and thin stokes. 
  • Wider, gracefully bracketed serifs withflat bases. 
  • larger x-height
  • Vertical stress in rounded strokes
  • the height of capitals matches that of ascenders. 
  • Numerals are cap-height and consistent in size.

sans serif

A type face that does not have serifs. Generally a low-contrast design. Sans serif faces lend a clean, simple appearance to documents.serif

Slab Serif:

A type of serif typeface characterized by thick, block-like serifs. Serif terminals may be either blunt and angular, or rounded. Slab serif typefaces generally have no bracket (feature connecting the strokes to the serifs). Some consider slab serifs to be a subset of modern serif typefaces including Clarendon, Typewriter, and Slab Serif (a separate sub-category of Slab Serif) styles

Jan 27 / Reem Khawatmy

Four Type Categories Examples

 

 

Curvy

 

 

Screen Shot 2014-01-27 at 6.22.55 PM

 

 

Screen Shot 2014-01-27 at 6.23.15 PM

 

Screen Shot 2014-01-27 at 6.26.24 PM

Screen Shot 2014-01-27 at 6.27.09 PM

 

 

 

 

 

Elaborate

4411051255_d5fda0c690_o

Scan10067

Screen Shot 2014-01-27 at 6.32.09 PM

Screen Shot 2014-01-27 at 6.32.23 PM

 

 

 

 

 

Minimal

fonts_11

Miniml

 

 

 

 

 

 

Geometric

 

 

 

 

Screen Shot 2014-01-27 at 6.08.06 PM

 

 

Screen Shot 2014-01-27 at 6.11.01 PM

 

Screen Shot 2014-01-27 at 6.11.32 PM

Jan 27 / Reem Khawatmy

Thinking With Type

Letter

Type face are an essential  resources employed by graphic designer as materials employed by architects.

Words originated as gestures of the body. The typeface were directly modeled on the forms of calligraphy.

Humanism and The Body 

Many typefaces we used today are named for printers who worked in the fifteenth and sixteenth centuries. These typefaces are genera;;y known as humanist. Italic letters was used at that time.

Enlightenment and Abstraction

Renaissance artists sought standards of proportion in the idealized human body.

Geofroy Troy published a series of diagram that linked the anatomy of letters to the anatomy of man .

Construction roman letters against a finely meshed grid.

Engraved letters whose fluid lines are unconstrained by the letterpress’s mechanical grid, offered an apt medium for formal lettering.

18th century typography was influenced by new styles of handwriting and their engraved reproductions.

19th century typeface have a wholly vertical axis, a sharp contrast  between thick and thin, crisp , wafer like serifs.

Monster Fonts

an abstract and dehumanized approach to the design of letters.

Type designer created big, bold faces by embellishing and engaging the body parts of classical letters. Fonts of astonishing heights, width and depth appeared – expanded, contracted , shadowed ,inlined, fattened, faceted  and floriated. Serifs abandoned their role as finishing details to become independent architectural structure, and the vertical stress of traditional letters canted in new directions.

Reform and Revolution

construction of letters from basic geometric forms- the circle, square, and triangle- which they viewed as elements of a universal language of vision. It approached alphabet as a system of abstract relationships.

 Type as program

constructed from straight lines. letters designed for optimal dips;ay on a video screen, where curves and angles are rendered with horizontal scan line.

Type as Narrative

letter became scratched, bent, bruised, and polluted. Template Gothic, Dead history, Beowulf was the first in series of typefaces with randomized outlines and programmed behaviors.

Back to work

Mrs. Eaves: working woman seeks reliable mate. Quadraat: all purpose hardcore Baroque. Gotham: blue- collar curves. 

Screen shot 2011-02-04 at 12.18.43

Thinking_with_Type_Letter_2

Thinking_with_Type_Letter_3

Thinking_with_Type_Letter_5

Thinking_with_Type_Letter_7

Thinking_with_Type_Letter_9

Thinking_with_Type_Letter_10

Thinking_with_Type_Letter_11

Thinking_with_Type_Letter_12

Jan 22 / Reem Khawatmy

Rhythm and Proporiton

Rhythm and Proportion

2.1    Horizontal Motion

  1. Define the word space to suit the size and natural letter fit on the font.
  2. Choose a comfortable measures (between 43-75)
  3. Set ragged if setting suites the text and the page.
  4. Use a single word between sentences.
  5. Add title or no space within strings of initials.
  6. Letter space all string of capitals and small caps, and all long strings of digits.
  7. Don’t letterspace the lower case without a reason.
  8. Kern consistently and modestly or not at all.
  9. Don’t alter the width or shapes of letters without cause.
  10. Don’t stretch the space until it breaks.

2.2    Vertical Motion

  1. Choose a basic leading that suites the typeface, text, and measures.
  2. Add and delete vertical space in measured intervals.
  3. Don’t suffocate the page.

2.3     Blocks and paragraphs

  1. Set opening paragraphs flush left.
  2. In continuous text, mark all paragraphs after the first with an indent of at least one en.
  3. Add extra lead before and after block quotations.
  4. Indent or center verse quotations.

2.4      Etiquette of Hyphenation and Pagination

  1. At hyphenation line-ends, leave at least two characters behind and take at least three forward.
  2. Avoid leaving the stub-end of a hyphenated word, or any word shorter than four letters, as the last line of a paragraph.
  3. Avoid more than three consecutive hyphenated lines.
  4. hyphenate proper names only as a last resort unless they occur with the frequency of common nouns.
  5. Hyphenate according to the convention of the language.
  6. link short numerical expressions with hard spaces.
  7. Avoid beginning more than two consecutive lines with the same word.
  8. Never begin a page with the last line of a multi-line paragraph.
  9. Balance facing pages by moving single lines.
  10. Avoid hyphenated breaks where the text is interrupted.
  11. Abandon any and all rules of hyphenation and pagination that fail to serve the needs of the text.
Jan 22 / Reem Khawatmy

The Grand Design

The Elements of Typographic Style

    The Grand Design

first principle :

– typography exists to honor content.

– letters have a life and dignity of their own.

– There is a style beyond style.

Tactics:

-Read text before designing it.

-Discover the outer logic of the typography in the inner logic of the text.

– make the visible relationship between the text and other elements (photographs, captions, tables, diagrams, notes) a reflection of their real relationship.

-Choose a typeface or a group of faces that will honor and elucidate the character of the text.

– Shape the page and frame the text block so that it honors and reveals every relationship between elements, every relationship between elements, and every logical nuance of the text.

– Give full typographic attention even to identical details.

There are always exceptions, always excuses for stunts and surprises. But perhaps we can agree that, as a rule, typography should perform these services for the reader:

  • invite the reader into the text;
  • reveal the tenor and meaning of the text;
  • clarify the structure and order of the text;
  • link the text with with other existing elements;
  • induce a state of energetic repose, which is the ideal condition for reading.