Variable Fonts and the Future of Web Design [NEDCamp 2017]

Jason Pamental // December 2017

This has been an amazing year for the evolution of type and typography. And nowhere will that be more significant than on the web. I’ve had the good fortune to give this talk a few times this year at some really great events (like DrupalCon Baltimore, UX Burlington, ATypI Montreal, and CSS Dev Conf New Orleans). Capping the year giving it at our ‘home town’ Drupal event was a real treat. We hope you’ll enjoy learning a bit about what is shaping up to be one of the hottest topics on the web in 2018.

About the talk

The majority of content on the web is words—and more than half of web browsing happens on mobile screens. It follows then that the way we set our words has a bigger impact than ever on design, usability, and brand differentiation. But while typography is clearly the most important aspect of great design and user experience, it can’t come at the expense of performance or we risk our great designs never being seen. Variable fonts are here, and will change everything: with a single font file that can scale in size, width, weight and even x-height—exactly as the type designer envisioned. 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. All controllable with CSS.

If type is the voice of our words, that voice just became a chorus. This learning will look at the technology behind variable fonts, how to use them on the web, their timeline for release, and most importantly: their impact on the dynamic range of our designs. It will also look at how this could impact how you design—with design tools built into the content management system itself. This could enable a whole new layer of design that is specific to the content rather than generalized for anything, without requiring custom code every time.

Key Concepts

  • Typography and variable fonts
  • How variable fonts impact design
  • Variable fonts technology
  • CMS Tools for variable fonts
Variable Fonts and the Future of Web Design