Typography & Animation

Typography

• The art and technique of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line spacing, letter spacing and spaces between pairs of letters.

• Derived from the Greek words “Typos” which means “type” and “Grapheia” which means “write”.

Typos

Type

Grapheia

Write

Typeface

• Also called Type Family

• Is the name of a specific collection of related fonts.

  • Ex. Helvetica

Font

• Refers to a particular weight, width, and style within that typeface.

• Each variation of a typeface is a font.

  • Ex. Helvetica Regular 9 points.

Typography in Design

• Enhancing Readability and Legibility

• Communication and Messaging

• Visual Hierarchy and Organization

• Aesthetics and Brand Identity

• User Experience

Choosing and Pairing

• When pairing two fonts, there are essentially two recommended ways to go about it.

• The first is to pair two different fonts within the same typeface. For instance, a bold, uppercase font for headings and its regular counterpart for body text.

• The other option is to choose two different typefaces that contrast with one another. For example, a sans serif for headings and a serif for the body.

• As a general rule of thumb, avoid pairing two different fonts or typefaces with very subtle differences; there needs to be a visible contrast between the two.

Serifs

• Are the small lines attached to letters.

• Their origins are a mystery; one theory suggests that arose when scribes using brushes or quills left small marks with the writing implement as they finished each stroke.

• This evolved into deliberately adding smaller strokes in more regular, artful ways, and those decorative strokes became an expected part of the letters.

Sans Serif

• Or simply Sans

• Is a typeface designed without serif (from “sans, the French word for “without”).

• Typically, sans serif faces have lower stroke contrast and larger x-heights than serifs.

Popular Serif Fonts

1. Times New Roman

2. Georgia

3. Garamond

Popular Sans Serif Fonts

• Arial

• Helvetica

• Futura

Tracking

• Refers to the adjustment of space between characters in a block of text.

• Designers user tracking to alter the overall spacing uniformly, which affects the density and readability of the text as a whole.

• Adjusts the amount of space between the letters of an entire word in equal increments.

Kerning

• Is the spacing between individual letters or characters.

• Unlike tracking, which adjusts the amount of space between the letters of an entire word in equal increments, it is focused on how type looks — creating readable text that’s visually pleasing.

Leading

• The distance between two baselines of lines of type.

• The word originated from the strips of lead hand-typesetters used to use to space out lines of text evenly.

• The word __ has stuck, but essentially it’s a typographer’s term for line spacing.

Brand Board

• Serves as a concise, visual reference guide for a brand’s core visual elements, ensuring consistency across all marketing materials.

Color Theory

• It is the study of how colors work together and how they affect our emotions and perceptions.

• It’s like a toolbox for artists, designers, and creators to help them choose the right colors for their projects.

• It enables you to pick colors that go well together and convey the right mood or message in your work.

Isaac Newton

• He established color theory when he invented the color wheel in 1666.

• He understood colors as human perceptions — not absolute qualities — of wavelengths of light. By systematically categorizing colors, he defined there groups.

  • Primary (red, blue, yellow)

  • Secondary (mixed of primary colors)

  • Tertiary (or intermediate — mixes of primary and secondary colors)

Hue

• Is the attribute of color that distinguishes it as red, blue, green or any other specific color on the color wheel.

Value

• Represents a color’s relative lightness or darkness or grayscale and its crucial for creating contrast and depth in visual art.

Saturation

• Also known as chroma or intensity.

• refers to the purity and vividness of a color, ranging from fully saturated (vibrant) to desaturated (grayed).

Color Scheme

• In screen design, designers use the additive color model, where red, green and blue are the primary colors.

• Just as you need to place images and other elements in visual design strategically, your color choices should optimize your user’s experience in attractive interfaces with high usability.

3 Main Color Schemes

• Monochromatic

• Analogous

• Complementary

Monochromatic

• Take one hue and create other elements from different shades and tints of it.

Analogous

• Use three colors located beside one another on the color wheel (e.g., orange, yellow-orange and yellow to show sunlight). A variant is to mix white with these to form a “high-key” analogous color scheme (e.g., flames).

Complementary

• Use “opposite color” pairs to maximize contrast.

• Ex. blue & yellow

Split-Complementary (Compound Harmony)

• Add colors from either side of your complementary color pair to soften the contrast.

Triadic

• Take three equally distant colors on the color wheel (i.e., 120° apart: e.g., red/blue/yellow). These colors may not be vibrant, but the scheme can be as it maintains harmony and high contrast. It’s easier to make visually appealing designs with this scheme than with a complementary scheme.

Tetradic

• Take four colors that are two sets of complementary pairs (e.g., orange/yellow/blue/violet) and choose one dominant color. This allows rich, interesting designs. However, watch the balance between warm and cool colors.

Square

• A variant of tetradic; you find four colors evenly spaced on the color wheel (i.e., 90° apart). Unlike tetradic, it can work well if you use all four colors evenly.

Computer Animation

• Is a visual digital display technology that processes the moving images on screen.

• On simple words, it can be put or defined as the art or power of giving life, energy and emotions etc. to any non-living or inanimate object via computers.

• It can be represented in form of any video or movie.

• It has the ability to make any dead image alive.

• The key/main concept behind it is to play the defined images at a faster rate to fool the viewer so that the viewer should interpret those images as a continuous motion of images.

• Is a sub-part or say small part of computer graphics and animation. Nowadays, animation can be seen in many area around us.

• It is used in a lot of movies, films and games, education, e-commerce, computer art, training etc. It is a big part of entertainment area as most of the sets and background is all build up through VFX and animation.

Applications of Computer Animation

• Demonstration

• Advertisement and Marketing

• Cartoon

• Games, Films and Entertainment

• Architecture

• Education

Methods/Techniques

1. Frame by Frame (Traditional Method)

2. Procedural

3. Behavioral

4. Key Framing

5. Motion Capture

6. Dynamics

7. Stop Motion Animation

Frame by Frame

• Traditional Method

• Animation was done by hands because of the absence of the computer-aided drawing facilities. And these traditional method required a lot of effort for even making a short video because of the fact that every second of animation requires 24 frames to process.

Procedural

• Set of rules are used to animate the objects.

• Animator defines or specify the initial rules and procedure to process and later runs simulations.

• Many of the times rules or procedure are based on real word physical rule which are shown by mathematical equations.

Behavioral

• To a certain extent the character or object specifies/determines its own actions which helps/allows the character to improve later, and in turn, it frees the animator in determining each and every details of the character’s motion.

Key Framing

• Is a frame where we define changes in an animation.

• A storyboard requirement is must as the animator/artist draws the major frames (frames in which major/important changes can be made later) of animation from it.

• Character’s or object’s key position are the must and need to be defined by the animator, because the missing frames are filled in those key position via computer automatically.

Motion Capture

• Uses the live action/motion footage of a living human character which is recorded to the computer via video cameras and markers and later, that action or motion is used/applied to animated the character which gives the real human character has been animated.

• Is quite famous among the animators because of the fact that the human action or motion can be captured with relative ease.

Dynamics

• Simulations are used in order to produce a quite different sequence while maintaining the physical reality.

• Physic’s laws are used in simulations to create the motion of pictures/characters.

• High level of interactivity can be achieved in this method, via the use of real-time simulations, where a real person performs the action or motions of a simulation character.

Stop Motion Animation

• Is an animated film making technique in which objects are physically manipulated between individually photographed frames so that they will appear to exhibit independent motion or change when the series of frames is played back.

12 Principles of Animation

1. Squash and Stretch

2. Anticipation

3. Staging

4. Straight Ahead Action and Pose to Pose

5. Follow Through and Overlapping Action

6. Slow in and Slow Out

7. Arcs

8. Secondary Action

9. Timing

10. Exaggeration Animation

11. Solid Drawing

12. Appeal

Squash and Stretch

• Is used by animators to convey an object’s weight, flexibility, and hardness.

• Ex. When there is an animation of an object falling, it gets flattened when it touches the ground and stretches out to maintain its volume. This shows that the object is flexible.

Anticipation

• In animation prepares the audience for what will happen next. It involves a small movement or action that precedes a larger one.

• For instance, before a character jumps, they will often squat momentarily. This squatting motion is an example of anticipation in animation, as it signals to the audience that a jump is coming up.

Staging

• Involves arranging characters, props, background, and camera perspective.

• You might have noticed that in animation, a scene unfolds in a sequence and not all at once. This directs the viewer’s focus on one thing at a time.

Straight Ahead Action and Pose to Pose

• It involves drawing an action frame by frame, creating a smooth flow of movement. This method requires starting with a drawing and then proceeding to draw sequentially, most of the time not knowing the last frame.

• However, this approach is time-consuming as it requires many frames to be drawn for a single action.

Follow Through and Overlapping Action

• Are two important techniques used in animation to create realistic and fluid motion. These techniques involve parts of the character in motion even after the character has stopped.

Slow in and Slow out

• In the practical world, objects take time to gain speed. They don’t change their speed from 0 to 100 instantly.

• So, to create a more realistic effect, animators make the motion of characters start and end slowly with faster movement in between. This change in speed makes the movement more lifelike.

• To achieve this effect, animators draw more frames near the action’s beginning and end to create the impression of slow movement. They draw fewer frames in between to highlight speed.

Arcs

• Many natural movements follow curved paths, rather than straight lines.

• In animation it helps create more fluid and realistic movements. 

Secondary Action

• Enhances the main action and provides more detail to the primary action. These secondary actions can be used to create a character’s personality trait or to depict the character’s emotions.

• For example, let’s say a character is eating a burger. This is the main action. But when they raise their eyebrows after the first bite, that is a secondary action that adds more detail to the scene. It shows that the character is surprised by the taste.

Timing

• Refers to the speed of the scene, which is the determined by the number of frames used.

• If more frames are used, the scene will appear to be slower.

• On the other hand, fewer frames will make the scene look quicker.

Exaggeration Animation

• Is used to create a dramatic effect and enhance the storytelling. This technique is applied to actions, expressions, and even poses to make them more impactful.

• By exaggerating certain elements, animators can also add a comical effect to the animation. For example, extreme facial expressions after a character accidentally walks into a pole make the scene hilarious.

Solid Drawing

• Is an essential technique in the animation industry. It involves giving characters weight and volume by drawing them in a proper shape as they would appear in a 3-dimensional space.

• To achieve this, animators draw the character in several poses and angles, ensuring that the proportions remain consistent throughout the scenes.

Appeal

• Creating an appealing character is crucial to make it memorable and exciting to the audience. The term ____ doesn’t only refer to physical attractiveness but also to the character’s intriguing and charming traits.

• It is necessary for all characters that are vital to the video or movie. It is not just limited to heroes, as even villains deserve a strong appeal to add weight to their character.