Process Books
Anne M
Abigail M
Abby W
Juna M
Kate S
Olivia M
Tim D
Resouces
Watch:
Tina Smith's Food for Thought
Parts Make the Whole
Creating a typeface out of modular parts | sophomore year
A modular typeface is an alphabet constructed out of a limited number of shapes or modules. Modular describes any letter assembled from a limited palette of distinct elements, repeated, flipped, and flopped but not scaled. Typically these elements are geometric and simple in shape—square pixels on a digital display or modernist circles, squares, and lines.
Traditionally, modular lettering has responded to the limitations and possibilities of the media used to create it. Today designers are using more ornate, complicated, and/or organic forms (modular units) and even physical objects to construct modular letters. They have taken a broader approach to modular letter-forms, pushing the possibilities to create letters from more complicated elements.
The project: Parts Make the Whole asks to use the context of a modular letter construction to create a prototype for a modular font. A minimum of 26 upper-case or lower-case characters becauase of time and complexity only one case is constructed.. A unicase concept (combining typical characteristics of upper and lower case characters.) is also an option,
The letterforms must be modular/ rational/ repeatable forms: parts of letters are used to make other letters. You will start by designing letters on a grid of squares or a grid of dots. They may substitute the curves and diagonals of traditional letterforms with gridded and rectilinear elements. The only rules are one can not use handlettering or develop letters based on an existing font, the letters must be constructed.
LEARNING OBJECTIVES
_ understand the anatomy of letterforms/characters/glyphs
_ explore the expressive potential of typography
_ solve communication problems within given parameters
_ methodically document relevant design inspiration and process
_ present and assess work in a visually and verbally articulate manner
_ professionally document outcomes
_ demonstrate exemplary visual craft—hand and digital
_ Adobe Illustrator (pathfinder, clean vectors)
_ Glyphs App
Any lettering or type is based on a system. Typographic systems are sets of visual rules and guidelines that govern the actions and decisions involved in creating letters. These implicit systems enable characters to work together, by regulating and defining their appearance—dictating their shapes and sizes, how they fit together, and their visual spirit, as well as all other underlying tenets of the letters.
PROJECT DELIVERABLES
working font (all caps or all lowercase -- not both)
instagram campaign
process book
behance post
PROCESS BOOK
Process Book will be digital and a pdf. It must be well organized, labeled, name on it!. Make sure you include: Your name, Project Description, Project Overview, all of the process, notes you took, construction, final product. (**All the homework, feedback, class notes etc go in to the process book.) Don't forget a title page with the name of the project and your name, project description (what was the project), project overview (your thoughts on the project), all your process (all of it! organized by date).
Examples Anne | Kate | Abby |
SOFTWARE
Adobe Illustrator
FontStruct (free web-based software)
Glyphs app: https://glyphsapp.com/ it is MAC only software. Trial version is available MAC only.
PC people you can use a combination of illustrator and the Glyphs app.
*You will have to use the 313 lab for the glyphs app.
LECTURE
When designing fonts you always start with a few core letters, such as handgloves or hamburg and then you build out the rest of the alphabet from there. As you can note from the chart below once you have the Cap H you can get the letters E F L T, once you have the B defined you can to the P R. etc. The same principle goes with the lower case. If you start with the h you can easily get to n, u, l, i, m, r. The d gives you an idea of the p, b, q... etc.
letterfountain.com/drawingtofont.html :: Typographic Systems forms of construction.pdf
Class Session One
Intro to the project
Typographic Systems forms of construction.pdf
Grids for sketching.pdf
Introduction to FontStruct / recorded demo
the modular part one | part two | part three |
In small groups discuss and capture (take notes) on what you observe looking at the following links. Appoint a note taker and share your notes with each other to include in your presenation and process book
_ apeloig.com/type/typography
_ muirmcneil.com/projects/ :: instagram.com/muirmcneil
_ https://twitter.com/hashtag/TypeSystemGrid
HOMEWORK
Before you leave class make sure you understand the homework and the difference between handlettering and constructed letterforms/characters. You can only make constructed modular letterforms.
Define a kit of modular parts -- shapes that you can combine, stack, rotate, flip to build a letterform) Sketch the letters (H, E, N, A, D, O, G or h, e, n, d, o, g) using that system. Use as many or few shapes as needed for the set.
Keep in mind that smaller grids provide a more limited set of design options.
Do not scale or distort any of the components.
Do not overlap the elements or use a white shape knocked out of black forms.
EXPLORE + CREATE
| examples | Anne | Kate | Abby |
25 sets/typeface ideas, each set has 7 key letters
H, E, N, A, D, O, G (if you are drawing caps draw them in this order -- should make sense why...
or
n, h, e, a, d, o, g (if you are drawing lowercase draw them in this order -- should make sense why...
*the a and g can be one story or 2 story try both
Yes it is a lot 7 x 25 = 175 so don't wait to start --
25 sets with 7 letters in each set. a set is a design direction.
Do not draw 25 letter H or then 25 letter E or e.
Work in sets, the letters should go together the H should inform the E (n inform the h) get it?
Organize your sketches while you are working. Number them.
Try not to jam up your pages, give your different ideas some space around them.
Use as many pages as you need to keep things organized and clear. Start by using the handouts to create the your initial studies. Once you get started you can also create your own grids/parts/ modulars. EXPLORE have fun. This should not be torture. Ugly is awesome. You have to make. The only thing you can't do is hand-letter letterforms. You just can't hand draw letters they have to be constructed. Make sure you know what this means before you start your homework!
You can do all 25 studies by hand (each study has 7 letters in them)
OR
15 studies by hand and 10 in Fonstruct (you have to save and show them). If you hate fontstruct then don't use it! just try and and decide if you LOVE it you can only make 10 different fonts for your homework the rest have to be by hand)
Explore. Should be fun not torture. Fonstruct Shortcuts
Bring everything to class in physical form (ie not on your computer. PRINT everything so we can all see what you have created.
Just a reminder the process book is digital
Take a photo (you can use your phone). Make sure you rotate your images so they are right reading (that we don’t have to turn our head). Straighten them out. Increase the contrast... Make them look as good as you can.
Make a folder with your name and all you photos/scans onto the google drive.
Start Sketching
Sketch as neatly as you can. Keep organized. Range of solutions is better than tring to get on idea perfect. You have time ot make something perfect. Now is the time to explore options.Write down the checklist and keep it in front of you.
The main rule is the letters must be constructed = based on some set of modular forms.
__ alll caps : H, E, N, A, D, O, G.
__ all lowercase: n, h, e, a, d, o, g
__ unicase
__ tall (condensed), thin stroke / __ short (extended), thin stroke
__ tall (condensed), bold stroke / __ short (extended), bold stroke
__ tall (condensed), super heavy / __ short (extended), super heavy
__ try sans serif / __ try serifs
__ try different types of serifs
__ try to work in different sizes: more grid units
sketching examples
Introduction to FontStruct
/ recorded demo
Class Session Two
Picking most interesting 3 to build in illustrator and create variations of.Document Grid. It is important and turns out to be extremely useful if you take the time to adjust the document grid to work for you. This way you can use the snap to grid option in Illustrator. Will keep your vectors clean and consistent.
Watch: Snap to Grid
Key is to adjust your grid to work for you watch at at 2:05
WATCH: these | or top 10 illustrator tips |-> need a bit of an illustrator refresher?
HOMEWORK
Use the template
Yes the template is big. USE THIS TEMPLATE! YOU WILL BE SAD LATER. So you may have several art boards.
adjusting your document grid and getting started -- my demo
variations and remaking a set... what I mean by *in the video I merge all the elements together -- please wait to do that. Will be easier to edit if you keep the parts separate
Choose 3 most successful/interesting studies H, E, N, A, D, O, G /or/ n, h, e, a, d, o, g , and put them into illustrator.
start by recreating the modules you need to build your letterforms. use the grid and snap to it.
After you get your 3 sets in illustrator try a variations of the H or n. Make the letter taller, wider, heavier, rounder (be selective on what you make round. (how can you make the letters better, more interesting?).
From those studies on the H/or/n pick out 3 (any three from any of the sets you have made) . Three that you like and then do the full set again in that variation H, E, N, A, O D, G /or/ n, h, e, a, o, d, g.
Play out at least 3 variations.
If you didn't use serifs can you add serifs?
Can you change the serifs?
Can you change the proportion of the letter? c
Can you change the weight of the letter....
lots of options!
Recap on what this next step...
1) draw the 3 original sets in illustrator (even if you use fontstruct recreate them in illustrator). Set your baseline grid. Create the modulars and draw them in a smart and clean way using snap to grid.
2) take the H or n from each set and play with variation EXPLORE (at least 9 variations of the H or n)
3) from your H or n variations studies pick 3 different ones build them out to the rest of the letters H, E, N, A, O D, G /or/n, h, e, a, o, d, g
Print everything out for class crit. And Save as a pdf for your process book.
Something to start thinking about is how you are going to put this all together in a process book so you don't have to do that in the end.
Class Session Three
Pickingmost interesting 2.
Some of you may not have 2 great ones to choose from so you need to keep working until you do.
This is your chance to catch up.
HOMEWORK
Adding letters to your top 2 directions. Use the template
*it is very important that you use the template. It is given to you for a reason. Use it.
Add T I U S M K X W Z /or/ i u s m k x w z
Explore different solutions to letters that are giving you trouble, refine in Illustrator.Please keep adding to the template.
By adding the next of letters you are testing out your modular system and hopefully finding your favorite direction. And pushing your idea further.
Start thinking about how you could use it.
And what personality/mood does it feel like?
Print out for class. Save as a pdf for your process book
*reminder to work on your process book :)
Class Session Four
Understand all the homework before you leave.HOMEWORK
Cleaning up illustrator file for Glyphs
Watch: Tina Smith's Food for Thought
Watch: Intro to Glyphs (we will start on Wed this will help intro you to the program)
From your two font ideas pick the typeface direction.
Refine any letters you have done so far. What letters are still giving you trouble.
Look at your illustrator file and can the letters be more clean?
If you have used strokes (lines) all links have to be outlined into shapes.
Look at the stroke weights and correct -- they should be consistent.
Look at the counter shapes and correct -- they should be consistent.
Prep your illustrator file
to copy and paste into Glyphs. SAVE AS do not save over your sketches. For your favorite direction. Save your illustrator file and now SAVE AS name it something new and merge all your parts and clean up the letters. Please put you illustrator file on the google drive
Defining personality/feeling/mood
Write down some reasons WHY you pick it and make sure you include that reason in your process book.
What words would you use to describe your font? (sharp, soft, constructed, scifi, romantic, dramatic, vintage...
If it had an emotion what would it be?
If it had a personality?
Pick least 3 - 6 words that describe the mood, tone of your letters.
Imagery start looking for images that match or enhance or question your mood tone... H
ave at least 5 different photo/ illustrations topics as options.
Please only find copyright free.
See the class syllabus for a list of image sources<-- use the list!
Only for a bit of context. Here is some inspiration for where you can take your font and the final presentation. At the end the font is due. Part of this homework is starting to get the things you need for the final.
Print out what you have for the personality/feeling/mood and create a PDF for your process book. Include... all of above and include showing off a letter, word(s), set one of the words in your font, and photo(s). Have at least 5 different photo/ illustrations topics as options. Different topics/subjects that express or expand or push the personalty of your letters. *this can all be on one page or multiple pages.
- - - - -
If you are on a MAC download the trial version of Glyphs.
You need it when class starts so download it before class starts on Wednesday.
PC people you won't be able to download Glyphs. You will have to use illustrator and the 313 lab for Glyphs. Please get in the habit of working at school in the lab.
Next class I will demo Glyphs and we will work together. Please have your illustrator files on a google drive or dropbox so you can easily download them to a school machine. Get used to this process.
Class Session Five
Meet in the 313 Chalmers lab. Get onto a mac. Log on and be ready to start class on-time.INTRO TO GLYPHS
Tools
Font
Tabs
Baseline, x-height, cap height, ascender height, descender length.
Copy and paste your o into the o
Cleaning up in Glyphs
Paths -> Correct Path Direction https://glyphsapp.com/learn/importing-from-illustrator
Paths - > Tidy up Paths
Anchors and Handles
Save your Glyphs File
File Info: Name your font
Copy and past the n
Look at letter spacing the o, n
Can you make your n into your h (or do you have to copy and paste it from Illustrator)
Use the T tool an type in honohn fix the spacing should look even
Copy and past your d
Fix letter space donodh spacing should look even
Can you flip your d to make a p or do you have to copy and paste your p into glyphs
Transform palette
Save often glyphs will crash so SAVE.
Keep copy and pasting your letters into Glyphs if you can flip and flop them then do that — but not required.
Make sure you look at the letter spacing for each letter as you add it to glyphs always test it as you go.
Save often.
Space Glyph define the size.
Export as a font and test it :)
Want more Glyphs Tutorials...
A collection of tutorials are here
HOMEWORK
Finish all the 26 characters: all the lowercase OR all the uppercase. You can draw them in illustrator and copy and paste into Glyphs or you can just draw them in Glyphs. If you want to do numbers or some punctuation that is optional.
*Make variations of the letters that are giving you trouble. *if the s is giving you trouble then try a few versions of or the g or w or whatever letters now is the time to explore the trouble letters. Remember it might be easy to turn one letter into another one. Do that when possible. Refer to the handout forms of construction.pdf.
Think of a name for your font. Name it. Save your glyphs file AND export it and test it out in illustrator!!! Type out your letters in a pangram. Save as a pdf and post on your slack channel.
Start thinking /planning how to show off / teach us about your font.
What could be a compelling way to show off your font? Make a Pattern? Construction, Modules, a Quote, a lyric, poem, just words. What image(s) enhance the feeling or set the mood of your font? You started this now be more selective (maybe you need to research a bit more). What words can you use to show it off? (what are your favorite letters and what words use them? if you hate a letter don't use it :) Find a pangram you want to use. Or create your own.
Class Session Six
We are going to do a lot in class today. Get started on all the homework...Discuss Watch: Tina Smith's Food for Thought
Open your font in Glyphs.
_ Glyphs: Questions : what do you need help with?
Export your font, add it to font book and open illustrator.
Create a pangram at least 120 point tall and 36 pt tall.
_ crit letters, what are the problem letters?
_ how is the letterspacing?
_ Homework. Testing your font in different sizes .
Demo Making Patterns in illustrator | google drive |
Making patterns (make at least 3 before you leave class)
Tool kits. Make sure you understand what I mean by Tool Kit before you leave class.
Starting thinking about animation. (we will demo next class)
_
HOMEWORK
Refine any letters that are still giving you trouble. Work on your letter and word spacing. Start making your process book so you can just add to it and not have to design it the night before.
Examples Anne | Kate | Abby |
1) Testing. Test your font at different sizes so you know how SMALL you can use it in a behance post. Also test how small you can use your secondary font. I made a illustrator template for you. Change it to your fonts, change the words to your words... turn off the direction layer. Post to your behance so you can see them in context. (and make sure you have in your process book)
2) Patterns. before moving on to the tool kit play with making patterns. Use the Pattern Options under window. Play making patterns out of dots, squares, lines, maybe a letter, maybe your modules... just play so you understand how to make, use and edit patterns. You may end up not using patterns for this project but it is the time to learn about them so just embrace the learning experience! :) Make at least 10 patterns so you understand all the options in pattern maker. Include them in your process book. Made you a video | illustrator file for reference
3) Starting to think about ... Part of the final will be presenting your modular system, show how it is used, and describe 3 to 6 characteristics of your font. You will need to visual show and verbally explain characteristics about selected letters -- we will call this Show and Tell. sheet of examples | 1 | 2 | 3 | 4 | 5 | What is important is at this stage you Explore. I don't want to give you any more direction than that: be inspired by the possibles by looking at apeloig posters, patterns by MuirMcNeil... Think of how to manuals or exploded views or …. try different ways to diagram the letters. (don't just do these examples! Starting sketching/ writing down ideas on how you want to show your entire alphabet, how do you want to show off one letter series of letters. How do you want to explain both visually and using typed words to describe the characteristics of your font/letters. How do you want to show how a letter(s) are constructed with your system. Start looking at examples online. Bookmark, collect (google drive, pinterest or are.na, take notes, sketch your ideas.
4) Tool Kits. Create 3 different tool kit ideas based on different moods or personalities. Tool kit is a one stop shop for all the assets you will need when creating your final post. You chould be able to open your toolkit when you are designing your behance post and have everything you need. Do it in illustration.
Toolkit should include: Name of the font, 3 words to describe it, 1 - 3 images/illustrations, color palette, pangram/quote, secondary font if needed, modules used to create your letters, highlight at least 3 characterisics "show and tell" you need words (use your secondary font, pattern(s) (optional).
Do everything differently for each tool kit, (see above no. 3 research for more ideas). Feel free to post your first one on Slack if you want a thumbs up or feedback
*PRINT toolkits out for class on 11 x 17 in color and make sure you have in your process book. (examples)
Class Session Seven
Glyph TipsShow what you discovered for Number 3 above. (post something to inspiration)
Photoshop Demo photoshop demo and tips
Discuss toolkits.
Discuss best practices for Behance posts.
Add a grid. Block out a design ideas (wireframe/blueprint). For this test, export as one image and test on behance.
Glyph Tips : watch the video
Diamonds are everyones best friends
Double check that all your letters are on the baseline
Double check that all your letters go up to the x-height or cap/ascender height.
-> If you need me to help you get your guides set please say so.
Side Bearings
What are they, How do you change them all at once
Check your L I T J Q U c e j k l
easiest way is to look at letters using a control letter H or n
HIHTHIHJHQUH or ninitinjnquncnenlc
*and remember to kern in illustrator, you have the control
Background layer
command B, screen turns pink when you are in the background
Stem Thickness Window > Plugin Manager
Find Stem Thickness
you may have to install something restart Glyphs, then install the plug in.
Class Session Eight
Craft is king. What do you have to fix to have perfect craft?Glyph Tips : watch the video
Refined Tool Kits
Practice Animations (these are practice you will have to make new for your final, treat them as practice)
Plans (wireframe/blueprint) (more than one) for Behance posts.
Pick one tool kit and refine it for Monday. If you want feedback before Monday post a pdf or jpg on slack before Sunday.
Practice Frame by Frame Animations. Make at least 2 (you will have to remake them for the final).
Practice Time Line Animations. Make at least 1 to practice (you will have to remake them for the final).
Based on your toolkit and what you now understand about animation start planning out your behance post.
See this page for photoshop demo and tips
When thinking about your animation please don't get tricky making your letters 3D doesn't make much sense when you are supposed to be teaching us about your letters, also effects like glitch or bevel or shadow don't add anything like noise to your presentation -- make sure what you are doing is all about teaching us about your font. Keep them simple and clear. Any shimmer or shake will be viewed as bad craft. IF you want to have some special effects that is fine -- but don't do them in place of teaching us -- do them in addition to.
To start planning for your final behance presentation. Make at least 2 - 3 ideas using the file we used in class. The can feel like a blue print and not the final stuff. Image here, Animation of modular here, etc. Post them on Behance so you can see the size of things.
BEHANCE (can have more in your post but must have these...)
Font Name
3 words for the tone/mood
At least one image (photo or illustration) to set the tone/mood.
Pangram (any) or a poem, quote...
Entire uppercase or lowercase (numbers or punctuation optional)
At least 1 animation on how your modular works
At least 1 animation showing off a characteristics show and tell
(and make sure you show your font Large and as small as it can go! you tested this out)
You need at least 2 animations on your final behance post. You need to have a plan before you start to build it/animate it. Build it in Illustrator or in Photoshop, using layers in either case. Build it to a one to one size that will work for behance. *this is the key part. before you start building out your final animations for behance you must know what size you need to make them.
Class Session Nine
Show and tell: lets see your test animations (upload them to behance)Show and tell your blue print ideas for Behance (can upload as one image to behance)
HOMEWORK
Create at least 3 - 5 animations. Some can be simple frame by frame. Make new pay attention to craft, timing, messag, legibility.
Start to build out your behance post. You will want to have 2 for us to look at. To get feedback post them to behance. (you can turn them off later!) You need to upload your images individually not as one long post. Practice this.
Adding!!!! to the project you must make and hand in an animation that I can post on instagram. Animation for instagram 1080 x 1080px or 1080 x 1920px (saved as yourname_insta.gif) I must be a gif. Save it as yourname_insta.gif
Behance Post includes at least these things (you can have more this is the minimum)
Font Name
3 words for the tone/mood
At least one image (photo or illustration) to set the tone/mood.
Pangram (any) or a poem, or a quote...
Entire uppercase or lowercase (numbers or punctuation optional)
How does your Modular system work?
Visually and verbally explain 3 - 6 characteristics of your typeface.
At least 2 animations (can be anything)
(and make sure you show your font Large and as small as it can go! you tested this out)
Behance Tips:
__Use a grid.
__Think about scale, and pacing don't be static.
__You tested your secondary font as to how small you can use it so use it at that size and keep it consistent through the post including in your animated gifs (if you use it -- keep it the same font, style, size)
__Design your post in illustrator using a place holder image for your animations so you can see how it all will look together.
__You tested how small your font will work online so use it at that smallest size.
__Don't be afraid to have us scroll and maybe we don't see everything until we scroll (you know SCALE.
__other things can animate (patterns, images, text...
I understand this is abstract it is time for you to try and find your own way. How are you going to show off your font on a behance post?. You must have all the content above in any order. Remember your post can go very LONG, scrolling is great, do not cram it all in.
Process book is professional and ready to show a professional for an internship. Must be well designed will take points off it is thrown together, doesn't use a grid, unclear hierarchy, incomplete.... Rember you must include a project description (what was the project), project overview (your thoughts on the project where you strugggled, where it was too short, too long, too to hard, too unclear, fun :)
Class Session Ten
Show and tell: lets see your animationsShow and tell Behance.
HOMEWORK
Refine everything project due at the beginning of class. How can you make your post, animations even better. Show off your font.
Things I will consider when grading...
__Process: did you make progress every class / did you explore options
__Font construction is modular.
__Font construction craft: is it clean, did you attempt to remove points in glyphs, stem thickness...
__Behance post contains all the content required
__Kerning of your font on behance post. *you may have to manual kern in
__Use of a grid
__Clear hierarchy/ use of the page
__Animation 1: appropriate, idea
__Animation 1: craft (alignments and timing)
__Animation 2: appropriate, idea
__Animation 2: craft (alignments and timing)
__Animation 3: for instagram, appropriate, idea, craft
__Process book is professional and ready to show a professional for an internship. Must be well designed will take points off it is thrown together, doesn't use a grid, unclear hierarchy, incomplete.... Rember you must include a project description (what was the project), project overview (your thoughts on the project where you strugggled, where it was too short, too long, too to hard, too unclear, fun :)
Project DUE
BEHANCE (can have more in your post but must have these...)
Font Name
3 words for the tone/mood
At least one image (photo or illustration) to set the tone/mood.
Pangram (any) or a poem, or a quote...
Entire uppercase or lowercase (numbers or punctuation optional)
How does your Modular system work?
Visually and verbally explain 3 - 6 characteristics of your typeface.
At least 2 animations (can be anything)
(and make sure you show your font Large and as small as it can go! you tested this out)
OPTIONAL on behance you can use https://issuu.com/ and link your process book to the project. This not required but it will be for Review in May so you might as well do it now, when you have your pdf handy. example
- - - - - - - - - - - - -
PROCESS BOOK as pdf
Process Book must be well organized, labeled, name on it!. Make sure you include: Your name, Project Description, Project Overview, all of the process, notes you took, construction, final product. You can hand it in physically or you can create a pdf of all your process. (**All the homework, reading summaries, video summary/thoughts, feedback, any class notes etc go in to the process book.)
Don't forget a title page, project description (what was the project), project overview (your thoughts on the project), all your process (all of it! organized by date)
- - - - - - - - - - - - -
DIGITAL FILES into the google drive*
Create a folder with your name and put ll of this in it.
*if you don't hand any of these in your grade will be dropped by 1 letter grade.
_ YourFont.otf (the font file)
_ the glyph file
_ Process book as a pdf (is is a must please put hand it in)
_ Link to your final behance post
_ Animation for instagram 1080 x 1080px or 1080 x 1920px (saved as yourname_insta.gif) make sure it works!