Presented on Monday, 9 October, 2017 at CSS Dev Conf New Orleans

CSS Dev Conf is a fantastic event full of some of the best people I know in the web. Along with some invited keynotes and workshop leaders, most of the presenters are selected by the community, so it’s a real honor to have been selected twice to speak there over the past few years. They also have a tradition where attendees vote on their favorite sessions, and the top six give their talks again on the last day so everyone has a chance to see one of the top talks they might have missed the day before. This time I had the honor of winning one of the ‘Best Of’ awards, and I couldn’t be more proud. Not often you get to say you’re an ‘award-winning’ presenter!

The web is about words—ok, and cat videos—but otherwise lots and lots of words. We’re well past the tipping point of ‘more mobile than desktop’, and the use of content management systems has skyrocketed—so the way we set those words has a bigger impact than ever on design, usability, and brand differentiation. There’s no doubt that typography is our most important tool in great design and UX, but that can’t come at the expense of performance. Otherwise we risk our great designs never being seen. Enter the latest development in type technology: Variable Fonts, coming to web browsers near you.

Envision a single font file that can scale in size, width, weight and even x-height—exactly as the type designer envisioned. All controllable with CSS. Everything from super-fine-line delicacy to the chunkiest slab headlines; wide widths in banners and slightly narrower body copy for better line lengths on mobile devices. If type is the voice of your words, that voice just became a chorus. We’ll look at the technology, how to use it, timeline for release, and most importantly: their impact on the dynamic range of our design capabilities. Make no mistake: variable fonts will have a more significant impact on web design than anything since responsive design itself. Learn how you can use them today and be ahead of the web tomorrow.

Check out some demo pages with link to download the source code on GitHub to play with Variable Fonts yourself!