Getting Graphic: Reinventing design with type on the web

A presentation at Shift Remote Virtual Developer Conference in in 21000, Split, Croatia by Jason Pamental

Graphic designers have customized layouts and title pages in magazines for decades. But, between the limited technology of the early web, and our race to systematize design once we had sufficiently capable technologies, we’ve missed out on much of what good graphic design has to offer. Now that we’ve designed our systems, polished our patterns, and perfected our pages, it’s finally time to refocus on the specifics. With scaling typographic systems, we can leverage the power of modern CSS and variable fonts to create compelling, unique design variations tailored for the content they render. In this talk, Jason will look at powerful examples of publication design, and explore how many of those concepts can be incorporated in our own work in compelling and sustainable ways.

Resources

The following resources were mentioned during the presentation or are useful additional information.

  • Web Typography News

    A weekly newsletter I publish with tips and resources about web typography.

  • VariableFonts.io

    A site devoted to explaining how variable fonts work and teaching how to implement them well, including using the Google Fonts API t get all of their variable font goodness.

  • Using variable fonts right: the latest word on the code

    The most up-to-date techniques, specs, and support for implementing variable fonts.

  • An Introduction to Variable Fonts

    An introduction I wrote for the annual 24ways Web Design/Development ‘Advent Calendar’ site. It’s got loads of embedded examples and code too.

  • Faux Foundery

    Fascinating variable font solution to missing greek glyphs in web fonts.

  • Recursive variable font

    No, a font called Recursive. And it’s variable. By Stephen Nixon for Google Fonts. It’s lovely, and you should try it.

  • Resources for learning typography

    I get asked a bit about where to go to start learning about typography, so I put together a collection of good books and resources to get you started.

  • Light mode and user preferences in the browser

    This was inspired by a discussion with Marcy Sutton, Val Head, and others about how to design for light modes, while still allowing the user to express a preference which can then override the general OS preference. I think it’s a useful pattern for other kinds of user preferences like ‘prefers reduced motion’ as well.

  • Ad Hoc Blog

    This is the first part of a redesign that I’ve been working on with Ad Hoc. Featuring two beautiful variable fonts and an entirely new design system that incorporates virtually all of the dynamic typographic techniques shown in this presentation.

  • Digging in to Dynamic Typography

    I wrote about these techniques in detail in my newsletter a little while back. Lots of details and links to more demo code.

  • Mandy Michael’s fluid font weight demo

    Mandy created a really great JS method for using JS with a CSS custom property to scale font weight based on viewport size. Will definitely be looking at adding this to future projects!

  • Google’s ‘Progressive Font Enrichment’ proof-of-concept demo

    This is the first exploration of what we’re working on in the W3C Web Fonts Working Group—which will lead to some truly revolutionary changes in how we serve fonts on the web.

  • Remix of Jeffrey Zeldman’s Poynter Institute demo news typography

    This is my remix of Jeffrey Zeldman’s news typography demo that he created for the Poynter Institute, adding in a whole bunch of responsive typography and variable fonts.

  • Typetura.js

    Scott Kellum and Sal Hernandez’ fluid typesetting tool. Really interesting, and able to scale more than just type. Well worth a look!

  • Textblock.io from Glyphic

    Another Javascript tool for typesetting blocks of text from Theo Rosendorf and Glyphic.

  • Dark Mode in CSS

    Great run-down on different techniques for dealing with day/night modes on the web.

  • MDN Variable Fonts Guide

    I guide I wrote on the MDN site covering the basics of implementing variable fonts.

  • Variable Font Demos on CodePen

    A collection of demos I've created on CodePen for you to play with!

  • Variable Font resources on my site

    Lots of links, articles, books, talks and whatnot

  • Axis Praxis

    The original variable fonts playground.

  • V-Fonts.com

    Nick Sherman's variable fonts catalog site

  • Wakamai Fondue (What Can My Font Do... get it?)

    Simple drag-and-drop web interface to discover all the features available in a given font file.

  • Essay explaining variable fonts as a concept

    Good for less techy and more designy/brandy folks as well.

  • Firefox (font tools!!!)

    Explore the new fonts tab in the Firefox Dev Tools that will show you everything available in a given font (normal or variable, but let’s all agree that the variable ones are way cooler)

  • Avenir Next

    It's an earlier beta, but still an interesting experiment. Hoping a fuller release will be out by the end of the year.

  • Wentin's Font Playground

    Wentin is a designer/developer at Adobe, and she has pioneered some truly unique and compelling UI ideas for working with variable fonts. Really amazing stuff.

  • Cera Pro by Typemates

    (Variable font is a beta, but you should ask them about it and tell 'em I sent ya)

  • Roslindale by DJR

    David Jonathan Ross' design is what forms the primary typography for the talk and for my own site.

  • FF Meta from Monotype

    This is a fantastic typeface, and it was a real treat to design the demo page for it's introduction.

  • W3C Github CSS Fonts Level 4 (variable fonts and other bits)

    Read up on the features and issues, provide feedback, and help shape the direction of the web

  • State of Georgia Board of Workers Compensation

    One of the first two sites launched with a typographic system like I’m showing here, using Source Serif Variable (where supported) and static web fonts where they aren’t. Fantastic dev implementation done by Lullabot.

  • State of Georgia ADA Coordinator’s Office

    One of the first two sites launched with a typographic system like I’m showing here, using Source Serif Variable (where supported) and static web fonts where they aren’t. Fantastic dev implementation done by Lullabot.

Code

The following code examples from the presentation can be tried out live.