Designing Type by Karen Cheng:

Letters of Credit by Walter Tracy

100thumbs R web
100 thumbnail explorations of the letter(s) R(r)

Course Syllabus

For a complete description of this course, as well as a course schedule, [download the course syllabus].

 

Art 202/302/702 – Course Description

Practices, concepts, history, and social ramifications of design. Typography, layout, identity, visual/physical structure, graphic iconography, and relationship of form to function. Theoretical and/or historical issues relevant to contemporary practice. prereq: art 101 or art 102. This semester we will be exploring the elements and principles of graphic design found in typography and type design. We will be designing our own typefaces, exploring different typefaces, and learning the basic principles of type setting.

 

Course goals and objectives

Students of this course are expected to acquire a good understanding of the history of graphic design, beginning with typography in the mid-15th century, to current designers and perspectives, as well as an art historical analyses of design. Students will understand the basic elements and principles of graphic design, as well as the basic principles of typography and layout. Students will learn to work under design constraints, timelines, and will need to collaborate with fellow student designers. 

 

Grading

Attendance policy: Students are expected to attend all classes, arrive on time and stay for the duration of the session. Each unexcused absence will result in a reduction of the final grade by one increment (i.e., a to a-, b+ to b, etc). Two instances of lateness or leaving class early will count as one unex- cused absence. Absences will only be excused with adequate documentation of extenuating circumstances (i.e., doctor's note indicating serious illness, obituary notice indicating death in family, etc). Students receiving financial aid must be certified as attending classes regularly for continuing eligibili- ty. please note: the Provost's Office requires that all classes hold finals during the college-wide final exam period. This means that our final critique will take place Thursday, May 16, as indicated on the schedule. 

 

Policy for missing or late assignments

Turning projects in late is strongly discouraged, and will have a negative effect on project grades unless adequate documentation of extenuating circumstances is provided (see above). It is possible to mitigate this effect by using the extra time to do truly exemplary work. For example, a project that exhibits poor craftsmanship and little understanding of relevant principles will receive a greater penalty for being late than a project that exhibits immaculate craftsmanship and a deep understanding of relevant principles. In either case, the later the project the greater the penalty. Penalties will be assessed by the instructor on a caseby-case basis.

 

Lockers

Lockers are available for student use and can be claimed with a label clearly indicating the student's name and the current semester. Students are responsible for providing their own locks as well as for removing all materials by the end of the semester. Materials left in lockers after the semester's end are subject to removal and disposal.

 

Accommodating Disabilities

Lehman College is committed to providing access to all programs and curricula to all students. Students with disabilities who may need classroom accommodations are encouraged to register with the Office of Student Disability Services. For more information, please contact the Office of Student Disability Services, Shuster Hall, room 238, phone number, 718960-8441.

 

The Academic Center for Excellence and the Science Learning Center

The Academic Center for Excellence (ACE) and the Science Learning Center (SLC) are two of the tutoring centers on campus. The ace provides appointment-based and drop-in tutoring in the humanities, social sciences, and writing, as well as general writing and academic skills workshops. The slc provides drop-in tutoring for natural and computer science courses. To obtain more information about the ace and the slc, please visit their website at http://www. lehman.edu/issp, or please call the ace at 718-9608175, and the slc at 718-960-7707. 

 

Academic Integrity and Plagiarism policies

Academic Dishonesty is prohibited in The City University of New York and is punishable by penalties, including failing grades, suspension, and expulsion. Cheating is the unauthorized use or attempted use of material, information, notes, study aids, devices or communication during an academic exercise. Plagiarism is the act of presenting another person's ideas, research or writings as your own. The following are some examples of plagiarism, but by no means is it an exhaustive list: Copying another person's actual words without the use of quotation marks and footnotes attributing the words to their source; presenting another person's ideas or theories in your own words without acknowledging the source; using information that is not common knowledge without acknowledging the source; failing to acknowledge collaborators on homework and laboratory assignments. Internet Plagiarism includes submitting downloaded term papers or parts of term papers, paraphrasing or copying information from the internet without citing the source, and "cutting & pasting" from various sources without proper attribution. cuny's policies on academic dishonesty can be reviewed in greater detail at http://www.lehman.edu/lehman/about/policies_ pdf/CUNYAcademicIntegrityPolicy.pdf

 

Withdrawal policy

Applications for withdrawal are accepted through the seventh week of each semester. The grade of w, withdrawal without penalty, is awarded only when it is clear that a student has a good and sufficient reason for withdrawing from course and is doing so at a time when he or she is doing passing work in the course. Students desiring to drop a course in their major must obtain a recommendation from the chair or the adviser of the appropriate department program. No faculty member or counselor may withdraw a student from a course.

Welcome to Art 202/302!

Generally speaking, this is a design course. However, we are going to be looking at specific subset of a graphic design: typography and type design. To start, let's discuss:

  1. A brief history of type.
  2. The anatomy of letterforms
  3. Elements and Principles of Graphic Design within Typography
  4. Terminology
  5. Taxonomy/history

Exercise: Type Design in Illustrator

  1. Download one of these typeface samples and begin this exercise by trying to recreate a few of the characters in a sketchbook or a piece of paper, as if you were drawing from a live model or still life. This will train your brain to understand the curves, nooks, and crannies of letterforms:

    Typeface 1:  Fraktur (various, c.a. 1500s) 
    Typeface 2:  Bifur (A.M. Cassandre, 1929)  

    Typeface 3:  Gill Sans (Eric Gill, 1926)

    Typeface 4:  Helvetica (Max Miedinger, Eduard Hoffmann, 1957) 

    Typeface 5:  Caslon (William Caslon, c.a. 1722)

    Typeface 6:  Peignot (A.M. Cassandre, 1937)

     

  2. Once you have completed drawing a few characters in your sketchbook, it's time to recreate one of them in Illustrator. First, however, we need to create the capline, baseline, mid-line, and x-height lines:type-guidelines
  3. Once these guides are completed, you can begin using Illustrator's various tools to recreate a character (or two) from the typeface you have chosen. 
  4. Homework:
    1. I don't require a textbook, but I can auggest an excellent resource for designing type entitled, well...Designing Type by Karen ChengI've provided the first few pages for you to read for homework.
    2. Read pgs. 6-17 in Designing Type.
    3. Get a sketchbook if you don't have one
    4. Play Kern Type until you get a score of 85 or better! Take a screen shot of your results and This email address is being protected from spambots. You need JavaScript enabled to view it. it to me:

My score...ho hum.

Type Design in Illustrator

  1. Download one of these typeface samples and begin this exercise by trying to recreate a few of the characters in your sketchbook, as if you were drawing from a live model or still life. This will train your brain to understand the curves, nooks, and crannies of letterforms:

    Typeface 1:  Fraktur (various, c.a. 1500s) 
    Typeface 2:  Bifur (A.M. Cassandre, 1929)  

    Typeface 3:  Gill Sans (Eric Gill, 1926)

    Typeface 4:  Helvetica (Max Miedinger, Eduard Hoffmann, 1957) 

    Typeface 5:  Caslon (William Caslon, c.a. 1722)

    Typeface 6:  Peignot (A.M. Cassandre, 1937)

     

  2. Once you have completed drawing a few characters in your sketchbook, it's time to recreate one of them in Illustrator. First, however, we need to create the capline, baseline, mid-line, and x-height lines:type-guidelines
  3. Once these guides are completed, you can begin using Illustrator's various tools to recreate a character (or two) from the typeface you have chosen.  

100 Thumbnails

100thumbs R web

This exercise encourages you to play, take risks, and think creatively with type.
  1. Choose a letter from the alphabet.
  2. Use both upper- and lowercase forms of this letter (real or made up)
  3. On the graph paper provided, visually interpret this letter one hundred different ways.
  4. Consider cropping, touching, overlapping, intersecting, positive/negative space, composition, texture, scale, color, etc.

You can use any kind and number of writing instruments to complete this exercise, but no computer!  Below are some examples of what other students have done in the past:

 

Homework

  1. If you haven’t already, complete your 100 thumbnails for an informal crit next class.
  2. Find the junk drawer in your house and bring in two completely random objects. We'll be using them next class!

 

Junk Drawer Fonts

The Rundown: Let's take a look at the two objects you grabbed from your junk drawer. The shapes or outlines these items make will be your two shapes.

The Assignment: Create a typeface out of only these two shapes. Build all letters of lower or uppercase by only using these two basic shapes. Use each shape the least amount of times as possible within each letter. The individual with the smallest total amount of used elements is the winner! 

(please note: you don't really win anything...)

The Rules:

  1. You can rotate and flip the shapes.
  2. You cannot skew a part.
  3. You can pick an initial scale for each part, but once that scale decision is made, you cannot scale either part later on.
  4. Parts can intersect, overlap.
  5. Sketch out characters first, both upper and lower cases: 52 characters in all!
  6. Scan or photograph objects for digital use (see homework below).

 

In Class work

  1. Isolate and vectorize the shapes using Photoshop/Illustrator (I'll demonstrate in class)
  2. In Illustrator, begin to assemble your letterform shapes from your initial sketches on a copy of the baseline grid we created in a previous class 

Homework


  1. Read Letters of Credit pg. 26-48

 

Junk Drawer Fonts continued

Screen Shot 2015-02-26 at 11.20.47 AM

Today we're going to continue working with our junk-drawer fonts, prepping our Illustrator files and making them ready for export to an actual font file. 

First, however, let's look towards refining the typeface in Illustrator by trying to create a word:
 
CHAMPION – or – champion
 
Champion, like HandglovesHamburgevons, and Hamburgefonstiv, is known as a 'control word' or 'test word' because it contains all the fundamental strokes, stems, diagonals, and rounded strokes used in the Latin alphabet. Try to perfect your typeface spacing and overall shaping by using one of these control words. The remaining letters of your alphabet will follow, as they will contain many of the same strokes, diagonals, stems, etc. 
 
Second, we need to use Illustrator's Pathfinder tool to combine or flatten our vector shapes into single paths.
 
Third, Illustrator doesn't actually do typeface exporting. And, unless you're editing existing text using an pre-installed typeface file in Illustrator's type engine, it won't allow for letterform spacing, kerning, or any other typographical concerns that go into making a good typeface. For that we will need a type design application.  There are many solid type design applications on the market, many or which are used professionally. Here a just a few of the big ones:
  1. FontLab Studio, $673.00
  2. Glyphs, $300
  3. Fontographer, $400

I could go on an on, because there are many excellent applications out there in the wild that can be used to design a typeface. However, we don't have that kind of money, so we're going to be using a free, open source font editor called Birdfont.  It's fairly limited, but it will allow us to modify spacing and kerning, as well as export an actually font file. Another plus? We can paste vector information from Illustrator directly into Birdfont, thereby combining the excellent vector editing attributes of Illustrator with the typeface creation tools of Birdfont. 

Finishing Up

Today we're going to work on finishing up importing or copying our letters from Illustrator into Birdfont. Remember that you may need to save as individual characters as SVG files if copying isn't working for you. Once your case is complete, the next step is modifying the spacing and kerning.  

Spacing and Kerning

Screen-Shot-2015-03-05-at-7.28.01-AMSpacing is the default space or padding around individual letters, and we can control it in Birdfont in each character view (see left). It is best accounted for by starting with the largest square and rounded characters of a given case, referred to as the 'standards.' They are:
  • H and O for the uppercase and
  • n and o for the lowercase
After we're happy with the spacing of these letters – e.g. if 'HHHH' and 'OOOO' looks good – we'll use these standard letters to fix the default spacing between all other letters.

 

Kerning

Kerning, you'll recall, is the adjustment of space between two unique letters (eg. the letter “L” and “A” in the word “LAWYERS”), and it's entirely dependent on the pair of letters being kerned. The way TrueType fonts (the font format we will be working with the most) stores these values for later use is in a kerning table:
Screen Shot 2015-03-05 at 7.23.33 AM
 
Kerning is potentially very different between typefaces, so it can't really be standardized. Also, it involves all characters, including punctuation. In fact, punctuation (periods, quotation marks, etc.) is where kerning can become the most critical, as punctuation has so little spacing as it is. A period for example can easily be swallowed up by an adjacent uppercase L if the kerning isn't set:
 
L.L.L.L.L.        <---- yikesies!
 
But we'll worry about that later. For now, we're going to focus on kerning our complete set of capitals or minuscules. Begin with words that have diagonals mixed with upright characters: 
  • LAWYERS
  • VAST,VATS, TATS, etc
  • WAR, WALAWALA 
  • AVAIL, AVILA
  • nope
  • scope
  • navy
  • available

Also try a mix of rounded, square, and diagonal letters:

  • HANDGLOVES – or – hangloves
  • HAMBURGFONTSIV – or – hamburgfontsiv
  • MITTOMS – or – mittoms

Birdfont's Kerning Tool

Birdfont makes it surpisingly easy to adjust kerning. The kerning window is opened via the ⌘K command. Below is a simple tutorial about how the process works:

 

Kerning with Birdfont

 

Kerning Class

Kerning individual letters can be very time consuming. To help with this, Birdfont has what are called 'kerning classes.'  Here are examples of very broad character classes:  
  • letters with a straight upright stroke: BDEFHIJKLMNPRU – or –  bdhijklmnpqru
  • letters with a round stroke: CDGOPQ  – or –  bcdeopq
  • triangular letters AVWXY – or –  vwxy
  • the odd ones: STZ – or –  afgstz
You can create classes for the groups with individual letters to create a kerning class and save yourself a bunch of time. See below for a helpful tutorial:

 

Midterm Preparation

The midterm presentation will be March 21 (in five weeks). [Click here] to see the project description.

 

Homework

Begin working on your other case. Remember to begin with sketches, then build these out in Illustrator, then assemble in your existing typeface file in Birdfont. We'll continue work on this next week. To give you a good understanding of spacing and kerning, read [chapter 10 in Letters of Credit], pgs. 70 - 80.

 

In class work day

  • Today we're going to finish up working on our junk-drawer typeface
  • We'll cover the export process from our type software 
  • You can begin working on sketches for your type specimens
  • If there is time, work on creative comps using your typeface

Pre-Critiques for the Midterm

Today I would like to hear from each of you about your progress on the midterm. Show us what you have, including any sketches or works in progress. Be sure to have everything you wish to show scanned or otherwise digitized. This will be a good opportunity to discuss your work with the class and ask us what we think about your a.) junk drawer font, b.) your type specimen, and c.) your creative composition. 

In-class work

After we have completed this informal critique and have taken a break, the remainder of class will be yours to work on finishing up your midterm presentation.

Midterm presentations are Thursday, March 21 at 1 pm sharp!

The midterm project is essentially the completion of your junk-drawer typeface, which was initiated in Week 03. Here are the requirements you must deliver on the day of the presentation:

  1. Sketches (10%): we wanna see'em. They are more telling about the creative process than the finished product. Breifly show them prior to showing us the finished peices mentioned below.
  2. Finished Font File (10%):  If you have only completed one case of your typeface (e.g. uppercase), you are to produce the other case, a set of numerals, and punctuation – essentially everything in Birdfont's Default Character Set: click ⌘R to see this. The good news? You are free to rescale your two modules for the other case. For example, if you have completed your uppercase, you can rescale to produce the lowercase. More good news? Punctuation would be difficult if you were constrained to just your two modules, so feel to use whatever shapes you want. You should try to use your modules, but you're not obligated too.  Once you're completed, export your typeface into a TTF file, which you then need to install with FontBook.
  3. Type Specimen (40%): You must create a specimen for your newly minted typeface! Show us what you made and how cool it is. Here are a few cool examples of what a type specimen should look like:

  4. Creative Usage (40%): Lastly, create an appropriate use of your typeface, something that might appear in the real world. Feel free to use your typeface with other typefaces, images, and other design elements.

NO Class

Intro to the final project: delegate typefaces, begin research, and work in class on type homage.

Parallax

For today's exercise, we're going to explore a peculiar effect of vision referred to as [parallax]. The best part: we're going to do so by making the short tribute video, seen above, celebrating the original members of The Bauhaus.

The Details: I have prepared a [PDF and exercise files] for this lesson to help you along in creating the animation.  [Here is the font file] is used to create the PhotoShop file.

I've also prepared a two-part tutorial video of the above exercise:

 

 

For the Final: You should still be working on your [Part 1 of the final project]: creating an homage to a specific typeface. For Part 2, you will make use of the parallax effect to bring these compositions to life.

  • Critique of type homage compositions
  • Continuing Parallax in AfterEffects (if needed)
  • Work in class

No class – Spring Break

found this meme...you're welcome:

Image result for spring break memes

Work in class on final project.

Pre-presentations for Final Project

Presentation of final projects

See [Final Project Details] for more information.

Note: The Final Project/Presentation is due May 16

Part 01: Research a Historic Typeface

This part is easy: you will be given a historic typeface that you must research and analyze to determine what makes it special. Why is classified the way it is? If it’s outside classification, why? Below are a list of recommended typefaces, though you are free to suggest one of your own: 
  1. Jenson, Nicholas Jenson, c. 1470Jenson 1475 venice laertius

  2. Garamond, Claude Garamond, c. 1480–1561garamond

  3. Caslon, William Caslon I, 1722A Specimen by William Caslon

  4. Baskerville, John Baskerville, 1757Baskerville sample

  5. Bodoni, Giambattista Bodoni. c. 1798WilliamLongyear 1935 UltraBodoni

  6. Clarendon, Robert Besley, 1845font characteristics clarendon

  7. Akzidenz Grotesk, H. Berthold, Berthold Type Foundry, 189804

  8. Futura, Paul Renner, 1927futura2

  9. Bifur, A.M. Cassandre, 1929007

  10. Peignot, A.M. Cassandre, 1931peignot001

  11. Frutiger, Adrian Frutiger, 1974AdrianFrutiger Frutiger 1975 Poster by CiprianD21 2015

  12. Hoefler Text, Jonathan Hoefler, 1991JonatahanHoefler HoeflerText 1992 Poster by AudreyMercadante 2014e

  13. Gotham, Tobias Frere-Jones, 2000f9b7a9aa82103cfeeaa2af7f765adfed

Lastly, you create a small design study of the typeface that highlights all the special attributes you found: this will be a 2-dimensional piece similar to the specimens you created for your midterm, but specifically highlighted unique attributes of the typeface.   This analysis of Clarendon, also seen above, should give you a good idea of the analysis I am looking for. Keep in mind that this is a simple example – I want something much more beautiful and aesthetically minded from you:  font characteristics clarendon

Part 02: The Parallax Animation

Finally, you will take both of your compositions and do a simple animation with them using the phenomenon called "parallax." Once these animations are done, they will be strung together in one final motion piece, to be presented at the final! The final product will look something like the two pieces found below: