COMD COMD 1167-Type and Media

New York City College of Technology The City University of New York

Department of Advertising & Graphic Arts

COMD 1167 – Type and Media

Course Description: Foundation course in with on using type for a multiple of industry related applications ranging from print to interactive. Students will be introduced to principles of and terminology including: variations of type structure, anatomy, usage, grid, , , tracking and alignment. Students will learn industry standard software such as InDesign on the Macintosh operating system.

2 cl hr, 4 lab hrs, 4 cr.

Prerequisites: CUNY proficiency in reading, writing and mathematics OR Co-requisite: ENG 092R (ESOL 032R) and/or ENG 092W (ESOL 031W), as required.

Course Objectives :

INSTRUCTIONAL OBJECTIVES. ASSESSMENT.

For the successful completion of this course, Evaluation methods and criteria students should be able to: Define and describe five families of type and their visual characteristics Students will demonstrate competency (Old Style, Transitional, Modern, through written test and selection of Egyptian, San ). for assignments. Define and describe other categories of type families such as display and novelty . Define and describe critical components Students will demonstrate competency of type anatomy (, through written test and selection of

10.25.14_LC 1

COMD COMD 1167-Type and Media meanline, capline, serifs, , typefaces for assignments. , counters, others). Describe variations of type structure Students will demonstrate competency (bold, italic, condensed, extended) through written test and selection of typefaces for assignments. Utilize typographic grid Students will demonstrate competency components (trim size, margins, columns, through written test and preparations of gutter) and assemble a grid using specific class projects using Indesign. software. Utilize variation in type alignment Students will demonstrate competency (FL/RR, FR/RL, Centered, through written test and performance of Justified, Force Justified). assignment specifically dealing with this topic. Design with space around type, Students will demonstrate competency and how it affects legibility through written test and performance of (leading, kerning, tracking). assignment specifically dealing with this topic. Understand and utilize terminology and Students will demonstrate procedures for Adobe InDesign in order to comprehension basic and correct usage complete assignments and participate in class of computer graphics such throughout the discussions. course in class participation and on written assignments. Create and edit elements of a document Students will demonstrate practical skills according to specifications by using Adobe in to preparing layouts. InDesign.

General Education Outcomes

General Education Outcome covered: How the outcome is covered: Thinking Critically Students will develop their critical The student will demonstrate the ability to thinking by participating in class critiques, evaluate evidence and apply reasoning to make applying standards learned in class to their valid inferences. own work and that of classmates Social Interaction Students will learn about professional The student will demonstrate an understanding ethics through discussion in class. of professional ethics. Lifelong Learning Students will be directed towards The student will demonstrate an awareness of resources and techniques of research they resources for continued lifelong learning. can use as references throughout their careers Information Literacy Students will develop familiarity with

10.25.14_LC 2

COMD COMD 1167-Type and Media ● The student will demonstrate the ability to professional resources and be expected to find proper resources. learn from them in a relevant fashion. ● The student will demonstrate the ability to formulate relevant queries.

Teaching/Learning Method : ● Lectures . ● Readings . ● Demonstrations . ● Assignments . ● Tests .

Required Text : A Type Primer, John Kane, 2nd Edition

Other Recommended Text: InDesign Visual QuickStart Guide, (latest edition) Sandee Cohen

Attendance (College) and Lateness (Department) Policies: A class roster roll will be taken at the beginning of each class. Only three absences may be allowed. After three absences, a student may be withdrawn because of unsatisfactory attendance (code WU). Students arriving after the roll is taken will be marked “late.” Students may be notified at the earliest opportunity in class after they have been absent or late. After being absent two times or equivalent (2 lateness = 1 absence), a student may be asked to withdraw from the class (code W before the College drop deadline, 4/9/08) or may be withdrawn from the class (code WU).

Academic Integrity Standards : You are responsible for reading, understanding and abiding by the NYC College of Technology Student Handbook, “Student Rights & Responsibilities,” section “Academic Integrity Standards.” Academic dishonesty of any type, including cheating and plagiarism is unacceptable. "Cheating" is misrepresenting another student's efforts/work as your own. "Plagiarism" is the representation of another person's work, words or concepts as your own.

Grading: · Main projects and their presentations . 60% · Tests . 20% · Weekly assignments/Participation/Journal . 20%

10.25.14_LC 3

COMD COMD 1167-Type and Media

10.25.14_LC 4

COMD COMD 1167-Type and Media

Wee Class One Lecture Class One Lab Class One Class Two Class Two Lab Class Two k Homework Lecture Homework 1 Introduction Suggested Class Reading: TBD History of Relief Printing Reading: TBD ● Objectives of exercise: typography Introduction: Hand out name tags, Carve and print the class, Type Journal: ● Five Worksheets: have students pair up individual letters materials Take 20 -30 Families of Draw select and make tags for each pictures of type Type letters from the other, trying to best Letter: in your 5 families of portray classmates History of the neighborhood, type ● using expressive Letter: Letterform write a 1 page Giving students lettering. Have them Typographi paper on what ● the select letters ● How we read introduce each other cal that typography and having them and describe what they Anatomy ● Legibility Vs. tells you about trace letters can were trying to convey Readability your be a good option with the lettering they neighborhood, here. drew add to type I have an journal exercise wherein they draw the letters, which they find more interesting than tracing on the whole.

2 Software: Relief Printing: Reading: TBD Text: Relief Printing: Reading: TBD ● Intro to Font Print single words, ● Leading Print stacked concentrating on pairs of words, Book Type Journal: ● How and kerning concentrating on ● Intro to Take best prints why it is leading InDesign of single words, measured. draw in and label all parts of Text: InDesign: anatomy ● How fonts work ● Controlling digitally leading ● Bounding boxes digitally and their implications ● Kerning

InDesign: ● Creating a new document ● Rulers and measurement ● Controlling kerning digitally ● Text boxes 3 Layout: Type Book: Reading: TBD InDesign: Type Book: Finish Working on the Grid Create a 1 page ● Multi-page Create a 5-page Classwork document which labels Type Journal: documents document. Each the following type Find examples page should Reading: TBD InDesign: ● Page Panel

10.25.14_LC 5

COMD COMD 1167-Type and Media ● Using the class components: baseline, of work that have 1 layout template in meanline, capline, uses a typefaces Software: with specific Study for Quiz InDesign serif, , x-height, that belong to Working with characters of 1 ascenders, descenders each of the five each of five Rules, strokes Fontbook ● families of families of type. type. In what Each page must Project #1 scenario are they display a sample Introduced: used? of a font within The Type Book For example: a a specific Choose a that family, and list performer/famous belongs to the characteristics person/fictional Modern character about classification of whom you will write type is used on a your type book heading for an assignments ad. 4 Quiz 1 Type Book: Finish Text: Type Book: Finish Create a 6 page classwork Alignment Create a 1-page Classwork Text: document. Each page Analysis of document. Width/Weight/Postur must show a sampling Reading: TBD which ones Instructor will Reading: TBD e of 3 characters work best and supply text to be Stress/Contrast/Serifs comparing variations Type Journal: under which positioned using Introduction to the of type within each Find three circumstances. all 5 main main visual category discussed in instances of bad alignments differences of type class. kerning, why do Analysis of visual you consider characteristics of a Example/Weight: these bad? font based on weight, One character in a light width and posture face, one character on a Find three and on letter stress, regular face, one examples of contrast and serifs character on a bold face varied leading (tight, comfortable and loose). Are these appropriate to the layout? 5 Text: Type Book: Finish Text: Type Book: Finish Tracking Create a 2-page Classwork ● Text on a Create a 1 page Classwork How it is measured document. Text will be path and document. Write supplied by Reading: TBD 4 sentences spacing Reading: TBD instructors. which make up InDesign: ● Vertical pa Type Journal: a tiny story. ● Managing th Students will position ● Find Each sentence tracking Type on a text using specific examples ● must be digitally smooth measurements for of a addressed (set) curve tracking. lightface as one of the immediatel ● Type on a main paths y placed sharp curve explained in after a bold ● Type on a class. Notice face or vice circular problems that versa path are caused by this kind of Regular ● , and and italics fix those on the same problems. .

10.25.14_LC 6

COMD COMD 1167-Type and Media ● Examples of the five different kinds of alignment discussed in class. 6 What not to do: Type Book: Finish Visual Type Book: Finish the computer and Create a 1 page Classwork Hierarchy Create a 2 page Classwork type document What is a visual document. Text Color and Legibility Creating a set of hierarchy? will be supplied Reading: TBD Study for Typographical background boxes How to compare by Midterm problems affecting which will range from other kinds of instructor. Each legibility. 10 to 10% of a specific Type Journal: hierarchy to a page will color. Explore what Find examples page hierarchy. address specific happens to type as it is of Assigning issues of InDesign: set into a variations of - loose and tight importance to hierarchy within backgrounds tracking typographical a layout: What - type on a path items on a page to do with a title, secondary text and small InDesign: text Character Styles Paragraph Styles

7 Midterm (1.5 hours Type Book: Finish Type Book: Fix all semester Finish Type long) Create eight layouts Classwork How to put a assignments to Book: using the same grid book together be included in Re-do any pages Typographical Grid Reading: TBD How to prepare book. for the book as and all elements: For these layouts each a book which needed 1 grid+ many layouts student uses just boxes- Type Journal: will contain all Print out and Review of all the not actual Color conflicts! of each student assemble ways in which class text. Instructor will Foreground semester’s work had used the same select one of these (type) vs. Paper, cover and Reading: TBD grid. layouts and then actual background binding choices Variation in layouts text will be positioned. (photo, art, or will be Establishing the solid) discussed difference between a Have some sort of non- relationships grid and a layout page comparison ready to explain the use of Find an ad, or the grid in layout page and design number its components based on the elements of visual hierarchy explained in class

8 Type Books Turned Zine: Sketch out Possible Field Reading: TBD In group crit Set up document for 12 cover: Trip: Printed page booklet with a Assemble Matter and Project #2 cover relevant imagery TDC, Center for Introduced: Begin to assemble and content. Book Arts, Dieu Autobiographical images and text Donne (?)

10.25.14_LC 7

COMD COMD 1167-Type and Media Zine Reading: TBD Students will create and print a 12 page Type Journal: zine (not including Find two pages cover) about from a same themselves. Images publication. Th are allowed, and all ese must share a typographical grid, but have conventions learned different layouts . thus far should be used. Zine must also include a TOC and numbered pages. BW only.

InDesign: Bringing in Images Linking text from one page to another Rules & Breaking Rules in Layout Design Baseline Grid

9 Zine Cover critique Develop zine covers Finalize Cover Continue Reading: TBD with critique you working on Images received in class Reading: zine: Placing Images - Work on interior linking vs. Type Journal: spreads embedding Look at saddle- Scaling, fitting, text stitched booklets Go over wrap palette, clipping that you find magazine path, runaround, interesting. Ho conventions: grouping w are the pages Headlines, Layers – text, flowing in terms Subheads, images, etc. of typography, Leader Type – create imagery, and , outlines, placing actual Primary and images content? What Secondary Drop Resolution items if any Caps, Side Bars, seem to be Pull Quotes, common among Picture the multiple Captions… pages?

10 Continue working on Reading: TBD Quiz 2 Reading: TBD zine Type Journal: Continue Text working on zine wrap. Look at the relationship Preparing for between print: imagery and the packaging/collec text next to it. Is ting for output the image

10.25.14_LC 8

COMD COMD 1167-Type and Media contained inside a rectangular image box, another shape or requiring a clipping path? How is type reacting to this shape?

11 Turn in Project Reading: TBD Introduce Interactive Finish #2: Grou p Critique Project #3: Zine Classwork Type Journal: Students will be ● What is an Look at ads, asked to interactive Reading: TBD magazines, transform their document

books, and Autobiographic ● InDesign others that have al zines into an interactive typography as a interactive features main presentation overview component. Ch using InDesign. ● Typographi oose something This project will c that you are be a be considerati attracted to, and navigable, ons for explain why enhanced digital version of design Project #2 and ● Setting up must include interactive three of the document following in InDesign features: Slide show, button navigation, video, audio, motion typography, live hyperlinks.

(The instructor can decide if this project should result in an interactive PDF, IPad presentation, online ad, etc.)

12 Interactive Zine Interactive Zine Finish Interactive Interactive Finish continued continued Classwork Zine continued Zine continued Classwork InDesign Motion Basic ● Typographi Animate objects Typography Interactivity in ● Examples. of Reading: TBD c Reading: TBD using built-in sequencing, InDesign Considerati animation presets and transitions, ● Build slide ons for your own customized rhythm and Type Journal: shows or Digital settings . motion in Look at a print change a Design

10.25.14_LC 9

COMD COMD 1167-Type and Media Modify or create interactive type. & website frame’s ● Sans serif motion paths . ● Students animate combo (Or a content vs Serif, the header of their printed using ● Alias vs Effects: Zine magazine & its multistate Anti-alias, transparency/opacity The first part of this tablet app objects ● Controlling blending modes project could be a counterpart) ● Create layout warm up exercise Describe buttons when type where they animate a similarities and with is resizable, word to convey differences. normal, ● Designing meaning. rollover, for the and click screen vs. appearance paper s ● Working in color: RGB vs CMYK ● Students fine-tune motion type piece and create three possible sketches (based on a grid) of the first screen for the interactive Zine. 13 Interactive Zine Interactive Zine Prepare for in- Interactive Interactive Finish continued continued class critique Zine continued Zine continued Classwork ● Instructor reviews ● Final edits ● In-class ● Students InDesign student sketches to motion presentatio continue to Reading: TBD individually type piece ● Set-up buttons ns and crit design that provide ● Students begin to ● Edits to static ● Review of Type Journal: document design the first sketches screens of previous Students list navigation screen of their ● Completed their class’s specific ● Establish page interactive piece first draft lesson interactive of static piece feedback transitions when provided to the user screen ● Students layout them in the class proceeds from assign critique. spread to spread buttons for

● Preview all Reading: TBD all interactivity and transitions rich media Type Journal: before exporting none or publishing . 14 Interactive Zine Interactive Zine Prepare for in- Interactive Finish continued continued class critique Zine continued . Classwork . Lab-time to work on Final edits to InDesign project motion type InDesign. Reading: TBD . piece ● Import and . ● Preparing Type Journal: preview rich document . Reading: TBD . Students list .

10.25.14_LC 10

COMD COMD 1167-Type and Media media files for output. specific including FLV Type Journal: ● File feedback video and MP3 none . formats: provided to audio, among Exporting them in the class other formats to FLA, critique and ● Assign actions SWF, PDF students to buttons that complete ‘self- provide assessment’ document worksheet based navigation; on project play/pause/stop grading rubric an animation, provided by sound, or video; instructor. ● Launch an external web page in the user’s browser; and more.

15 Turn in Project #3 Study for the Final Exam . Interactive Zine Final . DUE . Reading: TBD . Group Critique using iPads Type Journal: none

10.25.14_LC 11