& typography the selection and arrangement of type on a page, whether printed or online. the two...

Typography

• The selection and arrangement of type on a page, whether printed or online.

• The two technologies will continue to exist side-by-side into the near future, just as radio has never been completely replaced by television.

Similar Design Principles

• Asymmetrical Balance

Eastwest Design (1986)

Joey Pfifer (2008)


• Contrast

Duffy Design Group (1990)

Kyle Meyer (2008)


• Positive and Negative Shapes

Jack Stauffacher (2003)

Max Kerning (2009)


• Alignment and Proximity

Sametz Blackstone (1990)

Wilson Miner (2008)


• Emphasis: Focal Point and Accents

William Longhauser Design (1990)

Hamish McPherson (2008)


• Rhythm

Vignelli Associates (1990)

Jon Tangerine (2008)

Printing Technologies• Lithography

Alois Senefelder invented lithography in 1796. An artist writes on a perfectly smooth stone with a greasy pencil, and then covers the stone with water, which is repelled from the pencil but attracted to the porous stone.


Ink is applied to the stone and is repelled by the water, but sticks to the pencil marks. Paper is then applied, and the ink transfers to the paper, forming an image.


Hamada B452A 4-color conventional offset-lithographic press

Today, offset lithography is the dominant form of commercial printing.

Printing Technologies• Letterpress

Johann Gutenberg invented handset movable type in Mainz, Germany in 1450. Each letter was cast in metal, with the letterform raised above the non-image area.

Printing Technologies

• LetterpressIn 1886, Ottmar Mergenthaler invented the Linotype, the first machine for setting type using a keyboard. The operator strikes a key, dropping a matrix with a recessed letterform from an overhead magazine.


• LetterpressThe matrices are collected to form a line of type. Then molten lead is shot into the recesses to form a slug. When they solidify, the slugs are collected into a chase, inked and run on a letterpress.


• LetterpressToday, letterpress is used to print editions of fine books, elegant invitations and numbering forms.

Heidelberg Windmill Platen Press

Printing TechnologiesLetterpress technology forced the designer to work within a rigid grid because the individual blocks needed strong pressure from all four sides in order to be held together in a chase. On the other hand, lithography freed artists to experiment with asymmetrical compositions, curving baselines and distorted type.

A page printed using letterpress.

A page printed using lithography.

Computer Typography

• Right now, we’re at a similar point in graphic design history: the computer and its software applications are an empowering technology that offers today’s artists unlimited flexibility to create and design.

Web Typography•Apple introduced the Macintosh in 1984, launching the desktop publishing revolution along with Aldus PageMaker and Adobe PostScript.

•QuarkXPress, Adobe Illustrator, and Adobe Photoshop became the standard software applications for desktop publishing.

•The World Wide Web was established in the early 1990s. Pages were originally coded using HTML.

•Today, the standard of Web Typography involves CSS.

Web Typography

• HTML» HyperText Markup Language

defines the structure of a Web page.

Web Typography

• CSS» Cascading Style Sheets

defines the appearance of a Web page.

The two coding languages work together in today’s Web pages, but HTML is no longer used to select fonts, sizes, spacing and layouts.

Web Typography

• CSS» Style rules are defined only once, then HTML references

defined styles wherever they are applied to paragraphs.

» Less coding results in smaller files and faster download speeds.

Web Typography

• CSS» External storage—changes to CSS rules can be quickly

applied to an entire Web site, even if it consists of thousands of pages.

» Separate style sheets for Web, print and handheld devices enable Web pages to display differently for each media, thereby saving paper or conforming to different display formats.

Web Typography

• GIF type.» An image, not actual editable type.

» Image saved as a GIF (Graphic Interchange Format) consists of an indexed color table for smaller file size and faster downloads.

Web Typography

• GIF type.» Supports transparency, but requires anti-aliasing, which slightly

increases file size in order to make type appear smoother.

Web Typography

• GIF type.» Always provide ALT text with GIF type for non-

visual visitors, visitors with graphics turned off, and search engines.

<img src=“logo.gif” alt=“Our Company’s Logo”>

Typography

• The future of typography.» The future of typography lies in all the technological

innovations to be introduced in the coming years.

» HDTV, the Web, iPods, the iPhone and others will provide opportunities for typography’s further development for many years to come.

Demonstrations• Adobe Illustrator

» Point Type

» Area Type

» Path Type

» Outline Type

• Adobe Dreamweaver» Style Sheets

» GIF type, Alt text