Nice Web Type

Nice Web Type is one place for web typography, following experiments, advancements, and best practices in typesetting web text. Handcrafted by Tim Brown, Type Manager for Adobe Typekit.

Breakpoints and reference points

Jeffrey Zeldman on the state of the web:

Of course, if breakpoints are dead, responsive design is dead, because responsive design relies on breakpoints both in creative workflow and as a key to establishing user-need-and-context-based master layouts

As usual, Jeffrey elicits great comments, like this one from Ethan Marcotte:

There’s nothing that says our breakpoints, whether in our designs or in our CSS, need to be pixel-based. […] As I mentioned on Twitter, em-based breakpoints have the benefit of being tied to our content, and might present a more future-proof alternative.

Em-based media query breakpoints sound great, but I suddenly feel the need to differentiate between what seem like two different things: breakpoints (the numbers to which our media queries respond) and reference points (the keyframe compositions to which our designs respond).

For instance, when I wrote this in More Meaningful Typography:

Viewport sizes are good to know, but setting a composition’s width to one of these exact values and pouring in text is not ideal.

And this, in the same article:

When building toward a responsive design reference point—a carefully measured layout for one particular setting—we can use numbers from a modular scale and then convert to percentages as we normally would.

I was talking about reference points. A compositional reference point could use a max-width of 30rem, meaningful to its particular content and typography, and be centered in device viewports until a 40rem breakpoint (media query) invokes rules that build toward a different reference point.

This is, I think, exactly what the Goldilocks Approach is about. Only took me eight months to catch up with those smart folks at Front (who, as it happens, are also the ones behind Typecast).

Twitter: @nicewebtype
Dribbble: timbrown

Combining Typefaces

 

I wrote a small book about combining typefaces. Buy it for less than the cost of a fancy beverage.