Typography

Over the centuries, a nomenclature has evolved that identifies the various components of individual letterforms. By learning this vocabulary, designers and typographers can develop a greater understanding and sensitivity to the visual harmony and complexity of the alphabet.

The following list identifies the major components of letterform construction. In medieval times, horizontal guidelines were drawn to contain and align each line of lettering. Today, letterforms and their parts are drawn on imaginary guidelines to bring uniformity to typography.

Using correct nomenclature is vital to communication, especially technical communication.

Since letters are the foundation of all typographic communication, letter nomenclature is a logical place to begin to build your typographic vocabulary. Here is a video to go through it with you:

Try This:

While no one but you may see this hands on exercise, take the time to do it just as if you were turning it in for a grade. It will help reinforce what you have learned.

1. To practice learning the parts of letterform, print out the alphabet and see if you can point out the parts on each letter.

2. Tremendous diversity of form exists in the typographic font world. Twenty-six capitals, twenty-six lowercase letters, ten numerals, punctuation, and other graphic elements must be integrated into a system that can be successfully combined into countless words.

Letterforms share similar parts. A repetition of curves, verticals, horizontals, and serifs are combined to bring variety and unity to typographic designs using this typeface. Using a media of your choice see if you can design a new typeface.

A tremendous variety of type styles is available today. Digital typography, with its simple and economical ability to create new typefaces. In addition, we have access to the entire array of typefaces developed over the centuries. In the past a typesetter would have to buy a type tray, called a "California Job Case", made of metal or wooden type. The 'type setter' would place each individual letter in the correct order to make a page layout. It was painstaking work. A page of type could take hours and hours to complete to prep for printing. Now you can buy most typefaces online as software for most computers.

Check out this short video on typography:

A number of efforts have been made to classify typefaces, with most falling into the following major categories. Serif typefaces, like Times, have the little feet and variable line widths which make them easy to read. Sans serifs typefaces do not have little feet and are more common on websites. There are also decorative, stylized, or novelty classifications for the wide range of fanciful type styles that defy categorization and are usually used to catch the viewer's attention, as in a headline for example, for example.

The style of Roman letter that is most directly descended in form from chisel edge drawn models. The style is characterized by angle and bracketed serifs, biased stress, less thick and thin contrast. Some examples are Caslon, Garamond, Palatino, and Times Roman.

A style of Roman letter that exhibits design characteristics of both modern and old-style faces. For example, Baskerville, Century Schoolbook, and Cheltenham.

A style of Roman letter whose form is determined by mechanical drawing tools rather than a chisel-edged pen. This sytle is characterized by extreme thick and thin contrast, vertical/horizontal stress, and straight on, bracketed serifs. For example, Bodini, Caledonia, and Tiffany.

Also known as Slab Serif is a style of Roman letter characterized by heavy, slab like serifs. The thin strokes are usually fairly heavy. It may have modern or old-style design qualities that are sometimes called square serif or slab serif. For example, Claredon, Egyptian, and ITC Lubalin Graph.

This is a letter form design resembling handwriting with the notes appearing at an angle or slant to the right. This style was originally used as an independent design alternative to Roman. It is now used as a style variant for a typeface in a type family that applies to most serif and sans serif typefaces.

Script is letterform design that most resembles handwriting. Letters usually slant to the right and are joined. Script type can emulate forms written with chisel edge pen, flexible pen, pencil, or brush. For example, Brush Script, Shelley Allegro Script, and Snell Roundhand Script.

Sans serif letter forms are designed without serifs and usually have no discernible thick and thin variations. For example, Futura, Helvetica, and Univers.

A typeface is a style of lettering, such as Helvetica or Times. A font is the set of a typeface, used to produce the letters. On a computer, it is a file used by the system. People often confuse "font" with "typeface". For example, Helvetica, point 12 is a different font from Helvetica, point 14, even though both are of the same typeface.

A set of similar typefaces is called a "family." Within a family, typefaces are categorized as parent (e.g. Times, Helvetica) or relative (e.g. bold, italic). Typefaces are categorized also according to style (e.g. italic, book), weight (e.g. bold or light), and width (e.g. expanded).

Type is measured in points, from top to bottom of the letters in invisible bounding boxes. Since each letter fills up a percentage of that bounding box, when the size of the box is increased, the letter size increases.

Try This:

While no one but you may see this hands on exercise, take the time to do it just as if you were turning it in for a grade. It will help reinforce what you have learned.

1. Investigate what typefaces you have on your computer that you can use in your graphic programs.

2. Look through a magazine and try to identify what classifications of fonts were used by the professionals.

Text can have a number of different purposes in a design. It can be used for pure graphic appeal, a case in which readability may be less important than aesthetics. An example of the graphical use of text is in titles, logos and trademarks.

There are many kinds of decorative typefaces that one would be a poor choice to use to print the main body of an article.. This is because a purely decorative typeface tends to be distracting to the content of the message and will tire the reader's eyes when used in large portions. Our eyes are most comfortable reading less distinctive typefaces.

Decorative typefaces are better suited for display type (greater than 14 points), while simpler type is better used for text (less than 14 points). To maintain readability in large blocks of text —such as in an article— stay consistent, and use only one family.

Text may also be used for communication of information rather than for visual effect, in which case, legibility is always the priority of the designer. A few examples of usage of text for linguistic communication are: the body text of an article or book, the text of a restaurant menu, or in product descriptions in a catalog.

A typeface may be used either successfully or poorly, depending on its degree of relevance in the project and the skill of the designer. The designer must pay careful attention to letter, word, and line spacing as well as the size of the typeface and its stylistic contribution to the overall aesthetic feel of the project. They must optimize the properties of the text for its purpose in the overall design (aesthetic or communicative) and maintain legibility where it is necessary. The designer is also expected to add visual variety with formatting and layout, as well as possible typeface changes where applicable.

Check out this short video on choosing display typography:

Try This:

While no one but you may see this hands on exercise, take the time to do it just as if you were turning it in for a grade. It will help reinforce what you have learned.

1. Turn your name into a stylized graffitti tag. The reader should be able to see your name but it may take a little time to make it. Remember, designing for an aethetic is about how the collection of letters works together as a whole and not about simply communicating information.

A designer has to choose a typeface that is not only appropriate to the mood of the design, but that is appropriate for the text's purpose in the design. Standard graphic design wisdom holds that of the classifications of serif and sans-serif, serif fonts are easier to read. This is because when reading, the eye quickly scans the tops of the letterforms and a serif font has more immediately recognizable features thanks to the tiny 'eye-holds' provided by the serifs. There is a notion slowly gaining acceptance that for the purposes of purely electronic design, the reverse is sometimes true. Sans-serif fonts are more readable in this case because a screen has a lower resolution than a printed page, so the serifs only serve to smudge the letter forms. As screen resolution improves and technology improves, both are being used more commonly depending on the application.

Some typefaces, such as Times, originally designed for the London Times newspaper, or Futura, designed as a letterpress (raised plate) type for printing on paper, were intended for the printed page. Others such as Georgia and Verdana were designed for the lower resolution of text on a screen. The shapes of these typefaces are developed to optimize visibility in smaller sizes on a computer monitor. In larger sizes, these differences don't matter as much.

Line

Words are joined to form verbal sentences and typographic lines. The configuration and placement of lines of type are significant structural concerns. In its most basic form, a line of type consists of a single point size and a single weight extended horizontally over a specific line width.

Lines of type can be arranged symmetrically, or asymmetrically. The viewer/reader must sense a clearly established relationship between individual lines of type and the surrounding space.

Hierarchy

A visual hierarchy is an arrangement of elements in a graduated series, from the most prominent to the least prominent, in an area of typographic space. When establishing a visual hierarchy, a designer carefully considers the relative importance of each element in the message, the nature of the reader, the environment where the communication will be read, and the need to create a cohesive arrangement of forms within the typographic space.

The study of visual hierarchy is the study of the relationships of each part to the other parts, and the whole. When elements have similar characteristics, they have equality in the visual hierarchy, but when they have contrasting characteristics, their differences enable them to take dominant and subordinate positions in the composition. Here is the same content demonstrating visual hierarchy.

Try This:

While no one but you may see this hands on exercise, take the time to do it just as if you were turning it in for a grade. It will help reinforce what you have learned.

1. If you where to design a business card for yourself what information would you want to include? Which information would be most prominent and why? Create a heirarchy of first read (headline), second read (sub headline) and plain text (body).

2. Do some investigation to see if typeface and point size is as big a concern for e-readers, like the Kindle or iPad. Why or why not?

Can you see what’s wrong with the statement above?

Bad typography is everywhere. It can be found in magazine articles, outdoor signage, restaurant menus, billboards, newspaper and TV advertisements, and all over the internet. Spend just 30 seconds looking and you will see that it is easy to find incorrect hyphenation, ‘dumb’ quotes, double-spacing, widows, orphans, poor kerning (distance between individual letters)… the list goes on. Typography is something every designer should care about because there is a correct way to do things.

Technology is a major barrier in the way of good typography. There aren’t enough keys on a computer keyboard to have separate keys for hyphen, em-dash and en—dash (see link), or for separate open and closed, single and double quotation mark keys. Designers have to rely on keyboard shortcuts to find the characters they need, and some don’t even have keyboard shortcuts at all. In that case a character viewer such as PopChar on the Mac is needed, or several minutes of srolling through Alt character tables on Windows.

Here is how the statement above should look.

Here are some basics to follow when doing text layout to maximize readability and help you from making typographic errors.

Try This:

While no one but you may see this hands on exercise, take the time to do it just as if you were turning it in for a grade. It will help reinforce what you have learned.

1. Using publications you have at your disposal find examples of each of these typographic details listed. They are common errors made by non-professionals.

Typeface Sizing

Keep the typeface at a reasonable size for reading. The numbered size of a typeface may reflect the overall height of the lines that stick out of the type, but not the readability size that relates to the inner dimensions of the letters. The type size should be chosen on a visual basis, and not purely on that of font size numbers. Usually, type that is proportioned so that the lower case size is larger in proportion to the overall height of the font, can produce a greater amount of legible words into an equivalent space.

Typeface Spacing

Word spacing should be so that the reader is aware of the beginnings and endings of words with little or no difficulty. Experiment with spacing settings to find the best one. Letter spacing and line spacing may be used to expand on the expressivity of the font. Leave enough space between the lines so that the text is legible. Experimentation is important here, too. The reader's eyes should be pulled to the next word as they read, not to the lines above and below. The letter spacing should be that so the reader can easily differentiate between different characters. Experiment, experiment, experiment.

Kerning

Kerning is the horizontal spacing between exactly 2 glyphs. When you are hand kerning text (logotype or headline text usually) try to imagine that the baseline and glyph shapes make a container, and imagine pouring water in. Try to make the negative space between each pair of glyphs hold the same amount of water.

Click on the image below to try an interactive activity to help you understand kerning:

Tracking

Tracking is the horizontal space added to or subtracted from the space between each and every pair of glyphs in a selection. In other words, tracking adds to or subtracts from the kerning of all pairs of glyphs in a selection.

Leading

Leading is the vertical spacing between separate lines of type. There is a relationship between the length of the line and the amount of leading needed for easy legibility. Longer lines need more leading to prevent the reader's eye from slipping up or down when moving from the end of one line to the beginning of the next. It then logically follows that short lines are preferable if information density is important, as in a newspaper.

Layout

A good layout is one that shows good use of the elements and principles of design. Most importantly, a designer should use the principles of design to draw the reader's eye both to and through the design easily. To refresh you the elements of design are: color, value, texture, shape, form, space, and line. The principles of design are: contrast, emphasis, balance, unity, pattern, movement, and rhythm. The specifics of both the principles and elements vary from source to source, but the idea remains the same.

Type and Visuals

Type is usually designed with other visual elements, such as photographs, illustrations, graphs, and graphics. The relationship between typed and visuals is crucial, it should be synergistic. When the cooperative action between type and the visuals is created, the design becomes a cohesive unit.

In addition to understanding the fundamentals of design and how they relate specifically to designing with type, it is essential to understand how type can be used creatively and expressively. Used in conjunction with the visual, type is often the verbal part of the design message. However type can be the visual itself and can express the entire message. Below are two examples of how type is the main element used to animate a message.

Summary

Typography is the design of letterforms and the arrangement of them in print and digital media. For both print and digital media, visual communication professionals must consider some fundamental issues of form and structure, design, message/content, and expression. Learning to differentiate among letterforms and understanding how letterforms are structured as well is generated, adds to one's realization that type demands a thorough study to be mastered.

When arranging typographic elements you should consider emphasis, rhythm, alignment, unity, spacing, positive and negative space, and the illusion of spatial depth to create illusion.

Besides the importance of letter, word, and line spacing to readability and legibility, when designing with type, one must consider form, direct and secondary meanings, and graphic impact. Considering the subtle, precise relationship of type and visuals in a design solution it is crucial to creating visual messages with impact. In addition to understanding the fundamentals of design and how they relate specifically to designing with type, it is essential to understand how type can be used creatively and expressively.

Watch a quick Typography Recap:

In this section, students were introduced to the basic principles of typography.  Typography is the design of individual letters and the arrangement of them in print and/or digital media. For both print and digital media, visual communication professionals must consider fundamental issues of form and structure, design, message, content, and expression.

Students examined how typography can be used when creating compisitions and had the opportunity to create a couple of quick designs using typography. In the next lesson, students will take a look at copyright issues and careers in the graphic design field.

Before continuing on, please review the lesson objectives that were presented to you at the beginning of the lesson. If you have any questions, please contact your teacher before moving on.

By the end of Session 3: "Typography", students should be able to:

• discuss typography as it relates to the use of text in visual messages:

• explore the meanings of common terms used in typography; e.g., capline, topline, midline, baseline, beardline, serif, san serif, ascender, descender, bowl, counter.

• discuss the use of the elements and principles of design in purposeful text creation; e.g., attention-getting text versus readable text
• discuss the role of whitespace in the use of text