Logotype: Modular Typography

Definition of Modularity (From the Cambridge dictionary)

the quality of consisting of separate parts that, when combined, form a complete whole.

In terms of design, modularity is a principle that helps manage content- it’s repeatable because its made from 1 module.

In the modular & matrix writing workshops of module 5002, I learnt to work with the restrictions of using a limited selection of shapes to compose letterforms. It was more challenging than I thought it would be. I found myself accidently breaking the rules. Because I was using paper, scissors and glue, it was possible to break rules. In today’s digital workshop, this wasn’t possible.

Other posts where I explore modularity:

Project #4 Drawing with a Grid

Grid Systems

Examples of modules

In today’s lecture we began by looking at examples of modules we are used to seeing in the world around us.

  • In pixellated photos, every cell is a module.
  • Graph paper consists of equally spaced lines, therefore squares.
  • In book design, the use of the grid makes an editorial layout an examples of modules.
  • Quilting Bees- popular in mid-late 19th century, mainly women, building a quilt together, creating a sense of community. Everyone expressing themselves via these individual squares. The pathwork designs are modular.

Modular Typography

Using a modular structure helps with decision making, as it gives some guidance to the designer, by providing limitations. Grids can start the creative process of the work, then you can focus on shapes, colour etc afterwards. It is 1 useful approach for designing logotype.

Arim Hofmann

Swiss designer, Arim Hofmann wrote a book about graphic design guidelines, called Graphic Design Manual, Principles and Practice. It was published in 1965 and outlined rules such as structure, form and line.

In his work, he demonstrated how many variations could be created with the single same modular, just changing positions.

The examples below are of typography that used a modular grid to compose. This is seen in the way the letterforms ‘fit’ together in the (left) example. The letterforms on the right combine wider horizontal strokes and thinner vertical strokes. This would indicate a grid that has narrow vertical columns and wider horizontal grid lines.

Karl Nawrot

Nawrot’s type design took inspiration from architecture, including in the way he worked on the designs. This was to use physical materials to build a structure, which he then drew letterforms (below, left).

Another method of his experimental typography was to create 150 different stamps and apply these to the same grid.

Nawrot names four of his typefaces on members of the Bauhaus school (below, right) : Josa (Josef Albers), Breu (Marcel Breuer), Mon (Lazlo Moholy-Nagy) and Pauk (Paul Klee).

Item Magazin Issue #4 ‘Strip’ Emilia Moro, Dylan Demtröder

In this issue of the student magazine, Item, the students were working with the theme of ‘strip’. Here, Moro and Demtroder have used Nawrot’s typeface Lÿno (co-designed with Radim Pesko.)

Item Magazin Issue #4 ‘Strip’ Emilia Moro, Dylan Demtröder

An example of a ‘stencil wheel’. Nawrot used these stencils to design letterforms, adding to them during the design process.

Albrecht Durer

In the 16th century, Durer designed modular type based on human proportions.

Fregio Mecano

This typeface was designed by an unknown designer in the 1930’s. It was made using the 20 components shown below, right.

These 20 pieces were found in the Nebiolo specimen from 1939.

Nebiolo Mecano 1940s
Jean-Claude Chianale

Design for a ballet identity system. Chianale has used an interesting grid when composing the letterforms:

The type applied to the poster design:

Jurriaan Schrofer

Dutch graphic designer, Schrofer’s dot matrices and sqaure grid system were progressive at the time and influence the way we approach type deisgn today.

Juriaan Schrofer (1926-90) The book, designed by Spin brings together a series of commercial and experimental projects from Schrofer

‘Writer Frederike Huygen, who provides an essay for the new book, describes Schrofer as ‘a computer-designer before the computer’.

Schrofer designed the book covers for Les Textes Sociologiques in 1970. Typeforms are used in an illustrative way. The underlying grid creates a gradient pattern across the type.

Wim Crouwel

Crouwel’s typeface New Alphabet was used by Peter Saville for Joy Division’s album cover:

When New Alphabet was first used, it was found illegible/ inaccessible for people. This modular typeface was adapting to the first digital screens, giving it its geomtric appearance.

Architype Stedelijk was the typeface he used in his well-known poster for the Stedelijk Museum in Amsterdam. Interestingly, he kept the grid visible in the poster:

I like the Architype Stedelijk ‘a’.

Crouwel’s sketches, using grid paper to plan his letterforms.

The title for this poster has a uniform appearance, from its use of an underlying modular grid. There is a satisfaction to the neatness and logic of it.

Mario Eskercezi Studio

Typeface/ identity for the Victoria Brewery in Malaga. Since there a lot of tiles in the city, the designer took the environment as inspiration when designing the modular typeface for the beer advertisement. The grid pattern is also used in the background of the poster which provides a ground for the type to sit on.

The type could then be used within the environmental design, since it could be easily made up of equally sized tiles.

By designing our own grid, this will determine the design of a unique type. A possibility is to make our own grid- rounded. However, for today’s workshop, we were provided with a grid designed by our tutor. Below is the grid I was working with. The designs in the square were worked on by my tutor, I kept these for a reference to look at.

Illustrator Workshop

I ensured snap to point and smart guides were on. This helped when working with the grid. But even so, I still found that the shapes didn’t always fit exactly into the grid squares.

Effect> distort and transform makes shape imperfect to use in modular. (I didn’t use this effect today but I would like to try it in future practice).

Results from this workshop:

Using 3 different shapes.

Using 1 shape to create a curvy, twisted letterform.

3 different shapes.

The 3 shapes I used to design the letterforms below:

Project #4 Drawing with a grid

Project #3 Invited us to think about getting an idea onto paper: how we could visualise an object – in this case my leaf – and produce a visual record. Paper and pencil is one way, and it works for many cirumstances. For example, a straight-forward illustration for a story or educating people about leaf anatomy.

Project #4 required me to think in a different way. This time, I needed to translate my object onto a grid. This brings to mind the pixelated animations in early video games.

These animations were in no way impressive, back then and to the modern eye. But they worked because they simplified the objects and in most cases, this was enough for the imagination to make up the rest. The resemblance wasn’t always perfect.

An example of these early graphics is the game Fishing Derby, released in 1980 for the Atari console. The cover illustration shows us the narrative of the game. Below, you can see the actual gameplay, where this story is translated into this primitive animation. Simplified, yes, but it works. I can understand what every shape is supposed to represent.

Screenshot from Outlaw. Another Atari game, this one realeased in 1976. These graphics are really successful in my opinion. The cowboy hats and guns represent cowboys, but incase you weren’t sure, the image of the cactus tells us the location and combines with our association of cowboys.

link here

While in a vintage toy rabbit hole, I came across the Lite Brite toy. I remember this toy in my distant memories, but never knew the name of it. The toy allows you to use lightbulbs to create pictures.

Secondary Research

I wondered how I could simplify a shape and still make it readable. I began to explore how designers apply similar methods to type.

I looked at type that has been constructed using a grid and appears with this pixel style.

Rosetta

The design studio Rosetta have come up with Gridlite PE. This is a typeface that utilises a grid structure.

‘Gridlite, an experiment with a modular negative space, is a simplified and monospaced variable font ready to be animated, typed, scaled up, scaled down, rounded, or otherwise deformed. It sports variable axes to control the size of the elements, their shape, and the background.’

I can envision this type being adapted to a physical mosaic, using tiles for example to spell the words. The grid structure means it can be easily drawn up and converted into other uses. I like the clarity and neatness of this type (below).

Rosetta – Gridlite PE (rosettatype.com)

The type reminds me of the computer game ‘Snake’ (below). Maybe because of this association, I see the type as moving.

‘Snake’
This image has an empty alt attribute; its file name is magic-1024x473.jpg
‘Magic’ variable of Gridlite PE by Rosetta.
Nigel Cottier – Letterform Variations

In the book Letterform Variations, Cottier explores different ways of forming letters of the alphabet. He uses the grid system and other shapes to form the letters. In table below, we can see the 16 variations of forming a given letter. By starting with the simplest form on the left column, he abstracts the shape further, pushing what can be recognisable as that given letter.

For the ‘H’, he plays with rotation as well. I would not have considered rotating the letter, since we write from left to right and top to bottom in a typical page of text.

For the ‘I’, he even leaves a gap in the letterform. The ‘I’ is still recognisable despite this gap.

I find the numerals easier to decipher at a glance. I’m not sure why this is.

This image has an empty alt attribute; its file name is LV01L-409x1024.jpg
https://letterformvariations.com/book/
This image has an empty alt attribute; its file name is Slanted-Publishers-NigelCottier-LetterformVariations04-1024x683.jpg
https://www.slanted.de/product/letterform-variations/
This image has an empty alt attribute; its file name is Slanted-Publishers-NigelCottier-LetterformVariations16-1024x683.jpg
https://www.slanted.de/product/letterform-variations/
Wim Crouwel

Crouwel was an experimental graphic designer, born in 1928. He was a leading figure in modern Dutch design.

Typography must be visually orderly for the purpose of good readability.

Wim Crouwel

He designed ‘new alphabet’ which was considered not useful for everyday use because of its low legibility. His typefaces were designed to be used for a computer display, since the grid use meant that these typefaces could be applied to a computer pixel by pixel.

New alphabet typeface by Wim Crouwel
This image has an empty alt attribute; its file name is 1968-vormgevers-679x1024.jpg
Vormgevers Designculture • Wim Crouwel

The above poster for an exhibition in 1968, makes use of the grid to compose each letter. I like the cut-out corners and the way they are rounded. The result is playful and futuristic.

Other simplified/ modular typefaces

I looked at more typefaces that could be described as modular fonts. This means the letters have been broken down into smaller parts.

A modular typeface is an alphabet constructed out of a limited number of shapes or modules. Modular describes any letter assembled from a limited palette of distinct elements, repeated, flipped and flopped but not scaled. Typically these elements are geometric and simple in shape—square pixels on a digital display or modernist circles, squares, and lines.

Typography 01

I was also reminded of the plastic alphabet stencils used in school. The letters are broken apart from necessity. Only the letters with a central cut-out area are constructed from 2 parts.

This image has an empty alt attribute; its file name is mercury-blob.jpg
This image has an empty alt attribute; its file name is mercury-blob-normal-lower.jpg
TT Mercury Blob Normal Lower font

I find the above and below fonts (Mercury blob and Moonbase alpha) easier to read from further away! This is probobly because the pixels merge optically, giving them a more solid appearance at a distance.

This image has an empty alt attribute; its file name is D1YquqhV4AYFz_T-1024x1024.jpg
Moonbase Aplha typeface by Cornel Windin
Modular type designed by Deviantart user Final-Ressurection

Modular typography- addictedtotype

This design uses a 3 x 3 grid to construct the alphabet. I find some of the letters more legible than others. For example, I only recognise the ‘M’, in the context of the rest of the alphabet. If I had seen this shape alone, I’m not sure I would have read it as an ‘M’, or even as a letter.

Primary Research

The task was now to translate my objects (the 12 leaves) into grid drawings. I worked mainly from the photographs of the objects. The main reason for this it that the leaves began to wilt very quickly after I brought them home, changing their shape.

I’ve placed the photos into the formation of the grid, to enable me to compare the objects to their pixelated counterparts.

This image has an empty alt attribute; its file name is for-the-blog-3.jpg

I worked on 2 concepts per each of the grid types. One grid being made up of round parts and the other being square parts. I used the concept 1 (below) to come up with a more filled-out version of the shape. The 2nd concept was then the simpler version, using less dots to construct the shape.

This image has an empty alt attribute; its file name is B_Project-4-9x9-circles-grid.jpg

The square grid was easier, since placing one black square next to another created a seamless line. I again applied the same rule to this grid type, with the 2nd concept being the most simplified. For concept 2 I aimed to use the least dots possible to construct the shape.

This image has an empty alt attribute; its file name is Project-4-10x10-square-grid.jpg