Image for post
Image for post
Visualisation of mouse movements when I was working in a design tool back in 2009. What’s the intent behind each click, drag or nudge? https://www.flickr.com/photos/fl0urish/4155725071/in/photostream/

In 2016, I’ve seen an ever increasing number of style guides and articles on design systems on the web. More and more web and interface designers started to document their color palettes, text styles and component libraries that help them with consistency and scalability.

Building my own tools

To illustrate my point, I developed a simple tool that helps me design a responsive typographic scale. It’s a visual interface for creating a modular scale with fluid type.

How it works

Parameters, not values

There are two sets of controls on the left that I can use to manipulate the container width, base font size and contrast of the modular scale at each extreme. This is the core playground where I can tweak as long as I want and see how the system behaves.

Image for post
Image for post
Scrubbers make it easy to explore the full range of possibilities with less effort than input fields or keyboard shortcuts

Interpolation

The tool shows minimum & maximum views (“masters”) of a sample article design with a few headings and body copy in different sizes. All font sizes in between are interpolated. This is the so called fluid type.

Image for post
Image for post
Image for post
Image for post
Multiple weights of the lowercase letter “k” overlapping. “TheSerif” designed by Luc(as) de Groot.

Snappy previews

I can drag handles on each preview to temporarily resize them and see how the design responds when it gets wider or narrower. Once the mouse is released, the previews snap back to their initial size.

Image for post
Image for post

Steps

Each text layer shows a number on hover. This is the step used for the modular scale. I can increase / decrease the steps to make changes to the visual hierarchy while staying within the system.

Image for post
Image for post

Limitations

The tool is very limited and addresses only a few aspects of web typography. When we look at typography theory, there are a lot more rules and relationships that we could encode. To be more precise, we would also need to read the font metrics to derive the x-height or other measures as a base instead of using the font-size. Right now, two different fonts using the same parameters would lead to very different results. This is because the actual perceived size of a font is not directly related to the font size.

Image for post
Image for post
Two different fonts with technically same size and line height often result in different perceived size, number of lines, and paragraph contrast. Here: “Avenir Next” on the left and “Alegreya” on the right.
  • Change spacings

Working with systems and limitations

Setting up a modular scale only in code is the wrong solution. Design tools and code environments need to be able to share the same information about the underlying systems. A middle man that understands various tools and formats might be needed. Theo by Salesforce is an interesting approach to that.

Image for post
Image for post
Prototype of a design tool that snaps font sizes to a defined range of sizes

The concept of contrast

Using the contrast scrubber feels very powerful to me. Instead of tweaking multiple individual font sizes, I control one single parameter to influence the whole system. Although I usually read about “scale” or “factor” in articles about modular scale, I find the term “contrast” more suitable. While scrubbing, I directly influence the contrast between the body font size and all other sizes. The bigger the value, the bigger the contrast.

Image for post
Image for post

Build your own tools

I’ve made this tool as a proof-of-concept. I wanted to get a feeling for what it would be like to control and play with parameters instead of typing code. I also wanted to find out how designing for minimum & maximum at the same time feels and whether that is more useful than only seeing on state at a time.

Try the tool

You can try “Adaptive Modular Scale” on CodePen. It’s not really intended for real world use and I didn’t test it thoroughly. It’s also pretty obvious that designing the “maximum” state requires a large screen or using the zoom control that I didn’t build 😇

Credits

I started to work on the tool after reading the article “Precise control over responsive typography” by Mike Riethmuller. Seeing that fluid type is possible with CSS today made it even more interesting to try it out in more detail. Is it a silver bullet? No. But it is one way to deal with typography on the web.

Pushing boundaries, not pixels. I make design tools, apps & bagels. Previously @ginettateam. Studied @idpotsdam. Former Intern @Behance, NYC.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store