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.

Responsive Typography

This page is a limited reference of core concepts. Its purpose is to help us understand the relationship between web design’s fundamentally fluid nature and the typographic standards of construction that have served us heretofore.

Responsiveness and fluidity

Ethan Marcotte defines Responsive Web Design:

A responsive design is composed of three distinct parts:

  1. A flexible, grid-based layout
  2. Flexible images and media, and
  3. Media queries, a module from the CSS3 specification.

Units of measurement and sizing type

Ethan Marcotte explains sizing type with rems:

Introduced in the CSS3 specification, the rem behaves much like the em: it’s a relative unit of measurement, sizing text up or down from a baseline value. But the rem is sized relative to the root of your document—in other words, the value set on the body html element.

That’s right: no more tracking various context values, worrying about which element’s inheriting which font-size value and going slowly mad.

Tim Brown (yours truly) on device-relative measurement:

A pixel is not a pixel is not a pixel. In other words, there are no absolute sizes when it comes to measuring web type. Everything is relative. So a sensible place to start is by zeroing our scales to the “normal” of a given environment.

Scott Kellum explains what pixels are:

The truth is that there are two different definitions of pixels: they can be the smallest unit a screen can support (a hardware pixel) or a pixel can be based on an optically consistent unit called a “reference pixel.”

Filament Group suggests that we leave default font size alone:

As we began building Responsive layouts – particularly layouts that use flexible em-based media query breakpoints – we’ve encountered several reasons that the practice of setting the body font-size is no longer such a good idea in our own work.

Composition

Jeffrey Zeldman on rules-based design:

A modular approach, wherein the display of each element on the page is controlled by rules that take serial adjacency into account, may be better suited to the web as a medium. We call this approach Rules-Based Design.

Tim Brown (yours truly) on breakpoints and range rules:

Breakpoints are moments of change. They allow us to make design adjustments that are only possible by changing the value or presence of CSS properties. We should invoke breakpoints as they are needed by our designs.

Range rules are behavioral limits baked into CSS. For instance, if a column uses min- and max-widths, these are rules that govern its range of motion. When elements in a layout float, but then bump against the limits of adjacent elements, this is a natural part of CSS — there is a range of acceptable behavior.

Tim Brown (yours truly) on “molten leading” – line-height as a range rule:

What we need is a fluid way to set line height. Web designers should be able to define line height as a range, like we do with min- and max-width. I made a simple page to visualize how I’m thinking about this. Molten leading would maintain a specific font-size while adjusting line-height based on width.

Help wanted

Nice Web Type reader feedback is not only welcome, it is critical to my understanding and it helps me teach others. Please examine, critique, and challenge this collection of core concepts.

Write to me at email hidden; JavaScript is required, or say hello on Twitter.

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.