Typography Scaled for an 8x Grid

The DLS v7 typography follows a 4x line height grid that sits wonderfully on our 8x layout grid providing harmonious vertical rhythm and scaling between type sizes, all while satisfying WCAG 2.1 accessibility guidelines.

Why Implement a New Typography Scale?

You may have read our last post about changing our grid/layout to an 8x grid. This change allowed us an opportunity to rethink our current typography scale. Previous versions of the typography scale had no scale applied and no guidelines as to how or when to use a style, resulting in confusion for designers and inconsistencies in usage.

Why Use the Numbers 4 and 8?

To start, they are a good basic unit to work with. The numbers 4 and 8 are easily multiplied, they provide flexible and consistent, yet distinct enough, steps between them. Number 8 works great for a grid, but can be too large for typography, whereas 4 works perfectly. It’s also fun to work with them once you get the hang of it.

Vertical Rhythm

When good typography makes sense, it goes unnoticed. That was our goal. Elements of good typography include consistency, hierarchy, alignment, and accessibility. We tried to keep all of this in mind while also maintaining vertical rhythm.

DLS v7 is based on an 8x component grid and a 4x line height grid for typography. When applied, the line height grid system has the ability to align the element spatial system (8x grid) with the typography system to create a compelling vertical rhythm in the design.

Rhythm is achieved when the elements of your design are organized into repeatable patterns. This allows your final design to look deliberate, professional, and consistent.

16px Base Font

We started with a base font of size 16px=1rem because this is the best size for accessibility and legibility, particularly when it comes to reading long paragraphs. We built our typography scale from there.

Line Heights

We chose to measure typography by line height, as opposed to the baseline, because this is the web browser’s natural state.

When considering the 8x grid, scaling by increments of 8 with your line height grid can be difficult because the available line heights are too far apart for some text sizes. With that in mind, we looked to scale line heights with increments of 2 or 4 while also maintaining the line height of 1.5x for paragraph legibility and accessibility.

Responsive Typography

The new typography on the DLS will offer a desktop and a mobile scale. You will see that they are very similar and only change once you utilize the larger type sizes.

Separation of HTML and CSS

In the past, the HTML heading tags were assigned semantic meaning to an elements role within a page’s hierarchy. However, the tags of a component don’t or can’t align with each page’s HTML on which it is used, especially across pages. In addition, what might be the largest heading on one page, may be the third largest heading on another page.

As a result, v7 typography separates the concept of heading level (the visual outcome of applying style properties) from the H tag (HTML elements like h1, h2, etc.).

Display headings and headings can be assigned a heading level independent of typography component use, weight, etc. Due to the variety of products that we support, the DLS purposely removed heading levels from the CSS. We use HTML to display heading (d1, d2, etc.) and heading tags (h1, h2, etc.) that define the semantics and CSS responsible for defining the styles. This way the semantics don’t dictate the style and the style doesn’t dictate the semantics. This allows the content to still stand out as intended but also allows the web page to be correctly structured for those users that are relying on screen readers.

Feedback

We want to hear from you! Are you excited about the new typography scale or have questions of the impact on your team’s work? Let us know on Slack or by emailing us at dls@aexp.com.