Design is often perceived as an entirely subjective practice. Indeed, in any given layout, a designer may make hundreds of optical adjustments to make it look “correct” to the eye. Type designers, for example, deliberately deviate from strict geometry to improve visual balance across an entire glyph set.

To be concerned with how the eye perceives these details may seem overly fussy, but these refinements remove the visual noise that might otherwise make the eye work harder to understand what it sees.

Reducing visual noise is particularly important for digital products where users must accomplish complex tasks. However, manually making hundreds of optical refinements for different screen sizes and contexts would be impractical. Instead, how might these individual adjustments extrapolate into mathematical functions that design systems can ingest?

It makes sense to consider typography first since much of what makes typography “good” is determined mathematically. For example, letter spacing, or tracking, is typically loosened at smaller text sizes to avoid the visual crowding of letters. At larger sizes, text is tightened so the eye jumps shorter distances between letters while reading. The exact amount of letter spacing depends on the text size, and variable font files sometimes contain this data to make these adjustments automatically to a layout.

Not all optical corrections to text can be handled by a variable font file. For example, line spacing, or leading, could instead be referenced in reusable design system tokens, like in Morningstar Design System. Like letter spacing, line spacing is typically looser for smaller text sizes and tighter for larger ones.

The color of text, too, should be considered as text size changes. Typically, for a given value, a color appears optically less intense at smaller text sizes and more intense at larger ones. Perceptually uniform color spaces, like Oklab, better represent how the eye perceives color, and its lightness, chroma, and hue settings can be adjusted mathematically to ensure text appears uniformly intense at all sizes.

Text color doesn’t simply invert when a background shifts from light to dark. The eye adjusts its sensitivity based on surrounding brightness, which means changes to lightness are more noticeable on light backgrounds than dark ones. In practice, the opposite of black text on white isn’t white text on black. Instead, text on a dark background should be set in a slightly darkened white. Here, this relationship can be calculated rather than guessed. Color ramps progress sequentially from light to dark, but the lightest tints and darkest shades get more nuance, as was done for the color palette for Morningstar.

On product screens, components typically layer on top of each other, resulting in concentric curves at the corners. If corner radii are scaled proportionally, they feel “off” and add noise to the screen. So, as the container size changes, corner radii also require optical adjustments. These, too, can be described as a mathematical function.

Not all optical corrections to circular forms can be described by the same function. For the Morningstar logomark to maintain its characteristic delicate line quality at all sizes, its line weight needs to adjust as its diameter changes. If the logomark was simply scaled proportionally, it would appear too thin at smaller sizes and too thick at larger ones.