Commentary

Making Geometric Type Work

Ian Moore on February 8, 2010

For graphic designers beginning to experiment in type design, a geometric or modular typeface is a natural starting point. Illustrator and other programs offer a simple collection of elements such as circles, squares, and triangles which can be combined to create a passable alphabet. This is the same route I took when dissatisfied with the limits of commercial fonts at the time. I twisted and distorted each character to fit into a few simple, incredibly strict rules of construction. Invariably this produced a wide range of exotic letterforms, some more legible that others.

The intention of creating an entire alphabet from a few shapes is a design challenge — problem solving at its purest. For those with minimalist tendencies, the temptation is to strip away all the decoration and produce a simpler form. With software such as FontStruct and Font Constructor — which allow the user to quickly assemble a font from a set of geometric elements — this approach is now easier and more accessible than ever.

Luckily for those who make a career from type design, the Latin alphabet is not simply a collection of modular elements. A purely geometric solution in a short passage of text, with a certain combination of characters, may work, but once set in several lines of text the faults are much easier to spot. A typeface composed of strict geometric rules can lose subtle details and relationships between white space and stroke widths that have developed over centuries. Quirky characters that look great in isolation can snag the eye when repeated in a block of text.

Attempting to apply exactly the same set of rules to each letter is similar to handing out the same size clothes to a random selection of adults. Some will have excess baggy sleeves, others will be skin tight, and some will barely squeeze over their heads. To solve this problem the pattern has to be adjusted for each character, without losing sight of the overall design. As you make adjustments to the new characters, these changes echo back through the letterforms already designed. For example, if you started drawing a font created from a simple set of circles and lines, this may work perfectly for ‘a’, ‘b’, ‘c’, ‘d’, ‘e’, but then throw in a ‘v’ or ‘z’, or even an ‘s’, and you meet a dilemma. Should the letter be squeezed into the current template or adjust the template for the new letters? It’s best to start with a group frequently used within the English language such as ‘a’, ‘d’, ‘e’, ‘i’, ‘n’, ‘p’ and ‘s’, and later try diagonals such as a ‘v’ or ‘x’ to test the design.

This is not an argument against all geometric or modular typefaces, but simply some guidance on how to make them more readable, work effectively and be visually consistent.

Balance

Balance in designing geometric type

This is an example of a typeface created some years ago, based on a very strict grid of squares and circles. Many characters look quite presentable, but these few look particularly top heavy. Both counters of the ‘8’ are identical in size, but optically the top looks bigger. The ‘5’ has a squared-off counter on the top half, which creates larger area of white space than the bottom — making it look ridiculously unstable.

Widths

Consider width when designing geometric type

By cutting and pasting modular elements it’s common to make many characters the same width, but this creates widely different white spaces inside each character. Take the ‘b’ and ‘h’ for example — the squared-off counter of the h makes it appear much larger than the ‘b’s.

The Joins

Consider joins when designing geometric type

At the point where two strokes meet or cross each other, the join is liable to “clog up”. A typical example above, shows a circle attached to a vertical line to create a ‘b’. A heavy area appears where the curve tries to pull away from the straight. By trimming a little from the inside, it pushes the curve down in the right direction.

The ‘S’

Designing a geometric ‘S’

The ‘S’ is a difficult character to get right, it relies on a careful balance of two open counters both horizontally and vertically. The classic “cut and shut” technique of pushing two semi-circles together leaves a tell-tale kink in the middle. This meeting point has to carefully smoothed out to give the impression of one long stroke.

Stroke Widths

Consider stroke widths when designing geometric type

The horizontal and vertical strokes should not be the same thickness. If they are, the horizontal strokes will look heavier. An example above shows how a visually monolinear typeface such as Futura, has subtle adjustments to the horizontal strokes to make them appear even.

Overshoot

Consider overshoot when designing geometric type

Unfortunately, lining up straight and curved edges using guidelines does not work. In the above example, the circle is the same height as the two squares, but appears to be significantly smaller. To compensate for this optical illusion, the curve needs to increase in size so it seems level with the horizontal lines.

Spacing

Consider spacing when designing geometric type

Spacing can be a huge challenge to those new to type design, and only gets easier with practice. The example above shows rounded and straight shapes, all equally spaced apart. However, the two squares appear much closer than the two rounded shapes. By adding extra space to the straight edges and less to the curved shapes a good balance can eventually be achieved.

These examples are only an outline of the issues you will face when designing type, but will draw your attention to the most common mistakes. A strict set of rules at the beginning can produce some very interesting ideas, but they need to be flexible. This will not only to make your type work better, but will help differentiate yours from the others being churned out every day. The simplest rule to remember is: trust your eye more than the grid.

Ian Moore works as a full-time graphic designer and in his spare time as a type designer for The Colour Grey. This is an updated version of an article originally posted on Design Assembly. It’s been re-edited and expanded for Typographica.

30 Comments

Michael Critz says:

02.17.10 at 5:49 am

A great post, Ian.

In our studio there’s a great deal of concern about how certain geometric fonts have “fatal flaws.” For instance, Futura’s ‘?’ glyph — I can’t find anyone that likes it. Some people enjoy the whimsical ‘Q’ in ITC Avant Garde Gothic while other people hate it.

How do you add unique decoration to a geometric font that enhances letterforms?
Typographica: Making Geometric Type Work - SteveMacKley design says:

02.17.10 at 7:16 am

[...] Moore for Typographica has written an excellent primer on designing type. It is specifically intended for the beginner looking to create geometric faces. While a lot of [...]
TYPEFACE, revisited | Quite Contrary says:

02.19.10 at 4:44 pm

[...] I’ve recently rewritten the entirety of a project I did back in October, which combined facial recognition and type design. Most of the effort went into building a new system for how the letters are drawn. Or rather, I should say that most of the effort is also going into learning in great detail more about type design. In the initial version, the letters are drawn with lines and arcs. This was a relatively quick and easy method, considering I made the entire program in about a week, and the results were reasonably effective. However, the limitations of a geometric type system quickly became apparent. (There’s a great article about this here: Making Geometric Type Work [...]
ltoshach says:

02.22.10 at 9:41 am

This was very interesting and helpful, I am a new graphic design student and am starting to become really focused on fonts I did not understand why certain fonts looked awkward but after reading this it has pointed out to me many things that explain the thick bulky look of curtain geometric fonts. It is very interesting that the horizontal lines need to be slightly more thin than the vertical lines to make them look nice.
Ian Moore says:

02.22.10 at 5:43 pm

Michael – I think any font with a bit of personality will have a character that can divide opinion. Certainly with display types (such as Futura) there is a lot more licence for quirkiness. I think the question mark in Futura was more down to the designer’s whim, rather than any geometric restrictions.

To me the appeal of geometric/modular type is its weirdness, because characters are forced into a strict set of rules. The decoration is a by product of that process.
Rubio says:

02.27.10 at 10:05 am

We need more instructional posts like this.
Amit Patel says:

03.20.10 at 11:17 pm

A superb insight into mathematically created type. Thanks.
julie r says:

04.12.10 at 7:01 am

as a newcomer to typography and graphic design in general, this was by far one of the most helpful posts i’ve seen. very interesting and insightful!
a godefroy says:

04.15.10 at 5:29 am

This is great, thanks !
David Airey says:

04.19.10 at 2:06 pm

Nicely written, Ian. Thanks.

(From a type-design novice.)
Randy Willoughby says:

04.19.10 at 2:06 pm

I think Stefan Gandl, designer of Neubau Grotesk, may disagree with some of your points.
Yves Peters says:

04.21.10 at 11:48 pm

I think Stefan Gandl would have been better served to take note of some of Ian’s points. Neubau Grotesk is a seriously flawed face. Icky.
jbtiv says:

04.22.10 at 5:47 pm

Very insightful. I’d love to see more instructive type design breakdowns like this. Thank you!

Also, off-topic question, but what is your headline font? It’s nice. I see that it’s being served externally, but couldn’t view the fontdeck css. Thanks!
Russ says:

04.25.10 at 10:59 am

Thank you,

Great to be advised in getting the kinks out of basic geometric fonts. It’s these small adjustments that makes the difference!
hank says:

04.26.10 at 11:07 am

great article.

i love idea of using the alignment of pure circles and squares as an introduction to kerning.

i have noticed that a lot of the “o” characters in classic typefaces, such as Avant Garde, Futura and Johnston, are not actually perfect circles. although appearing as such, they have slight nuances to the curvature of a perfect circle. Herb Lubalin’s Avant Garde Gothic for instance, has the North East, North West, South East and South Westerly points of the circle pulled out, to make it very subtly squarer than that of a perfect circle.

can any one recommend any books on type design that go further than the ideas covered in this article?

thanks,

hank
Stephen Coles says:

05.05.10 at 8:48 pm

what is your headline font?

See the colophon below.
Stephen Coles says:

05.05.10 at 8:55 pm

Neubau Grotesk is a seriously flawed face.

It’s meant to be flawed. Gandl’s goal is a strict, mechanical grid without correction. It’s awkward, but that’s part of its flavor.
djpt3 says:

05.07.10 at 4:54 pm

“The simplest rule to remember is: trust your eye more than the grid.”

True true… great article
thanks
webdesign bremen says:

07.09.10 at 8:57 am

A very nice Post:-)

How do you add unique decoration to a geometric font that enhances letterforms?
Stripeyhorse graphic design says:

07.10.10 at 1:04 pm

Great article. More break down of type like this would be great.
Luis Del Valle says:

08.19.10 at 2:44 pm

Great article, very interesting.
Design Agency Leeds says:

08.31.10 at 9:13 am

Great article. All harks back to the Bauhaus days of typography and introducing order and grid systems into design! Ahhh…. at least all those rather tedious design history lessons I endured haven’t gone to waste! Thanks a lot for posting
Lauren says:

09.13.10 at 8:36 pm

Sigh. If only I had known these basic concepts on geometric fonts before, perhaps some of my type design disasters could have been avoided… The horror. Live and learn I suppose. Thanks for sharing these techniques, they can be very, very crucial.
(Pryor Design Company) (Ann Arbor Design) says:

10.08.10 at 8:50 am

Great post Ian. With all of the different fonts available these days it’s important we as designers have the basic understanding of rules and techniques that are crucial when creating and picking a typeface. Thanks for sharing your knowledge.
Pablo Impallari says:

11.05.10 at 11:08 pm

Thanks Ian:
I just created co-created Terminal Dosis, a very light, slightly rounded font, and this post was o much help for fine-tunning the original design by Edgar Tolentino.
Claire says:

12.14.10 at 3:45 am

Some very useful tips of things to avoid. Great help!

Thank you :)
Patrick Barber says:

05.27.11 at 9:46 am

Well written, Ian. I like the clear, workshop-like feel of this piece, and the illustrations beautifully enhance your text.
guest says:

02.02.12 at 1:06 pm

Very good explanations at:
http://briem.net/
Ali Demirel says:

08.26.12 at 10:41 am

What is the typeface reviewed here? Which is “created some years ago, based on a very strict grid of squares and circles”?
I see Neubau Grotesk being mentioned but it’s not this one.
Thanks!
logo ontwerp says:

12.09.12 at 4:59 am

I love this article. I am so inspired to make an own font now. Maybe… you will hear from me again ;-)