Use Javascript Libraries for Typography on the Web
An Interview with Designer/Developer Michael Mckeever
Michael, an up-and-coming designer and developer out of Belfast, talks about his latest project “Trying to Work.” Along the way, he shares some of his favorite tips and JS libraries for typesetting on the web.
Make new friends who love type just as much as you do.
Monthly meet-ups around the world where you discuss projects that focus on letterforms.
Los Angeles
New York City
London
San Francisco
Chicago
Seattle
Philadelphia
Ulrik Hogrebe: Hi Michael — we here at TypeThursday stumbled upon your project “Trying to Work” and really liked the thoughts you put into choosing typefaces and setting type on the web. We will get into the weeds of that in a second, but maybe you’d like to start by talking a bit about yourself?
Michael Mckeever: Firstly, thanks for having me. Your invitation came as a bit of a shock as I can safely say this is the first interview I’ve ever had that wasn’t for a job. I hope this goes better than they did!
I’m a 25 year old designer and front-end developer from Belfast, N.Ireland. I started freelancing during University whilst studying Interactive Design and sort of transitioned into doing it full time when I graduated. I never really intended to suddenly start working for myself but one small freelance project lead to another, which lead to another and all of a sudden, it’s two years on and I’m still at it. I figure keep doing it until I can’t because ultimately, the freedom it brings outweighs the cons.
I’d probably consider myself more of a designer than a developer, although with each passing year, that gap seems to get smaller.
Ulrik: Talk to me a little bit about your approach. You are doing both design and development — what attracted you first? Where did you start?
Michael: I wasn’t one of those types that knew I wanted to be a designer from a young age. In fact, I wanted to be an architect, mostly because I liked to draw (I was actually terrible at drawing). It wasn’t until studying my A-Levels that I realized I wanted to be a designer. That was when I designed and built my first website for a class module (Yes, I did use Comic Sans). I asked the teacher if we were going to be using CSS. I had been doing my research and just learned what CSS was used for and wanted to show off. She didn’t know what CSS was. I remember enjoying that module immensely and thinking “I want to do this all of the time.” Getting paid for it wasn’t even an afterthought at that point. I just wanted to keep doing it. Once I finished my A-levels I went to University to study Interactive Design and the rest is history.
Design is a bit different though. Yes, the tools and how we design changes, but ultimately it’s always been and always will be about problem solving.
I’d probably consider myself more of a designer than a developer, although with each passing year, that gap seems to get smaller. The majority of work I do currently is front-end development so you have to adapt to what you’re given. The development landscape these days is just so crazy. There is just so much to learn and such complexity to everything we do. I think that’s why I’ve always been hesitant to call myself a developer — because when you’re interacting with such smart and talented developers everyday, you can’t help but feel like a bit of an imposter. Design is a bit different though. Yes, the tools and how we design changes, but ultimately it’s always been and always will be about problem solving.
Trying to Work
Ulrik: Nice! Maybe that’s a good segue into talking a bit about your work. We found you via “Trying to Work”. Do you want to tell us how that project came about?
Michael: Certainly. Trying to Work was a side-project born from the frustrations of trying to work remotely in Belfast City Centre. Often I’d sit down in a coffee shop to do some work only to find that the wifi speed is on par with the days of dial-up. I actually believe it was a Starbucks I was sitting in where I came up with the idea for it. I tested the speed using fast.com and it showed that the download speed was a pretty miserable ~0.3Mbps.
Web fonts can be a big killer when it comes to web performance. Thanks to the vast number of libraries and services we have access to today for great typography on the web we’re a bit like kids in a sweet shop.
It was frustrating to me because generally we all would assume that Starbucks would be a good place to work from/meet clients and drink shitty coffee, right? Fast, stable wifi is such a paramount for modern day working that I figured people might like to know these things before visiting.
After that, I pretty much had it designed and built in two days. I held off on launching it for a couple weeks whilst I trekked around City Centre sampling the wifi speeds for various coffee shops, bars, cafes, anywhere someone might want to work from. It was a good excuse to try out some new places, if nothing else.
Once I launched it the reception it gathered was phenomenal. People seemed to really like it, which was completely surprising to me. You never really know how something will be perceived until you put it out there. Last week, I launched Trying to Work in Dublin and the reception was equally as positive. London will be next on the radar.
Every font weight and typeface you add is another overhead so be strict and set limits. It forces you to get better at using typesetting, hierarchy and scale, if nothing else.
Ulrik: It’s interesting that you mention bad web speeds. Through your writing, I gather that you are pretty focused on performance on the web in general — all the way down to the decisions you make around type. Can you tell us a bit more about your approach here?
Performance of the Web and Typography
Michael: Yeah, I guess working out of coffee shops with terrible wifi has given me more of an appreciation for speed on the web. Performance is one of those things that may go unnoticed by the average client but is integral to the user experience overall. Web fonts can be a big killer when it comes to web performance. Thanks to the vast number of libraries and services we have access to today for great typography on the web we’re a bit like kids in a sweet shop.
I think the most important advice I can give is to practice restraint. Every font weight and typeface you add is another overhead so be strict and set limits. It forces you to get better at using typesetting, hierarchy and scale, if nothing else.
I could talk about performance all day but another piece of advice I would give is don’t force your user to wait for a web font to load — this is called FOIT (Flash of invisible text). FOIT is hiding the text on the page until the web font has finished loading and it’s bad for the user. Instead, you want FOUT (Flash of unstyled text) — which means that the text is displayed in a system typeface before being replaced with the web font once it has been downloaded. It makes for a slightly more jarring but more importantly, faster page load. You can achieve this by “swapping in” web fonts once they are ready to be served by the browser. That way you’re not slowing up the rendering of the page.
This is very easy to do with a small JS library called fontfaceobserver. (Caveat: If you’re using TypeKit — good news! It uses this approach by default.)
It’d be wise then to pair this practice with some sort of caching technique so the font isn’t being “swapped in” on every page load, just the first. Again, this is easy to achieve and can be done with a browser technique called SessionStorage. You can read about how to use these two techniques together here and if you want to read more about font loading strategies in general, this guide here by Zach Leat has been invaluable to me.
Ulrik: I think that really resonates in your work. We here at TypeThursday were discussing how even your own portfolio embodies that: you use system fonts for your paragraph text but then you’ve chosen Lyon Display which goes well with the various system fonts like San Fransisco (Mac) and Roboto (Android). So regardless of platform you are performant while looking good. We thought that was a really nice design decision.
I also really like how you put a lot of thought into the different web technologies you use. What are you excited about these days and where do you see the future heading?
Also, regardless of which javascript framework is the flavor of the month, its very interesting to see how far javascript has come in such a short time and, how far it will go. I predict this “age of javascript” is far from over.
The Age of JavaScript
Michael: Well, while we’re still talking about performance, I’m pretty excited about some of the performance techniques I talked about being brought into the browser natively. For instance, soon enough, we’ll not need JS libraries to swap in web fonts, we’ll be able to use the CSS property `font-display: swap;` which will simulate what I was talking about above — no javascript needed. It’s already supported in blink-based browsers so you can start using it right now.
Also, regardless of which javascript framework is the flavor of the month, its very interesting to see how far javascript has come in such a short time and, how far it will go. I predict this “age of javascript” is far from over. The frameworks will come and go but the language itself will continue to evolve. I actually have no idea where the future is heading for this industry and I guess that’s why I love it so much.
Ulrik: Cool — and what about yourself? Anything you are working on currently? Anything you want to be working on in the future?
Next Steps
Michael: I want to continue to expand Trying to Work, just because I think people will genuinely find it useful — which is a very gratifying feeling. It’s manually maintained by myself at the minute, I’d like to move away from that eventually and create something that is entirely user editable.
Outside of that, I’m going to continue to work on my own side-projects. I have ideas, but ideas are nothing without the execution. Ultimately, I would like to create my own self-sustaining product one day so I can continue to work for myself, but no one gets there by accident. It takes a lot of effort, time and failure.
Ulrik: Thanks Michael — great talking to you, and we’ll look forward to seeing more of your work in the future.
Want to see more of Michael’s work? Check out his portfolio site here.
Love these interviews? Sign up to the TypeThursday mailing list to be the first to know about our next interview.
Was this article interesting to you? Click the Recommend button below
