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, Dec 15, 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.

Materials

Travelougue

Sketchbook

There are many amazing sketchbooks on the market, but for type-design I can make a few suggestions:
 
The Travelogue Journal Large Landscape: the landscape format is really great for typedesign because it allows you to lay out type sketches in a natural, linear way. I opt for the non-ruled or plain sketchbook because I don't like to be encumbered by someone else's metrics. That said, having a square ruled (aka graph paper lined) page does ease up the process of aligning characters to a fixed size. 
 
 
 
 
 
 
mol01139 
 
 
 
If you prefered something small and ruled, you can't do much better than Moleskine. They're cheap, portable, and they make you look really smart.
 
 
 
 
 
 
 
 

 
cheng-designing type

Texts

Designing Type by Karen Cheng
Full disclousre: I almost never require textbooks for my classes. However, when I see a book that I think is a must-have for a particular discipline, I break that rule. Karen Cheng's excellent Designing Type is so on-point, and so helpful with the generally accepted rules of character design, that one simply must own it. It's not expensive (c.a. $30-40 USD) and it breaks down the craft of type design into a beautifully accessible way. I will periodically assign readings from this book, and will make sections available to you PDFs when I can. 

[Here], for example, is the introduction as a PDF (25mb).

 
 

Type Design Software

For this course, we will be using Adobe Illustrator for actual design of our letterforms, and an open-source font editor called Birdfont to create our font files. 
 

Miscellaneous Downloads

Various assets and media may be made available below for download. Stay tuned! 

Welcome to class!

This is an advanced design course, but we are specifically going to be looking at typography and type design. To start, let's discuss:

  1. A (very) 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. Order the textbook online!
    2. Get a sketchbook if you don't have one
    3. Read pgs. 6-17 in Designing Type.
    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

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

Homework

  1. 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!

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. 

 

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 cannot scale a part.
  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).

 

Homework

  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 
  3. 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 presentatins will be October 27 (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 exisiting 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

In class work day

  • Today we're going to finish up working on our minscules for our junk-font type
  • Describe the export process 
  • Begin working on sketches for our type specimens
  • If there is time, work on creative comps using our 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, October 27 at 6pm sharp!

The midterm project is essentially the completion of your junk drawer typeface. Here are the requirements you must deliver on the day of the presentation:

  1. Sketches: 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:  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: 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: 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.

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

crit of type homage pieces

Parallax




Today's class: 

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.

work in class on type motion pieces

work in class on parrallax type pieces

Presentations of the final projects

See [Final Project Details] for more information.

Note: The Final Project is due December 15

Part 01: Research a Historical 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 piece found below: