Web Typography

Expand your typographic potential

Overview

This hands-on workshop is intended for designers new to typography in the browser and will cover how to work with fonts on the web. From standard typesetting to experimental techniques, we will learn various ways to work with digital type—ranging from loading a webfont to animating variable fonts. We will approach the browser as a creative medium by developing a single-serve website that demonstrates intentional typography, in both design and functionality. Instruction will cover ways to control visual composition and basic interactivity on the web, using HTML & CSS. Participants will need no prior knowledge of these languages for this workshop but should be prepared to dive into coding.

Design Goals

  • Refine control and expand our range of expression for typography on the screen
  • Establish hierarchy and develop a design system for web typography
  • Control typography and layout through grid structures
  • Understand how to design for multiple viewports and devices

Technical Goals

  • Load and use webfonts effectively, accessing the embedded features in font files
  • Understand semantic markup of HTML and browser styles
  • Control typographic expression and layout on a webpage using CSS
  • Become familiar with tools for animation and interactivity
Structure

This workshop will consist of lectures to cover key concepts, exercises to experiment with those ideas, and an ongoing project to apply your learnings. By the end of the class, you should have a completed typographic webpage published online.

Tools

We will be using the following tools for this class.

  1. A laptop & internet access
  2. Browser. Firefox or Chrome is recommended for their Inspector tools.
  3. A Text Editor. I will be using Sublime Text; VS Code is another option.
  4. A prototyping tool to quickly mockup designs, such as Figma or Adobe programs.
Setup
  1. Join the Slack Channel. We’ll be using this for all class communications.
  2. Create an account on Github.
  3. Download and install Github Desktop.
Troubleshooting

Try to be patient when writing code. So much of programming is debugging; typos are one of the most common errors! If you find yourself stuck, try breaking your issue down into smaller, more manageable parts.

Once you’ve identified those parts, try a search on Google or Stack Overflow for how to solve them, one at a time. These days, ChatGPT might be helpful. That said, be aware that there are many solutions that may not work or are outdated (and ChatGPT will recite a wrong answer with confidence.) While frustrating, these bugs may lead you to discover something new you would not have considered before. If you cannot solve a problem a way you anticipate, try “hacking” it—tackling the issue with the means you currently have.

Use discretion and credit when appropriate when reusing code found from the internet. Information on practical implementation that is available anywhere need not be credited, but exercise caution a specific mechanism or designed funtionality. Is it available for your use? Does it support your design concept?

Schedule
Week 1 September 7
Introduction to HTML and basic CSS

Homework: Make a mockup of your a typographic single-page website in a tool of your choice. Here’s some Some inspiration.

Week 2 September 14
CSS Layout & Typography

Homework: Code your designed webpage using CSS. First begin by marking up the text in HTML. Then add your CSS file: connect your page to the appropriate fonts; typeset your page.

Week 3 September 21
Animation & Interactivity, Responsive Design

Homework: Complete coding your webpage, and try adding @media rules to make the site responsive. Be sure to check your page on your phone!

Week 4 September 28
JavaScript Basics & Variable Font Interaction