INTRO TO TYPOGRAPHY

DSGN.110

Introduction

In this class you will learn how to properly use type in a number of ways and in a variety of scenarios. Through projects ranging in their uniqueness, you will learn how to use type in a fashion that will allow you to later expand your understanding not only of different typefaces but what can be done using them. This class is about building your knowledge about the use of type within design. We will look at not only good examples of type use BUT also examples of terrible use of type. By the end of the semester you will hopefully be able to create designs using a solid foundation with type. We will use Illustrator, Photoshop and InDesign for all the projects developed in the class. You are required to follow each project directions as this will prepare you for the next project as well as the next course you will be taking the following semester.


Below are the projects you will be working on this semester. Each project will have an accompanying handout with specific outcome goals and a detailed schedule. As we finalize the project and you submit the design files, each project will be displayed so everyone will have the opportunity to look at what each student had developed. Previous student projects will also be available after the third class. This will allow enough time to help progress your own solutions without having other similar projects influence those decisions.

Jump to Current Project
25 JAN

Blair

Elizabeth

John

Maggie

Ryan

Project One

Word Manipulation

  • Project Start : 25 January
  • Class Crit : 12 February
  • Project Due : 15 February

Tweaking the letters of five words and force their appearance to take on the characteristics of that word meaning. Then work in a sentence or definition that balances a 7x7 canvas.

Download Project Handout

project description

This project will familiarize yourself in how type can be used. Type is an important element in every design, often the most important. The size, weight and style you choose can make your design work or fail. But type can be used in other ways besides being seen as a block of text. Letters and lines of text can be used as design elements that are taken out of a readable format. Still legible and read as type but no longer in a sentence form or paragraph reading.

In this project we will begin to break apart each individual glyph [ these are what individual letters are referred to ] and see how far we can tweak each letter form before they no longer become the glyph they once were. Some ideas you develop will benefit from a sans face. Some will become a stronger finished piece utilizing a serif. Some might need to start as all caps, some may need to begin as all minuscule [ lowercase glyphs ]. Don’t type out your word in Myriad or Times and just start working. Think about your ideas and look at potential typefaces that may work. It will be perfectly acceptable, actually expected to start with a typeface and realize once a direction is being executed, another face would serve the design stronger. Go back and recreate using another face.

The project is to create five designs, each having its own theme yet all tying into one another through a common element/feel. Not a series per se but a common direction. Think of this upfront when choosing your words. The direction a particular word has could find it’s finished piece very different from the other four. No images may be used and no color - not even gray scale. These cards will be strictly black and white.

You will find the definition for each word. Each will have its own postcard and will be designed in a way that a person viewing these designs after can see the word being portrayed as the definition suggests. For example, if you had the word small or tiny, the text of the word could be tweaked in a way that showed the word being dominated by its definition or sentence.

The final trim size will be 7” x 7”. Keep in mind that all five should be unique yet seen as a set of cards. You will print the designs on heavy stock. Not copy paper. You will also submit your finished pieces as a PDF.

Take a look at other student examples from previous semesters

gained knowledge

build on your knowledge of illustrator and learn the basic tools of the program

  • pen tool proper use, minimal anchor points
  • layers naming & organization of files
  • outlining fonts
  • the direct selection tool
  • rotating and proper scaling of text
  • adjusting art boards
  • changing color modes & creating swatches
  • utilizing the color slider to customize colors
  • adjusting leading, tracking & baseline
  • fill & stroke on shapes
  • pathfinder tool
  • align palette
  • text fill clipping paths
  • typing on a path or fill
  • setting up preferences scale strokes & effects

you will be more familiar with the intricacies around individual glyphs and look at each glyph as an art form rather than a readable letter

you will know what characteristics a serif and sans face has over the other and why one is a stronger choice than the other

you will be able to balance a small composition with limited elements and learn to tell a story with a design to a viewer using only the design itself

you will also complete this project using only two colors and understand the difference between process and spot color

you will have learned about paper weights and how to properly set up a document with bleed and trim marks


For Today's Class

We will begin by looking at illustrator and the tools that will be required for this project.

  • work on choosing your five words and begin thinking how the word can mimic the definition
  • start thinking how you will break it down and manipulate the glyphs in your sketch book - You will be asked to work multiple type treatments for each of the five words [ minimum of 3 for each word ].
  • prepare to explain your ideas for each of the five words next class
29 JAN

Continue working on your words. Some ideas may work better than others and some just can not be replicated to portray the essence. Think about how these will be seen after. As with everything you design, you can not stand next to each and every designed piece explaining your reasons. Your direction and execution must be obvious to the viewer.

  • look at other typefaces that compliment the face you are working with
  • keep the word manipulation straight black and white - no gray scale

Tutorial 01 : Illustrator

This handout will cover basic tools and functions in Illustrator and serve as a reference for this first project.

Take a Look at the Tutorial
01 FEB

Continue to work on tweaking the words.

  • continue to work out solutions to morph your glyphs
  • begin to bring in the definition or sentence to balance the composition

05 FEB

Step back from your designs and continue working on the words.

  • sometimes an idea just is not clicking and the solution is to back track and choose a different typeface

08 FEB

Continue to work on the words and bring in the line of text to balance the design.

  • start to solidify the designs of the words
  • start to complete the overall 7 x 7 composition with the word and line of text

12 FEB

Class Crit

  • come to class with your designs printed and trimmed
  • reflect on the feedback from your classmates - remember the sponge and brick metaphor

15 FEB

Projects are due at the start of class.

Uploaded to the google Drive

  • upload your document to the google drive as pdfs
  • combine your separate pdfs into one
  • be sure to include the correct print files

When handing in your projects, you must submit the pieces within the parameters you were asked. 6.75” x 6.75” is not 7” x 7” nor will sloppy edges be allowed. Your project will be handed back to you for not following directions and be docked as a late. Please pay attention to the small details as often the most noticeable.

15 FEB

Project Two

Olympic Athlete Infographic

  • Project Start : 15 February
  • Class Crit : 01 March
  • Project Due : 05 March

Create a bus stop advertisement for any olympic athlete from any country. The poster will be type driven and become an infographic showing the athlete’s accomplishments and bio. The photo must be clipped and layered with the text.

Download Project Handout

project description

For this project, we will develop a poster for an olympic athlete that will be used as an advertisement at a bust stop station. The size of these advertisements are 48 x 69. We will NOT be printing to scale however the design should be developed as though the final print will be seen at the bus stop. Your design will be printed on an 12 x 18 glossy paper stock and trimmed down to the appropriate size.

The project will familiarize you with both photoshop and illustrator and how each can be used together to create a design that not only grabs a person’s attention but also breaks down information for that person to digest.

The information must be broken down into a hierarchy of importance. Think about the most important bit of detail that is crucial for a person to read? What is the second? Then third? What typefaces are easy to read from a distance? Should the tracking be tweaked if the text is large? Should you use caps or mixed case?

Color plays a crucial role in this project, however your choice may be limited to the country the athlete is representing. Contrast for the type is the most important aspect.

The first image you use must be of the athlete and create a double exposure design with the second. You may use a third image or texture in the background if you wish but no more than three. To the right, you will see the information that must be included in you design. DO NOT create the graphic first then drop the text in. Work both text and image together to develop a well balanced composition.

Besides the hierarchy of information that must break down into an order of importance [ remember no more than three typefaces are to be used ] you must also think about how the design will be approached. The height of the design is almost 6 feet high. Therefore information at the bottom / footer of the design will be far less important than information placed eye level.

gained knowledge

At the conclusion of this project, you will have learned to break down information into a hierarchy of importance through the use of type style, size, contrast and placement. You will have been exposed to printing using techniques in photoshop. Both Photoshop and Illustrator will be utilized in this project and learning how the two can be used together will be explored.

  • type tool and looking at different styles of a typeface
  • techniques of blending in Photoshop
  • using alignment to balance a composition
  • pen tool to isolate an image from a photo
  • breaking down information into a hierarchy
  • learn how the two programs can work together

project requirements

poster final trim size will be 11 x 15.8125
this size is proportionate to 48 x 69

must use two images minimum - no more than three images total

one image of athlete must be clipped out
file size should be 1650px x 2375px to print at 150dpi

must include the follow details:

  • name of athlete
  • age of athlete
  • country representing
  • event competing in
  • schedule of those events - date - time - location
  • record for events or previous medals


For Today’s Class

Introduction of the project and look at existing poster designs that break down information into a hierarchy of importance. Look at how color, size, weight and placement can control the eye across the entire design.

  • solidify your olympic athlete and download hires images that could be used in your design
  • gather all of the information that is required for the poster and drop the text into your file
  • we will go over tools in photoshop that is required for this project
21 FEB

Continue working on your hierarchy of text. Step back from your design multiple times throughout the process.

  • make sure you are creating at least three levels of importance with the type treatment and location - continue to ask yourself questions like, what is most important and does that stand out?
  • begin working on your images with the type treatment in mind - going back and forth between image and type should occur

Homework 02

Lost Dog Poster
DUE Monday Class, 26 February

No More Than 20 to 30 Minutes

Download File With Text and Image
22 FEB

Continue to work on the melding of image and text.

  • continue to work on the overall composition and allow the design to come together as one
  • finalize your images in photoshop

26 FEB

Step back from your designs and finalize your design.

  • hide your image and look at your type alone - how well is the information being conveyed?
  • do a test print and step away from the design

01 MAR

Class Crit.

  • come to class with your designs printed and trimmed on a slightly smaller stock paper
  • reflect on the feedback from your classmates

05 MAR

Uploaded to the google drive and prints handed in.

  • upload your document to the google drive as a pdf
  • print and trim your posters on quality glossy paper - will be supplied

When handing in your projects, you must submit the pieces within the parameters you were asked. 11“ x 15.8125” is not 11.125 ” x 16” nor will sloppy edges be allowed. Your project will be handed back to you for not following directions and be docked as a late. Please pay attention to the small details as often the most noticeable.

05 MAR

Project Three

Conference Brochure

  • Project Start : 05 March
  • Class Crit : 29 March
  • Project Due : 02 April

Develop a unique folded brochure for a one day conference. The final brochure will be printed on a tabloid with a trim size of 11” x 8.5”.

Download Project Handout

project description

For this project, you will develop a brochure for the upcoming conference in Portland, TypeCon2018. You will be provided the necessary copy text that will be broken down and laid out into a composition that delivers the information in an easy to digest manner.

The most important aspect of this project that should be learned is to design for your content. Meaning, look at everything you have to work with from text and images. Understand what is important first, then devise a plan of breaking the information out across the composition. Do not create a design that ignores your content then use as a template and force your content into. Allow your text and information to determine the direction of the composition.

Break down the brochure folds to highlight and deliver the text in a unique but orderly way. If the brochure is a tri fold for example, how does the interior panel play with the inside of the first fold when opened? Then how does each of the other two work with that interior panel is opened? Multiple methods of folding should be explored.

Pay attention to where the text falls and keep you smaller readable type away from folds. Create a uniform margin that not only accounts for shifting but also balances the layout.

gained knowledge

Design for the content.

At the conclusion of this project, you will have continued to build on breaking down information to be consumed through a hierarchy. Not only will type treatment [size, weight and contrast] play a role but how the folding can help break down this information to a viewer as well. You will have strengthened your understanding of the importance of hierarchy and how a person will read through the details of the composition. You will have also explored multiple methods of folding and how crucial this is to the success of a brochure.

project requirements

final trim size will be 11 x 8.5
printed on 17 x 11 double sided

images must be 300 dpi

no more than three typefaces

copy text must be 11 points and no less than 120% leading

must include SoTA logo

upload to google drive in the correct folder named as: lastname-p03-final.pdf
the file must have bleeds and marks


For Today’s Class

Introduction of the project and introduction to indesign.

  • create a mood board for this project - direction - images - color scheme - typefaces
  • gather all of the information that is required for the brochure
  • look at the copy text you have then brainstorm ideas about the folding of the brochure
    begin playing around with different folding techniques
  • grab a piece of letter size paper, fold, refold, and sketch out preliminary thoughts
    start writing on the paper for general location of text and information
  • once an idea has developed, lay flat your paper and measure the panels - create the document
08 MAR

Start designing on the computer.

  • break down the information that is required
  • once all the text has been placed into your indesign file, set all the type to 11 points
  • then isolate the headers and sub-headers, increase these to 21/25 and 17 points

12 MAR

spring break

15 MAR

spring break

19 MAR

Start laying out your thoughts and developing the brochure.

  • each section is important to one another while breaking down the details for a person to easily read the information
  • how can color and images play into the layout?

22 MAR

Continue designing on the computer.

  • fine tune your copy text and overall layout - pay attention to column widths for paragraph text
  • be sure readable text does not cross into a fold
  • pay attention to how each panel works with o

26 MAR

Continue designing on the computer & test print.

  • test print the brochure start of class and see how the folds play into the overall look of the brochure

29 MAR

Class crit.

  • class crit start of class with printed, folded and trimmed designs - please print two copies

02 APR

Uploaded to the google drive and prints handed in.

  • upload your document to the google drive as a pdf
  • print, trim and fold your brochures

02 APR

Project Four

Candy Package Design

  • Project Start : 02 April
  • Class Crit : 19 April
  • Project Due : 23 April

Develop a candy packaging that commemorates a day in history or a holiday.

Download Project Handout

project description

In this project, you will be developing a package for a new edition candy. One that does not yet exist, but does have a brand you can work off of and reference slightly. The design should commemorate a holiday or an event in history. You will also be required to conceptualize two different type treatments of the name. The treatment should capture the day you are commemorating while speaking to the candy itself. You will use the existing packaging of the candy to measure the dimensions then create the document with those measurements with proper folds and bleeds. You will include all the text that is on your existing packaging BUT will not be laid out as it is seen. The nutritional facts will not be designed as black text against the white box with black lines. The ingredients will not be 4 or 5 points set to all caps. You will come up with a design that is pleasant to look at while still highly functional.

The finished design will be printed on quality paper using the epson printer. You may use the laser printer for mock drafts and prototypes but the final design piece will be printed on the epson. The finished design will be trimmed, folded and pieced together using adhesive on folds and flaps. No outside tape. Presentation is important.

gained knowledge

At the conclusion of this project, you will have learned to build a custom package. You will have explored multiple packaging options and saw the advantages and disadvantages each has over the other. Learning to properly set up a file for print that not only includes bleeds and trim marks but fold marks and possibly die cuts. You will have also explored how important the environment is that your design resides. Will the end product be placed on a shelf or rack? Will the design be eye level and how will human interaction affect the effectiveness of your design? When the package and placed on display backwards or sideways, will a consumer still know the product?

project requirements

logo of the manufacturer

name of the candy - unique type treatment

ingredients

nutritional facts
not laid out in a white box with black text

the upc code

net weight

upload to google drive in the correct folder
named as: lastname-p04-final.pdf
file must have bleeds, margins and marks


For Today’s Class

Introduction of the project.

  • break apart your packaging and measure the dimensions paying attention to folds and margins
  • set up your file in illustrator using the rectangle tool and lining up the sides perfectly
  • drop in the text that is on the existing packaging into your document
    be sure to find the manufacturer’s logo as a vector file
05 APR

Start designing on the computer.

  • begin thinking about the overall design of the packaging
  • how will the design work from each angle?
  • begin treating the smaller necessary type and working it into the layout

09 APR

Continue working out the overall look and feel of the design.

  • focus on the nutritional value type treatment
    it should not remain as a black text grid on a white box with lines
  • finalize the type treatment of the ingredients
  • begin working out solutions for the name of the candy type treatment

12 APR

Continue working on the name type treatment.

  • work out multiple solutions for the type treatment of the name
  • finalize the other elements of the design
  • print out your design and make sure the text is clean and easy to read with enough contrast

16 APR

Finalize the design of the packaging.

  • finish the name type treatments and wrap up the designs while changing any issues that are noticed after printing
  • print out two copies of your design and trim, fold and glue together one of the prints - leaving the other flat

19 APR

Class crit.

  • class crit start of class with printed, folded, trimmed and pieced together designs - please print two pieces

23 APR

Uploaded to the google drive and prints handed in.

  • upload your document to the google drive as a pdf
  • hand in your finished design pieced together

Approach to the Course

Each project will have a specified due date during the course of the assignment. Depending on the progress of the overall class, a date will be set midway through the project. Some projects will have a loose schedule to help manage the project and help guide your progress. If you happen to miss class on the day a due date is determined, it is your responsibility to contact a classmate or eMail myself in finding out when the project will be due.

Projects are due on their date without any exceptions. If you miss a due date, your project will be docked a full letter grade for every class day that passes. No exceptions. Most projects can be completed within the allocated time but you will find that some projects will require work done outside of class time. Please balance your work and do not fall behind. You may resubmit any project for grading except for a project handed in late. You will have until the last week of classes to resubmit any project.

Preparedness

Please come to each class prepared to show your progress with the current project. Be sure to have continued your work outside of class time and arrive with a substantial amount of progress to show.

On crit days, do not expect to come and print out of your work before the crit begins. Class crits will begin immediately so all students have ample time to show their work and receive the critical feedback from fellow classmates. Then if time allows, the remainder of class will be spent reflecting and absorbing the criticism. Deciding which feedback will be useful and which will be set aside and how it can help strengthen your project. Class crits are vital to learning how one can articulate their rationale for design choices and evaluate those reasons. It is important for student participation and learn that a critique is not to be taken personally. The crit is important for each project and will count for 10% of your project grade. Do not miss classes when a crit is scheduled.

Each project will have a specified due date and are due on their date without any exceptions. If you miss a due date, your project will be docked a full letter grade for every class day that passes. No exceptions. On due dates, come to class with the project completed. Printed, scored, folded, pieced together and trimmed. Projects will be handed in at the start of class. Most projects will require time outside of class. Each project will have a tight schedule with milestones to help keep you on track. Please balance your time and do not fall behind.

You may resubmit any project for grading except for a project handed in late. You will have until the last week of classes to resubmit any project.

it is recommended a total of six to eight hours a week will be spent working on projects outside class. For projects, you will gauge rather quickly how much time will be needed outside of class to complete them and progress your ideas and concepts. As in many aspects of life, there is not an exact formula for creating a piece or learning a subject matter.

People work at varying speeds and students and professional designer will run into walls that will at times feel exhausting. Allowing enough time to work through these setbacks will ensure you are not running around last minute when projects are due.

This class is about problem solving. Not only design but also dealing with elements that go into preparing a design and completing the project. For example, the printer becomes an integral element of this class. It will without a doubt let you down. Just when you need to print your finished project, the paper will jam, the toner will run out and your computer will crash. This will never be a reasonable excuse. Do not wait until the last minute to print your work. Back up your files. Stack the deck in your favor to overcome any obstacle.

You will be required to have a sketch book [9 x 12] designated solely for this class. Whether you prefer to sketch out your ideas or jot down notes for each project, that is entirely up to you. In this class, simply getting to the end result is not good enough. The process of conceptualizing is as important as the final piece. The first ideas are seldom the best in design and it’s best to have a track record you may view during this process. Compiling your thoughts and decisions throughout the project will account for 10% of your grade. Some of the elements you will be designing for will require life style image manipulation. Always use hi-res images from the start when placing your work into an environment to showcase your design. Keep track of major shifts in design choices and save multiple versions of your work throughout the process.

Evaluation

You will be evaluated in the following areas:

  • the design and aesthetic appeal of each piece
  • the presentation of the final printed design
  • creativeness of the piece as a whole
  • research of the project
  • participation

Though I do not grade individual projects against other projects, it is a great way for you to see where your design stands in relation to the other work being produced around you. Every project will have a crit and when handed back, displayed for you to see every other project. Class crits are vital to learning how one can articulate their reasons for design choices and evaluate those reasons. It is important for student participation and learn that a critique is not to be taken personally. We will discuss this more but do know that the crit is important for each project and will count for 10% of your project grade. Please do not miss classes when a crit is scheduled.

Gained Knowledge

The end of the semester you will have a clear understanding of how type will work within various design problems. You will learn to think about the problem at hand first and ask questions pertaining to the project, then work out solutions that will solve those questions. You will learn to work through the process that forces you to revisit earlier answers.

You will leave with an understanding of typography terminology and know precisely how a typeface works both alone and within a family. What makes a particular family work over another and make smart type choices. You will leave with both a historical and philosophical foundation of type and it’s place in design as well as inherent qualities of typographic language including visual/verbal relationships and skills including copy writing, symbology, semantics, semiology.

You will have built your knowledge on three major programs used in the field (Illustrator, Photoshop & InDesign) while also seeing how each, though powerful on their own, can work seamlessly together to achieve top quality layered results. You will understand the fundamentals of executing a proper file that would be important in real life settings as well as learn to adapt to an environment that brings minor setbacks (printer jams & paper shortage).

In the end, you will have five complete and well developed pieces for your portfolio. You will have a clear understanding of the impact design has on society. You will also walk away with a stronger sense of organization, color and balance as well as use of type within composition. The knowledge will propel you further into the next design courses you will most likely be taking.

  • how to properly set up a file with bleeds, trim marks and safe margins
  • how to save in a variety of file types and why
  • how to use the pen tool to create smooth bézier curves
  • how to create clipping masks
  • learn to utilize layers & the organization of files
  • learn to outline text
  • learn to kern text
  • create custom typefaces by using the direct selection tool
  • learn how to import images properly
  • learn to rotate and scale images & text properly
  • learn to adjust your art board mid project
  • learn about changing color modes & creating swatches
  • learn how to utilize the color slider to customize colors
  • how to adjust leading, tracking & baseline within text tool
  • learn proper use of paragraph alignments for different compositions
  • understand soft returns & re-ragging of paragraphs
  • understand stroke on shapes and text
  • look at how transparency and blending option affect color & contrast
  • learn how to use the pathfinder tool
  • learn to use the live trace option correctly
  • understand how to use text wrap
  • learn the gaussian blur to mimic drop shadows
  • learn to use gradients & mesh properly
  • learn how to use the align palette
  • learn to type within a shape and on a path
  • understand what is smart punctuation
  • setting up preferences scale strokes & effects

Absences

You are allowed to miss a maximum of three classes after which your final grade will be affected. The fourth missed class will drop your final grade a half a letter. Every class after will drop your final average a full letter grade. Please see me immediately if an issue arises. Do not let things get out of control and find that you have missed six classes and over your head. I am here to help in whatever way I am able to.