Typograhpy


 * CHAPTER 21: TYPOGRAPHY **

media type="custom" key="5900911"Typography is visual form of communication. It has form and shape, personality and character, texture, and the power to express mood, meaning, and idea. Modern typography adheres closely to tradition. Since legibility is of the utmost importance, the forms that print most legibly are retained.

Type communicates on several levels. In content the word's written meaning, visual impact the use of type as a design element, and context the content and visual impact of text in relationship with entire composition.

Typography now encompasses everything from calligraphy through digital type and type on Web pages. The selection of a typeface is an most important part of the process in graphic design. This includes type designers who create new letter-forms as well as designers and calligraphers who use the letters as part of their designs.

However, the topic of typography is too broad a subject to get into all the aspects and details of it.

Below are some links to awesome typography illustration examples from around the web.

20 Examples of Typography Graphic Designs Typography At It's Best Photoshop Text Effects

**CHAPTER TABLE OF CONTENTS** 21.1 History of Type 21.2 Evolution of Typographic Design 21.3 Classifications of Type 21.4 Basic Type Anatomy & Anatomy Terms 21.5 Typography Essentials 21.6 Typographic Measurements 21.7 Putting Manuscripts Into Production 21.8 Choosing the Right Font 21.9 Useful Links Resources & Works Cited


 * 21.1 HISTORY OF TYPE **

The fifteenth century was a pivotal time for written communication. Its primary elements, the characters of the modern alphabet, were once quite literal symbols of everyday objects which were gradually abstracted to the letters of the alphabet.

Until the Digital Age, typography was a specialized occupation. Digitization opened up typography to new generations of visual designers and layout users. Sources indicate that it may have begun with Gutenberg and the development of move-able type, but typography also has its roots in handwritten letter-forms.

Before the development of typography, related arts flourished for centuries. Scribes in ancient Egypt and the Middle East perfected the craft of writing on papyrus scrolls and clay tablets. Hellenistic and Roman makers of books developed the art, which reached a peak of aesthetic perfection in the exquisite illuminated manuscripts of the Middle Ages. The first European typographers imitated these manuscripts, but it wasn’t until the introduction of metal types during the mid-fifteenth century.

When people refer to the birth of printing they actually mean is the birth of type. Movable type (typography) - individual letters that could be arranged, edited printed from, then dismantled and reassembled to print again on a new configuration. This was the real breakthrough, the spark, that fired the printing revolution that was to sweep through Europe during the rest of the century.

In 1445, in Mainz, Germany, **Johann Gutenberg** changed the course of the written word. While Gutenberg is often credited with inventing both the printing press and metal type, he, in fact, did neither. Printing had been practiced for several hundred years in China and for at least several decades in Europe. Type had been cast successfully, albeit crudely, several years earlier in the Netherlands. What Johann Gutenberg did do was make these technologies practical.

He perfected a workable system of movable type, developing an ingenious process employing a separate matrix, or mold, for each alphabet character, from which metal types could be hand-cast in great quantities. These types could then be assembled into a page of text, and imprinted to paper via special inks and a printing press of his own design. For the first time, a technical system of mass production was applied to publishing.

The next 50 years witnessed an explosion of printing throughout Europe and, by the year 1500, more than 10 million copies of nearly 3500 works were printed and distributed. An unprecedented diffusion of technical and social knowledge spread throughout the Western world and the education of the masses had begun.

Most printing used a technique where each letter is carved in wood and then cast in lead. These letters were placed in a printing press, where they were inked and printed onto paper. Typesetting became automated in the late 1800s as a result of the invention of the Linotype and Mono-type machines. Operators of these machines used a keyboard to set type, which was then cast in hot metal for use in a printing press.

Phototypesetting, introduced in the 1950s, did away with metal type completely. Photoype systems produce film negatives or digitized images, which are then, printed using offset lithography. But Letraset dry-transfer lettering soon arrived to physically return type the hands of the designer.

Modern digital typesetting systems encode typographic characters, defining each letter by the position of points on a grid. Output devices, such as laser printers, transfer this data directly onto paper. The quality of the output depends on the number of dots per inch (DPI), the output device is capable of producing.


 * 21.2 EVOLUTION OF TYPOGRAPHIC DESIGN **

Although the basic letter-forms of the modern alphabet have changed very little since the days of ancient Rome; the appearances of written and printed letters have evolved over time. These variations in style are due largely to changes in the applications of written language and the tools used to create it.

From the stone-carved letters of ancient Roman monuments, to the hand-drawn illuminated manuscripts of Gothic monks, to the hand-cut wooden type used in early printing, to the advent of acid-etched metal type, to typefaces designed for modern digital output each advancement has contributed to the evolution of typographic styles.

Typographic design has evolved due in large part to the capabilities and limitations of the printing technologies of the day. Designers utilize type and layout to enhance a reader's overall experience of text by considering the aesthetics of letter-forms, the layout of pages, and the structure of paragraphs.

Typography uses typefaces and the white-space around and through them to create a whole design. It is much more than a grouping of letters that form a word. From pictograms to pixel fonts, written language has evolved over time, changing in response to communication methods and printing technology. Letter-forms and typefaces are what set designers apart from other artists. This is why typography is so important.

Since the invention of movable type, designers have adapted letter-forms and layouts to take advantage of the unique possibilities presented by each output device. In any form of visual communication, typography must be integrated into a main design. Every loop, swirl, and descended tells a story. With a keen understanding of typography, your work will generate power and beauty.

Varying type size is one of the best ways to differentiate content. Colors, swirls, pretty little boxes with graphics might help, but different sizes of type, used consistently throughout your pages, will signal loud and clear to your readers the relative importance of your pages’ elements.

=21.3 CLASSIFICATIONS OF TYPE=

Since the time of Gutenberg, the typographic form has evolved with technology, philosophy, and culture. In order to effectively analyze this typographic evolution, the design of type characters over the last five and a half centuries is most often broken down into classifications of common visual characteristics.


 * Blackletter
 * Old Style
 * Transitional
 * Modern
 * [|Slab Serif/Egyptian]
 * [|Sans-Serif]
 * Script-Cursive
 * Decorativee

Arm/leg**: An upper or lower (horizontal or diagonal) stroke that is attached on one end and free on the other.
 * 21.4 BASIC TYPE ANATOMY **
 * [[image:ANATOMY-OF-TYPE_2.jpg width="548" height="106" caption="Figure 21.4"]]


 * Ascender**: The part of a lowercase character (b, d, f, h, k, l, t) that extends above the x-height.


 * Bar:** The horizontal stroke in characters such as A, H, R, e, and f.


 * Baseline:** an imaginary line which the characters seem to be standing.


 * Bowl:** A curved stroke which creates an enclosed space within a character (the space is then called a counter).


 * Cap Height**: The height of capital letters from the baseline to the top of caps, most accurately measured on a character with a flat bottom (E, H, I, etc.).


 * Counter**: The partially or fully enclosed space within a character.


 * Descender**: The part of a character (g, j, p, q, y, and sometimes J) that descends below the baseline.


 * Ear**: The small stroke that projects from the top of the lowercase g.


 * Link** – The stroke that connects the top and bottom part (bowl and loop) of a two–story lowercase g.


 * Loop:** The lower portion of the lowercase g.


 * Meanline**: the imaginary like that runs along the top of most lowercase letters such as i, c, e, m, n, u, v, w, and x.


 * Serif** : The projections extending off the main strokes of the characters of serif typefaces. Serifs come in two styles: bracketed and unbracketed. Brackets are the supportive curves which connect the serif to the stroke. Unbracketed serifs are attached sharply, and usually at 90 degree angles.




 * Shoulder:** The curved stroke of the h, m, n.


 * Spine:** The main curved stroke of the S.


 * Spur :** A small projection off a main stroke found on many capital Gs.


 * Stem:** A straight vertical stroke (or the main straight diagonal stroke in a letter which has no verticals).


 * Stress**: The direction of thickening in a curved stroke.


 * Stroke:** A straight or curved line.


 * Swash:** A fancy flourish replacing a terminal or serif.


 * Tail:** The descender of a Q or short diagonal stroke of an R.


 * Terminal**: The end of a stroke not terminated with a serif.


 * X-height**: The height of lowercase letters, specifically the lowercase x, not including ascenders and descenders.

media type="custom" key="5904613"**Typefaces** are a family of fonts, are the design of alphabetical and numerical characters unified by consistent visual properties (such as Helvetica Regular, Helvetica Italic, Helvetica Black, and Helvetica Bold).
 * 21.5 TYPOGRAPHY ESSENTIALS **


 * Fonts** are one weight or style within that family (such as Helvetica Bold). This includes caps and lowercase, numerals, punctuation marks, and any special characters contained in the typeface, such as symbols or ligatures. In traditional metal type, a font meant a particular size and style; in digital typography a font can output multiple sizes and even altered styles of a typeface design.


 * Characters**: The individual letters numbers and punctuation used when setting type.

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ! @ # $ % ^ & * _ + - = [ ] { } \ | ; : ’ ”, < . > / ? ¡ ™ £ ¢ ¥ § ¶ • ª º – ¹ oe å ´ ® † ¥ ¨ ˆ ø p “ « å ß ¶ ƒ © ? D ° ¬ … æ W » ç Ö ò ˜ m £ ³ ¸ ¤ ‹ › fi fl ‡ ° · ‚ — ± OE „ ´ ‰ ?Á ¨ ˆ Ø Õ ” ’ » ÅÍ Î Ï ? Ó Ô Ò Ú Æ ¸ ? Ç à i ˜ Â ¯ ? ¿

abcdefghijklmnopqrstuvwxyz
 * Lowercase**: the capital letters of the alphabet

ABCDEFGHIJKLMNOPQRSTUVWXYZ
 * Upper Case**: the lowercase letter if the alphabet

A typeface usually includes several design variations called **typestyles**. Type styles are basically a modified version of a typeface. The available number of typestyles, which varies, is based on the following visual characteristics: character angle, character weight, and character width.
 * Roman
 * Italic
 * Regular
 * Bold
 * Light
 * Condense
 * Extended

A **Type Family** is a category that type is classified into, based on the historical origin, generic, and physical characteristics of the letter-forms. This complete assembly of all the sizes and styles of a typeface forms a type family, usually bearing the name of its typeface.

For example, all the styles and sizes of Adobe Garramond form the Adobe Garramond family.


 * Adobe Garramond Roman
 * Adobe Garramond Bold
 * Adobe Garramond Italic
 * Adobe Garramond Bold Italic
 * Adobe Garramond Semibold
 * Adobe Garramond Semibold Italic

A type family may contain many variations but will always retain a strong visual continuity because all of the variations are based on common design characteristics.


 * Designing with Type: The Essential Guide to Typography; was created to provide information beyond the scope of the the actual book. This site goes into visual details about the essentials of typography.*


 * 21.6 TYPOGRAPHIC MEASUREMENTS **

1 Inch = 72 points = 6 picas (1 pica=12 points)

Here is a PDF from Washington State University which gives you visual details on the different measurements of Typography.


 * 21.7 PUTTING MANUSCRIPT INTO PRODUCTION **

Although the technology has changed beyond recognition, the principle of typography remains the same: using a combination of factors such as type size, leading and kerning to achieve legibility. Granted, typography can transcend pure legibility, with modern type blurring the lines between communication and art, but, for the most part, type should be used to deliver content in the most efficient way possible.

Writers adhere to the rules of conventional grammar and mechanics. Technical writers essentially proofread and edit the document for detecting and correcting errors in graphics, typography and layout. A complete design should include full type specifications and representative layouts for all the various categories of text in the publication. In the rare event that no designer's layout or list of specifications is available, the editor should mark up the hard copy with appropriate type specifications at the first occurrence of the element that apply to. For example, in the margin next to the first block of regular text, "text: 10/12 Times New Roman x 26" Meaning (10-Point type with 12-point leading, each line 26 picas long); and next to the first extract, "extract: 9/11 Times New Roman; indent 2 pi from left." As long as all extracts have been coded "ext," all first-level subheads "A" and so forth, markup can be kept to a minimum.

Experienced designers know how to evaluate the typographical requirements of a particular project and to make choices that will transform the manuscript into a visually appealing publication.

Other key decisions for concern are the dimensions of the publication. One dimensions such as the size of the type page, which is the area occupied by the running head and the text proper (the text page or text area), the foot notes if any, and the page number (folio). The dimensions of the type page are measured in picas, with one pica equaling approximately one-sixth of an inch. In addition to the width and length of the type page, the designer/editor typically specifies the number of text lines on a full text page, and on any special types of pages, such as chapter openings.

A final variable is the publication trim size which is measured in inches (stated as width by depth ex. 6” x 9”) and refers to the size of the whole page on which type and illustrations are printed. A large trim size may allow more characters to be fitted in a page or may be appropriate to a work containing many illustrations.

**21.8 CHOOSING THE RIGHT FONT**

Even if you understand all the technical aspects of letterforms and typeface categories, and have access to all the fonts in the world, you can still have difficulty choosing the right ones. In order to start your quest for the perfect font, you should first define the feelings you're trying to evoke in the members of your target audience. Which typefaces and sized of type to use for running text, notes, and other parts of the document is perhaps the most important. A number of considerations affect this decision.
 * Is the text peppered with foreign words requiring a variety of diacritical marks available only in certain typefaces?
 * Is the text highly technical, containing mathematics or other material requiring special symbols that are likewise available in limited number of typefaces?
 * Are there several levels of subheadings that might call for a second, complementary typeface to help readers navigate the text?
 * What kind of display type is appropriate for the subject matter?
 * Are you trying to show that the company the web site represents is hip and young, or would you rather portray an aura of steadfast wisdom?
 * Do you want to create something to match a certain theme or are you trying to convey a more formal identity?

By asking yourself these kinds of questions, and thinking about fonts on an emotional level, you should be able to decide reasonably easily whether a given font is appropriate for your application.

If you don't think you could answer those questions about a particular font, make up your own questions. The fact is that you've probably seen billions of letters and millions of words in your lifetime -- you just feel some emotional connections on which you can base your font choices. Remember that there are no bad fonts -- just inappropriate ones. While a particular font may not work for one purpose, that doesn't mean it can't be used for another. Just try to keep an open mind, and if you can narrow the field to a few possibilities, try asking a friend or coworker the question "Which one makes you feel more adjective?" replacing adjective with the feeling you're aiming to elicit.

Finally, when you're choosing fonts, it's important not to choose too many. As a rule of thumb, try not to use more than four different fonts in a web site design. Also, try to avoid combining two different serif fonts or two different sans serif fonts in the same project. READ MORE ]

*80 Beautiful Fonts/Type Faces for Professional Design


 * 21.9 USEFUL LINKS **

Typography is more than just deciding what fonts or font sizes to use. It is about placement, alignment, line height, spacing, and more. The resources below are some of the best ways on the web to learn about Web Typography.

96 Amazing Typography Blogs and Resources: List of Typography blogs and resources.

[|100Types]: This is a reference website for graphic design students of 100 significant typeface designs since the time of Gutenberg. This site aims to provide educational reference only; it is NOT a commercial site. You can NOT buy or download fonts on this site.

[|ABC Typography]**:** Virtual Museum of Typography.

[|A Guide to Web Typography]: an Article from the site [|I Love Typography], which is a bold, graphical blog devoted to typography, type, fonts and typefaces.

[|ATypI, Association Typographique Internationale]: is the global forum and focal point for the type community and business.

[|CSS Typography]: article in [|Digital Web Magazine] is an online magazine intended for professional web designers, web developers and information architects. The magazine consists primarily of work contributed by web authors, as well as by others who occasionally delve into the web realm.

[|Designing With Type]: is a web site devoted to the art and appreciation of typography. It offers a unique typographic resource for students, educators, and professionals, showcasing talent from around the world.

[|Clagnut on typography:] An ever growing list of typographic links at Clagnut.

[|Joe Clark on typography] : Typography found and discussed.

[|Microsoft Typography]: Microsoft's Typography group researches and develops fonts and font technologies, and supports the development of TrueType and OpenType formatted fonts by independent type vendors.

[|Ministry of Type]: Fabulous blog on published type from Aegir Hallmundur.

[|The Elements of Typographic Style Applied to the Web]: The Elements of Typographic Style by Robert Bringhurst The book which sparked this website.

The Principles of Beautiful Typography: This is a great article that is actually an except of the book The Principles of Beautiful Web Design. This article goes into details about fonts, letterforms, spacing, text size, and more. Its a great and informative read.

[|The Society of Typographic Aficionados (SOTA)]: is a non-profit, volunteer-driven organization devoted to type, typography, and the related arts.

[|The Typographic Archives]: The Typograhic Archives is a private, personal non-profit website established to save content from dead websites which are not available online today. It is granted for scholarship and research purposes only. This website is dedicated to preserve valued web contents on typography and history of printing and writing

[|The Type Directors Club]: The Type Directors Club is the leading international organization whose purpose is to support excellence in typography, both in print and on screen.

[|The Typographic Circle]: was formed in 1976 to bring together anyone with an interest in type and typography. We are a not-for-profit organization run entirely by volunteers.

[|Thinking With Type]: This site is the on-line companion to the book //Thinking with Type: A Critical Guide for Designers, Writers, Editors, & Students//, by Ellen Lupton (Princeton Architectural Press, 2004). The book includes essays, examples, and practical guidance that does not appear on this website.

[|Topics - Design - Typography]: A List Apart Magazine explores the design, development, and meaning of web content, with a special focus on web standards and best practices.

[|Type For You:] More great typographic blogging.

[|Typo-L]: is a mailing list dedicated to the discussion of type, typography, typeface design, and type history.

[|TypeBase]: Hundreds of links to foundries, archives, designers and type related subjects

[|TypeCulture]: TypeCulture Academic Resource is a directory, archive and educational aid for design students, educators and professionals who are seeking information about type; its history, manufacture, use and artistic significance.

[|TypEdu]: provides a general forum to students of Hannes Famira's type design class.

[|typoGRAPHIC]: an interactive experience informed by type and typography. It aims to illustrate the depth and import of type, and to raise relevant questions about how typography is treated in the digital media, specifically online. A continuous work in progress, we welcome any suggestions and comments concerning the site.

[|Typesites]: Critiques of typographically eminent websites. Is an inspirational gallery that reviews amazing sites showing you great examples of typography.

[|TypeNeu – Typography News]

Typetester: Marko Dugonji's great tool to check out if you want to see how some HTML text will look with different leading, tracking, and alignment settings applied.

[|Typographer.org]: A regular digest and commentary on the typography and design industry, written by designers from around the world.

[|Typographica]: A journal of typography featuring news, observations, and open commentary on fonts and typographic design.

[|Typophile]: Typophile is an online typographic community featuring original courses, articles and interviews as well as a lively discussion forum. Collaborative blog with typographic news and views from around the world. Also present is a forum and a gradually evolving wiki. Some good links for beginners/anyone whose interested are:
 * [|Typography 101]
 * [|Typography 110]
 * [|TypoWiki]

[|Typography]: [|Smashing Magazine], delivers useful and innovative information to Web designers and developers.

[|Typography]: [|Web Design Ledger], is a publication written by web designers for web designers. The primary purpose of this site is to act as a platform for sharing web design related knowledge and resources. Topics range from design inspiration to tips and tutorials and everything in between.

Web Style Guide to Typography: This a very in depth guide to web Typography. It explains the characteristics of type, and goes in to great detail about alignment, line length, white space, typefaces, type size, Case, and emphasis.

[|What is Typography? Typography Basics]: About.com Web Design / HTML, About.com is an online neighborhood of hundreds of helpful experts, eager to share their wealth of knowledge with visitors. It was was acquired in by **The New York Times Company** and is recognized as a **top 15 content site** and one of the largest producers of original content on the Web.


 * RESOURCES & WORKS CITED **

Researching this proved to be more a lot difficult than I had anticipated. I assumed that since the subject was digital type it was logic to me that I would turn to the internet for information. Unfortunately with my luck, much of what I found regarding the history and other related sources was wrong, misleading or contradictory. I did gain useful facts from a number of sites including typotheque.com, typophile.com, I Love Typography, various encyclopedias, educational facilities, college sites, and many other reliable sources. But I often had to collaborate what I learned on the internet with print sources along with conversations with type designers and other specialists from my job.

“Thinking with Type: A Critical Guide for Designers, Writers, Editors, & Students.” Ellen Lupton. 2004. Princeton Architectural Press Online. 18 Apr. 2010 

“Type / Page Layout Tutorials.” Washington State University. 2010 Print Marketing Area Resources 18 Apr. 2010 

"Typography." Encyclopedia Britannica. 2010. Encyclopedia Britannica Online. 18 Apr. 2010 .

"Typography." The Columbia Encyclopedia, Sixth Edition. 2008. Encyclopedia.com. 18 Apr. 2010.

“Typography Essentials: Part 1.” Jennifer Janviere. Ready.Aim Design 2010.  Loxley, Simon. //Type: The Secret History of Letters//. New York: I. B. Tauris, 2006. Print. [[|Google Book Link]]]

Rees, Fran. //Johannes Gutenberg: Inventor of the Printing Press (Signature Lives: Renaissance Era series) (Signature Lives: Renaissance Era)//. First ed. Minneapolis, MN: Compass Point Books, 2006. Print. [[|Google Book Link]]

Schnelbach, S. and Wyatt, C. “Tameri Guide for Writers.” 10 December, 2008. Online. Internet. [Date Printed]. Available WWW: [|http://www.tameri.com]