Lecture 8: Introduction to Text and Font COMP Digital Media Production: Lecture 8

Content  Introduction to Text and Fonts  The content of text  Introduction to Fonts  Importance of document layout  Summary 5068COMP Digital Media Production: Lecture 8 2

Introduction to text, fonts and layout  In this lecture, we will explain how the fundamental units of written languages – characters – can be represented in a digital form.  In addition, how the digital representation of characters can be turned into a visual representation for display will be discussed.  Finally, importance of good text design principles will be explained. 5068COMP Digital Media Production: Lecture 8 3

Introduction to Text  The content of text consists of the characters that make up the words, punctuation, symbols which convey the meaning or message to the readers.  The appearance of text comprises its visual attributes, such as the shape and size of characters, and their layout on the page.  An “abstract character” may have many different graphic representations (such as the First drop letter used at the beginning of Chapter in a book). 5068COMP Digital Media Production: Lecture 8 4

Character Set cont.  The character repertoire for a character set intended for written English text would include the 26 letters of the alphabet.  The letters are in both upper- and lower-case forms.  In addition, the 10 digits and the usual collection of punctuation marks form the character set. 5068COMP Digital Media Production: Lecture 8 5

Introduction to text cont.  The distinction between appearance and content of text in written material is not quite as clear-cut as one might think.  It is useful to know the difference because it permits a separation of concerns between these two qualities that text possesses.  Text can be a powerful communication tool. 5068COMP Digital Media Production: Lecture 8 6

Introduction to Text Standards  Character sets requires standardization.  Transferring text between different makes of computer platforms, and different interfaces creates problems.  Standard character code is essential.  Unfortunately, standardization is not a straightforward business. 5068COMP Digital Media Production: Lecture 8 7

Text Standards  ASCII (American Standard Code for Information Interchange) was the dominant character set from the 1970s into the early twenty-first century.  ASCII is an attempt by the standardization bodies to provide better support for a wider range of languages.  ISO 646 (started in 1972) incorporates several national variants on the version of ASCII used in the United States, to accommodate, for example, some accented letters and national currency symbols.  Under MS-DOS and Windows, these variants are called “code pages.” 5068COMP Digital Media Production: Lecture 8 8

How to accommodate different languages?  If a file prepared in one country is sent to another and read on a computer set up to use a different national language, what do you think the consequence would be?  For example, a hash character (#) typed in the United States would be displaying as another character in the UK.  Have any of you had experience of this? 5068COMP Digital Media Production: Lecture 8 9

Introduction to Typography  Typography includes everything from calligraphy through digital type and type on Web pages.  It also includes type designers who create new letterforms and designers who works in the print media industry. 5068COMP Digital Media Production: Lecture 8 10

Elements of Typography  Typefaces and Fonts: Typefaces are a family of fonts ( Helvetica Regular, Helvetica Italic, Helvetica Black, and Helvetica Bold). Fonts are one weight or style within that family (such as Helvetica Bold).  Typeface Classifications: These are sometimes called "font families". They are large groupings of typefaces based on generic classifications. On Web pages, there are six types: Serif, sans-serif, monospaced, cursive, fantasy, script  Typeface Anatomy: Each typeface is made up of different elements. Web designers do not generally need to know the specifics of typeface anatomy.  The elements you should be aware of are: Cap and x-height: This is the height of the capital letters in the typeface and the height of the letter x. It tells you how tall the largest letters will be, and how big most lowercase letters will be. Descenders and ascenders: These are the portions of letters that go below and above the x-height line. These typically refer to lowercase letters. 5068COMP Digital Media Production: Lecture 8 11

Introduction to Fonts What is a glyph?  A glyph is a graphic representation of a character’s shape.  A character may be represented by many different glyphs.  A font is a collection of glyphs.  Fonts may be embedded in SWF or PDF files.  Web browsers usually access fonts on the user’s system, but may download them from a remote server. 5068COMP Digital Media Production: Lecture 8 12

Text and Typography Fonts q q q q q q q q q q q q q q 19 glyphs for a single letter 5068COMP Digital Media Production: Lecture 8 13

Illustrator and Glyph Panel The Glyph Panel (Window > Type > Glyphs)  The Glyphs Panel displays alternative characters available for any given font.  With the type cursor prepared for typing on your artboard, you click on a glyph to insert it into your document. 5068COMP Digital Media Production: Lecture 8 14

Fonts cont...  Fonts are grouped into families, consisting of related versions of a typeface.  Fonts are important and some attention must be paid when you are using fonts. 5068COMP Digital Media Production: Lecture 8 15

Text Fonts  Text fonts are intended for extended passages of text, so they must be readable and unobtrusive.  Usually they are upright and serifed.  Display fonts are intended for short pieces of isolated text, such as headlines and slogans. 5068COMP Digital Media Production: Lecture 8 16

Text Fonts cont...  They should be eye-catching and are often unconventional.  Text fonts designed for print may not work well on screen.  1 pt (point) is 1⁄72 of an inch. 1 pc (pica) is 12 pt.  The body size is the nominal size of a font, but is not usually equal to the height of any glyph in the font.  The leading is the distance between baselines. 5068COMP Digital Media Production: Lecture 8 17

Font Terminology 5068COMP Digital Media Production: Lecture 8 18

Font Terminology cont...  The x-height is the height between the baseline and the top of a lower-case letter x.  Strokes that rise above the x-height are ascenders; those that extend below the baseline are descenders. 5068COMP Digital Media Production: Lecture 8 19

Font Terminology cont...  Relative units are useful for measurement.  1 em is equal to the body size; 1 en is 0.5 em;  1 ex is equal to the x-height. 5068COMP Digital Media Production: Lecture 8 20

Kerning and Ligatures  Kerning is the adjustment of the space between letter pairs (e.g. AV-check the next slide) to make them look more uniform.  Ligatures are composite single glyphs used to replace combinations of letters (e.g. fi) that do not look right next to each other. 5068COMP Digital Media Production: Lecture 8 21

Representation of Kerning and Ligatures 5068COMP Digital Media Production: Lecture 8 22

Kerning and Tracking in Illustrator  Kerning is the amount of space between any specific pair of letters.  In Illustrator, you can change kerning values only when there is a blinking insertion point between two characters.  Tracking is the amount of space between all the letters currently selected. If you select the type area with a selection tool, it refers to all the space among all the characters in the entire type area. If you select characters with a type tool, tracking affects only the space among the specific letters selected.  Although kerning and tracking are related and appear to do basically the same thing, they work quite independently of each other. They only look like they’re affecting each other; altering one never actually changes the amount of the other. 5068COMP Digital Media Production: Lecture 8 23

More Typography Elements  There are also some other important elements which you should keep in your mind when creating a good typographic system.  Hyphenation: Hyphenation is the addition of a hyphen (-) at the end of lines to help prevent problems in readability or make justification look better. Most Web designers ignore hyphenation, most Web browsers do not handle this well.  Rag: The uneven vertical edge of a block of text is called the rag. Text blocks can make impact on the context block of text.  Widows and Orphans: A single word at the end of a column is a widow and if it is at the top of a new column it is an orphan. Widows and orphans look bad and can be hard to read. 5068COMP Digital Media Production: Lecture 8 24

Web link  &list=PLDD DC39AB (typography 3 minutes) 5068COMP Digital Media Production: Lecture 8 25

Common mistakes of using the wrong typography in a project  Too many type faces: using too many typefaces and styles can be confusing for the reader. Try to limit any piece to 2 or 3 different type faces and styles.  Importance of header/subheaders: Use one header and be consistent.  Consistency: Using 2 very Simila r fonts can look like you made a mistake and accidently chose the wrong font. 5068COMP Digital Media Production: Lecture 8 26

Spacing  Do not to crowd the typography.  If you are using software such as Illustrator and are having problems fitting the text into the container, make sure you condensed the font, or allow space inside the container.  This applies to the edge of the page too, allow some white space around the text. 5068COMP Digital Media Production: Lecture 8 27

Alignment  Do not use centre aligning only (unless that is a deliberate design decision).  Use a grid.  Use guides and clean things up. 5068COMP Digital Media Production: Lecture 8 28

Using the correct font face  This point can be frustrating.  The urge to set paragraph text in a decorative face can be very detrimental for your work.  If the font face is decorative means that it has been used in media and most people would recognise this.  Simple font face is better choice when deciding which font to use; fonts like Helvetica used by most designers. 5068COMP Digital Media Production: Lecture 8 29

Importance of font size  The size of the text in relation to the other items on the page is important.  If the titles are well designed-bold and large, but if you set your paragraph too large, then it looks peculiar.  Think about who reads the text. (See the restaurant and menus example to illustrate this point)  If you are using heading and paragraph text, the headings should be much larger than the body of the text. 5068COMP Digital Media Production: Lecture 8 30

Readability  Your message must be readable by other people.  Dark text on a dark colour is not a good choice.  If you are using a photo and applying small type over a high contrast photo can be very confusing for the reader.  Remember “less is more”, an overcrowded page with picture over the text will pass the wrong message to the reader/or no message at all. 5068COMP Digital Media Production: Lecture 8 31

Colour  What colour is best for type?  Black or white is often best. The grayscale tones are pushed to very strong values.  If you use colour, consider muting the saturation. Brightly coloured type is not very good to use.  Vibrating colours such as a red directly on a green is not a very good choice either.  Rainbow coloured gradients are generally avoided by most designers. 5068COMP Digital Media Production: Lecture 8 32

Grouping  Grouping related pieces of information together on a page improves its readability.  Bad grouping can result confusion for the reader. 5068COMP Digital Media Production: Lecture 8 33

Leading  This is the amount of spacing between lines of text.  Use at least 2 points in line spacing higher than the type size. For example: 10pt type should have a 12pt leading for maximum readability. 5068COMP Digital Media Production: Lecture 8 34

Kerning  Kerning is the individual spacing between characters.  To change the Kerning, place the text "I-beam" between 2 characters in Photoshop and Illustrator. Hold down the Alt/Option key and tap the left or right arrow keys to adjust the kerning. 5068COMP Digital Media Production: Lecture 8 35

Conclusion  In this session, we have introduced concepts associated with Typography.  The typefaces should be chosen carefully, and you should be looking at the anatomy of the type as well as what family of type it is in.  Well-designed type should be able to stand on it's own.  Design principles are based on common sense but are occasionally difficult to apply. 5068COMP Digital Media Production: Lecture 8 36

Web Links  PLDD DC39AB (typography 3 minutes) PLDD DC39AB (typography 3 minutes)  PLDD DC39AB PLDD DC39AB  (logo)  (CS6 as well) COMP Digital Media Production: Lecture 8 37

Illustrator Summary for Lab tomorrow Lab  Understanding how Illustrator handles text-related issues is vital to getting the best results.  Individual type has one point as its anchor, and the type is aligned to that point.  There are four ways to put type on a page: individual type, type containers, area type, and type on a path. Type containers exist within a rectangle drawn with the Type tool. Type can be selected all at once by clicking the path (or point) of the type with the Selection tool. 5068COMP Digital Media Production: Lecture 8 38

Summary of Illustrator-Type tool cont.  Individual characters, words, and paragraphs can be selected by using any of the type tools.  Area type is type that exists within the confines of any path. Type on a path is type that runs along the edge of a path.  The Character panel, accessed by pressing Ctrl+T (Ô+T), contains all the character- specific information about selected type and can be used to change that information.  Tracking and kerning remove or add space between groups or pairs of letters, respectively.  The Paragraph panel contains all the paragraph-specific information about selected type and can be used to change that information.  Finally, most of the options used to control type can be found in the Type menu. 5068COMP Digital Media Production: Lecture 8 39

Summary of Illustrator -Type tool cont.  Type can be set to wrap around selected paths by using the Text Wrapping feature.  Type can be set to jump from text block to text block by threading text blocks together. The Tabs panel is used to set tabs for text areas.  If you have both the screen font and the printer font of a Type 1 typeface, or if you have an OpenType or TrueType font installed, you can convert the font into outlines via the Create Outlines command.  After type has been changed to outlines, you can use those outlines as a mask or fill those outlines with gradients or patterns. 5068COMP Digital Media Production: Lecture 8 40