When tech meets typography

March 16, 2018
Author - Katherine Fox

Ithaca Web People’s monthly Tuesday Tech Talk always manages to inspire and create thought-provoking conversations around tech. At the most recent meetup that Funkhaus hosted a few weeks back, Beth Watson spoke about net neutrality and Funkhaus programmer John Robson presented on web typography and FOUC.

John’s talk on typography provided a look into just one of the ways design and technology intersect, both here at Funkhaus and beyond. We spoke with John to hear more about what inspired his talk, how Funkhaus utilizes type in interesting ways, and why typography is an often overlooked—yet incredibly essential—aspect when it comes to crafting an experience and identity online.

What was the impetus for giving a talk on this topic?

Our Tuesday Tech Talks were becoming a bit unapproachable for the design community here locally, so we’ve been working on fixing that by bringing in topics that are either strictly design related, or fall somewhere in the middle-ground of design-minded tech concepts.

Our new push for design started last month with Sander’s talk on SVGs and now continued on with this talk on typography. I think it’s a perfect middle-ground topic because it’s something that we all deal with day to day, but it’s easy to take for granted or not fully understand what’s happening under the hood when working with a typeface. It’s helpful for those of us that do development to be more aware of the nuances of a typeface, and it’s equally important for those that design to understand technical limitations and performance tradeoffs.

What were the major takeaways from your talk?

The talk is essentially broken down into three parts, starting with the “anatomy” of a typeface. I go through the different types of data that can be embedded in a font and specifically try and focus on features that are not very well known or seldom used. The second part gets into specifically how typefaces behave on the web, and how different browsers interpret them. I cover different file types and ways to load, and then get into some advanced tools and techniques for dealing with common problems and artifacts. Finally, part three gets into some performance considerations and things that can be done to tune the loading speed on a website.

How did Funkhaus impact or lead to some of your findings around web typography?

Our work is very design driven, and getting the typography right is a high priority on all of our sites. One of the things I cover in the talk is how important it is to consider your audience when making decisions about how to build a site. For a lot of work that serves a largely functional purpose the priority is 100% on getting the user to see the correct content as quickly as possible. Other times though the priority may be more focussed on created a great aesthetic and presenting a very specific visual to the user. That ends up being the case for a lot of our work, but regardless of which direction you go in it’s important to put some thought into it and make sure you’re making the right decisions for the user.

How does Funkhaus utilize web typography in cutting-edge ways?

Typography is so important for communicating the personality of a site and brand, I think one of the main things that sets our work apart is that the typefaces are first-class citizens in our projects and we put a lot of effort into making sure that the way they get presented is exactly the way our design team has intended.

A lot of the time it’s an easy thing to overlook, but every chance you get to make an impression on your audience is an opportunity. Even the first few seconds of a page load will communicate a lot to person; How quickly did the page appear? When the titles and text came in did they fade in, animate in, or just appear in a flash? Were the movements slow and elegant, or snappy and lively? All of that will help create the overall voice to the user, and signal to them what kind of attention to detail went into the site. I think our innovation is caring about those things at times when a lot of others might not.

And here’s something that added another level of excitement to the evening: it was the first-ever livestream of a Tuesday Tech Talk. Check it out, here or watch it below!