Type Specimens on the Web

Interview with Front-End Developer John D. Jameson

How type is promoted on the web is changing. This week, Typethursday chatted with front-end developer John D. Jameson. We discussed how specimen websites have changed and how to make your promo site more effective.


TypeThursday: John, thanks for being here for TypeThursday.

John Jameson: Hello!

TT: Great to have you here. I know you come here from a front-end developer background. What got you interested in type design?

JJ: Sure, so I studied web design at UCF in Orlando, and I felt like I wasn’t a very good visual designer. I wanted to bring it. I walked up to one of the design professors at school and asked where I could learn about typography. Because at that point I thought typography was all Pinterest boards of words stacked on top of each other. That was my concept of typography. And he ended up giving me a flash drive full of lectures for all his classes. That was my introduction. From those and just Googling around later on, I was introduced to Bringhurst and Tschichold, and that’s where I learned the rules and really got started.

A web type specimen is pretty much all of my interests mashed together.

Background Behind typespecimen.io

TT: Excellent. I know you have a side project where you posted up type specimens online. What got you interested in type specimens on websites?

JJ: After being introduced to typography and falling in love with all the different rules, I also became interested in more abstract design. Specifically those designs applied to the web. A web type specimen is pretty much all of my interests mashed together. They’re cool tech demos and marketing landing pages for typefaces because fonts are products people are trying to sell. Seeing all the different goals in one, approachable page — I think I find that really interesting. And then also going through and seeing the same web designers over and over, like Nick Sherman and Kenneth Ormandy, made it feel relatable to me. Like type specimens were something that I, a front-end developer, could also get into.

It wasn’t until recently that web specimens became experimental or interactive.

Progression of Type Specimen Websites

TT: You have a great collection over there on the site. I’m sure there’s things you observed or noticed in that process of documenting all these type specimens online. What was something in the overall trends, in your overall impression of what’s online today?

JJ: So you can certainly see that, in the beginning, there weren’t interactive type specimens or anything. It was mostly PNGs of type saved out and slapped on the page — which is inherently not a web type specimen. But then over time as web fonts became prevalent, you start to see more and more web type. Type that started out as PNGs smashed onto web pages became native text, but the pages were still static. It wasn’t until recently that web specimens became experimental or interactive. Some are so abstract that you can’t really tell if they’re trying to sell you something or if they exist just for the hell of it. Others are interactive in a way like “try this font out here so you can buy it.” Where before, a specimen wasn’t really like that; it was more print-like. Almost like here’s a web PDF of this typeface.

TT: You’re saying that over time there has been more complexity and a more sophisticated approach in how this type is presented on the web.

JJ: Yeah, and I’d also say that they’ve become more web-like. Their inherent quality reflects HTML, CSS, and JavaScript instead of trying to recreate a static medium. These pages are becoming responsive. These pages are advertising how well the fonts work in a responsive context. Some of them — I think specifically the Benton Modern site — use a narrow face on narrow screens so they can accommodate more characters per line. Which is something you wouldn’t have seen in an earlier design. They’re becoming more complicated because there are more features in browsers and more things people care about that they want from these fonts.

The web is growing up in terms of type. There are still issues where you can’t control what gets rendered across browsers, but the technology is definitely evolving and allowing for much more intricate typography as well as better defaults.

Telling the story of the type family and using web design as much as the typefaces themselves to sell you on more than just the letterforms

Effective Type Specimen Websites

TT: You hinted at Benton Modern site as one of those type sites that stood out to you. Were there any other sites that stood out to you as a particular exemplar of what you thought is a really effective use of the web as a type specimen page?

JJ: Kenneth Ormandy recently did the 1403 site, which I think is excellent in terms of aesthetic; it’s not a just couple columns of type with all the styles in it like you’d expect from a traditional specimen. The one he did for Tofino is excellent too. He’s telling the story of the type family and using web design as much as the typefaces themselves to sell you on more than just the letterforms. The site sells you on the actual applications of the type family, the designer, and the story behind it, which I thought was a really cool take you wouldn’t have seen in an older web type specimen.

TT: What do you think are the some of the main takeaways you should think about when you’re working with a developer or developing your own page for a type specimen?

Keep the individual in mind when when selling your work.

Top Points to Consider When Designing a Specimen Page

JJ: David Jonathan Ross — across his site, I think he does a really good job explaining what each family is, why it exists, what problem it solves, and then also just having fun with it. He makes it really easy to buy things from him. Being a web developer, I often have to buy desktop and web versions of every font, so it feels like a suckerpunch when I see some of the prices out there and read through their licensing. I think he does a really good job pricing his fonts for people who work across mediums. As far as what someone should keep in mind when they’re making these pages, keep the individual in mind when when selling your work.

TT: Well it sounds like one part of it is, particularly, the licensing terms should be made very clear and understandable way for purchasing fonts. Sounds like that is an important issue for you?

JJ: I tend to like Typekit almost for that exact reason. They have excellent stuff by reputable designers. And you can use anything without worrying about it. It’s so affordable that it’s really one of the best things out there. And then seeing Google Fonts focus on quality more and more is really interesting — just from a developer point of view — because you shouldn’t have to break the bank to use a custom face on a small, one-page thing.

TT: You said it’s important you share the background and suggested usage of the typeface. Also having fun as you communicate your information and intentions, correct?

JJ: I’d agree with that.

TT: Excellent. John, this has been a great conversation thank you so much for your time.