Designing TYPE with 2.01 Investigate typefaces and fonts.

Font basics

Typography The study of all the elements of type including the shape, size and spacing of the characters.

Where’d they come from? Times - developed for newspaper text, books, magazines, office documents, display, and advertising Courier New - designed to emulate a typewriter Comic Sans MS - originally created for comic books Century Schoolbook - originally created for magazines and later widely used in reading texts Tahoma – created for small-sized text in dialog boxes and menus Trebuchet MS, Georgia, and Century Gothic were created to optimize digital display 2.01 Investigate typefaces and fonts.

Typefaces, Fonts, and Font Families A typeface/font is a specific style or design that make up a font (can be used interchangeable with “font”). The design includes size, weight, and style A font style is a specific slant and weight of a character, such as bold or italics A font family is a group of similarly formatted characters 2.01 Investigate typefaces and fonts.

Anatomy of Type A Baseline is the line which type “sits” The x-height line is the line under which type “sits”. Fonts designed with high x-heights are harder to read than those placed a the standard height. The ascender line marks the tallest letter in the font

Anatomy of Type The ascender is the part of a lowercase letter that extends above the x-height. Ex: letter “h” The descender is the part of a lowercase letter that extends below the baseline. Ex: letter “g”

Common Type Styles Small Caps, Shadow, Strikethru, Subscript, Superscript

Typography Common Type Styles Reverse Text: white type on a dark background and is designed to make the type stand out. Typography

Two Deciding Factors for Fonts READABILITY- measurement of text that determines how quickly the eye can process information. Readability is used for small text and long paragraphs. LEGIBILTY – is the measurement of text that determines how easily the eye can decipher the words. Legibility is used for display text or short passages.

Selecting fonts

Font Families Four Families of Fonts: Serif Sans Serif Ornamental or Decorative Script or Cursive

k Serifs Contain attributes/strokes at the tips of a letter Stroke: the line that defines a letter. The width of the line, it may be thick or thin. Examples of Serif Fonts: Goudy  Times New Roman Bodini  Modern No. 20 Courier  Rockwell Century Schoolbook Uses Newspaper text  Office documents Books  Magazines Display  Advertising k 2.01 Investigate typefaces and fonts.

Other Serif Examples

k Sans Serifs No attributes (serifs) at the tips of a letter Mono-weight appearance (even strokes) Examples of Sans Serif Fonts Arial Berlin Sans Gill Sans Verdana Uses Web pages - Digital display Headings - Captions k 2.01 Investigate typefaces and fonts.

Other San Serif Examples

Ornamental or Decorative Designed strictly to catch the eye Should be used sparingly Examples Chiller Gigi Webdings (dings) Old English Uses Headlines on flyers Symbols used in logos k 2.01 Investigate typefaces and fonts.

Other Ornamental/Decorative Examples

k Script or Cursive Brush Script Freestyle script All typefaces that appear to have been written by hand, with a calligraphy pen or a brush Should never be used to key in all caps or an entire paragraph Examples Brush Script Freestyle script French Script Lucinda Handwriting Uses Invitations Calling cards Poetry Headings k 2.01 Investigate typefaces and fonts.

Other Script Examples

Three Cs of Typography Design In Type, there is usually more than one element on a page-even a document of plain body copy typically has heads or subheads, or at least page numbers on it. Within these dynamics on the page, a relationship is established that is one of these three: Concord Conflict Contrast 2.01 Investigate typefaces and fonts.

Three Cs of Typography Design Concord- relationship occurs when you use only one type family without much variety in style, size, weight, etc. It is easy to keep the page harmonious, and the arrangement tends to appear quiet and rather sedate or formal –sometimes dull. 2.01 Investigate typefaces and fonts.

Concord A calm and harmonious layout In this example Initial cap is larger than the rest of the type Words "full of sound and fury" have been italicized Resulting effect is subdued ND 146 2.01 Investigate typefaces and fonts.

Other Examples of Concord ND 147 Hello invite

Three Cs of Typography Design Conflict- relationship occurs when you combine typefaces that are similar (but not the same) in style, size, weight, etc. The similarities are disturbing because the visual attractions are not the same, but neither are the different, so they conflict. 2.01 Investigate typefaces and fonts.

Conflict Using two different typefaces that are similar, but not different enough to stand apart from each other In this example, the words “full of sound and fury” are in a different typeface Conflict should be avoided ND 148 2.01 Investigate typefaces and fonts.

Other Examples of Conflict ND 149 What’s up invite

Three Cs of Typography Design Contrast- relationship occurs when you combine separate typefaces and elements that are clearly distinct from each other. The visually appealing and exciting designs that attract your attention typically have a lot of contrast built in, and those contrasts are emphasized. 2.01 Investigate typefaces and fonts.

Contrast ND pg. 150 Effects on typeface, size, and/or weight to Direct reading patterns Organize information Emphasize information ND pg. 150 2.01 Investigate typefaces and fonts.

Other Examples of Contrast ND 151 Hello invite

Contrast Not just for the aesthetic look of the piece Tied in with the organization and clarify of the information on the page Combining different typefaces should enhance the communication, not confuse it 6 clear ways to contrast type: Size, weight, structure, form, direction, and color

Using Contrast and Mixing Typefaces When mixing two different typefaces, diversity is the key Do not use two faces that are too similar Harmony is accomplished with no more than THREE typefaces on a page. TWO is even better. To create interest, use different sizes and attributes rather than several different typefaces.

Major Rule to Follow when Contrasting Type: Don’t look for what is different between the type-look for what is similar. It is the similarities that cause the problems. Major Rule to Follow when Contrasting Type:

Type contrasts

Contrasting Typeface Type contrast is not only for the aesthetic appeal, but also to enhance the communication. A reader should never have to try to figure out what is happening on the page –the focus, organization, purpose, and flow should be recognized instantly.

Type Contrasts 165 2.01 Investigate typefaces and fonts.

Do Not contrast 12-point with 14-point type; they will conflict Big type vs. Little type Do Not contrast 12-point with 14-point type; they will conflict If you are going to contrast with size …MAKE IT OBVIOUS –don’t let people thinks it’s a mistake 166 2.01 Investigate typefaces and fonts.

A contrast of size does not always mean you must make the type large –it means there should be a contrast. An important part of what compels you is the contrast of very small type on a large page

Sometimes the contrast of big over little is overwhelming; it can overpower the smaller type. This method can be used to your advantage if part of the design is not suppose to be the focus

Use contrasting size in unusual ways. Use symbols, numbers, ampersands, quote marks as decorative elements in a headline or a pull quote

Weight is the thickness of strokes Regular, bold, semi-bold, light Examples of weight within a typeface family:

Combining Weight Rule: Emphasize the difference- Don’t be a Wimp! Emphasize the difference- Combine thick weight with light weight When combining type from different families, one should be bolder than the other. If the contrast is not strong, it will look like a mistake.

Use Weight Contrast to organize information

Use Weight Contrast to make a page look more interesting and attractive by emphasizing key phrases.

Structure is how the typeface is built Mono-weight strokes vs. varying stroke width The structure within each category below is quite distinctive: 174

Structure Rule: Never put two typefaces from the same category (or family) on the same page It is too difficult to distinguish between the differences. ND p 174 Ode

For Beginners: An easy way to choose contrasting structure is to pick one Serif font and one Sans serif font Serifs usually have a thick/thin stroke contrast and San serifs usually have a mono-weight stoke.

Using only Structure as contrast is not enough Emphasize the difference by combining it with other contrasts:

You can combine fonts in the same family by building contrast in other ways using different members of the same family:

The form refers to the shape of the letter The form refers to the shape of the letter. This is different from structure. Ex: A capital letter “G” has the same structure as lowercase “g”. Capital letters vs. Lowercase letters is the easiest way to think of form

Use Caps vs. Lowercase to contrast type:

Readers recognize words by their letters, but also by their forms (or shapes of the entire word) This is what makes ALL CAPS so difficult to read.

All words set in capital letters have a similar rectangular form, we are forced to read the words letter by letter.

You CAN use all caps sometimes All caps are not impossible to read and can be used sparingly for contrast ND p 180 wealth

Roman vs. Italic Roman: the type stands straight up and down Italic: the type is slanted

Never combine two different italic fonts Or two different scripts Or italics with scripts

Every element of type has a direction, even though it may run straight across the page. A line of type has a horizontal direction A tall, thin column of type has a vertical direction

This layout creates an interesting contrast of direction This layout creates an interesting contrast of direction. Emphasizing the direction with bold color one direction and bold text the other.

Involve other parts of the layout, like graphics or lines to contrast the direction.

The direction of text can provide a counter-balance to a horizontal image

Warm colors come forward and command attention Reds, oranges Our eyes are attracted to warm colors, so it takes very little red to create a contrast Cool colors recede from our eyes Blues, greens You can get away with larger areas of a cool color; you need more of a cool color to create an effective contrast.

The smaller word can compete because of the warm color contrast The larger text overpowers the smaller. Avoid this. The light, cool color is not noticeable To contrast a cool color, you need more of it

Typographers refer to black-and-white type as having color on a page Black and white text creates color through contrast “Color” is created by weight, structure, form, space, and size

Don’t be a Wimp! Take advantage of more than one of the contrasting possibilities Look through magazines for a wide variety of examples and ideas Verbalize the what you see.

Rule: Name the problem, then you can create the solution Try to name the similarities –not the differences What is it about the two faces that compete with each other? Are they both all caps? How effective is the contrast in weight, size, etc? Focus on conflict