TYPOGRAPHY. ascender arm (as on the capital T) descender bar (as on the capital H) counter ear (as on the lower case g and r)

Similar documents
Font classification review

MODULE CM 2004 / STAGE 2 / SEMESTER 2 / SESSION Module title Design Principles and Context

VOICE OF TYPE LECTURE 1

TYPE ANATOMY jtittle

jasonjuwono twentyfifteen TYPEDIA _ Typography Encyclopedia

Typography One typeface classification

Font Basics. Descender. Serif. With strokes on the extremities of the letters. T Script. Sans-Serif. No strokes on the end of the letters

Font, Typeface, Typeface Family. Selected Typographical Variables

Typefaces are character sets based on distinct design characteristics.

Alphabet. elemental visual signs 26 characters frozen sounds

BASIC ABOUT TYPE TYPO GRAPHY

Putting type on a page without incorporating typographic principles is merely word processing. Terry Rydberg, Author Exploring InDesign 3

> what is a font? Times New Roman [10 pts] Times New Roman [12 pts] Times New Roman [14 pts] Times New Roman [18 pts] Times New Roman [24 pts]

understanding typography

Project 2 reminders: Hand in your typed book summary/response at end of class today. Make sure to include your name and section.

TYPE BASICS Cartographic Design & Principles Winter 2016

Principles of Typography

In your lifetime you ve seen billions of letters and millions of words, yet you might never have consciously noticed the typefaces you read.

TYPOGRAPHY. The art of type

Unit 3--Alignment, Formatting Font--Size, Color, Style [Bold, Italic, and Underline] Block

ASerif. AfbcyE TYPE AND LETTERS

Modifying Type: effects of a letter change COLDS

Typography One typeface classification

serif: the short strokes that finish off the major strokes of the letterform. bracket: a curving joint between the serif and the stroke

Elements of typographic design

LESSON 7 Introduction to Typography

Pre-Venetian or Ancient Humanist or Venetian Transitional Didone Slab Serifs

Introduction A global icon needs an iconic logo. Fashion has evolved since 1969, when Gap opened its first store. Our logo has changed with the

CNOOC Nexen Employer Brand Guidelines. A New Energy

WEB TYPOGRAPHY FOR WEB DEVELOPERS. Matej Latin Lead UX/UI Designer at Autotrader.co.uk

Unit 4. Multimedia Element: Text. Introduction to Multimedia Semester 2

OUR TYPOGRAPHY APPROVED UNIVERS FONTS. Univers 65 Bold Univers 65 Bold Oblique Univers 75 Black Univers 75 Black Oblique

BRAND. For Internal Use Only Not For Use With The Public. For help and guidance on our brand standards, contact

Introduction to Multimedia. MMP100 Spring 2016 thiserichagan.com/mmp100

The Evolution of Type. Movable Type: Johannes Gutenberg Early 15th Century

TEXT MEDIA AND INFORMATION

Typography. is the foundation of good web design

5. Text CHAPTER HIGHLIGHTS 10/12/2016 CHAPTER. Text tradition. Codes for computer text. t. Font technologies. Multimedia text.

GRAPHIC IDENTITY DESIGN GUIDELINES

How Typography Determines Readability: Serif vs. Sans Serif, and How To Combine Fonts.

Graphic Design. shawacademy LESSON 5. summarynotes INTRODUCTION TO TYPOGRAPHY. For further questions visit us online at:

THINGS YOU NEED TO KNOW

Accessible Documents & Presentations. By Amy Maes, DNOM

Windows Standard Fonts

EnvSci360 Computer and Analytical Cartography

LOGO & BRAND STANDARDS GUIDE

CANES COMMUNITIES REGIONAL VISUAL IDENTITY MANUAL. March 2015

Graphic Standards Manual. Athletics

8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) Learning Objectives (2 of 2)

Chapter 12: FORMATTING TEXT

Typography/ Layout and Design

Web Site Design and Development Lecture 6

Typesetting Tips. Put your best type forward.

The Visual Scientist Presents Poster Design

BBN ANG 183 Typography Text colour: vertical and horizontal spacing

section four typography contents introduction...44 helvetica neue...45 bodoni...46 examples of type usage...47 body text examples...

The building block of a CSS stylesheet. A rule consists of a selector and a declaration block (one or more declarations).

In your lifetime you ve seen billions of letters and millions of words, yet you might never have consciously noticed the typefaces you read.

Baskerville. abcdefghijk For fun I like to jump cars while reading a quote by Albert Einstein.

Graphic Standards 1/28/13

What is Accessibility?

User-Centered Website Development: A Human- Computer Interaction Approach

Franklin Gothic. Seniors: Use larger text that is clear and legible. (Souvenir, Times, Garamond, Helvetica)

fonts Some famous (and infamous) fonts

> Introduction to the Art of Typography: The Invisible Force of Design > Using Typography as a Creative Tool: Introducing Text as Art

Adjust the point size

INTRODUCING THE Transition family

Designing Research Posters. College of Art and Design Chris Jackson, Associate Dean Keli DiRisio, Assistant Professor

Friendly Fonts for your Design

This file includes FILLABLE FORM FIELDS. Enter your answers and then save the form as a PDF with your name to submit. Ex: 4CChrisJohnson.pdf.

Trust runs deep. Brand Communications Guidelines. Version 12.1,

Logos. North Dallas Shared Ministries

CSS. Text & Font Properties. Copyright DevelopIntelligence LLC

Typography Main typography EC Square Sans Pro

SUCCESSFUL TYPE? Interface Aesthetics

Introduction. ThinManager - A Rockwell Automation Technology

Character Formatting. Formatting the Text in Text Frames

Logo Style Guide. February 20, 2008

ALL CAPS Text set completely in UPPERCASE or all capital letters. Also refered to as: Uppercase

Digital Media, UX-UI Design > Website Principles

Document and Web design has five goals:

Name: Class: Teacher:..

Adobe Photoshop CS Design Professional PLACING TYPE IN AN IMAGE

Writing and Document Design Lecture 6 Typography

Topic 0b Graphics for Science & Engineering

DIGITAL PRINT DESIGN (568 )

LECTURE 4 THE USES OF TEXT IN MULTIMEDIA

How to use text. Adding a text frame

Multimedia for the Web: Creating Digital Excitement. Multimedia Element Text

Presented by: Mitch Boretz University of California, Riverside. and Colleen Jolly 24 Hour Company

Graphic Identity Standards and Guidelines. Gilman School

B R A N D GUIDELINES

JABRA CORPORATION GRAPHIC STANDARDS MANUAL

GO Transit type treatments report

Synopsis This module introduces calligraphy, the basic principles of typography, and applications of typography.

TYPE. Design Process

communication design and the web John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University 17 November 2010

OCA Graphic Design: Core Concepts 1 Assignment 4 - Show Me Jane Braybrook Jane511794

Linotype Univers CD for Mac and PC - containing 63 font weights

Basic PowerPoint Guidelines. Tips for Creating Great Presentations

Transcription:

TYPOGRAPHY Parts of letters: base line x-height ascender arm (as on the capital T) descender bar (as on the capital H) extenders bowl counter ear (as on the lower case g and r) serif stroke tail (as on the capital Q) terminal (finishing stroke) Terminology: Uppercase/lower case Text type Leading Letter spacing Tracking Small caps Display type Kerning Word spacing Ligature

Type groupings I. Races A. Text type or black letter This is Old English. Many newspapers use this for their flags, but it is hard to read for text. B. Roman 1. old style This is Times Roman, the workhorse of the newspaper world. This is Garamond, your instructor s favorite font. 2. transitional Baskerville was invented by an Englishman. 3. modern This is an example of Bodoni, which was drawn by an Italian of the same name. This is another modern roman. You can tell by the extreme differences in the thicks and thins.

C. Square serif (also called Egyptian, block serif or slab serif) This is Rockwell bold. This is Playbill, a common font used in Wanted posters. D. Sans serif This is Arial, a face similar to Helvetica. It has a large x-height. This sans serif is called Gill Sans. E. Cursive or script (Note: this is NOT italic.) This is a script face called Palace Script. This is Edwardian Script. Much easier to read. F. Novelty This is Comic Sans. Please, please, don t ever use it. This is Broadway. This is Jokerman. Yikes!

II. Families Differences based on: A. Width (ranges from condensed to expanded) This is Arial condensed. This is Arial narrow. B. Weight (ranges from light to black) C. Form (roman and italic) This is Arial black. Roman refers to upright letters. Italic refers to slanted letters. III. Font A complete set of one member of a family. Includes upper and lowercase type, punctuation, numbers and symbols. abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 fl!@#$%^&*() Note: Some fonts, such as Copperplate or Engravers mt, have ONLY uppercase letters! IV. Series From metal type days: The ranges of sizes available in one family. (We don t have to worry about this now, as computers allow us to have type any size we wish.)

Identifying type 1. Serifs 2. Terminators on tops of the E, F or T 3. Weight of strokes 4. Shape of rounded characters BCGOPQbcgopq 5. Length of descenders 6. Formation of terminals on J and F 7. Formation of the ears (look at r and g) 8. The shapes of key letters (a,e,g,r, m, H) 9. General proportions 10. Overall appearance on the page Type considerations: Use sparingly: Type in color Type on photos Outline fonts Do not mix: Scripts, novelties, black letters. Only pair sans serifs with these. Do not italicize or bold: Script Black letter Novelty

Watch your letterspacing and kerning! Um? Tomado Watch? History Individual letters kept in a job case; assembled by a handpegger and returned to case by printer s devil In the 1880s, Mergenthaler invented Linotype. Casted the type each time: hence, hot type Today, cold type or computer generated

Legibility: The measurement of the speed and accuracy with which type can be read and understood. Readability: The measurement of the difficulty of the content. Nine factors determining legibility: 1. Reader interest 2. Type design For text, use a serif or sans serif face. 3. Type size 9-12 points is easiest to read. x-height is a more accurate measurement of size. 4. Line width For 9-12 point text, no less than 8 picas and no more than 18 picas wide. If the text is larger than 12 point, it can be set wider. 5. Word spacing and letter spacing It is harder to read widely spaced words. It is harder to read words with tight letter spacing. 6. Leading Type with large x-height needs more leading. Sans serif type needs more leading. Headlines need less leading. 7. Form Bold Italics ALL CAPS Justified vs. ragged right 8. Contrast Reverse type (white on black) Color screens 9. Reproduction

Using Type When selecting a headline typeface, consider: 1. Legibility. 2. The image the paper wants to project. 3. Tradition/credibility. 4. Mood/lifestyle of the community or audience. Ways to assure contrast in headlines: 1. Choose 1 weight and use size differentiation. 2. Choose 1 face and 2 or more weights. 3. Choose 1 face and use form differentiation. 4. Choose different but complementary faces. Do not mix faces from the same race (i.e., Helvetica and Futura). Look for contrasting characteristics (i.e., uniform strokes in a sans serif with bold and light strokes in a serif. When using a novelty face for an art head, use a sans serif to complement, not a serif.

Type should communicate, not decorate Type should communicate, not decorate