← Week 5

wk-5 in-class // typography - your favorite book

DESN 368

wk-5 in-class // typography - 

Week 5 · In-class Exercise

Typography Exercise

Work through this typography tutorial: https://www.learnui.design/tools/typography-tutorial.html

Then choose one these codepens to style

sci fi typography starter HTML

fantasy typography starter HTML

 

Use Typography Properties

Use at least 6 of these CSS properties:

Property What it controls
font-family the typeface
font-size how large the text is
font-weight how bold or light the text is
font-style normal or italic text
line-height space between lines
letter-spacing space between letters
text-transform uppercase/lowercase/capitalization
text-align left, center, or right alignment
color text color
background-color page or section color
margin space outside an element
padding space inside an element

Match the Mood

Your typography should fit the story.

Sci-Fi Mood

Your sci-fi page might feel:

Fantasy Mood

Your fantasy page might feel:

Use type, spacing, and color to create that feeling.

Complete the Typography Analysis

At the bottom of the page, complete the three analysis prompts:

<p>
  I chose this version because:
</p>

<p>
  The feeling I want the typography to create is:
</p>

<p>
  The fonts, sizes, spacing, and hierarchy I chose help the reader because:
</p>

Replace the starter text with your own explanation.

Keep it short. A few sentences is enough.

Submit

Submit:

  1. Your GitHub repository link
  2. Your deployed GitHub Pages link

Requirements Checklist

Before submitting, make sure:

Submit Your Work

Submit your work as: