Transcript GIF type. - WordPress.com

&
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
Joey Pfifer (2008)
Eastwest Design (1986)
Similar Design Principles
• Contrast
Kyle Meyer (2008)
Duffy Design Group (1990)
Similar Design Principles
• Positive and Negative Shapes
Max Kerning (2009)
Jack Stauffacher (2003)
Similar Design Principles
• Alignment and Proximity
Wilson Miner (2008)
Sametz Blackstone (1990)
Similar Design Principles
• Emphasis: Focal Point and Accents
Hamish McPherson (2008)
William Longhauser Design (1990)
Similar Design Principles
• Rhythm
Jon Tangerine (2008)
Vignelli Associates (1990)
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.
Printing Technologies
• Lithography
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.
Printing Technologies
• Lithography
Today, offset
lithography is the
dominant form of
commercial
printing.
Hamada B452A 4-color conventional offset-lithographic press
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
• Letterpress
In 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.
Printing Technologies
• Letterpress
The 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.
Printing Technologies
• Letterpress
Today, letterpress is used to print
editions of fine books, elegant
invitations and numbering forms.
Heidelberg Windmill Platen Press
Printing Technologies
Letterpress 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 lithography.
A page printed using letterpress.
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 nonvisual 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