To achieve perfect type on the web, iron the pixels

Taylor Poulos, a designer at Moment, is obsessed with getting it right, especially when it comes to designing for the web.

Taylor’s intrigued by the fact that in the 18th century, type designer John Baskerville famously ironed each sheet of paper and brewed his own ink to achieve darker, more uniform letters. This attention to detail produced books that noticeably advanced the state of the art.

In 2017 though, it can be difficult for the detail-oriented designer to replicate the same precision that Baskerville strove for, due in part because few understand how the bits on their hard drive get turned into letterforms on the screen. Mig Reyes has pointed out that even modern interfaces are predominately typography, which goes to show that it’s more important than ever to set type effectively.

It’s this weighty subject that serves as the inspiration for Taylor’s upcoming talk, “Ironing Pixels — How to Achieve Perfect Type on the Web” at Front-end Camp in Chicago. Ahead of his talk, we asked Taylor to share some of the thinking that has gone into the formation of the talk.

There’s a disconnect between our expectations, our methods, and what works on the medium.

Front-end design

The web started as a primarily engineer- and scientist-driven medium. Resiliency and display-agnostic layout were baked into it from the beginning, but great typography, less so.

Now we expect the web to do all of these really incredible things that it wasn’t really built for. As designers, we make beautiful website mockups, along with assumptions about how these websites will be displayed. As consumers, we’ve come to expect really complex, beautiful experiences. But there’s a disconnect between our expectations, our methods, and what works on the medium. I wanted to explore how, as engineers and designers, we can design and build experiences that fulfill our user’s expectations and overcome some of the deficiencies of the web.

Ultimately, the answers are a little surprising. As designers, we need to give up some of the minuscule control we’re used to with print. And as engineers, we need to understand how to build sites that work no matter the device they’re displayed on. And, it’s more important than ever that designers and engineers understand each other’s jobs, so that we understand what compromises need to be made for better user experience.

Type on the web

This talk started out as a desire to scratch my own itch. I’m constantly irritated by the state of the web today—websites take too long to load, and once they do, there are often lots of little things wrong with them. Everyone seems obsessed with fonts that are too lightweight, typefaces that don’t suit the content, and ones that miss all sorts of little details that are important to great typography. I wrote this talk mostly as a way to get my own thoughts in order, and make sure that I didn’t do any of the things that bother me on my own projects.

The Baskerville parts came later. Typographers, especially pre-computer, were obsessive in their attention-to-detail. I feel like some of that’s been lost in the modern web, and I thought that telling Baskerville’s story was a way of putting what’s been lost into sharper relief.

Hackathon projects

I took my first programming course in grade school, around the time I was 12. It was a correspondence course in C, and I spent a lot of time figuring out how to keep my old Dell computer from crashing while I was trying to do my homework.

In college, I fell in with the group of students that organized CMU’s hackathon, and ended up attending a lot of hackathons myself. I think what attracted me to them was the fact that after 24 (sometimes miserable) hours, you came away with something tangible, something that you and your friends could actually use. My favorite project from a hackathon was Octolingo: a universal translator for Google Hangouts. Basically, you can have you and all of your friends talking in all sorts of different languages and Octolingo will translate what everyone’s saying into your own language and read it back to you. I like it mostly because it shows how much you can accomplish with twenty-four hours and some APIs.

Another project that I’m fond of (although it wasn’t from a hackathon) was a teleprompter I built that follows along as you read. It was pretty tricky, because transcription doesn’t always work, so I had to figure out how it could keep track of where you are in the text using only the information that it had.

Eventually, I realized that actually using the product was what interested me the most, and that’s where I started to focus with my schoolwork and now, as a designer helping to create digital products.

Don’t miss Taylor’s talk, “Ironing Pixels — How to Achieve Perfect Type on the Web” on June 3, 2017 at Front-end Camp in Chicago.