Web Type Syllabus 2021
Course Information
- WEB TYPE (RISD GRAPH-2313-01), Spring 2021
- 3 credits
- Marie Otsuka (motsuka@risd.edu)
- Class Meetings: Thursdays, 1:10pm–6:10pm
- Office Hours: Tuesdays 10:30am–12:00pm at the Design Office (204 Westminster St.)
Course Description
This course explores typography within the browser, considering the web as a medium. We will design an develop typography that activates the capacities and conditions of websites. Projects will respond to our local browser conditions and different device environments, then expand to working with the remote network as source material. Critique and discussions will examine how publishing on the internet entails a distinct form of engagement and experience. Technical instruction includes basic web languages such as HTML, CSS, and JavaScript, as well as type design technology such as variable fonts. Background in coding is recommended but not required.
This course is purposely named with shortened, less precise versions the words “web” and “type” to broaden our perspective on our explorations.
Web could refer to websites, but also to the web infrastructure, to the technology and culture of the world wide web; the protocols that compose the fabric of our internet; the act of weaving a web.
Type could refer to typography — the arrangement of letterforms — but also typefaces themselves, the quality of letterforms; or to type, the act of typing, or writing, or coding.
Both are fundamental for communication: one a medium for its distribution, the other its foundational visual form. As designers, it is essential that we can critically create work that thrives at their intersection.
Course Objectives and Learning Outcomes
Web
- produce working prototypes of web pages with a working knowledge of HTML, CSS and Javascript/Jquery
- critically respond to material within the internet landscape, discussing the web as a very specific public space, with its own communities, forms of engagement, modes of communication
- learn how to problem-solve technical questions
Type
- use the browser as a platform for typographic expression and experimentation
- understand the technology involved in exercising typographic control on the web
- consider how a typographic system adapts to different devices and platforms and to user interaction
- develop a sensitivity towards typographic detail within the browser, and identify interesting examples of browser-based typographic media
Prerequisites
- basic understanding of typography
- a willingness to explore the web in all its many forms, uses, and aesthetics
- a curiosity for technical tools and the contextual infrastructure around design
- a tenacious spirit for trial & error
Material Requirements
- A laptop
- Software
- Github account or personal hosting space
- A text editor for coding such as Sublime Text, Atom, Visual Studio Code
- A Slack account
Course Structure
Projects
- We will have 4 projects over the course of the semester.
- Project 1: Semantic Markup — on aligning form / content with code when creating typographic web layouts
- Project 2: Variable Font — on designing a variable typeface, using variation as a conceptual medium
- Project 3: Type Specimen — on developing a prototype for the variable typeface activated by the browser
- Project 4: Editorial Design — on building a robust identity system and publication platform that incorporates typographic nuance for the web
Exercises
Technical exercises, both in and outside of class, will strengthen our coding skills to build robust web pages and enhance our expressive capacity on the web.
Critiques
During our crits, we will review your project based on the evaluation criteria outlined below. Projects should be live and working on the web with no missing assets — you should try accessing the URL from a different computer / device prior to the class. Be prepared to describe your design process. While we can raise technical questions here, critique time should not be used for troubleshooting; these should be addressed prior to the crit either by consulting your classmates or via office hours.
Readings
Readings will be dispersed throughout the semester to inform and contextualize our work with each project. Be prepared to respond, raise questions, and discuss the text during class.
Discussion
In addition to reading discussions and class critiques, we will have a weekly show & tell to share an interesting website or two we’ve each come across over the past week.
Each student is also responsible for preparing a presentation on a designer / artist using the browser as an expressive medium. View this list to start.
Course Schedule
Week 1: Hello World
Discussion | Crit | Lecture | Assignment | Reading | Exercises |
---|---|---|---|---|---|
Introductions / Overview of syllabus, class website, resources | HTML and CSS Basics / Coding environment setup | Project 1 | Laurel Schwulst: My website is a shifting house next to a river of knowledge. What could yours be? / Frank Chimero: the Web’s Grain | Shay Howe: HTML & CSS / Codecademy Learn HTML / Codecademy Learn CSS |
Week 2: Responsive typography
Discussion | Crit | Lecture | Assignment | Reading | Exercises |
---|---|---|---|---|---|
Student Presentations / Show & Tell / Reading | Project 1 progress, small groups | Layout and structure / Responsive typography / Print “markup” exercise | Complete Project 1 | Loretta Staples: Typography & the Screen / Nick Sherman: Variable Fonts for Responsive Design | Learn Layout / Flexbox Froggy / CSS Grid |
Week 3: Axes of variation
Discussion | Crit | Lecture | Assignment | Reading | Exercises |
---|---|---|---|---|---|
Student Presentations / Show & Tell | Project 1 final crit | Demo: Glyphs and type design basics / Introducing variable fonts | Project 2 | Typotheque: Typeface as Programme / Christoph Knoth: Computed Type Design | Glyphs: Creating a Variable Font, Review A Variable Fonts Primer |
Week 4: Medium as message
Discussion | Crit | Lecture | Assignment | Reading | Exercises |
---|---|---|---|---|---|
Student Presentations / Reading | Project 2 progress, individual meetings | Change over time (CSS transitions & animations) / Introduction to JavaScript & jQuery | Finalize Project 2, begin Project 3 | Keller Easterling: Medium Design (Excerpt) / Mindy Seu: The Poetry of Tools | Codecademy JavaScript / Codecademy jQuery / Eloquent Javascript |
Week 5: Dynamic type
Discussion | Crit | Lecture | Assignment | Reading | Exercises |
---|---|---|---|---|---|
Student Presentations / Reading | Project 2 final & Project 3 progress, small group meetings | Demo: jQuery and JSON | Complete Project 3 | Weiyi Li: Function as Narrative / Alexander Galloway: Jodi’s Infrastructure | Continue Codecademy JavaScript / Codecademy jQuery / Eloquent Javascript |
Week 6: Web publishing
Discussion | Crit | Lecture | Assignment | Reading | Exercises |
---|---|---|---|---|---|
Student Presentations / Show & Tell | Project 3 final crit | Editorial design on the web | Project 4 | Robin Rendle: A New Web Typography / Paul Soulellis: Publishing as practice as resistance | CMS Prototype |
Spring Break
Week 7: Structure and Systems
Discussion | Crit | Lecture | Assignment | Reading | Exercises |
---|---|---|---|---|---|
Student Presentations / Reading | Project 4 progress, individual meetings | Demo: Content Management Systems | Continue Project 4 | Dan Michaelson as interviewed by Jeff Balkin: Sometimes it looks like a duck, sometimes it looks like a rabbit | Continue CMS Exercise |
Week 8: Public Process
Discussion | Crit | Lecture | Assignment | Reading | Exercises |
---|---|---|---|---|---|
Student Presentations / Show & Tell / Reading | Project 4 progress, small groups | Web & sustainability | Continue Project 4 | Interview: Luna Maurer on being a designer | Continue CMS Exercise |
Week 9: Words and the Server
Discussion | Crit | Lecture | Assignment | Reading | Exercises |
---|---|---|---|---|---|
Student Presentations / Show & Tell | Project 4 progress, small groups | Demo: Deploying and maintaining websites / Technical Review | Continue Project 4 | Metahaven: Captives of the Cloud | API Playground |
Week 10: Poetic Computation
Discussion | Crit | Lecture | Assignment | Reading | Exercises |
---|---|---|---|---|---|
Student Presentations / Show & Tell / Reading | Project 4 progress, small groups | Creative Coding / Technical Review | Complete Project 4 | Annalee Newitz: A Better Internet Is Waiting for Us | Continue API Playground |
Week 11: Review
Discussion | Crit | Lecture | Assignment | Reading | Exercises |
---|---|---|---|---|---|
Student Presentations / Show & Tell / Review class documentation requirements | Project 4 final with Guest Critic | Technical Review | Compile Documentation |
Week 12: A Better Internet
Discussion | Crit | Lecture | Assignment | Reading | Exercises |
---|---|---|---|---|---|
Submit work and documentation / Setup online gallery / Class wrap up, submit reviews | Collection final | TBD | Update final documentation and refine projects per feedback |
Week 13: Reading Period (no class)
Discussion | Crit | Lecture | Assignment | Reading | Exercises |
---|---|---|---|---|---|
Due: any updates to final work and documentation, submitted via index website |
Policies
Attendance
You are expected attend every class, on time and prepared. If you must miss a class, please notify me as soon as possible. If you miss a class, you are responsible to make up for any missed material by working with classmates and/or attending office hours. Three or more absences will result in a failing grade. Three arrivals later than 15 minutes is equivalent to an absence. and are responsible for making up any missed assignments by the next class. See also: RISD’s Attendance Policy
Grading
- 70% Execution of projects and supporting exercises
- 20% Participation in critiques, class discussions, readings, and shares
- 10% Student presentation
Evaluation Critera
Grade | Description |
---|---|
A |
|
B |
|
C |
|
D |
|
F / No Credit |
|
All projects are not necessarily final on the designated crit day; it can be redone or improved until the end of the semester, when you submit all of your final work. Such improvements in the final documentation will be considered for the evaluation.
Classroom Etiquette
Please put away your cell phones while you are in the classroom, and actively engage in the classroom. Projects must be uploaded with a live url (with no missing fonts or images) before the start of class.
Diversity
It’s important to me that students from all diverse backgrounds and perspectives are well-served by this course, that your learning needs are addressed both in and out of class, and that the diversity students bring to this class are viewed as a resource, strength, and benefit. I will strive to present materials and activities that challenge accepted canons and are respectful and representative of diversity: gender, sexual orientation, disability, age, socioeconomic status, ethnicity, race, culture, perspective, and other background characteristics. Your suggestions about how to improve the value of diversity in this course are always encouraged and appreciated. Please let me know how I might improve the effectiveness of the course for you, or for other students or student groups. See also: RISD’s non-discrimination policies on titleix.risd.edu
Learning needs
RISD is committed to providing equal opportunities for all students. If you are a student with a disability or condition that may require accommodations to complete the requirements of this class, I encourage you to discuss your learning needs with me during the first week of the term. Once an approval letter from the Office of Disability Support Services is submitted, accommodations will be provided as needed. For more information on how to receive accommodations, please contact Disability Support Services at 401 709-8460 or by emailing disabilitysupportservices@risd.edu.
Code of Conduct
All work is built upon other work; whether explicitly or not. You will find that a lot of the technical problems you come across have already been solved online, and learning code is a process that involves learning from these solutions. However, you will also find that in order to apply these to build original work, you will need to apply your own thinking and logic to properly incorporate it and make it work. Use of standard functions and common features are often acceptable to re-use; appropriating entire websites and their functionality are not.
Throughout the class, you will experience a range of opportunities to be inspired and influenced by other designers, artists, engineers, or other online sources. While plagiarism with the goal of deception will not be tolerated, it is normal to explore the work of others in new and original ways, and to express that influence through a variety of techniques — including homage, parody, style, derivation, and appropriation. As a general rule of thumb, if you see something you are excited about (in class or outside), understand the context in which it was made. What was the design responding to, communicating, and to whom. A deeper understanding of other people’s work generally produces additional ideas. We expect all GD students and faculty to maintain an open perspective towards these concepts, and to use this class as a safe testing ground for exploring influence, with the guidance of faculty. See also: John Caserta’s It’s probably not plagiarism, RISD’s Academic Code of Conduct