Summary

The article discusses the importance of selecting appropriate responsive type scales for different website archetypes to enhance readability and design efficiency.

Abstract

The article "Exploring Responsive Type Scales" delves into the significance of choosing the right type scale for various website archetypes, such as marketing, blog/info, and product sites. It emphasizes the need for harmonious proportions in type sizes, which are derived from a base font size multiplied by a selected ratio. The author, after realizing that certain type scales suit specific site demands, provides guidelines on how to use different ratios to create contrast and guide user focus. The article also explores the concept of responsive type scales, suggesting two approaches to scaling type systems across devices to maintain readability and aesthetic appeal. By understanding and applying these principles, designers can avoid common pitfalls and streamline their design process, ultimately enhancing user experience.

Opinions

The author advocates for the use of responsive type scales, generated by tools like Stackswell, to ensure consistency and adaptability across various screen sizes.
It is suggested that some type scales are more suitable for certain website archetypes, with marketing sites benefiting from high contrast, blog/info sites from medium contrast, and product sites from low contrast.
The article encourages designers to move beyond a one-size-fits-all approach to type scales, instead opting for scales that reflect the content and purpose of the website.
The author believes that understanding the math behind type scales is crucial for designers to make informed decisions about rounding and unit multiples.
Two distinct approaches to responsive type scaling are presented: using a single type scale for all breakpoints or employing different scales for pages and breakpoints to achieve desired contrast levels.
The author emphasizes the importance of experimentation, suggesting that designers should not adhere to strict rules but rather find the type ratios that best suit their specific projects.
The conclusion reiterates the value of typography in design and encourages the use of AI services like ZAI.chat for cost-effective access to advanced AI capabilities, akin to ChatGPT Plus (GPT-4).

Exploring Responsive Type Scales

Finding your (Appropriate, Multi-Device and Vertical) Rhythm

Stackswell’s latest release generates responsive type scales with a click of a button!

Below you’ll find some guidelines I use when selecting a type scale for projects and how I extend type scales across a diverse set of screen sizes.

The problem In the past when I started to design a website my process would go something like this: visit a site like type-scale.com or modularscale.com look at a few type scales, grab one I liked, and keep my fingers crossed that it would work out. At times I would get to the middle of a project and realize the scale I selected didn’t work for new pages like the blog or the shopping cart. At that point I would have to go back, select a different type scale and update everything I had already designed.

The problem was I didn’t understand that some type scales are better suited to the needs of certain website archetypes more then others. I wasn’t thinking about the wholistic demands of the site and what type scale it would require. To solve these problems I needed to understand more about type scales and how ratios affected them.

Getting Started — What is a type scale

A modular scale, like a musical scale, is a prearranged set of harmonious proportions. — Robert Bringhurst.

Showing the math behind building a Perfect Fourth Type Scale (1.333).

A modular type scale is a series of type sizes that relate to each other because they increase by the same ratio. You start with a base font size and multiply it by the selected ratio. Let’s look how different ratios affect the type size between levels in scale.

Note: I left the decimals in all the examples for this post as a reminder that using scales to build your type systems isn’t perfectly cut and dry. You as the designer are going to have to make decisions for example if you want to round up or down, or if you want your type units to be multiples of 4 and so on. I suggest using the scale as a base to get started then build and tweak the scale to fit your solution.

Comparing the Major Second (1.125) type scale and the Augmented Fourth (1.414) type scale.

The Major Second type scale has a ratio of 1.125 and the Augmented Fourth type scale has the ratio of 1.414, a difference of 0.289. Both type scales start with the base font size of 16px and increase by their respective ratios. The H1 font size for the Major Second scale is 32.44px whereas the H1 font size for the Augmented Fourth is 127.88 a difference of 95.44px! Understanding the size contrast between levels of type will help you when selecting a scale for your projects.

Selecting a scale for your project

Site Archetypes: Marketing, Blog/Info and Product. (Images courtesy of Elliot Dahl).

I came across Elliot Dahl’s post: 8-Point Grid: Typography On The Web and appreciated how he broke out websites into 3 categories of archetypes: Marketing Sites, Blog/Info Sites and Product Sites. When analyzing his images of web archetypes I noticed that each of his examples used different proportions in the wireframes. That’s when I realized certain type scales are better suited to different site archetypes. Looking at the images of the site archetypes you can see the Marketing Site has more contrast between type sizes than the Blog/Info Sites and the Product site has the least contrast between levels of type. Let’s explore each site archetype a little more.

Marketing Sites

Recommended Type Ratio: High For the marketing sites there should be a fair amount of contrast between the levels of type. The high contrast will help guide users through your narrative focusing them on the most important ideas first.

Blog/Info Site

Recommended Type Ratio: Medium

For blog and info sites a medium ratio will still provide a nice contrast between the levels of type but help reduce the length of a page. For example with less contrast the article’s title will be smaller, which enables fitting more words on a line and reducing line breaks.

Product Site

Recommended Ratio Range: Low When it comes to laying out dashboards and product sites. You will want a variety of font sizes. They type will need to be flexible and allow for longer words but also versatile enough to support smaller type needs like input titles.

Extending the type scale to be responsive

In this next section let’s extend the type scale across multiple breakpoints.

Breakpoints are the point at which your sites content will respond to provide the user with the best possible layout to consume the information.” — responsivedesign.is

I like to think about breakpoints as devices, this helps me contextualize how the content will be seen and used. For example the extra-small breakpoint are for phones and the extra-large breakpoint are for desktop screens.

Here is the Major Second type scale across devices with no breakpoint scaling.

No Type Scaling Across Breakpoints Let’s look at the major second scale on a extra-small breakpoint and an extra-large breakpoint. Without scaling the type it gets lost at the extra-large breakpoint. You could certainly pick a different ratio so it has more contrast for all potential screen sizes but this can lead to future problems. For example it can leave you wanting more contrast between type levels or with a type that is to big for a breakpoint.

To fix this we need to create a type scale that is responsive and feels more comfortable to read across multiple breakpoints. Here are two different ways to approach scaling type systems across devices.

Approach 1: Single Type Scale For Both Pages and Breakpoints This approach uses the same ratio 1.125 down each page and across each breakpoint. Pretty straightforward, we multiply everything down and across by the same ratio.

Major Second (1.125) scale for each page and between all breakpoints.

Approach 2: A Type Scale For Pages and A Different Type Scale Between Breakpoints I think there could be some benefits to using two different type ratios for the same design. This approach could be useful for scaling across a vast spectrum of breakpoint sizes. One type scale should be used down the page and the other scale would be used across breakpoints.

For example, let’s keep using the Major Second scale (1.125) but between each breakpoint we will increase the type scale by a Major Third (1.250). As you’ll notice you can see the type on the extra-small has less contrast than the extra-large breakpoint. Blending type scales can give you certain flexibility at different points of your breakpoint range. For example the ratios we use below start us off with lower contrast on the extra-small breakpoint and extends to a higher level contrasts at the extra-large breakpoint.

Mixing Major Second (1.125) scale on pages with Major Third (1.250) between breakpoints to increase type contrast.

Conclusion

With the understand of type scales I’ve reduced the number of times I’ve had to restart projects, making me more efficient and saving me frustration. In certain projects you could need one or more scales. For example, having both a public facing site and an internal dashboard may require multiple type ratios. Be sure to experiment with different type scales and find the ratios that you like best for your designs. Remember typography is the base of all design be sure to get it right!

Note: This post offers suggestions on how to handle type scales. The ideas presented are not hard and fast rules. I encourage you to experiment and explore all different types scales and find the right one for your project.