Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Typography for Digital Art and Animation

No description
by

Michael Niemi

on 16 August 2016

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Typography for Digital Art and Animation

Typography for Digital Art and Animation
TYPE ANATOMY
Character: the basic typographic element which is any individual letter, numerical, or punctuation mark.
Typefaces and Fonts
Sans serif (Sans=without) Like to say 'without FEET'
From the French, meaning “without serif”. A typeface which has no serifs. Sans serif typefaces are typically uniform in stroke width.

Serif
Tapered corners on the ends of the main stroke. Serifs originated with the chiseled guides made by ancient stonecutters as they lettered monuments. Some serif designs may also be traced back to characteristics of hand calligraphy. Note that serif type is typically thick and thin in stroke weight.
Serif vs. Sans Serif
One of the many misconceptions is that the words "Typeface" and "Fonts" are one in the same. Actually, Typeface is the FAMILY that encompasses each FONT.

TYPEFACE>FONT

**in the example below, ARIAL is the TYPEFACE and the variations of weight are its' FONTS.
from the GREEK: TYPOS=form and GRAPHE=writing
Typography is the art and technique of arranging type in order to create a visible language
There are many things to consider when it comes to typography....here are some of the basics
A B C
1 2 3 , : ?
Character Components
List of Terms and Definitions
Ascender
The lowercase character stroke which extends above the x-height.
Bar
The horizontal stroke on the characters ‘A’, ‘H’, ‘T’, ‘e’, ‘f’, ‘t’.
Baseline
The imaginary horizontal line to which the body, or main component, of characters are aligned.
Bowl
The curved stroke which surrounds a counter.
Bracket
A curved line connecting the serif to the stroke.
Contrast
The amount of variation in between thick and thin strokes.
Counter
The empty space inside the body stroke.
Descender.
The lowercase character stroke which extends below the baseline.
Loop

The bottom part of the lowercase roman ‘g’.
Shoulder
The part of a curved stroke coming from the stem.
Stem
A stroke which is vertical or diagonal.
Stress
The direction in which a curved stroke changes weight.
Terminal
The end of a stroke which does not terminate in a serif.
X-height
The height of the body, minus ascenders and descenders, which is equal to the height of the lowercase ‘x’.
Don't worry...There is a copy of these for you to add
to you notes in the RESOURCE FOLDER
**Good Rule of Thumb when using Serif or Sans Serif: Since Serif fonts are easier to read, use them for the body of your work (example, using Times New Roman for papers). Sans Serifs are best used for BIG-BOLD titles (check the local newspaper to see for yourself!)
Some Important Typography Terms....
Alignment
How a text is displayed (left to right in most cases) and how each text block lines up with another
Proximity
Keeping items of relation close enough to keep them connected, while including enough white space to make them unique.
Measure
Width of a line in a paragraph or column
Leading
The amount of space between lines of text
Tracking
The space between groups of characters
Kerning
The amount of space between two characters

Sorry.....these you have to write yourself!
Tips for Better Typography
1. Less is Often More
A big mistake made by designers is the use of too MANY typefaces and styles. Limit your text designs to 2 or 3 and use them consistently throughout your designs.



2. Consider Spacing
Crowding is bad when it comes to type. Too close, the words become blocked and jumbled together. Too far, and they become hard to read.


3. Alignment
We are used to reading left to right. Anything else seems a bit off. Make sure you are considering the readibility of your desgin before finalizing it.
5. Reinforce the message with your font
Just because a font you found looks 'pretty' does not mean that you should use it. Rely on the constant that "Simple is Better" in most cases. Try Helvetica on for size.

6. Consider Size and Readibility
The ultimate goal is to create works that the viewer can read clearly, without distraction or confusion. Enlarging the body paragraph just makes things look sloppy. Leave larger, more bold fonts for titles and areas you want emphasis. Think about how the viewer perceives the message....which is the MOST important thing.

7. Scale and Hierarchy
This refers to the relative size and distinction of one font to another. With Hierarchy, the designer (this is you) should try to create a sense of value to what is most important, and allow everything else to fall below into place. (Think of a deck of cards...Ace, King, Queen, Jack, etc.) Example, headings should be larger than your subheadings, and subheadings larger than your body paragraph.


The purposes of this prezi are for educational use only and are not intended for presentation for sale. It has been produced using public sources online (sited below) and using images either borrowed or created for the intent of education at the high school level, of an introductory Digital Art and Animation course.

http://www.photoshopcafe.com/tutorials/typography/typography-tips.htm

http://speckyboy.com/2013/06/13/the-principles-of-typography-back-to-basics-2/

The History of Typography - Animated Short from Ben Barrett-Forrest on Vimeo.

http://www.noupe.com/design/a-crash-course-in-typography-principles-for-combining-typefaces.html

http://www.1stwebdesigner.com/inspiration/awesome-typography-examples/
Here are some examples of good typography...
Full transcript