• Typography & Interaction

    ’25–26

  • The Syllabus

  • Our Class

    • Unit Nº 1: “Type and the Web”

      Wks. 1–6

    • Week Nº 1

      Aug. 29

    • Everything Is a “Web Page”

    • Week Nº 2

      Sep. 5

      Session Recording

      #

      Reading Discussion

      #

      We’ll discuss our two readings from last week, to help set the tone for our first unit, Type and the Web:

      • The Crystal Goblet, or Printing Should Be Invisible
        Beatrice Warde, 1932

      • A Handmade Web
        J.R. Carpenter, 2015

      • Unit Nº 1: Reading Responses

      Further Reading

      #

      Throughout this first unit, you are also expected to take a look at these additional readings at your own pace. (Some are lengthy! All are good.) While we won’t have an in-class discussion, they are to serve as additional reference and fodder for your project:

      • The Principles of the New Typography
        Jan Tschichold, 1928

      • Detail in Typography
        Jost Hochuli, 1987

      • The Elements of Typographic Style
        Robert Bringhurst, 1992

      Our First Project

      #

      Alright, let’s discuss the project and its requirements in detail:

      Project Nº 1: Manuscript

      Right, Typography

      #

      We’re going to go through a quick history of typography, and some things to look for as you begin to work with type:

      It’s All About Type

      A Little Figma

      #

      We’ll do a quick walkthrough of Figma (you should have already made accounts). Everybody should join our team, via this invite link:

      Figma Team Invite

      And you can follow along in our design file for today:

      Class Demo

      A quick overview of what we’ll try to get through:

      • Overall organization, naming, following, commenting, quick action, hide UI and presenting

      • How to set up frames (née artboards) and pages (examples)

      • Some basics of type and styles

      • Establishing some hierarchy with title, author, first paragraph

      • Maybe into components, variants, auto-layout-as-flexbox/​grid

      For Next Week

      #
      • Download Visual Studio Code, which we’ll use as our text editor/​IDE for the course. Have this installed on your machine by next class.

      • Also download GitHub Desktop, which we’ll use to manage our code. Sign in there with your GitHub account (which you should have already created). Make sure you have applied for the student benefits!

      • Select your text for Project 1, Manuscript and add it this list:

        Project Nº 1: Reading Selection

        We don’t want any duplicates, so pick your text early!

      • Read your text (or a chapter if it is lengthy⁠—ask if you are unsure) and write a short response. You’ll use these both as the content for your project. Add the link to your document in our form:

        Submission Form

      • You’ll complete the first phase of your project, sketching three different directions for laying out your text and response. Have these ready by class next week! Submit your Figma links for these, as well:

        Submission Form

        Please organize your frames and link us directly to where we need to be.

    • It’s All About Type

    • Week Nº 3

      Sep. 12

    • An Intro to HTML

    • Week Nº 4

      Sep. 19

    • An Intro to CSS

    • Week Nº 5

      Sep. 26

    • The Box Model

    • Project Nº 1: “Manuscript”

      Oct. 3

    • Week Nº 6

      Oct. 3

    • Unit Nº 2: “There Is No Perfect Layout”

      Wks. 7–10

    • Week Nº 7

      Oct. 10

    • Responsive Design

    • Week Nº 8

      Oct. 17

    • Finally, Flexbox and (CSS) Grid

    • DevTools (Web Inspector)

    • Week Nº 9

      Oct. 24

    • Some Additional, Advanced CSS

    • Project Nº 2: “Spread”

      Oct. 31

    • Week Nº 10

      Oct. 31

    • Unit Nº 3: “Typography as Interface”

      Wks. 11–15

    • Week Nº 11

      Nov. 7

    • Working with Images

    • Week Nº 12

      Nov. 14

    • Week Nº 13

      Nov. 21

    • Project Nº 3: “Binding”

      Dec. 5

    • Week Nº 14

      Dec. 5

    • Week Nº 15

      Dec. 12

    • Unit Nº 4: “Interface as Interface”

      Wks. 16–21

    • Week Nº 16

      Jan. 21

    • Week Nº 17

      Jan. 28

    • An Intro to JavaScript

    • Week Nº 18

      Feb. 4

    • Some More JavaScript

    • Week Nº 19

      Feb. 11

    • Week Nº 20

      Feb. 18

    • Project Nº 4: “Links”

      Feb. 25

    • Week Nº 21

      Feb. 25

    • Unit Nº 5: “If All You Have Is a Hammer, Everything Looks like a Nail”

      Wks. 22–30

    • Week Nº 22

      Mar. 4

    • Putting a (Link/​Meta) Bow on It

    • Week Nº 23

      Mar. 11

    • Week Nº 24

      Mar. 25

    • Week Nº 25

      Apr. 1

    • Week Nº 26

      Apr. 8

    • Week Nº 27

      Apr. 15

    • Project Nº 5: “Functions”

      Apr. 22

    • Week Nº 28

      Apr. 22

    • Week Nº 29

      Apr. 29

    • Week Nº 30

      May. 6

    • “Everything Else”