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/

Designing with intent

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.

While a lot of effort goes into documentation and implementation of design systems, I think we actually need some tools that help us create such systems in the first place.

Personally, I’m looking for better ways to design relationships and have means to express and communicate my design intentions.

I feel that the next generation of design tools would benefit from a solid foundation that promotes a systematic approach to screen design. These tools will likely need to work different than we’re used to, but it might also make us more productive and reduce the time for house-keeping.

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.

While Modular Scale for Sass and CSS calc() are simple to implement technically, I struggled to find the right values for all the parameters that are involved.

I felt tired of guessing and typing values, reloading the page to see changes, resizing the browser to see how it behaves on various screen sizes, etc. I felt rather trapped in a mechanical process, than being empowered by the system. I thought that I needed a simple interface to better understand the dependencies and behaviors of the different parameters. I had to see this in real-time.

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.

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

It’s important to note, that sizes and contrast depend on the overall design and white space. While big contrast can look great on a big screen, the same contrast ratio will look off on a small mobile device screen.

This means, that simply making everything smaller on mobile (e.g. decreasing the base font size of the HTML element) isn’t enough. Titles will be too big compared to the available screen estate. We can improve that by using less contrast for the modular scale on our minimum end.

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.

Instead of thinking about arbitrary breakpoints and fine tuning each font size for each breakpoint, would it be enough to just think about the extremes and how they play together? How does it feel to design minimum and maximum in parallel?

Designing with those “multiple masters” is common in the making of typefaces. By designing two extreme weights (e.g. black and thin), you are able to interpolate in between and generate as many weights as you want (e.g. bold, regular, light).

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

Usually, the visual quality of interpolations is not guaranteed to be perfect and manual adjustments by eye are required.

Such a combination of algorithmic automation and human fine tuning seems to be a good approach to me. Computers assisting with design, not taking over.

I believe that interpolation can be a useful method to deal with other complexities such as designing for many different devices, screens, light conditions, and other contexts that we cannot fully control or anticipate.

For more information on that topic of interpolation, I recommend reading “Interpolation Theory” from 1987 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.

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.

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.

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.

In reality, we would also need to be able to bind our system to HTML containers instead of relying on the width of the page. Currently, this is only possible with JavaScript and using libraries such as EQCSS. There is a lot more that needs to be done to make such a system more generic and bullet proof for various use cases.

So nope, you can’t:

  • Choose fonts
  • 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.

Think of it as a design police (or a design linter) that ensures that you stay within the system or whatever rules you agreed on as a team. Instead of freely choosing from a continuous range of font sizes, your tools would automatically snap when you resize. Similar mechanisms are imaginable when working with color, spaces, and other properties.

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

If that sounds interesting from a CSS point of view, you should check out “Dialog Size” by my co-worker David Aerne.

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.

I also believe that contrast is a powerful way of thinking about various design relationships. It doesn’t only apply to a typographic scale, but also to space and color.

For example, instead of picking a text color that “looks good” and is legible, we could simply define a desired color contrast (e.g. 4.5) and let the design tool figure out the actual color based on the background color of the text.

That way we have aesthetic control (“high or low contrast”) while also ensuring legibility.

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.

All I get from those hacks are usually learnings. It takes a lot more effort to turn those ideas into real tools that work in production. But I still want to encourage anyone to start building your own (small) tools if you can. Help yourself!

Complaining about a lack of features won’t bring us anywhere soon. That’s also the reason behind the many Sketch plugins I developed. (Color Contrast Analyser, Line Height, Mate, Style Inventory, Consistency, …).

In my opinion, the fact that Sketch has a completely open API that plugin developers can build on, is the most powerful feature. The team behind Sketch basically accepted that they can’t solve every individual’s problem. But they made it incredibly easy to use our creativity to build tools on top of a solid foundation.

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.

Modularscale.com is a tool that previews modular scale as a water fall of text. I think the website has made the concept a lot more popular. Personally, I find the type of visualisation only partially helpful. I like to see the system in context (example article or a real project). A tool by Tim Brown and Scott Kellum.

GridLover is a tool that also helps you establish a modular scale including a vertical rhythm. Essentially a better and more complete version of my experiment, but without the interpolation. I love how Tuomas Jomppanen and Ville Vanninen integrated scrubbers inside the CSS panel!