Physical Web Typography

Physical Web Typography Intro Pic

I came across a discarded metal salt shaker a number of years ago. Its form and ornamentation struck me. The tactility, weight and scale of the shaker left me with the impression that this object was made to feel like an extension of my hand. I later learned that this shaker was made in the late 1920s. It may seem like a strange thing to say, but I felt that in holding and looking at this salt shaker there was a certain kind of remote communication between the designer of this object and myself.

Many web designers are interested in learning more about the visual aspect of their craft. They want to know how the process of designing web pages can grow from a collection of letterforms and ideas to an overall visual composition that supports these ideas. This is a long-standing question when we’re talking about graphic design, and one that comes from a broader visual arts tradition. In the most general terms this goal can be stated as the wish to more comprehensively communicate something to a viewer, by physically representing what starts out as a concept, or feeling.

But how can I, as a web designer, physically represent anything when I’m working with entities as intangible as a set of pixels? If feelings can be communicated through the shaping of physical materials, then how can a set of pixels be shaped?

One way is to give back to the pixel, the screen, and the letterforms their inherent materiality. This involves an alchemy that’s known in the everyday world as “a shift of attitude”.

Luckily, this is an easy shift for a web designer to make. It requires nothing more than a wish to reintroduce to their visual work the appreciation for its material nature. That same material nature that the late 20th century art movement, known as “dematerialization”, has deleted from its list of acceptable areas of study. This movement has strongly influenced present day design attitudes, and can be found in the cyberspace-design approach that’s regularly used to design and code the typography for web pages. This approach results in what web coders call fluid or elastic layouts. When viewing these layouts I see that the typography rearranges itself based on changes in the width of my window or screen. But, more importantly, I also notice that these rearrangements don’t evoke a true sense of materiality. In terms of physics they represent neither the changes observed in a truly elastic material (as, for example, a sheet of rubber) nor the fluidity seen in the physical flow of water.

Without this sense of materiality I notice that my response to the typography is no more than a cerebral experience.

To have the typography reach me in a physical (even visceral) way, I believe that the scale and arrangement of the letterforms need to be based on an understanding of the two-dimensional materiality of the forms of the letters themselves, and of the spaces around and between them.

Assuming that the designer is interested in bringing about this shift of attitude, what’s the next step?

A good place to start is to recognize that the screen on my device is a two-dimensional surface, made up of a physical grid of pixels. At any given moment there’s a definite physicality to the light that’s let off by each single pixel. Like the warp and weft of a finely woven carpet this collection of pixels lets off lights of varying qualities and intensities.

The direction that I’d like to follow here is based on the possibility of weaving the pixels of a web page in such a way that it produces a harmonious result. That is, I work to achieve a quality of unity through diversity. The first property that I look at is that of scale, and the first design elements that I use are letterforms.

In terms of form and scale, each letter on the web page will have what typographers refer to as an x-height. Ordinarily, this x-height would be set to occupy as few or as many pixels as one wants. However, for the purpose of establishing a certain harmony the designer would need to choose an x-height that has some very precise relationship to, and connection with, the scale of some familiar physical object. Following the lead of the ancient Egyptians I’ll use my hand as a basis for my measurements. I’ll use this as the source for developing a scalar progression, and then use this progression to construct the typographic layout. This hand-based layout will include not only the x-height of the letters, but the distance between the lines of text, and the overall width of the text columns. In this way I’ll be able to put together a web page that’s made up of scalar relationships that connect in a definite way with the physical dimensions of my hand.


Leave a Reply

Your email address will not be published. Required fields are marked *