Skip to main content

Building Responsive, And Dynamic Typographic Systems—Even Better With Variable Fonts

Jason Pamental
On the web
On Twitter

Workshop includes:
  • Snacks and drinks
  • Tea and Coffee
  • Lunch
  • Paper and pen/pencil

This workshop has been cancelled.

Full-day workshop • Monday, April 15
This workshop is intended to provide a brief introduction to the concepts of responsive typography and variable fonts (a new development in type technology).

In this workshop, you’ll learn:

  1. Introduction: what we’ll cover
  2. Responsive Typography
    • Core concepts
    • Scale: from breakpoints to calc
    • Progressing enhancement and performance
  3. Implementing web fonts: the why and how for best performance and UX
    • Font loading techniques
    • Failing well: what to do when web fonts go missing
  4. Basics of Using Variable Fonts (VF)
    • Differences in @font-face syntax
    • Variation axes (registered and custom)
    • CSS syntax (planned and current implementations)
  5. Typography for reading
    • The ‘perfect page’
    • Scale, proportion, and responsiveness
    • Layering in CSS variables and calculations
    • Variable axes and proportional systems
    • Finesse
      • VF features like Optical Size
      • OpenType (OT) features like ligatures, numerals, and kerning
      • Paragraph styles
  6. Editorial typography and art direction
    • VF features for headlines (weight, width, ascender/descender height)
    • Type as visual element (exaggerated scale and style)
    • CSS shapes
  7. Making a book on the web
    • We’ll build on the typographic system and styles from the previous sections and apply it to book text
    • We’ll explore some combinations of CSS techniques to see how we can create a better reading experience on the web
  8. Freeform: discuss some real-world examples
  9. Wrap-up

This workshop is intended for professional front-end designers, developers and everybody else who wants to better understand Dynamic Responsive Typography. You should at least be familiar with some basics of responsive design, HTML5 and CSS.

What hardware/software do you need?

To get the most out of the workshop, you’ll need to bring a laptop with your preferred text editor.

About Jason Pamental

Jason Pamental is a strategist, designer, technologist, and author of ‘Responsive Typography’ from O’Reilly and articles for publications and sites like Typecast,, .Net Magazine among others. Having worked on the web since 1994 in a range of capacities, he’s an overall web & typography nerd who specializes in being a generalist.

Time & Location

This full-day workshop will be hosted at Fort Mason and will take place the day before SmashingConf. The workshop will be running from 9:30 AM to 5:30 PM on Monday, April 15th.

Schedule for Monday, April 15th

9:00 AM – Doors open, Registration
9:30 AM – Introduction & Kick-off
11:00 AM – Coffee Break
1:00 PM – Lunch
2:00 PM – Afternoon Session
3:30 PM – Coffee Break
5:30 PM – The End

Save 100 USD when signing up for the conference and a workshop!

This workshop has been cancelled.