Home » Articles » How to create visual structure through typography?

The origin of structure

Neolithic clay vessels from Bulgaria. Source: https://www.otizvora.com/2009/01/183

Since the dawn of time, people have tried to put order in the world. It starts with the first cave drawings, used to communicate our ancestors’ hunting methods. People then divided useful from useless, or matter from space, by using things like pottery vessels. On the macro side of things they did this by building architecture. Vessels that divide the familiar, and useful interior, from the unfamiliar hostile exterior.

But why does order or structure feel familiar, and useful? As I discussed in the last article, it is because it is based on patterns — the system our brain tends to work in. Structure creates predictability. And what is predictable, is comfortable. Back then — structure meant survival.

Now we live in a much more sophisticated time, where physical survival has not been the issue for some time, at least for some of the population. We have transitioned into a society, where information is the “next frontier”, where we go to explore and experience the world.

Which means, that the new place we need to help people get comfortable is information. And we can learn a thing or two from architecture, in order to achieve structure in how we lay out typography. So here are a couple of tools architecture and typography use in common to create structure.

Grids

The Parthenon, Image source: http://www.greatbuildings.com/cgi-bin/gbc-drawing.cgi/The_Parthenon.html/Parthenon_Elevation.jpg
The original movable type. Image source: Flickr, https://www.flickr.com/photos/purdman1/2875431305/in/photostream/

Ever since antiquity, grids were part of how we lay out building ensembles on a macro level. They were also implemented inside of a building to add repetition and modularity. Making things easier to plan, build, and ultimately use.

 

How does this relate to type though? Grids have been used since the invention of the printing press, in order to structure a printed piece of text. Back then it was a technological limitation of the medium. We simplified things, to make them easy to manufacture.

However we learned something useful from that — people love well structured text. Then Modernism came. And the International or Swiss design movement rose to prominence. And grids have become the standard tool of creating macro level structure in text. However structure does not end with the macro-level. Let’s go a bit deeper.

"Grid systems in graphic design" book by Josef Müller-Brockmann
“Grid systems in graphic design” book by Josef Müller-Brockmann, Source: https://www.amazon.com/Grid-systems-graphic-design-communication/dp/3721201450

 

Hierarchy

A building is a combination of functional spaces. Each has different function and different level of importance. That directs its size, materials used, floor type, etc. Which means there is an hierarchy based on function. Similarly – not all type is created equal. Each block has a different level of importance, which can be communicated by its size, weight, typeface, variant, etc.

A branding and web design project we worked on for Arcline Architecture. Source: https://www.arcline.co.nz/

 

 

We have things like the headings, which are there to communicate the critical essence of the message. They need to be very readable to quickly grab our attention. Basically, they need to stand out.

Then we have body text – which is the meat (sorry, fellow vegetarians!) of the communication. The type there needs to be easy to follow, easy to read, and ultimately, not get in the way. This is called legibility. We do not want the messenger be more important than the message itsself.

Then we have lower priority type, like captions, hints, and notes, which comment on the main body of information, but are not as important. They still need to be there and easy to digest, but they also need to leave the reader omit them, if he is in a hurry.

Now that we learned about different hierarchy levels, let’s see how we can make them well proportioned to each other.

Modular scales

Study in architecture scale and proportion, Source: https://donnallyarchitects.com/proportion-and-scale/

Buildings need to be proportioned in a way, which seems harmonious, but also is functional. This is where all the hoopla about things like The golden ratio comes from. Let’s see how this principle translates to typography.

 

We’ve talked about the functions of different blocks of text and how we communicate them visually. But how do we know how to proportion them to each other? How we can make them harmonious, so they look as part of a whole predictable system.

In typography, this is done through so called modular typographic scales. A modular scale is a consistent proportion you use when scaling each of the elements of your type.

It has two elements – a base and a scale. The base is the module we use for measurement – usually this is the font size of the main body of text. The scale is a number, that we use consistently to scale all the other elements around the base.

Now this sounds a lot more complicated, than it really is. So here is an example to clarify. Say we have a body text size of 16pt. In order to make well proportioned headlines, we can choose a scale, say – 1.33. Now we can make heading’s sizes bigger by this scale. we can make a level 3 heading measure 161.33 = 21.3pt. Then we can make level 2 headers even bigger, by multiplying by the same scale: 21.31.33=28.3pt. Heading 1 can then become 28.3*1.33=37.64pt.

A web-based visual tool to calculate typography scale: https://type-scale.com/

Cool thing about scale is that it does not end with font sizes. It can be used for other type measurements. But this is a whole other story.

In this article I discussed the macro levels in which we can achieve structure with typography. There are even more intricate details, which can further this sense of structure. Things like typeface selection, weight, leading (line-spacing), or tracking (letter-spacing). We will leave these for another time though!