Responsive Typography

Responsive typography extends naturally from the idea of responsive design, a term first appropriated to the field of graphic design by Ethan Marcotte, which he took from his observations in a different field, responsive architecture. The main idea is simple: a single webpage being displayed on multiple devices, each with a different-sized viewport, must adapt to function in its different environments. The previous answer to the question was to maintain a separate mobile friendly site, possibly further distinguishing it with a .mobi domain. (I can’t think of anyone offhand who presently does this.)

Picture 1

The current method uses CSS media queries to get a sense for how large a screen the site visitor is seeing. If it’s large, the code styles the page to show everything you’d expect browsing the web with a desktop computer. If it’s small, the styling changes the body text to take up the full column and sizes it to be readable on the small screen. It likely also pares back the user interface to its essential or most useful elements given the context.

Picture 2

Such a set of media queries only takes into account the size (and perhaps tangentially, the resolution or orientation) of the screen, but as new thought on the subject is pointing out, there are a number of other factors to which screen media can and indeed ought to respond. Nick Sherman gave one example, the distance from the reader’s face to the reading surface, in a talk last week at ATypI. The proof of concept was done by Marko Dugonjić. Also, the way a layout or composition responds to its environment or viewing conditions is something still completely underexplored.

We’ll pick up this discussion next week, and I’ll get a into the practice of how responsive typography is done. That’s it for now. Using Type continues here Thursday. Thanks to Alda for setting the title.

Leave a Reply

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

You are commenting using your 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