Expression Through Typographic Hierarchy

While browsing through Pinterest today, I typed in the words “typography”, “hierarchy” and “expression”. After about five minutes of scrolling through the image results I stopped at one particular image that stood out to me as a wonderful expression of harmony. I took a screenshot of this image — a poster for an Avett Brothers performance — and tested its proportions to see if they happened to correspond with the Golden Ratio. It was satisfying to find that the pattern of red birds in this poster does indeed grow out of this 1 to 1.618 ratio. Scroll down to see the original Pinterest image, and my geometric study with Golden Ratio Rectangles.

This correspondence between my felt sense of harmony and the presence of the Golden Rectangles encourages me to continue my work on designing a set of device-responsive layouts for a website theme that uses this ratio as its underlying compositional tool. The goals for this theme have been, first, to relate the different typographic headings, body copy, and web page margins in patterns that are based on this ratio, and, second, to end up with a set of web pages that can also serve as an expression of harmony.

The Practice of Drawing

For the past eight Thursdays I’ve been helping our neighbor’s thirteen year old son, J, to develop his observational drawing skills. In an age where anyone can take a photograph of anything in their environment with their iPhone, it seems to be increasingly rare to find a young person who has an interest in directly observing the visual world.

Translating the three-dimensional world onto a two-dimensional paper does not come naturally to many of us. Among the many different exercises that J and I have tried up until now, the two most engaging have been the practice of “blind contour” drawing, and the practice of drawing with the old Albrecht Durer perspective grid.

In addition to providing a welcomed break from the digital world in which I’m so often immersed, I get to spend some analog time with a great kid.

Frank Lloyd Wright, Organic Architecture, and Web Page Design

Here are some studies that I made of several designs produced by the iconic American architect, Frank Lloyd Wright. Although the extent to which Wright made deliberate use of the golden ratio is not well documented, the following visual studies reveal that, in a number of his works, the 1.618 ratio played a central role. With each quarter turn of any golden spiral its distance from its origin point increases (or decreases) by a ratio of 1 to 1.618.

How can we apply the principles of what Wright referred to as organic architecture to the design of a web page? What impact would impressions received from organically designed web pages have on our time spent online?

1. Roloson Row Houses1
Roloson Row Houses

2. Kinder Symphony, balloons and confetti for the Avery Coonley Playhouse
Kinder Symphony for Avery Coonley Playhouse

3. Windows for J.J. Walser House
Windows for J.J. Walser House


1 Much of the credit for the Roloson House study goes to John Morris.

Metronomes, Whip-poor-wills & Typographic Rhythm

whippoorwill2_blogpost_header_02 copy

I heard a bird calling outside my window today. This prompted my strange brain to wonder whether a bird call could be used as a source of inspiration for laying out a set of text columns.

When I first scan a visual composition — whether it’s a painting or a web page — my eye lands on the various parts of this composition at distinct moments in time. These moments can be assembled into a rhythm that evokes the sound of a time-keeping device, or they can be arranged in accordance with a rhythm from nature. In the two videos below I wanted to illustrate how the relative widths of a set of three text columns — as well as the spaces between the columns — could be connected with these different rhythms.

video 1 of 2: metronome-based design

video 2 of 2: whip-poor-will-based design

Audio Source for Video 2: Birds of North America, at

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.

Continue reading

Better Visual Design Means Better Business (Part 2)

headerImage 2016 01 01 new

In the previous post I provided a couple of pictures to show how a careful attention to the grouping of, and spacing between, typographic areas can help clarify a business’s drink menu.

In this post, I’m including an illustration of how the design of the menu can be taken one step further.

Beyond merely grouping and separating typographic elements, I used a set of interdependent golden-ratio spirals to help visually unify all of the diverse parts of the menu. The illustration below is a sort of “x-ray” of the layout from the previous post. In much the same way that a well-tuned stringed instrument is necessary for creating various musical harmonies, a carefully-proportioned set of figure/ground areas are needed to create visual harmonies.

illustration 2016 01 01 new

Better Visual Design Means Better Business

Better Visual Design Means Better Business

I recently came across a website template that’s currently being sold by a very popular web publishing service. The theme of the template is pre-designed to appeal to bar/restaurant owners, and the default layout allows business owners to publish their food and drink menus. The sample photographs used in this demo-site are rich in detail and color. The fonts are clean in appearance.

As a whole, this web template makes a bold first impression.

So, I make up my mind to pay a first-time visit to this imaginary tavern. I call my friend, and together we take an imaginary walk to this make-believe establishment. We sit down at one of the small outdoor tables, and proceed to order drinks. My friend decides to Continue reading

The Long Canvas — Designed for Scrolling

A City of Cathay_02

Over the past five or six years web designers have worked at devising “fluid” alternatives to “fixed” web page layouts. The increase in the variety of screen sizes has prompted a search for visual layouts that can easily be modified.

However, many of the new layout methods do not make use of visual composition.

Unlike a painter’s canvas, viewers of web pages only see a section of the whole page at any given moment. To move from one section of the page to another, a scroll bar is used.

In contrast, traditional composition is all about meaningfully connecting the different visual sections with the whole. So why bother with composition when the web page as a whole will never be seen, and isn’t composition even less necessary if we’re talking about viewing web pages on a phone?

These questions prompted me to take a closer look at a physical scroll, to find out how people from the past have approached composition for scrolls, and to see how their methods could be used to create compositions for the web.

Figures 1 and 2 show a section of a Chinese scroll1, and a compositional analysis of the same section.

Continue reading

Queen Anne’s Lace, Trucks, and Typographic Hierarchy

NOTE: Thanks to flying_leaves for questioning two of the diagrams below. I’ve since clarified the two diagrams, and have included them here.

QAL preview

Below is an infographic that illustrates how things that occur in Nature can be applied to design. It provides an example of how a conceptual hierarchy (in this case, CARS > PICKUPS > 4-CYLINDER) can be supported by a corresponding visual hierarchy. Verbal analogies are translated into visual analogies: 4-CYLINDER is a subset of PICKUPS as PICKUPS is a subset of CARS.

Proportions are a good way to visually illustrate analogies that are presented in typographic form. In this infographic, proportions are used to determine the relative x-heights of headings, subheadings and body copy. The negative spaces between successive lines of text are given equal consideration. Even the width of the text columns (i.e. measures) can be included in this network of proportions.

QAL SS_trimmed

QAL Revsion_SS_01

QAL Revsion_SS_02

Golden Grid Layout as Used in a Local Farm’s Website

Screen Shot 2015-05-16 at 10.16.27 AM

Screen Shot 2015-06-06 at 1.20.32 PM

I recently designed this website for a CSA farm that’s located a few of miles away from my house. The entire design is based on the phi (or “golden”) ratio that I mention in earlier posts.

The red spirals in the second image show how the individual web page elements connect with the larger whole of the page. None of these red lines are seen by the site visitor, but the proportions of the site are felt to be harmonious. Continue reading