1. Copyright © Texas Education Agency, 2012. All rights reserved. Images and other multimedia content used with permission. 1 Graphic Design & Illustration Working with Type (Typography) This file is in the public domain because its copyright has expired in the United States and those countries with a copyright term of no more than the life of the author plus 100 years.public domain

2. Have you ever thought about how your words look on a page? Have you ever looked at something you created, and it just did not look right? Sometimes that can be fixed with a simple change of the type. Copyright © Texas Education Agency, 2013. All rights reserved. 2

3. Introduction Johannes Gutenberg invention of movable type around 1450. Computer technology and desktop publishing allows unprecedented access to printing. This lesson focuses on the use of fonts for information. There are different concerns when type is used for design. Copyright © Texas Education Agency, 2012. All rights reserved. Images and other multimedia content used with permission. 3

4. 4 Basic Definitions Typeface: The set of characters including uppercase and lowercase alphabetical characters, numbers, punctuation, and special characters. Font: A set of characters in a specific typeface, at a specific point size, and in a specific style. "12-point Times Bold" is a font — the typeface Times, at 12-point size, in the bold style. Copyright © Texas Education Agency, 2012. All rights reserved. Images and other multimedia content used with permission. 4

5. Typeface : A typeface is a set of letterforms, number, and symbols unified by a common visual design. (Typeface Shown is Tabasco) The word font is sometimes used interchangeably with the word typeface. Copyright © Texas Education Agency, 2013. All rights reserved. 5

6. Type Styles: Each typeface may also have a variety of type styles, which are modified versions like italic, bold, condensed and extended. These specific typestyles extend the use of the typeface. Copyright © Texas Education Agency, 2013. All rights reserved. 6

7. Type Family: Some typefaces have more versions than those above; they may have outlines, be shaded, or decorated. This whole related group of type styles based on a typeface is called a type family. Copyright © Texas Education Agency, 2013. All rights reserved. 7

8. Type Family: Below is an example of the type family Action Man. Copyright © Texas Education Agency, 2013. All rights reserved. 8

9. Type of Types: All type fits into four major categories. They are Serif Sans Serif Script Decorative Copyright © Texas Education Agency, 2013. All rights reserved. 9

10. 10 Serif Fonts French term Feet at the bottom of character Makes type readable Used for body copy Examples: Times New Roman, Garamond Copyright © Texas Education Agency, 2012. All rights reserved. Images and other multimedia content used with permission. 10

11. Serif Serif fonts are a typeface that have those “little ears and feet” at the end of individual letters. Looking at the heading, you can see those ears and feet most clearly on the S. Times New Roman is an example of a Serif font. Serif fonts are very popular due to their fast readability and conservative nature. Copyright © Texas Education Agency, 2013. All rights reserved. 11

12. 12 Sans Serif Fonts “Sans” is French for “without” Block type used for headers, subheaders Good for web. Not enough pixels for serif fonts to be readable. Examples: Helvetica, Arial Copyright © Texas Education Agency, 2012. All rights reserved. Images and other multimedia content used with permission. 12

13. Sans Serif Sans serif fonts do not have those little ears or feet on its letters. Arial is an example of a sans serif font. You can see by this example that their letters have a very clean modern look. Sans serif fonts make it easier for a reader to identify each letter, but they actually slow down a reader’s reading speed. Sans serif fonts are great for headline and display type. Copyright © Texas Education Agency, 2013. All rights reserved. 13

14. 14 Special Fonts Script Fonts: Difficult to read. Use sparingly. Decorative Fonts: Good for design. Not good for information. Dingbats: Symbols used for special characters. Copyright © Texas Education Agency, 2012. All rights reserved. Images and other multimedia content used with permission. 14

15. Decorative typeface is a category containing the fonts that basically don’t fit into any of the other categories. These typefaces are usually extremely difficult to read and should be used sparingly. Due to these fonts’ readability, they are best used for headlines and display text. Copyright © Texas Education Agency, 2013. All rights reserved. 15

16. Script typefaces have a feeling of handwritten designs. The font can seem formal – or in some cases, very informal. Script faces are best used sparingly. They are very hard to read. However, they can add that pop of interest to your piece. Don’t be afraid to mix script with other styles to add interest to your work. Copyright © Texas Education Agency, 2013. All rights reserved. 16

17. 17 Font Styles Bold: Heavy emphasis Italic: Light emphasis Wide: Headers only Narrow Copyright © Texas Education Agency, 2012. All rights reserved. Images and other multimedia content used with permission. 17

18. 18 Font Parts Ascenders: b, d, f, h, k, l Descenders: g, j, p, q, y Cap height: distance from baseline to top of the capital letters x height: height of the lowercase letters Copyright © Texas Education Agency, 2012. All rights reserved. Images and other multimedia content used with permission. 18

19. 19 Font Measurement Points: 72 points per inch Picas: 6 picas per inch; 12 points per pica Em: Size of a square uppercase character (M). Relative to the font point size selected. En: One half as wide as an em. Measure: The length of a line, even if the line is not filled with characters (such as a centered or partial line), designated in picas. Copyright © Texas Education Agency, 2012. All rights reserved. Images and other multimedia content used with permission. 19

20. Type Terms: Type is usually measured in points. There are 72 points in an inch. The larger the point size, the larger the type. Normally small point sizes like 6, 8, 10, and 12 are used for body copy. Large point sizes like 14, 18, 20, and higher are used for headlines, display lines, etc. Weight is the thickness of the stroke on the text. Some text weights, like italics, are light and airy. Others, like bold, are heavy and thick. Most type families have different weights. Copyright © Texas Education Agency, 2013. All rights reserved. 20

21. 21 Dashes Soft hyphen: Used to indicate where a word may be broken at the end of a line. Hard hyphen: A non breaking hyphen, used when the two parts of the hyphenated word should not be separated. (ex.: ill-fated) En dash: Used to indicate a range. (ex.: Monday–Friday) Em dash: Used to illustrate a break — as illustrated here. Copyright © Texas Education Agency, 2012. All rights reserved. Images and other multimedia content used with permission. 21

22. 22 Vertical Position Subscript: Slightly smaller than the rest of the font, set below the baseline. Superscript: Slightly smaller than the rest of the font, set above the baseline Copyright © Texas Education Agency, 2012. All rights reserved. Images and other multimedia content used with permission. 22

23. 23 ASCII Code American Standard Code for Information Integration Used to create special characters not listed on a computer keyboard without having to use dingbats. Numeric code for any character available in typeface. (ex.: © is 169) Can be used with most software by holding downing alt and typing 0 plus number on numeric keypad. Copyright © Texas Education Agency, 2012. All rights reserved. Images and other multimedia content used with permission.

24. 24 Spacing Kerning: Space between two letters. Software usually automatically adjusts kerning now. Kerning must be reduced for some letter combinations (Ta, Ye, AV). Tracking: Space uniformly between all characters in a line. (E x a m p l e) Leading: Space between lines of type, traditionally measured baseline-to-baseline, in points. Copyright © Texas Education Agency, 2012. All rights reserved. Images and other multimedia content used with permission. 24

25. Kerning Kerning is the adjustment of space between two individual letters to improve appearance. The first 3 lines show adjusted kerning between the letters of the placeholder text. The last 2 lines show normal kerning. Copyright © Texas Education Agency, 2013. All rights reserved. 25

26. Leading Leading is the vertical space between lines of type on a page. The first paragraph shows major leading between lines of text. The second paragraph shows normal leading between the lines of text. Copyright © Texas Education Agency, 2013. All rights reserved. 26

27. 27 Columns Columns: Type is difficult to read if the line length is too long. Setting type in columns helps make type easier to read. Width of the column and line length is relative to the point size. Column gutter: The space between columns of type. Gutters: In double-sided documents, the combination of the inside margins of facing pages; the gutter should be wide enough to accommodate binding. Copyright © Texas Education Agency, 2012. All rights reserved. Images and other multimedia content used with permission. 27

28. 28 Alignment Mistakes Orphans: The first line of a paragraph separated from the rest of the paragraph by a column or page break. Widows: Short last lines of paragraphs, usually unacceptable when separated from the rest of the paragraph by a column break, always unacceptable when separated by a page break. Rivers: Spaces between words that create irregular lines of white space in body type, particularly occurs when the lines of type have been set with excessive word spacing. Copyright © Texas Education Agency, 2012. All rights reserved. Images and other multimedia content used with permission. 28

29. Alignment : Most people know the common types of alignments; however, most people do not realize what each type of alignment should be used for. Center Alignment: used for short amounts of text; in a flyer, announcement, etc. Left Alignment: easy to read, and useful in any type application. Right Alignment: used sparingly since it is hard to read. Justified Alignment: common in magazines and newspapers. Copyright © Texas Education Agency, 2013. All rights reserved. 29

30. 30 Emphasis Mistakes All caps: Using all capital letters for emphasis is generally a POOR CHOICE because it is aesthetically too jarring. Underscores: A holdover from typewriter days and should usually not be used because weight cannot be adjusted and they crash into descenders. Consider using bold or italics instead of all caps or underscores. Copyright © Texas Education Agency, 2012. All rights reserved. Images and other multimedia content used with permission. 30

31. 31 Justification Justification: Right justified, centered, and right-and-left justified are usually difficult to read. Text justified on both the left and right sides often causes rivers and unusual spacing problems. Right justified type should be used in special cases and is the hardest to read. For body text, use left justified. Copyright © Texas Education Agency, 2012. All rights reserved. Images and other multimedia content used with permission. 31

32. 32 Font Selection Avoid typefaces appearing too heavy or too light. Stick with typefaces that do not stray too far from traditions Use typefaces of medium width. Avoid typefaces that appear extremely wide or narrow in width. Body type is most readable when font ranges from 8 to 12 points. Avoid using too many fonts. Usually a header sans serif and a body serif are all you need. Copyright © Texas Education Agency, 2012. All rights reserved. Images and other multimedia content used with permission. 32

33. 33 Paragraph Identification Clearly indicate paragraphs. The indent is always the best method to indicate paragraphs. When possible, set the indent with the software rather than using the tab key. The indent is optional for the first paragraph. The extra line of space may be used for long blocks of text, although the indent usually works better with columns. Copyright © Texas Education Agency, 2012. All rights reserved. Images and other multimedia content used with permission. 33