Vidcode: Design Your Own Typeface

Educator Resources

60 minutes

JavaScript

STUDENTS: START YOUR HOUR OF CODE TUTORIAL HERE

The Activity

With this tutorial, create your own typeface using shapes and elements of typography!

Type has more elements than you may have realized! Students will use shapes to create their own typeface. Circulate to make sure students understand the different arguments used in creating shapes and which properties can be modified using dot notation.

Big Idea: A lot goes into designing a typeface!

  • CCSS.MATH.PRACTICE.MP6 Attend to precision.

    CSTA 1B-AP-09 Create programs that use variables to store and modify data.

    CSTA 1B-AP-11 Decompose (break down) problems into smaller, manageable subproblems to facilitate the program development process.

    CSTA 1B-AP-14 Observe intellectual property rights and give appropriate attribution when creating or remixing programs.

    CSTA 1B-AP-15 Test and debug (identify and fix errors) a program or algorithm to ensure it runs as intended.

Lesson Plan

1 hour:

  • 10 minutes background

  • 35-45 minutes coding

  • 5 minutes sharing

  • 5 minutes reflection

Background (10 minutes)

Type has more elements than you may have realized! So far we have talked about fonts and how they are different styles of text. Fonts are actually just different styles of a typeface. A typeface is a family of fonts that have similar features.

When you have been selecting fonts, you have usually been using the name of a typeface and using the standard font for that typeface.

Designers have names for all the different features of letters to describe how typefaces differ from one another.

  • Serifs are strokes at the end of a line in a letter

design_tech_sphinx.png

  • Cap height is the height of a capital letter.

  • X-height is the normal height of a lowercase letter.

design_tech_fonts.png

  • Baseline is the base on which letters “sit.”

  • Ascenders are features that extend above the cap height.

  • Descenders are features that extend below the baseline.

Code Challenge (35-45 minutes)

Students will use shapes to create their own typeface. Circulate to make sure students understand the different arguments used in creating shapes and which properties can be modified using dot notation.
Sharing (10 minutes)

Be prepared to share what you created and share/explain how it worked. Share your typeface with your classmates. As others share their typefaces with you, analyze the different elements and compare them with the features of your typeface.
Reflection (10 minutes)

  • What things did other students create that you'd like to know how to do?

  • What things did you create that you are proud of figuring out?

  • Describe a context in which your typeface would be the perfect choice. Would it be good for a movie poster or book cover? What kind of movie/book?

  • Describe how the width and spacing affect the feel of the font examples below:

vidcode_pollution.jpg

Sign up to our Hour of Code Newsletter for additional resources and updates!