Web Unleashed 2019

2019-09-13 00:00:00 2019-09-15 00:00:00 America/Toronto Web Unleashed 2019 Drive your career to the forefront by learning the latest tools, techniques and technologies in front-end web development. Toronto FITC Toronto

Presentation

Add to My Schedule Remove From Schedule
Workshop: Fluid, Responsive, and Dynamic Typography with Variable Fonts

September 12 2019, 10:00 - 5:00pm Room: Room 3

CSS
Design
Front-End
Intermediate - Advanced
Workshop

Overview

Note: This full-day hands-on workshop will be on Thursday Sept 12 from 10am to 5pm and requires a “WORKS” or “WORKSHOP Only” ticket to attend.

This workshop is intended to provide a brief introduction to the concepts of responsive typography and variable fonts (a new development in type technology). The main areas of focus will be on creating a modern, scalable typographic system to give the best reading experience using modern CSS techniques; implementing variable fonts well for improved user experience and performance; and spending some time on editorial design and user interface enhancements leveraging some of the unique new features enabled in variable fonts. We’ll also look at light/dark mode support and a range of accessibility features that can be enabled and exposed for users to give them more control over their own experience. Finally, we’ll spend some time looking at new developments in variable fonts and what the W3C is working on to make serving fonts even faster (and how those two things will change the web in significant ways).

Objective

Learn how to increase web font performance, improve user experience through better implementation, explore variable fonts, and get to know a whole bunch of new CSS techniques (including CSS Custom Properties, calc(), light/dark modes, and more).

Target Audience

Front-end developers and designers concerned with typography, performance, and user experience.

Assumed Audience Knowledge

Be fairly proficient with HTML/CSS and familiar with basic techniques of responsive web design

Five Things Audience Members Will Learn

  1. What are variable fonts and how do they impact performance and UX?
  2. How to use CSS Custom Properties, calc(), and variable fonts together in a scaling typographic system
  3. How to use @supports to put variable fonts in production today (along with some other newer CSS techniques where they are supported)
  4. Ways in which accessibility is aided by typography, and how adding some simple user controls can make typography even more accessible
  5. How to load web fonts faster, and get content on screen even faster than that

To Bring

Laptop w/code editor and multiple web browsers (make sure Firefox is one of them for their font dev tools)