visual communication
Typography 1

 

  syllabus :: project one :: project two :: project three :: project four :: blog

::::::::::::::::::::::::::::::::::::::::::::
:: Classification
:- type measurement
:- brief history of type
:- evolution of type
:- thinking with type
:- timeline
:- eriks typo tips
:- bembos zoo
:- typoorganism

::::::::::::::::::::::::::::::::::::::::::::
::
Font Houses :: Designers
:- typography.com
:- letterror
:- emigre
:- house industries
:- T-26
:- underware
:- typophile
:- font brothers
:- astigmatic

::::::::::::::::::::::::::::::::::::::::::::
::
Short films :: Audio
:- films by Hillman Curtis
:- sagmeister | scher | carson
:- Type Radio
:- Type Culture Movies

::::::::::::::::::::::::::::::::::::::::::::
::
Supplies
:- buy.com (13 x 19 paper)
:- mr. french (paper)
:- dick blick (supplies)
:- CD stuff

:::::::::::::::::::::::::::::::::::::::::::
email:
andrea herstowski

 

 

::::



 

 


 


 

 

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Project Three: FONT STUDY
Teaching someone about a specific typeface. Who designed it, when, its character, how to identify it... You will become the resident expert of your font.

Project three focuses on learning to identify fonts, font characteristics and type classifications. Graphic design professionals are expected to recognize an almost infinite number of typefaces; it is essential, therefore, that students begin by learning the parts of the letter (terms), characteristics and to classify typefaces into these major historical, categories (type classifications): Old Style, Transitional, Modern, Slab Serif, Sans Serif.

RESEARCH DUE OCT 27
History of the font. Research and write at least 1000 words about the origins of your font. Can be specifically about your font, or about the classification or both.

History of the world. What was happening in the world the year/decade your font was designed, is it at all a reflection of the times? (no word min or max, not included in 1000 words or 500 words, is its own thing)

Biography of your font designer: 500 words about the font designer. Include when and where they were born, died, list other fonts they designed

Bibliography: must included a bibliography, use at least 4 resources and only 2 of those can be online.

You are assigned a font and you will be come the expert on every aspect of that font. Share your knowledge with the group. The final will be a series of 2 posters.

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Thursday, Oct 13
_ Lecture: Font Classification
_ Lecture: Parts of the letter
_ Industrial: Post Sans Type (if you have a sans serif make sure you read this)
_ check this out and see if you find info about your font

In your small groups: Using the book Letter Fountain define the following font classifications (page 57 – xx). Write down at least 3 characteristics for each of the following the classifications and at least 5 fonts that fit under each classification. Add this information to your blog...

_ Old Style
_ Transitional
_ Modern
_ Slab Serif
_ Sans Serif: grotesque
_ Sans Serif: geometric
_ Sans Serif: humanist

In small groups: examine your typeface
1) present your typeface to the group (group take notes)
2) examine your font, are some characteristics
3) share with your group
4) more characteristics based on groups observations

Classification groups:
1) present your font
2) present characteristics
3) what are similar characteristics
4) what a different characteristics

Using the book Letter Fountain identify as many (at least 20) characteristics you can about your font... Cap height, x-height, serif style, stroke width, apex, final/terminal, barb, spur, ear, loop, link, a and g one story or two story, tail, apex, leg

HOMEWORK
you are to become an expert of your font...
How can you teach us (the viewer) about your font. How can we tell your font apart from another? What is distinctive?

Design: Characteristics
HINT: Diagram, scientific, technical, mechanical, compare, compare/contrast. These are rough quick ideas. Not flushed out posters.

Explore 20 different ideas compositions on how you can "diagrammatically" show us your fonts characteristics. Sketch in a way that you and I can understand. AT least 20. Your poster must show at least 12 characteristics. These can be on the computer or by hand but all 20, need to see the ideas. (Would be best to do them on the computer.) Present neatly and professionally. That means we should be able to see your ideas clearly.

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Tuesday, October 18
_ x-height comparison
_ individual meetings on 20 ideas

HOMEWORK
The poster must include the following...
_ diagrammatically show at least 12 characteristics of your font
_ the entire alphabet, punctuation, numbers (how can you show it other than abcdefg...)
_ your font's classification (name and description)

Explore quickly 10 different compositions on the computer.

Use the provided grid: 22 x 34 page (tall), 9 column modular grid.
(get the grid off the server, it is an illustrator file, we will be using illustrator for this project).

Limit your color palette to 3 - 5 colors + black/white. Use kuler.adobe.com or colourlovers.com

Lock all elements to a corner of a module. Use the grid to define sizes. Use type in a ratio based on FIBONACCI: 5, 8, 13, 21, 34, 55, 89, 144, 233

Secondary font: you may use a secondary font (different class if cation than your font)

REMEMBER: scale, color, size relationships, how to make it look "technical", mechanical, informational. Big's BIG smalls small. Smallest size can be 5pt. No limit on LARGE.

Print your 10 posters on the color laser: shrink to fit onto 11 x 17.

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Thursday, Oct. 20
_ small groups

HOMEWORK
The poster must include the following...
_ diagrammatically show at least 12 characteristics of your font
_ the entire alphabet, punctuation, numbers (how can you show it other than abcdefg...)
_ your font's classification (name and description)

Choose your most successful 5 ideas and refine them.

Use the provided grid: 22 x 34 page (tall), 9 column modular grid.
(get the grid off the server, it is an illustrator file, we will be using illustrator for this project).

Limit your color palette to 3 - 5 colors + black/white. Use kuler.adobe.com or colourlovers.com

Lock all elements to a corner of a module. Use the grid to define sizes. Use type in a ratio based on FIBONACCI: 5, 8, 13, 21, 34, 55, 89, 144, 233

Secondary font: you may use a secondary font (different class if cation than your font)

REMEMBER: scale, color, size relationships, how to make it look "technical", mechanical, informational. Big's BIG smalls small. Smallest size can be 5pt. No limit on LARGE.

Print your 10 posters on the color laser: shrink to fit onto 11 x 17.

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Tuesday, October 25
_ Crit posters

HOMEWORK
Choose 3 posters and design 3 variations for each. VARIATIONS/EXPLORATIONS due 9 posters. save all as pdfs and print out 3 on 11 x 17 shrink to fit, print in color.

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Thursday, Oct. 27
_ Lecture paragraph breaks
_ Paragraph Break Exploration on the computer. At least 10 different ways to show a new paragraph (your text should have at least 3 paragraphs)

HOMEWORK
Create on the computer at least 10 Content poster compositions. Explore variations different ways the poster can look, do not make iterations, explore how these can look, feel, communicate.

The "Content" poster must include the following...
_ 1000 - 1500 words (you can shorten your text to 1000 word min)
_ title (come up with a title)
– subheads (optional)
_ name of the designer
_ birth/death and or date of your font
_ one quote (about your font or designer)
_ pull quote
– characteristics, letters, numbers, punctation (optional)
– other fonts by your typographer (optional)
– historical event (optional)

No type on curves
No type in shapes
No type fitted curved around letters
No drop shadows
No stacked type (that includes the alphabet.

Use your paragraph explorations as structure for this poster. Use the "structure" to define where your additional text should go. The grid and/or internal paragraph structure determines the alignments.

Use the provided grid: 22 x 34 page (tall format strongly recommended). Limit your color palette to 3 - 5 colors + black/white. Use kuler.adobe.com or colourlovers.com. Lock all elements to a corner of a module.

Secondary font: you may use a secondary font (opposite to yours)

REMEMBER: scale, color, size relationships, how to make it look "technical", mechanical, informational. Big's BIG smalls small. Smallest size can be 5pt. No limit on LARGE.

PRINT all 10 on 11 x 17 full color, for Tuesday

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Tuesday, Nov. 1
_ crit content posters
_ Which posters will you further explore and create as a set?
_ Bring LetterFountain

HOMEWORK (there is a lot so please read carefully)
1)
Take home quiz. Finish the take home quiz. Be prepared to hand it in at the beginning of class.

2) Study for inclass quiz: parts of the letter, classification (define and give examples), and remember you are the resident expert of your font -- you need to know it well.

3) Prepare a Petcha Kutcha, 20 slides in 20 seconds (that is 20 sec. per slide). You will be presenting your font, characteristics, classification, designer to the group. Format your 20 slides as 20 8.5 x 11 horizontal (landscape) format. Save (or export) as a pdf. You will be using the pdf to present. Acrobat will automatically move to the next slide after 20 so prepare. How much, can you say, show, in 20 seconds.

4) Print out one of your Content posters full size, so you have a reference for the weekend. Change text size to 12, 10, 9 so you can see your body text in different sizes. (just change within the blocks of text) purely for reference.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Poster 1. Characteristics

The poster must include the following...
_ diagrammatically show at least 12 characteristics of your font
_ the entire alphabet, punctuation, numbers
_ classification
_ classification description

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Poster 2.
Content: Information about the designer

The poster must include the following...
_ 1000 - 1500 words (you can shorten your text to 1000 word min)
_ title (come up with a title)
– subheads (optional)
_ name of the designer
_ birth/death and or date of your font
_ one quote (about your font or designer)
_ pull quote
– characteristics, letters, numbers, punctation (optional)
– other fonts by your typographer (optional)
– historical event (optional)
_ (you may use content from poster 1)

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Thursday, Nov. 3
_ hand in take home quiz
_ in class quiz
_ petcha kutcha presentations
_ discuss refinements

HOMEWORK
Using what you have done so far, explore how you can create a series. Consider using the same alignments horizontally, color palette (share a palette but maybe change the proportion of color, scale, overlap information from one poster to the next...)

Poster 1: visually and verbally showing the characteristics of the font(content listed below)
Poster 2: history and typographer information (content listed below)

For the characteristic poster how can you organize the alphabet so it is has meaning? form or relationship? (hint think about what you read in LetterFountain. Remember the characteristic poster is to Teach the View the Font. Make sure you are doing that visually and verbally. Dissect, crop, highlight, call out. You are looking at lots of info graphics for VISC 204, how could your Characteristic poster become more informative?

For the content poster: how can text have the same proportion as your characteristics? how can information be locked together? how can content determine alignments? How can you use the same color palette as the characteristic poster but in a different proportion. (hint: a lot of white text could be interesting but it will be difficult to read.)

A series means the 2 posters work together, share the same feeling, color palette (you should consider the use different proportions of the colors but the same palette.) How can the visual language be shared between the 2 posters.

For Tuesday develop 3 different sets of of the 2 posters. EXPLORE. Print 11 x 17.

_ Grid: use the provided grid.Lock all elements to a corner of a module.
_ Page: 22 x 34 page
_ Color: Limit your color palette to 3 - 5 colors + black/white.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Poster 1. Characteristics

The poster must include the following...
_ diagrammatically show at least 12 characteristics of your font
_ the entire alphabet, punctuation, numbers
_ classification
_ classification description
_ name of the font
_ date it was released

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Poster 2.
Content: Information about the designer

The poster must include the following...
_ 1000 - 1500 words (you can shorten your text to 1000 word min)
_ title (come up with a title)
– subheads (optional)
_ name of the designer
_ birth/death of the designer
_ one quote (about your font or designer)
_ pull quote
– characteristics, letters, numbers, punctation (optional)
– other fonts by your typographer (optional)
– historical event (optional)

*you may use content from poster 1 and vice-versa, between the set ALL text has to be in the series.

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Tuesday, Nov. 8
_ 3 petcha presentations
_ Sizing in photoshop use 600 pixels wide, 72dpi
_ Animated Gif (font name, classification, 1 characteristic font, 600 x 400px)
_ Process book specs
_ Start looking at photographers (project 4: research)

HOMEWORK
Finish animated gif so if you have questions or problems you can get help.

Trying both iteration and variation of ideas: Refine 1 set of of the 2 posters (Characteristic Poster and the Content poster). (do at least two variations of each). EXPLORE. Print one set FULL SIZE the others at 11 x 17. AND create a test print of at least 3 inches of your poster so you can see color on the Epson Matte printer.

Process book should be chronological and based on the above process. Spiral bound. Title page, Project Brief, All your research, Process, Finals, Project Overview. (Jayhawk ink can print front to back and spiral bind, 8.5 x 11, you can make your own cover and take it to them. Give them at least 24 hours so get it to them Friday or at the latest first thing Monday morning)

Creating an animated gif in photoshop is very easy.
1) open Photoshop file size 600 x 400 pixels, 72 dpi
2) create your final layout with each element being a different layer (photoshop will animate based on what is turned on in a layer)
3) window: animation
4) use frames not timeline
5) in frame one turn on what you want the viewer to see (change time to .1 sec)
6) duplicate frame and turn next thing on. (repeat 5 and 6 until you are done)
7) add transitions
8) add more time where you want a pause
9) file save for web devices (will create a .gif)
10) test in a browser then upload to behance.
completely lost? google it how to create an animated gif in photoshop: link

Letter Fountain pages 37 - 51 (post to blog)
_ What are small capitals? How are they different than something set in ALL CAPS?
Does your font have small caps? If not name a font that does.

_ What are ligatures? why are they used? when are they not used? what are common ligatures?
Does your font have ligatures? If not name a font that does.
option shift 5, option shift 6

_ What is the difference between a foot mark and an apostrophe?

_ What is the difference between an inch mark and a quote mark (smart quote)?

_ What is a hyphen, en dash and em dashes, what are the differences and when are they used.
hyphen, option -, option shift
-

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Thursday, Nov. 10
_ 3 petcha presentations
_ stroke in photoshop
_ small caps, ligatures
_ Correct: kern 1's, justification, hyphenation, en dash in dates, em dash...
_ Start looking at photographers (project 4: research)
_ Test Print Tutorial
_ BIG crit: 1 set full size and taped together, variations printed 11 x 17 full color.

HOMEWORK
POSTERS:

_ poster refinements + process book. Present full size (tile or print on the plotter)

Process book should be chronological and based on the above process. Spiral bound. Title page, Project Brief, All your research, Petcha Kutcha, Paragraph Breaks, Process, Finals, Project Overview.
ANY files not on the server by your class time, the project will be counted LATE which drops your letter grade by a full grade. Giving you the weekend to print do not wait until Monday night.

_ 2 posters printed out and trimmed to size (22 x 34 to that size exactly!)
_ 1 process book 11 x 17 spiral on 11 size or recreated as 8.5 x 11 spiral bound
_ put onto the server: PDFs of your posters and your animated gif

post on behance: click here for example
_ 1 animated gif: font name, classification, 1 characteristic
_ 2 posters side by side (600 pixels wide in photoshop)
_ 2 posters individually
_ details (optional)
_ at least 6 explorations

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Tuesday, Nov. 15
Petcha Kutcha Presentations
Introduce project 4

DUE
_ 2 posters printed out and trimmed to size (22 x 34 to that size exactly!)
_ 1 process book 11 x 17 spiral on 11 size or recreated as 8.5 x 11 spiral bound
_ put onto the server: PDFs of your posters and your animated gif

post on behance: click here for example
_ 1 animated gif: font name, classification, 1 characteristic (needs to be beautiful)
_ 2 posters side by side (600 pixels wide in photoshop)
_ 2 posters individually
_ details (optional)
_ at least 6 explorations

Process book should be chronological and based on the above process. Spiral bound. Title page, Project Brief, All your research, Petcha Kutcha, Paragraph Breaks, Process, Finals, Project Overview.