Understanding Responsive Typography

Forget what I said last time. Opening my mind to all the ways I can think up for how responsive type can work has generated a great delay in me actually coming up with a coherent message on how it’s done. The fact is — even if we limit the scope of our interest to technologies that are currently accessible and mainstream — we still live well under our privilege when it comes to what’s possible with responsive typography. So rather than a show and tell, where I say ‘here’s how it’s done,’ I’m instead focusing on pushing the boundaries of what’s considered responsive design just a little, and giving a few pointers along the way.


What responsive design means now

To most in the field, responsive design means controlling the presentation of a webpage through some carefully written CSS that checks the minimum width of the viewport and rearranges the layout, reflowing the copy and bumping the size of the text up or down accordingly. Often the design transforms along a small set of three or four base layouts, separated by discrete breakpoints.

What responsive design can become

Oliver Reichenstein touched on this in a talk he gave at TYPO San Francisco. He was discussing how for his app, Ai Writer, Nitti Light worked perfectly; but after Apple introduced its higher resolution Retina display, the type was all wrong. Something had changed. It was lighter, but it had also subtly lost its character in the new environment. This problem is something that can be helped by responsive typography. And this is a good starting point, but really only one avenue to explore among the many I alone see. Here’s how I break it down: There are conditions that can be measured, and there are responses that the design can make. And there’s a step in between that deals with how capable and trustworthy the data that measures the conditions is, and how reliably an appropriate response can be formulated and made.

Conditions that may elicit one or more appropriate responses

Size of output, intended purpose of the design, number of persons viewing the content, one Nick Sherman pointed out that I mentioned last week: distance from eyes to the reading surface, are all huge factors in how best to show content. Also, things like facial expressions, or the part of the screen on which the the viewer’s eyes are focused may be particularly useful. If projected, the position, color, texture, and motion of the object(s) onto which the content is projected could open interesting possibilities. Back closer to the here and now, things like region, location, position in space, current speed/momentum, ambient light (value and color temperature) and proximity to other devices are additional conditions to consider.

Ways the typography may respond

The obvious ones are things like font size, length of measure, line height, margins, etc.. Others within present reach are the font’s weight, color, style or family. And just outside of easy reach are movement, perspective, and direct manipulation of a font’s masters, (meaning that the type would respond fluidly across changes in weight, width, or any other arbitrarily defined axis, such as serious to playful, futurist to humanist, Persian to Arabic).

Just to conclude these thoughts for now, I know we’ve taken a hard road to get where we are with webfonts actually working as well as they do, but I wonder if it isn’t time to move on. I hope we don’t get too comfortable with type and typography in its present form.

Using Type will pick this back up on Thursday. Thanks Telefon from Monokrom for setting the title.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s