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.

Christo & Jean Claude’s work “The Gates” exemplify different ratios at different perspectives

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?

Examples of Scott’s work as a Draftsman at Darden Studios

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!