visual communication
Typography 1

 

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

:::::::::::::::::::::::::::::::::::::::::::
Documents relating to project
:- Grid_project_01.pdf
:- Type_project_01.pdf
:- Document_project_01 (on server)
:- PDF Saving: | pdf |
:- Typographic Rules | pdf |

::::::::::::::::::::::::::::::::::::::::::::
:: Research
:- AIGA design archives
:- Design Encyclopedia | index |
:- Design Museum
:- Design Observer | theory + critiques
:- Grid: wikipedia
:- Typotheque
:- Type Cultur
:- Typography: wikipedia
:- Typographers: wikipedia
:- Visual Thesaurus
:- Type Base

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

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

 

 

::::



 

 


 


 


:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Project One: MODULAR GRID

In this project you will learn so see typography in two ways:
1) as visual elements in a two-dimensional composition 2) as information which represents hierarchical organization. Emphasis will be on establishing a clear visual hierarchy and exploring compositions that closely adhere to a given modular grid.

Analyze the given text. You will be asked to classify it into three levels of informational importance; dominate, sub-dominate, subordinate. Your compositions will simplify and clarify the information, encouraging the viewer to read the information in a logical and pre-determined order.

You will be creating a series of typographic compositions that closely adhere to a traditional grid form (a straightforward composition that stresses organization and legibility). Use a clear vertical/horizontal structure in the organization of the information. Do not orientate type at an angle, running vertical, or into any shape or form.

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
D A T E S
It is your responsibility to have everything asked of you ready before class begins. Process is 50% of your grade you can't pass the project or the course if you don't come prepared for every class. Also, if you have prints in the print lab when class begins you will be counted LATE (3 lates = 1 absence). Remember there are over 40 of you and you can't all print at the same time, coming in 15 minutes before class to print will get you into trouble.

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
monday august 22
_ Review Syllabus
_ Lecture: what is typography, parts of the letter, font styles/weights, grid, hierarchy

HOMEWORK
Meet your Type, by Font Shop download and print out (black and white is fine)

Set up personal blog on Blogger: http://www.blogger.com
Click here for a tutorial.

Make sure you add the class blog to your blogs that you follow. http://kutype01.blogspot.com/.
*email me your blog address. it will be www.yourname.blogspot.com

Post the following answers and any links to your personal blog... Bring a copy of your answers to class. You will find some answers in the handout and some you will need to look up online. (refer to getting it right with type and graphic design referenced

_ define the word “grid”
_ why do we (designers) use a grid? what are the benefits or functions?
_ what is a modular grid?
_ define and illustrate: margins, columns, grid modules. flowlines, gutter

_ define hierarchy
_ define typographic color (this does not mean color as in change it to a color)
_ what are ways to achieve a clear hierarchy?
_ define white space
_ define contrast

SUPPLIES NEEDED FOR WEDNESDAY’S CLASS:
_ something to cut with: scissors, x-acto
_ something to cut on: buy a cutting mat at least 5 x 7 inches
_ clear removable tape NO GLUESTICKS
_ 35 xerox copies of Grid_project_01.pdf
_ 5 copies of the Type_project_01.pdf
_ binder clip (purchase a box of them)

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
wednesday august 24
_ Review homework
_ Introduction of project 1: working in class

INCLASS
Current Weather

_ Explore 15 different compositions with the current weather being first in the hierarchy.
_ Strive for all 10 to be different from each other.
_ Cut and paste, no computer computer layouts.

Technical Restrictions:

Size: 8 x 8 square
Grid:
5 column. All type must lock-up into the upper left corner
Font: Univers 45 light and Univers 75 bold
Size: 9pt and 16pt
Text: must remain horizontal, no vertical text, no shapes

TEXT
Weather for Lawrence, KS
Currently
78°
Mostly Cloudy
Humidity: 81%
Four-Day Forecast
Tuesday
Partly Cloudy
High 91
Low 73
Wednesday
Sunny
High 94
Low 74
Thursday
Partly Sunny 
High 88
Low 69
Friday
Thunderstorms
High 89
Low 75


Ask yourself...
How does where you put text on the page affect what we see first? How does bold type affect what we read first? Explore different parts of the text being the first in hierarchy. The reader must be able to discern which temperature goes with which date. You may use abbreviations for the days of the week.

Explore...
Tension: how the page is used, how the edges are used, activate the page
Grouping: how things are grouped together, use triangulation as a guide.
Alignments: vertical, horizontal (type must stay horizontal)
Coding: type that is the same size and style will be read together

Due: 15 compositions
_ Make a title page with your name and class time 11:30 or 2:30.
_ Clip all together and hand in.
_ Strive for all 15 compositions to be different from each other.
_ They should not look like they are a set or a theme.
_ Cut and paste, no computer computer layouts.

HOMEWORK
Exploration One: finish 15 layouts, make title page with your name and class time 11:30 or 2:30.clip together and be prepared to hand-in
Read:
Handout (have questions in front of you)
Blog: see below

BLOG
Based on the readings and any web information you can find. Define/or give the rule for the following words and when possible give an example; thinking with type online | intro to type | what's in a letter. Bring a the ruler that came with Letter Fountain and Getting it Right with
in regards to alphabet variation define...
_ define weight
_ define width
_ define style
_ define font
_ define typeface
_ define x-height
_ define cap hight
_ define leading
_ define letterspacing (tracking)

in regards to measuring type
_ How is type measured in inches, mm, points or picas
_ define point
_ define pica
_ How many points in an inch?
_ If a letter is set in 36 pts about how many inches tall is it?
_ How many picas in an inch?
_ How many points in a pica?

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
monday august 29
_ Review homework, lecture, large crit
_ Work in class on Exploration Two
_ Hallmark Symposium tonight

High or Low Temp
_ Explore 15 different compositions with either the high temp OR low being first in hierarchy.
_ Strive for all 15 to be different from each other.
_ Cut and paste, no computer computer layouts.

Technical Restrictions:

Size: 8 x 8 square
Grid:
5 column. All type must lock-up into the upper left corner
Font: Univers 45 light and Univers 75 bold
Size: 9pt and 16pt
Text: must remain horizontal, no vertical text, no shapes

Ask yourself...
How does where you put text on the page affect what we see first? How does bold type affect what we read first? The reader must be able to discern which temperature goes with which date. You may use abbreviations for the days of the week.

Explore...
Tension: how the page is used, how the edges are used, activate the page
Grouping: how things are grouped together, use triangulation as a guide.
Alignments: vertical, horizontal (type must stay horizontal)
Coding: type that is the same size and style will be read together

HOMEWORK
Exploration Two:
finish 15 layouts, make title page, clip together and be prepared to hand-in

** Next class BRING your lap top computers we will be using them and InDesign.

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
wednesday august 31
_ InDesign Tutorial : Bring your Lap Tops
_ Working in Class


Getting onto the computer

Using your homework layouts put your strongest 10 into InDesign (5 from each exploration). You must use the given grid. Upper left of the module only. Save the 10 and then save as and add the following as variations of the design.

_ add a second color or typographic color (type style, tracking...)
_ add typographic rules
_ background color

Technical Restrictions:
Size: 8 x 8 square
Grid:
5 column. All type must lock-up into the upper left corner
Font: Univers 45 light and Univers 75 bold
Size: 9pt and 16pt
Text: must remain horizontal, no vertical text, no shapes

Ask yourself...
Are the explorations completed as outlined? Is the hierarchy clear? Is each layout varied in look and feel or do they look similar? If they look similar you need to keep working.

Due: 20+ compositions and blog
* Which set do you think is the most successful? Why are they successful? (mark them in some way)

Print ALL compositions out full size in black and white or color. Crop marks turned on. DO NOT wait until Wed morning to print. If you are waiting for prints when class starts you will be marked LATE.
(3 lates = 1 absence)

Make a title page and clip your work together to hand-in.

BLOG
(in your words, images and sourced)
-- Who is Adrian Frutiger 200 + words
-- What makes Univers “unique”, what is the Univers grid?

d

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
monday sept 5: labor day no class

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
wednesday sept 7
_ Class Crit: short crit
_ Bring laptop
_ Bring your files with you and a media device

MORE high or low temps
Using the grid in InDesign, create 15 new compositions with where the high or low temperatures are first in the hierarchy. Strive that all 15 compositions look different from each other.

Technical Restrictions:
Size: 8 x 8 square
Grid:
5 column. All type must lock-up into any modular corner, must be a corner but any corner
Font: Univers up to 3 styles in one design (max 3 styles)
Size: Any 3 sizes, go BIG, go small, may "bleed" off the page
Color: 1 color + black (tints ok)
Text:
must remain horizontal, no vertical text, no shapes
Rules: typographic rules maybe used (not as decor but as an anchor, help in grouping, hierarchy...)

Ask yourself...
_ Are the explorations completed as outlined?
_ Is the hierarchy clear?
_ Is each layout varied in look and feel or do they look similar?
If they look similar you need to keep working.

* Which 5 do you think are the most successful? Why are they successful? (mark them in some way)

Make a title page and clip your work together to hand-in.

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
monday sept 12
_ Diagonal Grid
_ Combining files into one pdf

Diagonal Grid/Axial Grid
Design 15 different compositions using the Axial Grid (get it off the server). You can use type a 45°angles going right and left and on the horizontal lines. Make sure you have a clear hierarchy in every design.

Technical Restrictions:
Grid: Use the Axial (45° grid) and or the 90° grid. USE the modules to align. Flush left, flush right are acceptable but NO Centering the text
Font: Up to 3 different styles of Univers in one composition
Size: up tap 4 sizes of type EXPLORE SCALE
Color: 1 color + black (tints ok)
Text:
must remain horizontal and or at 45° angles but no vertical text, no shapes
Rules: typographic rules maybe used (not as decor but as an anchor, help in grouping, hierarchy...)

Ask yourself...
_ Are the explorations completed as outlined?
_ Is the hierarchy clear?
_ Is each layout varied in look and feel or do they look similar?
If they look similar you need to keep working.

* Which 5 do you think are the most successful? Why are they successful? (mark them in some way)

SAVE ALL Diagonal GRID compositions as a pdf and put them on the server before class starts on Wed.

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
wed sept 14
_ Class Crit: Diagonal Grids
_ http://www.behance.net/
http://www.behance.net/mattchase

HOMEWORK
Looking at all your explorations based on what you know select the strongest solutions...
save all of the following into 1 pdf. You can combine PDF's into one pdf. You combine in Acrobat you will find it under FILE > Combine. BRING your lap top and place your pdf on the on the server before class.

Follow the directions very carefully.

_ go to Behance.net, sign up in the upper left / ask for your invitation to join. It is free you need your inviation for next class.

_ Choose 5 from Current Weather as the dominate hierarchy and make any refinements you feel should be made. ALL current weather explorations:
_ all type must align in the upper left of the module,
_ Universe 45 and 75 ONLY, only 2 sizes of type, tracking is allowed,
_ 1 color + black (tints are fine), and
_ you may use typographic rules.

_ Choose any 5 from the HIGH or LOW temperature being the dominate in hierarchy and make any refinements you feel should be made. High temperature compositions may...
_ lock into any corner, flush left, flush right, no center,
_ may use 3 styles of Univers (no more than 3),
_ 4 sizes (any 4 sizes go big and small,
_ 1 color + black (tints ok),
_ you may use color fields, typographic rules,
_ all type must remain horizontal.

_ Choose 5 from the Diagonal grid studies, any clear hierarchy is accepted,
_ lock into any corner, flush left, flush right, no center,
_ may use up to 3 styles of Univers (no more than 3),
_ 4 sizes (any 4 sizes go big and small,
_ 1 color + black (tints ok),
_ you may use color fields, typographic rules, all type must remain horizontal.
_ type may read up, down (not vertical)

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
monday sept 19
_ Class Crit: looking at your compositions on the big screen
_ Selecting top explorations

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
wed sept 21
_ Working in class

_ Add project to your www.behance.net page : practice in class.
_ Find your font on the server and put it on your media device/computer

HOMEWORK finalize and produce finals: 3 layouts from each exploration, printed in color, full size on the laser printer is fine and prepare process book.

ALL DUE MONDAY SEPT 27.
You may email me 1 time for feedback over the weekend.
That means you can send me a pdf with as many questions, variations, explorations as you want let me know what you think is working and any questions you have and will send comments back to you. I will not go back and forth with you.

READ this very carefully and follow the directions. Following directions is part of your grade.

12 Compositions are 8 x 10(ish)
and should be neatly mounted on BLACK CORE BOARD (that is not foam core). 12 boards tota/ 12 final compositions. Each board is 12 x 14, (8 x 10 composion with a 2 inch boarder all around = 12 x 14 board.) I strongly suggest using Studio Tac to mount. Do not spray in the building EVER unless you are in a spray booth, do not use GLUE STICK! Paper flap attached and your name on the back of each composition.

12 compositions with grid showing (go to layers click on PRINT, then the layer will print. Do not mount, do not put in the process book. Keep loose with the compositions or tape them to the back of the boards.

Place a pdf of your final 12 compositons (as one pdf) yourname_project1.pdf put on the server before class begins

Export all 12 compostions as a 72dpi jpeg and upload them your behance.net page. Email me your behance link AND put a link to your behance page on your blog. IT takes some concentrated time to post on BEHANCE you have until OCT 4.

Process Book as a pdf. yourname_process.pdf
Organize all your compositions into one digital pdf. Scan in your first cut and paste rounds.

Process Book as a physical object. Organize all your compositions into a book, spiral bound or 3 ring binder. You must print out all the compositions that you handed in as pdfs but you can print them out b/w.

Process Book Outline (please follow carefully)
1) title page with your name, class time, typography 01, fall 2010, professor Herstowski

2) project brief: in your words explain the project

3) organize your explorations in order put a page divider in between each section...

EXPLORATION ONE: scan in if handing in pdf

EXPLORATION TWO: Current Weather (print out rest if handing in)

EXPLORATION THREE: Temperature Highs

EXPLORATION FOUR: Diagonal Grids (need to print if handing in)

EPLORATION FIVE: Visualization of the weather (need to print if handing in)

TOP 20 EXPLORATIONS and REFINEMENTS (need to print if handing in)

TOP 12 FINALS

4) last page: project overview: This project was easy/difficult for me, I struggled with, I enjoyed, I hated, it was too long/short..

ALSO!!!!
Print out the Roman/Regular style of your font as large as you can on 3 11x17 sheets
pg 1) all caps pg 2) all lower case pg 3) numbers and punctation

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
monday sept 27
_ Hand in project
_ 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

HOMEWORK
Define the following font classifications. Write down at least 3 characteristics for the classification and at least 5 fonts that fit under each classification. Type up all the information.

_ Old Style
_ Transitional
_ Modern
_ Slab Serif
_ Sans Serif
_ Script
_ Blackletter
_ Grunge
_ Monospaced
_ Undeclared

* You are to become our inhouse expert of the font. The more through your investigation is now the more interesting your project will be.

Using your font please identify the following information
_ Sans Serif or Serif
_ Name of the Designer
_ Date it was designed
_ Classification
_ List its family members: Roman, Italic, Bold...(small caps)

Looking at your font dentify or explain the following...
Baseline, 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

Print out 4 other fonts your choice from the list (at least 2 different fonts from the same classification and 2 fonts from 2 different classifications). Print out the fonts (all caps, all lower case, numbers and punctation large enough to compare). Print each these fonts on its own piece of paper you want to be able to see the fonts clearly so don't skimp.

and begin the following...DUE OCT 4

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?

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.

First project on Behance.net by OCT 4