Intro to Web Design

Exercise 3

Twelve Typefaces

Description

Part 1

Browse through some of the typography articles from Figma. Find 6 sans serif and 6 serif typefaces that you are interested in. Make a quick chart that shows the typeface name, category (serif or sans serif), number of weights, if it has an italic, and the designer. Do this on a 1440x1024 (desktop preset frame size). Make sure a majority of the typefaces you choose have at least 4 weights and an italic.

Part 2

Using some of the type from above, create 4 sample typographic hierarchies that each show a headline style (h1), subheadline style (h2 or h3), and body text style (p). You can use Typescale to help with type sizes and 100 Color Combinations to help with color.

Each sample will be on a 1080 by 1080 frame, have some sort of column structure, and all typefaces used must have an italic version and four or more weights. Exception for #3 where each typeface in the family must obey those rules. Each frame will follow the below type selection guidelines:

• Frame 1: Uses 1 sans serif typeface
• Frame 2: Uses 1 serif typeface
• Frame 3: Uses a type family
• Frame 4: Uses 3 total typefaces

Example

Example exercise here.

Requirements

Part 1

• 6 serif and 6 sans serif typefaces
• 1440x1024 frame size
• Lists category, number of weights, italic?, and designer
• Majority have italic and 4 or more weights

Part 2

• 4 1080x1080 frames
• Follows type selection guidelines in part 2 above
• Four colors plus a light grey and a dark grey.

Things to Keep in Mind

• Simple is better
• Spacing and alignment of elements

Objectives

• Continue working in Figma
• Build a type selection basis
• Create typographic hierarchy

Final Submission

• Turned in on time
• All requirements met
• Design link submitted on Canvas
• Linked on your class index