Setting type across multiple screen widths typically involves a level of compromise. A standard composition sets type sizes at specific breakpoint widths, usually targeting a set of pre-defined, most popular device widths for desktop, tablet, and mobile. Although it’s possible to add more breakpoints to account for more device widths, the spaces in-between the defined widths will always need attention. The task inevitably falls to fixing what looks bad. So why not account for all screen widths?
Not unlike a river, responsive type should flow with the layout, adapting to the shifting margins of the viewport.
This page compares standard breakpoints to our custom, continuously responsive type for all device widths. Of course the point can only be illustrated viewing this page in a desktop browser — a browser with an adjustable width.
If you’re viewing this page in Chrome or Safari, another micro-adjustment is taking place thanks to the new “variable font” format. As the viewport becomes smaller, the type becomes ever so slightly bolder, enhancing legibility at the smaller sizes.
The goal of all these machinations is to maintain a good reading line at all widths. It is said that a good reading line is somewhere between 45 and 75 characters across, including spaces. Of course the number of characters isn’t as important as the quality of the resulting line. Here we push 80 at the large size and 50 for mobile. An even righthand “rag” is also desirable, although it will rarely be perfect, especially without hyphenation, but we try.
More micro-adjustments are made to things like line height, margins, and padding, the resulting composition fit for any viewport.