HOW CAN IT BE USED?

Contrasting - Use of serif, sans serif, block or decorative typefaces for effect. Can be dramatic in combination. Contrast can demand attention and challenge conventional presentations of text.

Visual Element - Used as non-alphanumeric character. Used as visual symbol, icon or decorative feature. Can become striking visual element without additional imagery.

Combination - Collage of letterform and block text or imagery. Can be used in combination to reinforce message of visual material, images, etc.

Type Anatomy: A Visual Guide to the Parts of LettersA visual glossary of the parts of type, with visual analogies and explanations, as well as an overview of how type is styled to better suit a purpose.

Learn about type anatomy here ^

LEARN TYPOGRAPHIC CONVENTIONS WITH GAMES!

Kern TypeA game to learn how to kern type

Shape TypeA game to learn how to complete letterform shapes

Practice your type layout aesthetics with Rag Time

tothepoint • I shot the serif

Cheese or font?Can you name the cheeses and fonts?

An increasingly fast paced font name guessing game

The Font Game (level 1) — I Love TypographyName that font. Test your font identifying skills with the classic Font Game. Wind prizes!

Serif Type

Serif typefaces have small decorative strokes at the ends of each character. They convey a sense of tradition and elegance. Within serif typefaces, there is a large range of subcategories.

Old Style: These typefaces, such as Garamond or Caslon, have a classic and readable design, often with bracketed serifs.

Transitional: Examples include Baskerville or Times New Roman. Transitional typefaces feature sharper serifs and greater contrast between thick and thin strokes.

Modern: Typeface examples like Bodoni or Didot fall into this category. Modern typefaces have high contrast, thin hairline serifs, and geometric shapes.

SANS SERIF TYPE

Sans serif typefaces lack serifs, resulting in a clean and modern appearance. They often convey a sense of simplicity and minimalism.

Grotesque: Helvetica & Arial are well-known grotesque typefaces. They have uniform stroke widths and no ornamentation.

Humanist: Typefaces like Frutiger & Verdana fall into this category. Humanist typefaces mimic handwriting with subtle variations in stroke widths.

Geometric: Futura & Avant Garde are geometric typefaces. They have distinct geometric shapes and often convey a sense of modernity.

SCRIPT TYPE FACES

Script typefaces mimic cursive handwriting, adding a touch of elegance and personality to designs.

Formal: Examples include Zapfino & Edwardian Script. Formal scripts have elaborate, swirly letterforms suitable for decorative purposes.

Casual: Typefaces like Brush Script & Pacifico fall into this category. Casual scripts have a more relaxed, handwritten appearance.

DISPLAY TYPEFACES

Also known as decorative or ornamental typefaces, are specifically designed to grab attention and make a visual impact. These typefaces are typically used at larger sizes and in headlines, logos, posters, or any design element that requires emphasis and a distinctive aesthetic. Unlike text typefaces that prioritize readability, display typefaces focus on creating a unique and memorable visual presence.

Display typefaces come in a wide range of styles, from elegant and sophisticated to bold and playful. They often feature exaggerated letterforms, intricate details, decorative elements, or unconventional shapes. The purpose of display typefaces is to evoke a specific mood, evoke a particular time period or cultural reference, or convey a brand's personality.

Designers often choose display typefaces based on their compatibility with the overall design concept and target audience. They carefully consider factors such as legibility, visual impact, appropriateness, and the intended emotional response. It's important to use display typefaces sparingly and in moderation to avoid overwhelming the design or compromising readability. When used effectively, display typefaces can elevate the visual appeal of a design and create a strong and memorable impression.

THE ANATOMY OF TYPE

Typography has specific terms for different parts of a letter or character. Understanding these terms helps in analyzing and designing with type effectively.

Some key terms include:

Baseline: The imaginary line where the characters rest.
Cap Height: The height of uppercase letters from the baseline to the top.
X-Height: The height of lowercase letters, specifically the height of the lowercase x.
Ascender: The part of a character that extends above the x-height.
Descender: The part of a character that extends below the baseline.
Bowl: The rounded part of a character, like in the letter 'o.'
Counter: The enclosed or partially enclosed negative space within a character, like in the letter 'o.'
Stem: The main vertical or diagonal stroke of a letter.
Terminal: The endpoint of a stroke, which can be either curved or flat.
Ligature: A combination of two or more letters joined together as a single character.

USING TYPE EXPRESSIVELY

Visual Hierarchy

Varying type size, weight, and placement to establish a clear visual hierarchy of information.

Emotional Associations

Selecting typefaces that align with the intended mood or emotion of the design. For example, a bold and playful typeface for a children's book cover.

Stylistic Elements

Using effects like shadows, outlines, or distortions to enhance the expressive impact of type.

Compositional Element

Treating type as a design element itself, considering its placement, scale, and interaction with other visual elements.

SPECIFIC TYPEFACES

COOPER BLACK

WINGDINGS

TIMES NEW ROMAN

A game to learn how to kern typetype.method.ac/

Typography design 101: a guide to rules and terms - 99designs

TYPE ACTIVITIES - Find lots of Type activities & tutorials here to practice different techniques

Illustrator - fit type to shape.MP4

Fit type to shape

Tip: Once you've enveloped your text to the shape use Object > Expand to expand your text, then group, before you use the blend tool.

Illustrator - Type. Creating wavy lettering.MP4

Create a wavy lettering effect

Tip: Thin stroke on your linework works best here.

Use menu: Object>Clipping Mask to find the tool

Illustrator - Type Lettering 3D metallic effect.MP4

3D Metallic Effect

Tip: Slow down the video speed in the settings cog to play

Download Free fonts!

Finding Free for Commercial Use Typefaces

It's important for professional designers to know which typefaces in their downloaded collections are free for them to use for client work. For student designers, finding and selecting free for commercial use fonts demonstrates an understanding of the legal and moral obligations of designers.

Finding fonts online to download and install is easy, but is it easy to find commercial-use typefaces? Try these websites to begin your journey.

Fontesk

Fontspace

Google Fonts

The League of Movable Type

Adobe Fonts - Add families to use when you're signed into Adobe

Free Typography

Dafont - Use the search tools to find Public Domain & 100% Free typefaces

The Type Foundry

The Free Fonts Project

Open Source Type Foundry

Badass Librefonts by Womxn

Is it TRULY free to use?

Free & open art & design resources are listed under Creative Commons licences. However, not all Creative Commons licenses are the same. See below to ensure you're using work that is licensed correctly. (Tip, is it CC0?)

What are the 6 types of Creative Commons? What is the difference?

There are a total of six licenses types, the following is a brief description of each type including usage range, this will help you to identify whether the font you download can apply in your projects!

Attribution (BY)

Copy
Adapt or modify
Redistribute (publish, display, publicly perform or communicate the work)
License to others.

Attribution-Noncommercial (BY-NC)

Copy
Adapt or modify
Redistribute ( publish, display, publicly perform or communicate the work )
License to others
Noncommercial usage

Attribution-Share Alike (BY-SA)

Copy
Adapt or modify
Redistribute (publish, display, publicly perform or communicate the work)
License to others on the same terms as the original work

Attribution-No Derivative Works (BY-ND)

Copy
Redistribute ( publish, display, publicly perform or communicate the work ) verbatim copies
License to others

Attribution-Noncommercial-Share Alike (BY-NC-SA)

Copy
Adapt or modify
Redistribute ( publish, display, publicly perform or communicate the work )
License to others on the same terms as the original work
Noncommercial usage

Attribution-Noncommercial-No Derivative Works (BY-NC-ND)

Copy
Redistribute (publish, display, publicly perform or communicate the work) verbatim copies
License to others
Noncommercial usage

What is CC0?

Among those, CC0 (aka CC Zero) is the one that allows creators to give up their copyright and put their works into the worldwide public domain. It allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, with no conditions.

Ultimate Guide to 3D Lettering: How to Give Your Lettering Dimension3D lettering is a technique to create shadows and dimension in your lettering. Learn how to draw 3D letters like a pro in this tutorial.

Create an original logotype through custom font treatmentsWe will show you how to create a unique logotype by modifying an existing font in Adobe Illustrator. Logos come in thousands of variations, shapes, sizes, and styles.

The basics of hand-lettering: a tutorial for beginnersLearn how to create beautiful hand-lettering of your own! This tutorial will teach you the basics of lettering so you can make typography that brings your designs to life.

Dynamic lettering: how to add movement to your letters - 99designsWant to master the art of dynamic lettering? In this tutorial you'll learn how to add movement to your letters.