Building Responsive, and Dynamic Typographic Systems—Even Better with Variable Fonts
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:
- Introduction: what we’ll cover
- Responsive Typography
- Core concepts
- Scale: from breakpoints to calc
- Progressing enhancement and performance
- Font loading techniques
- Failing well: what to do when web fonts go missing
- Differences in @font-face syntax
- Variation axes (registered and custom)
- CSS syntax (planned and current implementations)
- The ‘perfect page’
- Scale, proportion, and responsiveness
- Layering in CSS variables and calculations
- Variable axes and proportional systems
- VF features like Optical Size
- OpenType (OT) features like ligatures, numerals, and kerning
- Paragraph styles
- VF features for headlines (weight, width, ascender/descender height)
- Type as visual element (exaggerated scale and style)
- CSS shapes
- 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
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!