Design System Fundamentals: How to Spec Digital Fonts

Field-tested best practices from NK experience designers.

When to use points, pixels, and rems

Traditionally, desktop publishing software – which was originally created for print design – specified type sizes in points. Points are based on dimensions used in the print world (72 points equals 1 inch).

Points are for print.

Points shouldn’t be used for digital design.

Pixels are the digital standard, while rems are relative.

In the digital design world, the pixel has become the standard for designating font sizes.

But those familiar with CSS frameworks might see references to rem – or root “em” – which is used to scale fonts relative to the base, or “root” html font size (usually the body copy size).

Example:

• Base font size: 16px
• 2rem = 32px

Making the design decision.

So which should we, as designers, use? We believe visual designers should use pixels in order to most clearly communicate the design intention – and that’s really the key. In this case, it’s up to the developer to determine the pixel and rem usage based on the CSS framework they’re working in.

Translating from conceptual design to realization in code can be challenging, and that’s where a tool like Adobe XD comes in. It’s worth noting that XD doesn’t even support rem values (affirming our above belief). XD is a tool first-and-foremost for designing and communicating design. XD produces code-ready design elements (and interactions) – rather than the final code itself. But its ability to clearly predict and communicate the final deliverable, namely a website display, is unparalleled in the Adobe pantheon.

Building the design system.

So when looking at a Design System as a deliverable, the typography specifications should be given in pixels – an absolute, unambiguous digital specification. Designers can preview their design elements in a real-world environment (the browser). And, with XD’s many presentation options, developers can view the exact specifications (though of course we always document those within the Design System, too).

Here’s an example of the base font specification for one of our current tools. The XD inspector view used by developers is on the left.

In the end …

It all comes down to setting strategic intention and clear communication, and mastering the tools that help us do so. One font size at a time.