From Modular Scales to Variable Fonts
Scott Kellum, developer and designer, talks about using modular scales when setting type and why he is excited about the arrival of variable fonts for the web.
Scott Kellum is a front-end developer and the designer behind modularscales.com — a guide to using modular scales to set type on the web. In this interview we discuss how to think about proportion and end on why Scott thinks the future of type lies in variable fonts.
TypeThursday is the meeting place for people who love letterforms. Join us for an evening of appreciation.
San Francisco on Sept. 21st
Los Angeles September 7th
New York City September 7th
London October 3rd
Chicago October 19th
Philadelphia October TBA
Ulrik Hogrebe: Hi Scott — really pleased that we get this chance to talk. When we were discussing this interview we talked about a couple of different themes we wanted to touch upon — from setting type on the web to some of the newer technologies emerging now in the web space like variable fonts — but perhaps before we get into that maybe you’d like to talk a bit about yourself and your background?
Scott Kellum: Thanks for having me Ulrik. I’ve always been interested in the intersection of design and technology, but in my formal education I focused more on learning design skills. It wasn’t until college that I really got into typography. As someone diagnosed with dyslexia I felt uncomfortable with letters until I started getting really immersed in typography at Parsons and started seeing them more as ‘designed objects’ than letters.
The concept of letters as ‘things’ and the systems that link them together as a typeface fascinated me. After taking a type design class with Joshua Darden, I started working with him on customizations for clients and in that way started making a role for myself in the type design process.
At the same time I was interested in the web as a design medium and started working with Roger Black on ways to create new reading experiences on the web. I’ve been mostly web focused since then, working at Vox Media on a number of projects where type has played a major role.
And just as a print designer needs to understand the process of how paper and ink moves through a press I wanted to gain a good understanding of how my pixels were drawn onto a screen.
Ulrik: So you went from designer to type designer to web developer? And how did the coding come into it? Where does that intersect with design and type?
Scott: Yes, I was more interested in graphic and industrial design before college—but then fell into type during college. Although I wouldn’t formally consider myself either of those things before that. When it comes to coding, I’ve always been around computers. As a kid my dad and I would scavenge for parts and build PCs for people. I’ve never had much formal education in computers and learned CSS and HTML mostly on the side. Since languages change so quickly I didn’t want to invest my education in something that might be obsolete. But despite that CSS and HTML eventually became design tools for me—just another fun way to craft my designs. And just as a print designer needs to understand the process of how paper and ink moves through a press I wanted to gain a good understanding of how my pixels were drawn onto a screen.
Ulrik: I am always fascinated by the paths people have taken getting into type. You mentioned that you are dyslexic. How has that affected how you work with typography?
Scott: It’s hard for me to get into other people’s heads to understand exactly how they think and see differently from how I do. However, I find I do sometimes need to pay special attention to some characters.
As a kid I would get b, d, and q mixed up all the time and I had to become sensitive to how different stresses and serifs in forms differentiate glyphs from early on. I find Turnip by David Jonathan Ross particularly interesting in how it’s weighted. It has this top-weighted form. It creates this beautiful effect in the color of paragraphs that makes it easy to read on top of it’s nice aesthetic. Also Joshua Darden has the ability to make forms with unique differences— both when it comes to differences between weights but also for example the way Omnes has partially rounded terminals which creates this elegant stress that differentiates it’s form in a way a uniformly rounded terminal wouldn’t. I don’t know if other people see these things as keenly as I do but I have a strong appreciation for them and the effect they have on how a text reads.
Ulrik: No, it’s impossible to see through another person’s eyes. Which I suppose is one of the things that make type design an interesting but also frustrating endeavor at times.
I am glad we are straying in to color, legibility and aesthetics. You created Modular Scale, right? Can you talk about that as a project and maybe your motivations for doing it?
I wanted to create something that could teach people about the proportions they are using in their designs and how to work with them in a meaningful way.
Scott: Actually for those who want to pursue that thread a bit further Sam Barclay created a beautiful book on what it’s like to be dyslexic that might help just a little bit.
But yeah, I created the latest iteration of ModularScale.com with Tim Brown a few years ago. It allows you to set type using different scales and gives you the Sass or JS snippet on top.
Tim actually launched the site a number of years ago alongside his talk at Build Conference. At the time I was learning Sass, a preprocessor for CSS. I thought it would be wonderful to create a function to bring a type tool directly into the code with you as you were writing Sass.
Alongside, Tim and I started talking about the different ways people used modular scales, the tools that exist and the things they and the tools struggle with. So we combined forces—I wanted to create something that could teach people about the proportions they are using in their designs and how to work with them in a meaningful way. Which is really what modularscale.com is a stab at. I think people see a lot of magic in modular scales, but it’s still a struggle though. Certainly something like the golden ratio can be magical mathematically but unfortunately it won’t necessarily make your type more beautiful. It’s just a ruler you can use with the only difference that instead of every increment being evenly spaced, sizes get progressively bigger as you go up the ruler. But hopefully the tool does make people think a little more about what proportion they are using and helps them create meaning and structure in their design from those proportions.
Ulrik: Right. As I understand it, modular scales refers to the use of a scale of type sizes that have an intrinsic harmony — i.e. using a type scale based on the golden ratio which is universally perceived as harmonious. So you choose a base size — say your body text size — and then you scale up according to the rules of the ratio you have chosen. Is that correct?
Scott: A lot of emphasis is placed on the ratios, which are absolutely an aspect of modular scales. But in the responsive landscape of the web I don’t see the ratio itself as being the part that makes a design resonate. If we were talking about music or proportions between static shapes for example then the ratio would have a lot more meaning. But on the web today these ratios get distorted regularly depending on how pages are viewed.
Imagine a series of landmarks, like towers heading off into the sunset. If you view them from the ground, the one in front of you is going to be dramatically bigger while the others get progressively smaller. But if you shift your perspective up this effect diminishes until you are looking straight down and all the towers you can see look the same size. You are effectively looking at a modular scale rendered at different ratios but the size relationship between the towers maintains meaning.
The web is a lot like this; if you are up close it’s like you are on a big monitor. The headings can be big relative to smaller body copy—where if you are on a phone there isn’t the real estate to have that perspective and the ratio will need to be closer to 1:1. Modular scales are great ways of preserving hierarchies and spatial differences in these environments where sticking to a ratio that harmonizes can become more of a burden.
Ulrik: OK, so it’s really an attempt to teach people about proportion more than it’s a set of rules? Is that right?
Scott: Yes, it’s an attempt to preserve type and design hierarchies at different proportions, and being mindful of those proportions is key. I always try to steer people away from the rules to maybe think of these more as guidelines.
Ulrik: Yes, that makes sense. Good starting points, but still relying on what feels right in terms of hierarchy when moving between screens. Perhaps this is a good segue into talking about variable fonts — i.e. fonts that can flex fluidly according to screen size, although that is a bit of a simplified explanation. How does that contrast or align with the above?
Scott: Yeah, there are a number of exciting new techniques and technologies that finally allow for fluidity of text on screens. It’s exciting to have more typographic control over how text flows through our layouts on different screens. As an aside I recommend reading Frank Chimero‘s The Web’s Grain where he talks about the fluidity of images and text being opposing forces.
But yes, a couple years ago Mike Riethmuller came up with a technique that allows for fluid scaling of text and line height enabling this shift between modular scale ratios and adjusting for wider line heights as text blocks get wider. Now variable fonts takes that even further and addresses the issue of scaling at a font level. Those familiar with type design are familiar with interpolation and multiple masters and variable fonts bring these features straight to the web browser. This means that as text scales up on a screen it can interpolate between micro and display within a single font file, giving designers a full range of options to play with.
Ulrik: Right. And this might just be me being a bit thick, but with interpolation you still select certain ideal weights and often even correct the font afterwards, since scaling in a linear fashion often leaves the font looking less than great. How does that work with variable fonts? Does it imply a loss of control for the type designer?
Scott: A type designer will lose control over what exactly bold or display is, as fonts can be interpolated smoothly without specific ideals. For example, regular is 400 and bold is 600 — but with a variable font you could have the effect of choosing 423 if that’s exactly what you want and you can animate between any values. The type designer does have control over what the axis’ to interpolate are when they master for release though.
Ulrik: Will that have an effect on how you need to design your typeface? Do I then have to be aware that terminals may touch or serifs merge or bowls become too tight or open?
Scott: If you plan on releasing as a variable font, then yes. You will need to ensure your point structure when you are drawing the font interpolates well. When I worked at Darden Studio I remember learning this lesson the hard way as interpolation was a big part of our process and I had a few points that were out of line. We worked hard to craft type that interpolated well, so I don’t think this would change the workflow. Plus I’m sure many type designers already work hard to ensure their fonts interpolate well. Although I do understand it’s a new thing to worry about.
I think it’s an exciting time to have fun with some new tech to express your typographic style in new ways. You don’t have to make variable fonts, but if your typeface already interpolates it’d be a lot cooler if you did.
Ulrik: Yes, I think you are probably right. I think for many it feels like a bit of a ground swell because it’s so new — and also because type designers aren’t exactly the kind of people who love relinquishing control (OK, I might be doing some mild stereotyping here).
With that, I’d like to wrap with some advice for people who want to understand more about variable fonts and other developments in terms of type for the web. What do we need to look out for?
Scott: The biggest thing to look out for is that variable fonts are very new and finding documentation on how to create and use them may be difficult. But the concept isn’t new. Multiple Master fonts, a similar but failed format due to lack of support, have been around for some time. I think most type designers do the work to make their type interpolate as a standard part of their workflow. And to me, it’s an exciting new way to see ones work used in new ways. Imagine something like a website about balloons, being able to inflating a bubble font headline from thin to black. I think it’s an exciting time to have fun with some new tech to express your typographic style in new ways. You don’t have to make variable fonts, but if your typeface already interpolates it’d be a lot cooler if you did.
Ulrik: Haha fantastic! Thank you so much Scott! This was a pleasure!
You can find Scott’s portfolio here: Scottkellum.com
Want to have a go at playing with modular scales? Try modularscales.com
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? Give us a clap! It helps spread the conversation you loved.
