• Typography & Interaction

    ’25–26

  • The Syllabus

    Typography & Interaction

    Fall ’25

    Spring ’26

    The New School, Parsons, MPS CD

    PMCD 5001, CRN 4253/​9023

    PMCD 5002, CRN 3992/​9589

    65 West 11th Street, Room 464

    Fridays, 9–11:40am

    • Michael Fehrenbach mfehrenbach@newschool.edu

    • Rijk van Zanten vanzr998@newschool.edu

    • Eric Li lie@newschool.edu

    Course Description

    #

    Typography & Interaction is a year-long course, divided into two classes, which will provide a rigorous foundation of typographic and interaction principles in the context of digital design. Over both classes, students will acquire and hone the skills they need for success in the field of interactive design.

    Fall

    #

    This first semester will focus on a mastery of type and layout concepts on the web.

    Typography is the infrastructure of communication in nearly any visual medium. It provides the very first shape and form to written content, and as designers, it is our responsibility to do this with intention and care. Whether towards goals of expression itself or in the service of ideas, the designer must understand type to use it successfully. In this way, we are stewards of meaning.

    • Submitted Version
    • Course Catalog

    Digital design, the web in particular, is inextricably linked with typography⁠—from the very letters of code at its base to the words in arrangement we see on a screen. Type, thus, is the scaffolding in which all interaction design first rises. The very shape of the web, in its layouts, grid systems, and patterns⁠—and its various technologies⁠—all exist in the service of type, at their root. They provide the tools with which we can breathe a form and different, digital life into that meaning.

    In this class, students will learn intermediate and advanced methods in typography and layout as they concern interactive design. We will use web technologies as the lens to examine this subject⁠—introducing the foundational, front-end languages of HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) to achieve our designs. Students will understand the specific challenges of type in this medium, but also how it offers unique and particular forms to us as designers. They will learn the common tools and paradigms with which we practice, while developing their own visual, design vocabulary and critical understanding.

    Spring

    #

    Our second semester will build on the type and layout foundations from the first, moving into interface design and interactive experiences on the web.

    Interaction, interactive, interface, product, UI, UX designers⁠—we are known by many names. These are all monikers for a digitally-native design practice. It is our responsibility, as practitioners in this increasingly consequential and broadening field, to both understand existing paradigms and help manifest, refine, and sustain purposeful new ones.

    • Submitted Version
    • Course Catalog

    Contemporary digital design exists in the continuum of the ever-shifting, evolving, and ubiquitous web. Designers today work at many different scales and within many different systems. We act as mediators⁠—not only for users, meaning, and experience⁠—but with these systems themselves, as well. They shape our work and we shape them⁠—at the meeting point, the interface, between things.

    In this class, students will learn to give form to and then work at these intersections. We will again use web technologies as our lens for the subject, building on our foundations in HTML and CSS by incorporating JS (JavaScript)⁠—to give behavior, interaction, and life to our designs. We will survey modern approaches to front-end design and development, as our discipline has as many methodologies as we do names. There is no one way to do this work, nor one thing to do it for⁠—and through our readings, discussions, exercises, and projects, students will understand and then situate themselves and their practice within the larger field.

    Learning Outcomes

    #

    Fall

    #

    By the end of this semester, students will:

    • Demonstrate advanced knowledge of and be able to critically analyze type, form, and interactivity as it applies to screen-based media.

    • Understand how to effectively deploy type hierarchy in layout and grid systems, in responsive, device-agnostic design.

    • Effectively translate these designs into functional websites using HTML, CSS, and other web technologies.

    • Design and prototype work while taking into account the ever-shifting, bespoke challenges of web design.

    • Give, receive, and respond productively to feedback in critiques.

    • Think critically and develop their own, distinct thoughts on the role of digital within the larger canon of design.

    Spring

    #

    By the end of this semester, students will:

    • Thoroughly exercise and extend their typographic, design, and technical web skills developed in the first semester.

    • Learn to use modular, templated HTML components with varied and dynamic external data sources.

    • Understand the CMS (Content Management System) and API (Application Programming Interface) as software archetypes.

    • Be introduced to JavaScript and programming logic, the underlying concepts that make interactivity possible.

    • Gain an awareness of processes, methodologies, approaches, and systems in use in contemporary software development and on the web.

    • Conceptualize a web project with an eye towards its complete implementation⁠—balancing the tradeoffs between design, features, and practical build considerations or limitations.

    • Develop an understanding of how they want to practice as a designer within the larger context of the discipline.

    Course Outline

    #

    The course is structured into thematic units, each bookended by readings on the subject and a project that will demonstrate the material:

    Unit Nº 1: Type and the Web

    #

    Weeks 1–6

    #

    We will focus on reviewing the core principles of typography, and introduce the web and its base technologies. Students will learn about HTML, semantic DOM, basic CSS, as well as type hierarchy and the use of custom typefaces for the web.

    Readings

    #
    • The Principles of the New Typography
      Jan Tschichold, 1928

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

    • Detail in Typography
      Jost Hochuli, 1987

    • The Elements of Typographic Style
      Robert Bringhurst, 1992

    • A Handmade Web
      J.R. Carpenter, 2015

    Project Nº 1: Manuscript

    #

    The unit ends with Project 1, Manuscript, which students will present on October 3.

    Students will choose a seminal design text from readings.design, read and respond to it, and typeset their selection and reply together as a web page. Other texts are also allowed on a case-by-case basis.

    We’ll be looking for the quality of responses, appropriate type selection and hierarchy, semantic HTML, and basic CSS.

    Unit Nº 2: There Is No Perfect Layout

    #

    Weeks 7–10

    #

    Students will learn how to design and implement more complex, flexible layouts, while collaborating closely with a classmate. We’ll introduce responsive design, media query CSS, and advanced web type techniques.

    Readings

    #
    • Investigations on Gestalt Principles
      Max Wertheimer, 1923

    • Continuity and Change
      Max Bill, 1953

    • Grid Systems in Graphic Design
      Josef Müller-Brockmann, 1981

    • The Web’s Grain
      Frank Chimero, 2015

    • The Diminishing Marginal Value of Aesthetics
      Toby Shorin, 2017

    Project Nº 2: Spread

    #

    This unit concludes with Project 2, Spread, which students will present on October 31.

    Students will work in pairs, with the texts they selected in Manuscript. Each duo will sketch collaboratively and then implement a new expression together, via pair programming. The final web page will be responsive for mobile, desktop, and print layouts.

    Here we’re looking for successful design and development collaboration, box-model layout design, and use of responsive media queries.

    Unit Nº 3: Typography as Interface

    #

    Weeks 11–15

    #

    In our final Fall unit, we will focus on creating advanced, multi-page layouts with grid systems, prototyping their flows, and exploring typography’s usage as interface elements for navigating a website.

    Readings

    #
    • Design Interface: How Man and Machine Communicate
      Gianni Barbacetto, 1987

    • A Software Design Manifesto
      Mitchell Kapor, 1990

    • Typeface As Programme
      Jürg Lehni, 2011

    • Interface Writing: Code for Humans
      Nicole Fenton, 2014

    • My website is a shifting house next to a river of knowledge. What could yours be?
      Laurel Schwulst, 2018

    Project Nº 3: Binding

    #

    This unit, and the first semester, will culminate with Project 3, Binding, which will be presented in class on December 5.

    Students will assemble a collection of texts from Spread, combined with their original selection, into a “book.” The book will be a multi-page website with a homepage (cover), navigation (table of contents), individual pages for each text, and an introduction (colophon)⁠—with consistent styles applied across all pages.

    We want to see effective multi-page design and navigation, advanced layouts (flexbox, grid), consistency across the pages and content, and polish/​nuance.

    Unit Nº 4: Interface as Interface

    #

    Weeks 16–21

    #

    We will expand on our first-semester foundations in design, typography, HTML, and CSS⁠—now incorporating images and other media while introducing JavaScript to enliven our work. Students will be introduced to a CMS and will work with an API.

    Readings

    #
    • The Design of Everyday Things
      Don Norman, 1988 (revised 2013)

    • I Am a Handle
      Rob Giampietro, 2012

    • Sometimes It Looks Like a Duck, Sometimes It Looks Like a Rabbit
      Jack Balkin, Dan Michaelson, 2012

    • Laws of UX
      Jon Yablonski, 2018 (ongoing)

    • Folk Interfaces
      Maggie Appleton, 2022

    Project Nº 4: Links

    #

    The unit ends with Project 4, Links, which students will present on February 25.

    Students will collaboratively assemble, connect, and present a collection using Are.na as a platform/​CMS⁠—designing and building an interface to explore and understand it.

    In addition to our previous project requirements, here we’ll be looking for the effective use of images/​media, meaningful interactive interface functionality, and your use of JavaScript.

    Unit Nº 5: If All You Have Is a Hammer, Everything Looks Like a Nail

    #

    Weeks 22–30

    #

    To wrap up the semester (and course), we’ll round out our knowledge of the web’s intricacies⁠—handling user input, managing state, constructing metadata. We will examine how our projects participate in and live elsewhere on the web, and outline real-world processes to make them come together.

    Readings

    #
    • What Is Code?
      Paul Ford, 2015

    • TikTok’s Enshittification
      Cory Doctorow, 2023

    • Chat⁠GPT Is a Blurry JPEG of the Web
      Ted Chiang, 2023

    • The Age of Average
      Alex Murrell, 2023

    • Why A.I. Isn’t Going to Make Art
      Ted Chiang, 2024

     

    • Human Interface Guidelines
      Apple, 1987

    • Macintosh Human Interface Guidelines
      Apple, 1992

    • The Windows Interface Guidelines
      Microsoft, 1995

    • Aqua Human Interface Guidelines
      Apple, 2001

    • iPhone Human Interface Guidelines
      Apple, 2008

    • Windows Phone 7 UI Design and Interaction Guide
      Microsoft, 2010

    • Material Design 1
      Google, 2014

    • i⁠OS Human Interface Guidelines
      Apple, 2014

     

    • Material Design 3
      Google, 2021 (ongoing)

    • Human Interface Guidelines
      Apple, 2022 (ongoing)

    • Fluent 2 Design System
      Microsoft, 2023 (ongoing)

    Project Nº 5: Functions

    #

    This unit, and the course, will culminate with Project 5, Functions, which will be presented in class on April 22.

    Students will identify a problem and conceptualize how to solve it on the web. They will plan, design, and implement a novel solution towards this problem⁠—incorporating data and interaction with the tools, technologies, and techniques they’ve learned in this course.

    We’ll first be looking for strong concepts⁠—not limited to or by existing conventions⁠—that push the grain of interaction design in new and interesting directions. And as the capstone for this course, we’re expecting the highest level of nuance and polish in the organizational, aesthetic, and technical aspects of these final projects.

    Evaluation Criteria

    #

    Engagement

    #

    Students are expected to actively and passionately participate in this course. This means more than showing up and turning things in on time⁠—which should be a given. Beyond that baseline students should be curious, prepared, thoughtful, vocal, and intentional throughout the course. They should make us understand why they are here, and demonstrate to us that they care about themselves, their work, and each other⁠—and ultimately, about this chosen profession.

    This engagement will be unavoidably reflected in the quality of students’ work⁠—but we also evaluate this discretely based on their participation in and out of the classroom, with us and with their peers.

    Reading Responses

    #

    Each unit begins with a set of readings to introduce the subject. Students are expected to read the required selections and synthesize their thoughts in a written response, prior to the next class. We are not looking for summarization, here⁠—these should be personal reflections on the subjects, and are evaluated with this lens. We will then discuss these readings as a group.

    Quizzes, Exercises, Milestones

    #

    Each unit will also have short quizzes on topic material, and specific, technical exercises and milestones that are assigned towards completion of the projects. Quizzes will occur in the class following new material; assignments are expected to be completed outside of class, before the next session. Some of these will be small; some of these will be large. They are all evaluated for completion and quality.

    Projects

    #

    The bulk of the work for this class takes the form of projects. They are intended as opportunities for students to demonstrate the knowledge and skills learned in class while developing their own practice, and are evaluated in this light.

    There will be check-ins and reviews around each of these before the final due dates, when we will have critiques as a group. In addition to the quality of the project itself, students will be subject to an in-person code review and will also be assessed on the presentation of their work. More specific evaluation criteria will be delineated with each project’s introduction.

    Grade Calculation

    #

    Fall

    #
    Engagement 20%
    Reading Responses 10%
    Quizzes, Exercises, Milestones 10%
    Project Nº 1: Manuscript 10%
    Project Nº 2: Spread 20%
    Project Nº 3: Binding 30%

    Spring

    #
    Engagement 20%
    Reading Responses 10%
    Quizzes, Exercises, Milestones 10%
    Project Nº 4: Links 20%
    Project Nº 5: Functions 40%

    Materials and Supplies

    #

    In the open tradition of the early web, the only materials truly required are a computer, a browser, a text editor, and an internet connection. The specifics of these are open to the student’s individual preferences and practices. We will do our best to accommodate everyone and will make recommendations, when needed.

    In class, we will demonstrate using Figma for visual design and sketching, Visual Studio Code for programming, and GitHub/​GitHub Desktop for version control and project hosting. All of these products are available for free, or offer free education licenses with New School emails.

    We will use the following tools to organize our class:

    • Course Site
      For housekeeping, agendas, and lectures (you are here)

    • Submission Form
      For submitting your work/​URL⁠s

    • Slack Channel
      For direct and asynchronous communication (not email)

    • Figma Team
      For visual sketching, sharing

    • GitHub Organization
      For code examples, sharing

    • Google Drive
      For document collaboration, recorded lectures

    • Zoom Room
      For screen sharing and recording

    Class Policies

    #

    Our Community

    #

    This agreement is intended to help us create and maintain a safe, empathetic, and productive space for our course. It is built on trust and accumulated experience across cohorts. It can be revised and modified, with all of our input, over the year:

    • Classmates should use our preferred names and pronouns.

    • We will have a short break, roughly halfway through the class.

    • The class should feel comfortable asking the instructors anything⁠—nothing is too trivial, or embarrassing, or off-topic. Tangents are good! Students can always ask us via Slack, if they would like to remain anonymous.

    • When presenting, students will “have the floor” while they take us through their work. This means everyone else will be quiet, we’ll close our laptops/​turn off our phones, and give our full attention to the person showing their work.

    • Likewise for when the instructors are presenting new material⁠—no laptops, no phones. If students require either for assisting their learning, they must request approval beforehand. Our default setting should be “full attention, up front.”

    • We will all engage meaningfully with presented work and try to give constructive feedback (no fluff).

    • For Fall semester, we’re not going to use LLM agents/​autocomplete (“artificial intelligence”), nor traditional copy/​pasting, nor any other tools where we do not write our own code. We will talk through appropriate, allowed use of these technologies in the Spring.

    • We will always attribute our work when referencing others, tools, or examples.

    This is a living document!

    We can (and should) revisit this agreement throughout the year. Please let us know if you’d like to raise something with the class.

    Inclusion

    #

    Our intent is to respect and give forum to a range of perspectives and backgrounds, including culture, race, gender, sexual orientation, socioeconomic status, disability, and age. In instances where we are personally not qualified to speak from a specific perspective, students are encouraged to explore this area themselves. And please let us know if there are ways that the course can better serve these goals.

    Office Hours

    #

    We will have limited availability outside of our class time, and won’t keep scheduled “office hours.” Students should not expect us to immediately solve specific design or technical problems, or have their progress be blocked by this. Their first resource should be themselves, then our course site and its materials, and then each other.

    That said: if there are still questions⁠—particularly logistical or content ones⁠—students can message us on Slack, and we will respond when we can. But again this should never be a bottleneck; all of this works better when not done at the last minute.

    Additional Technical Help

    #

    For more specific technical instruction and questions, Parsons has dedicated CD-program tutors available to help students with HTML, CSS, and JavaScript⁠—as well as offering general design critiques and feedback. They should be available midway through Fall semester, and usually have drop-in schedules. More info will be provided as available.

    The University Learning Center also offers its own tutoring sessions; these are by-appointment.

    As tutors are only available a limited number of hours per week, it is advisable to start early on your projects and seek help along the way⁠—to avoid the usual end of project/​semester rush for additional help.

    Code Plagiarism

    #

    Students may find code similar to our exercises or projects elsewhere online. But the copying or adapting of any code beyond our provided course material (lectures, exercises, demos), without attribution, is not allowed under any circumstances. This includes from LLMs, more below.

    If adapting, with attribution, students must explain the usage and demonstrate an understanding of how the code works. We will have in-person code reviews to facilitate and guage this understanding.

    We have zero tolerance for any sort of plagiarism⁠—which ranges from “verbatim copying” (copying-and-pasting) to “thorough paraphrasing” (changing names or rearranging) and “autocompleting” (with LLM-assisted editors). Students should also review the Academic Integrity Policy.

    External Resources Subject to Attribution

    We are not saying you can’t learn from and incorporate other resources. We do, all the time!

    If you make use of other tools, we should see code comments that explain why you used them, what you referenced, and your overall understanding of how it works.

    An example:

    				/* I wanted to treat large grids differently in my design! */
    /* I found this tool: https://css-tip.com/quantity-queries/ */
    /* The selector matches when the container has a sixth child. */
    .container:has(> :nth-child(6)) {
    	background-color: gold;
    }
    
    			

    Management thanks you for your cooperation

    Copying, pasting, or autocompleting code in the absence of an attribution and explanation is plagiarism.

    LLMs and “Artificial Intelligence”

    #

    Relatedly, there has been much discussion and developments in our field (and others) around large language models, a.k.a. “artificial intelligence.”

    Here’s what we’re going to say about this: tools like the conspicuous Chat⁠GPT, Cursor’s IDE, or GitHub Copilot are known to often generate wrong or unnecessarily verbose code. This, combined with the fact that their results are derived from copyrighted and/​or legally questionable sources⁠—usually without permission or attribution⁠—means the use of these tools continues to be fraught, at best.

    We think you first need to write code yourself to understand the medium. Copying/​adapting from Chat⁠GPT/​Copilot is no different from anywhere else (see above) and is ultimately a disservice to your education. These are always to be treated like any other tools at our disposal⁠—as aides to your understanding, not shortcuts around learning. We think you know the difference.

    Recording Sessions

    #

    We will take recordings of our sessions for students to reference later. As these will include the students and their work, the recordings will be stored on our Google Drive and made available only to New School email users.

    Attendance, Grading, and Other Policies

    #

    All CD classes adhere to the same common program and university policies.

    Acknowledgments

    #

    We’d like to thank Brendan Griffiths, Lynn Kiang, Andrew LeClair, and the extended MPS CD family for their support in the planning and running of this course. And thank you, for reading this far.

  • 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

    • 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”