Thinking with Type A Critical Guide for Designers, Writers, Editors, & Students ELLEN LUPTON http://www.papress.com/other/thinkingwithtype/index.htm v.

Slides:



Advertisements
Similar presentations
The Art and Technique of Arranging Type
Advertisements

SM2222: Information Design and Visualization Session 3: Typography 23 September 2005.
Typography Selecting appropriate typefaces for a document. Typography.
0202 IAT 102 Graphic Design Typography Typeface Spacing.
Desktop Publishing Ann Ware Fall, Desktop Publishing Using a computer with page-layout software to design, edit, and produce professional-looking.
Typography the art of using (text) fonts and font styles to produce professional looking publications the art of using (text) fonts and font styles to.
Principles of Typography
Week 7 Web Typography. 2 Understanding Type Design Principles.
Typography Usability & Readability
0202 IAT 102 Graphic Design Typography: origin of movable type Typeface Grid.
Chapter 6 Placing Type in an Image. Chapter Lessons Learn about type and how it is created Change spacing and adjust baseline shift Use the Drop Shadow.
1.01A – What typefaces should be used for various displays?????
1.01 Investigate typefaces and fonts.
® Copyright 2008 Adobe Systems Incorporated. All rights reserved. ® ® 1 INTRODUCTION TO TYPOGRAPHY DESIGN Vocabulary and Guidelines.
Text in multimedia Why would course designers like text? The most inexpensive media to develop Least overhead in storage/transmission But text creation.
Categories TYPE of Text is the most essential ingredient in design communication. With type you communicate in two distinct ways. The first message your.
Typography and Space for Web Design Important Issues From Web Style Guide.
10. Typography The basic terminology & concepts of working with type
Fall Unit 2. Development Module 8: Typography & Design.
Introduction to Interactive Media 06: Text: Static Interactive Media Component.
Typography 2.01 Investigate typefaces and fonts..
Words are communication. What do they say? The meaning should come before the look of the type is considered. The primary task of graphic design is to.
DHS Graphic Design Typography. Type Alignment There are 5 types of type alignments: – Center – Left aligned – Right aligned – Justified – Or wrapped around.
Chapter 9 Text. So, chapter 10 is about Photography, now Chapter 9 is about text What should it look like, how big should it be, how do colors contrast,
Text Text. Multimedia Elements u Text u Graphics u Animation u Sound u Video.
TYPOGRAPHY.
Art 368 WEB Design 1 Spring 2002 Type Two basic families:  Serif and Sans Serif Parts of all type Ascenders, descenders, baseline, etc. Leading= linespacing/paragraph.
Visual Rhetoric: Headers and Typography Professor Stevens Amidon Department of English and Linguistics, IPFW.
Typography Terms. o.php?viewkey=d26eb03e91d5741a4a 3b.
Chapter 7 Web Typography Principles of Web Design, 4 th Edition.
Digital Interactive Media
B.Sc. Multimedia ComputingMedia Technologies Character Representation & Font Technology.
Typography The Art of designing with words and letters.
COM 366 Web Production & Design
CHAPTER FIVE TEXT.
Bitmap Vs. Vector Graphics. To create effective artwork, you need to understand some basic concepts about vector graphics versus bitmap images, resolution,
JRN 302: Introduction to Graphics and Visual Communication - Typography Tuesday, 9/22/15.
Introduction to Interactive Media Interactive Media Components: Text.
Adobe Photoshop CS Design Professional AN IMAGE PLACING TYPE IN.
Chapter 5 Placing Type in an Image. Chapter Lessons Learn about type and how it is created Change spacing and adjust baseline shift Use the Drop Shadow.
Desktop Publishing Review. What is a rough sketch used in planning a layout and design?
Typograpy. Type Type - Categories Serif Fonts  Oldstyle  Transitional  Modern  Slab Serif Sans Serif Fonts Script Decorative Monospaced.
1.01b Investigate typefaces and fonts.. Fonts It’s easier to understand fonts if you begin with the original definition of a font. Before desktop publishing,
Typography Graphic Design Fundamentals
Subject Name: Graphic Design Subject Code: 9642 Md. Ataur Rahman Instructor (Design & Printing) M.CSE, B.CSE.
Typography 1.01 Investigate typefaces and fonts. (Rev. 2011)
COM 365 Newspaper Layout & Design
Desktop Publishing & Design. Baseline The invisible grid line the characters sit on.
Chapter 6 Placing Type in an Image. Chapter Lessons Learn about type and how it is created Change spacing and adjust baseline shift Use the Drop Shadow.
UNIT 4 - TYPOGRAPHY Digital Communications I. 3-D  an effect that gives the illusion of depth.
What are we interested in? 1. Understand Design 0 2. Digital Image design 3 3. Time-based media Webpage design 2 1.
Words are communication. What do they say? The meaning should come before the look of the type is considered. Choose typographic styles and sizes that.
Computer Engineering and Networks, College of Engineering, Majmaah University Text in multimedia Mohammed Saleem Bhat CEN-318 Multimedia.
The art of using text to produce professional looking publications.
Typography Typography is the art and technique of creating and composing type in order to convey a message. Words are communication. What do they say?
Basic Desktop Terminology
Use Typography Techniques
Unit 2.1: Identifying design elements when preparing graphics
Understanding Typography
2.01 Investigate typefaces and fonts.
Layout Terms Visual Hierarchy
Typography The Art of designing with words and letters.
Multimedia & Webpage Design 1.01 Investigate typefaces and fonts.
2.01 Investigate typefaces and fonts.
Source: Digital Desktop Publishing--Font Basics
Desktop Publishing Terminology
Multimedia & Webpage Design 1.01 Investigate typefaces and fonts.
Typography Usability & Readability
Layout Terms Visual Hierarchy
Multimedia & Webpage Design 1.01 Investigate typefaces and fonts.
Presentation transcript:

Thinking with Type A Critical Guide for Designers, Writers, Editors, & Students ELLEN LUPTON http://www.papress.com/other/thinkingwithtype/index.htm v

Letter anatomy The cap height is the distance from the top of the capital letter to its bottom. Some vertical elements (ascenders) may extend above the cap height. The x-height is the height of the main body of the lowercase letter.

Letter anatomy – X-heights When two typefaces are set in the same point size, one often looks bigger than the other. Bigger x-heights make a typeface appear larger. Differences in line weight and character width also affect the letters' scale.

Groups of typefaces Grotesk - Arial - sans serif typeface. Three different groups of typefaces: Grotesk - Arial - sans serif typeface. Antiqua - Times - serif typeface – Antiqua typefaces are also known as Venetian types. Courier - a Egyptienne - is a slabserif typeface, where the serifs is similar in weight to the horizontal strokes of the letters. The small features called serif

Size A typeface is measured from the top of the capital letter to the bottom of the lowest descender, plus a small buffer space. The point system, used to measure the height of a letter as well as the space between lines (leading), is the standard measurement for type. Typography also can be measured in inches, millimeters, or pixels.

Families – Adobe Garamond

Classification - Serif font styles HUMANIST OR OLD STYLE: The roman typefaces of the 15th and 16th centuries imitate classical calligraphy. TRANSITIONAL: These typefaces have sharper serifs and a more vertical axis than humanist letters. MODERN: The typefaces designed by Bodoni in the late 18th and early 19th centuries are more abstract with thin, straight serifs, vertical axis and sharp contrast from thick to thin strokes.

Classification - Sans serif font styles HUMANIST SANS SERIF: Sans-serif typefaces became common in the twentieth century. Gill Sans, designed by Eric Gill in 1928, has humanist characteristics. TRANSITIONAL OR ANONYMOUS SANS SERIF: Helvetica, designed by Max Miedinger in 1957, is one of the world's most widely used typefaces. GEOMETRIC SANS SERIF: Some sans-serif types are built around geometric forms. In Futura, designed by Paul Renner in 1927, the Os are perfect circles, and the peaks of the A and M are sharp triangles.

A few good fonts Tens of thousands of digital typefaces are available for use on desktop computers. Most of them are junk especially those of semi handwriting. Presented here is a small sampling of well-designed fonts in current use. Font facts researched and written by Alissa Faden with Ellen Lupton http://www.papress.com/other/thinkingwithtype/letter/few_fonts.htm

Screen fonts A computer screen displays fonts in pixels. When you choose a font for web design it is all about the screen resolutions.

Screen fonts The serif fonts is more and more used in web design, same as the Sans serif fonts, because screen displays have become much better. For example Georgia and Cambria are very popular now in web design. The New York times, Boston Globe and some of the best designed sites in the world use Georgia as one of their major fonts because of its readability and character.

Antialiasing ANTIALIASING is a technique for making the edges of letters look smooth on screen by adding some pixels in shades of gray. Antialiasing is generally helpful for presenting text on screen at large sizes (12 pixels and higher), but it can make small text difficult to read. When preparing images for the Web in Photoshop, you can select among several anti-aliasing settings: “none” (which generates bitmapped letters), to “smooth” (which works best at large sizes).

Bitmap fonts Bitmap fonts are built out of the pixels. A bitmap character contains a fixed number of bits. A postScript font (Type 1) consists of a vectorized outline. They are scalable, meaning that they can be reproduced in a high-resolution on print at any size.

True Type font TrueType is a digital font technology designed by Apple Computer, and now used by both Apple and Microsoft. TrueType fonts offer the highest possible quality on computer screens and printers. The TrueType font technology consists of two components: the TrueType fonts themselves and the TrueType rasterizer, a piece of software built into the System. Both components - the font and the rasterizer, are necessary to display and print TrueType fonts on a computer system.

OpenType OpenType is a format for scalable computer fonts. It was built on TrueType, retaining TrueType's basic structure and adding many data structures for prescribing typographic behavior. OpenType is intended by Microsoft and Adobe to supersede both the TrueType and the Type 1 ("PostScript") font formats. OpenType fonts are used commonly today on the major computer platforms. (It works on both Mac an PC). Basically the OpenType solves the problem with platforms and fonts.

Type crime … HORIZONTAL AND VERTICAL SCALING You can change a letter by fiddling with its horizontal or vertical scale. Stretching letters distorts their overall proportions and internal line weights, forcing heavy elements to become thin, and thin elements to become thick. Instead of torturing a letterform, choose a typeface with the proportions you need, such as condensed, compressed, or extended types. Type families such as Helvetica and Univers, include a variety of widths.

Kerning The term kerning refers to adjusting the space between two letters.

Tracking Adjusting the spacing across a word, line, or column of text is called tracking, also known as letterspacing.

Line spacing - leading Height: The point system, used to measure the height of a letter as well as the space between lines (leading), is the standard measurement for type.

Hierarchy A typographic hierarchy helps readers scan a text, knowing where to enter and exit and how to pick and choose the text.

Emphasis

Post-modernist fonts ”Dead History” font

Fonts for screen Screen sizes have increased and therefore white space. Layouts on the web can breathe better. Because of more space large type has also become popular.