Skip to main content

Building Responsive, and Dynamic Typographic Systems—Even Better with Variable Fonts

Jason Pamental

Full-day workshop • Monday, April 15th
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.

Time & Location

This full-day workshop will be hosted at (link: locations text: Fort Mason) and will take place before the two days of Smashing Conference. The workshop will be running from 9:30am to 5:30pm on Monday, April 15th.

Schedule for Monday, April 15th

9:00 – Doors open, Registration
9:30 – Introduction & Kick-off
11:00 – Coffee Break
13:00 – Lunch
14:00 – Afternoon Session
15:30 – Coffee Break
17:30 – The End, Networking

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

Register for this workshop →

On the web
https://rwt.io/
On Twitter
@jpamental
Workshop Includes
  • Snacks and drinks
  • Tea and Coffee
  • Lunch
  • Paper and pen/pencil