Articles, Links, and Tools From An Event Apart Denver 2019

Jeffrey Zeldman, “Slow Design for an Anxious World”

Learn how to create designs that deliberately slow your visitors down, helping them understand more and make better decisions.

Jason Pamental, “Dynamic Typographic Systems and Variable Fonts: Scalable, Fast, and Fabulous”

Using variable fonts in layouts that work across screen dimensions, accessibility needs, design requirements, and even network speeds.

  • Web Typography News — A weekly newsletter I publish with tips and resources about web typography.
  • Using variable fonts right: the latest word on the code — The most up-to-date techniques, specs, and support for implementing variable fonts.
  • 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.
  • Intro to the Google Fonts APIv2 (beta) — I wrote a bit about the new API and provide a bunch of sample bits. Very early, very beta, very awesome: serve variable fonts from Google.
  • 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.
  • IBM Plex Sans Variable — Brand new! IBM has just released a 2-axis (width and weight) variable version of Plex Sans.
  • 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
  • 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)
  • 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.
  • Axis Praxis — The original variable fonts playground.
  • V-Fonts.com — Nick Sherman's variable fonts catalog site
  • 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.
  • Amstelvar by Type Network — One of the first variable fonts, and still one of the most compelling ones to showcase the breadth of possibilities.
  • 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.

Trent Walton, “Third-Party Software and the Fate of the Web”

What can we do as web builders to help create a more sustainable and balanced web? How can we effectively contribute to a cross-discipline discussion about third-parties?

Eric Meyer, “Generation Style”

A spotlight on generated content that shows how it can be a generator of creativity as well as a powerful, practical tool for everyday use.

Rachel Andrew, “Making Things Better: Redefining the Technical Possibilities of CSS”

By understanding the new medium of web design we can start to imagine the future, and even help to shape it. The code examples can be found in this CodePen Collection.

Flexbox

Sizing

Logical Properties and Values

Scroll Snap

Subgrid (Grid Level 2)

Paged Media

Multicol

Fragmentation

Regions

Exclusions

Jen Simmons, “Designing Intrinsic Layouts”

Jen walks you through the thinking process of creating accessible & reusable page and component layouts.

Josh Clark, “The New Design Material”

Refit familiar design and UX process to work with the grain of the algorithm, to help the machines solve real problems without creating new ones.

More on this topic from Josh

Context

Example applications

Robot designers: AI for design and code

Machine learning APIs and data sets

Mental models and opaque logic

Data gathering anti-patterns

Designing to counter misinformation, error and bias

Beth Dean, “Unsolved Problems”

What do plane crashes, nuclear meltdowns, prisons, urban planning, healthcare, and architecture have in common? They can all teach us how to prevent unintended consequences, and design thoughtfully for people and society.

Architecture

How design has influenced modern healthcare, and how buildings can play an active role in healing.

Designing for time as well as space.

Urban Planning

Inclusive design creates healthy, equitable, and safe communities.

Urban design improving quality of life.

The ripple effects of measuring the wrong things.

Industrial Design

Before there was Mike Monteiro, there was Victor.

Social Systems

What if the prison industrial complex were designed to put itself out of business?

Accessibility

Accidents

Anyone working on safety or security should read all of these books. To understand how designers make mistakes now, we have to look at all the ways we’ve made mistakes in the past.

How We Work

Most aviation accidents used to be caused by human error. Crew Resource Management was developed as a process for identifying and mitigating risk, and empowering flight crews to question authority.

Why do we pursue goals (that might kill us!) when we should change course?

What it sounds like to rationalize technology that kills.

Naive optimism continued.

Farai Madzima, “Working Together in Diverse Teams”

Underlying principles, practical recommendations, and ready-to-use tactics you can use to become more effective working in diverse teams.

Use

Read

Play

Listen

Luke Wroblewski, “Mobile Planet”

Through a data-informed, big-picture walk-through of our mobile planet, Luke will dig into how people use computing devices today and how the design of our products needs to adapt to this reality.

Device Numbers

Device Usage

Performance

App Data

Churn/Retention

Push Notifications

Onboarding

Digital Transitions

Sarah Drasner, “Animation on the Bleeding Edge”

As a community, we talk about how to animate on the web in terms of what's possible—but where is animation heading?

Val Head, “Making Motion Inclusive”

How to apply web accessibility guidelines to modern web animation, when and how to implement reduced motion, and approaches to building up animated interactions for a solid standards base.

Gerry McGovern, “The Customer-Obsessed Professional”

Become more agile by increasing the amount of customer feedback you receive, and developing faster methods to make changes to your code, content, or design.

Tags: