Variable Fonts & The Future of Web Design

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!

[Update from 10/2017: This talk was voted one of the 6 ‘Best Of’ at CSS Dev Conf!]