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:

Sustainable campaigns & animated GIF

Sustainable campaigns- group presentations

Watching the class’ group presentations, gave me new ideas for how a sustainable campaign can be presented.


  • Greenpeace- Detox (guerilla marketing) The use of props gets across the message instantly.
  • Mental health awareness week- get outdoors
  • WWF focuses on 4 animals. I noticed the importance of focusing onto specific aspects of an issue. If these posters tried to cover every animal affected, it would be less punchy.
  • Ocean agency- coral
  • Reimagine by Landrover- electric cars
  • ‘Tomorrow starts tonight’ IKEA – Mother London Creative group (healthy lifestyle)
  • Use of metaphor. Transform by swapping context:
  • ‘steps’ IKEA also Mother London
  • Use of icons- Kiehl’s- formulating a better future- use of colour (green for sustainability)
  • HS2 Rebellion – use of photos from the construction site! This sends a powerful message because we are seeing the actual site of the destruction with our eyes. In terms of the Tesco/Greenpeace campaign we could use this strategy to demonstrate the effect Tesco are having on rainforests.
  • They also use cartoon illustrations to represent the destruction taking place and its potential effect on communities.
  • Texture in the font. Illustration and handmade signs. Different designs for different audiences. Designed for the location or for online.
  • Wild East UK- bold letters:
  • Not looking at the whole problem- by zooming into specific animals
  • Find your way- mindgrowing.org
  • Use of sketches- play on words , colours blue and green relate to Earth. (taking into account the implications behind colour choices.)
  • Quirky/ chunky font=relaxed. Focusing on 1 word instead of the whole title.
  • Design company the lovers
  • Attacking the viewer- questioning their humanity ‘are you a robot?’ targeted at the digital era. (Greenpeace)
  • Nature is speaking- using a different voice for each aspect of nature e.g. ocean, ice, mountains.
  • Extinction Rebellion- photo of house submerged. House designed and built by them to suggest rising sea levels. Strategic placement.
  • Greenpeace and Extinction Rebellion both use shock factor.

Animated GIF workshop

Working in PNG is best for animated GIFs.

We would use Illustrator to create the slides and PhotoShop to animate the separate slides, exporting them into a GIF.

  1. Export for screens
  2. Window > timeline > create frame animation
  3. Clicking the plus adds new frames.
  4. Allow enough time to read the text. e.g. 2 seconds.
  5. Press play to see the animation.
  6. Mp4 file plays on Instagram- can’t upload a GIF on Instagram.
  7. GIF file> export > save for web
  8. Opening the GIF in a new tab, allowed me to view the GIF full page.
The timeline appears at the bottom of the photoshop screen. By clicking the small arrows, I can change the time each slide appears on the screen.
The layers can be viewed in this right-hand window. We needed to click on/off the eyes to hide the layers we didn’t need.
The play button allows me to see a preview of the animation.
The save for web window.
Opening the GIF in a new tab of the browser.

Project 3 – short animation- group work

  • The task for next week is to create a short animation. We are in the same groups as for the expressive type exercise. The aim of the project is to make the GIF extracting key points from the article on deforestation.
  • We must first define the problem (intro), highlight the causes and then conclude the issue. (The CTA of the article).
  • The type must be easy to read and understand, since the purpose is for it to be on social media.
  • We should refer to the demo to get an idea of what helps an animation to flow and be legible.
  • The animation could be longer than 11 frames e.g. 20 secs in total.
  • Don’t overcomplicate it! Stick to just 1 font. Use a font with high legibility- could be from google fonts. Typography style- use the type manipulation that we used in Project 2.
  • Simple, punchy is best.
  • Need to communicate the idea of deforestation. This can be done with the graphics as well as the actual words.
  • Stick to short phrases. Extract some data from the article. Could make the numbers bigger. Some slides could show just one word. Using colours to stress the message. 1080px x 1080px. (size of insta post)
  • present on 28 Feb
  • 1 GIF for the group.
  • Just typography- no images.

Ideas from group discussion:

  1. Ben- forming the script from the text
  2. Demelza- putting these into individual slides with Illustrator
  3. Holly- animating the slides

We considered the use of:

  • Bold to thinner type
  • Bright colours to dull
  • Last phrase blurs into blank page
  • Could disintegrate at the end
  • look at google fonts, send them the options
  • Barlow condensed
  • Could use 3 colours- bright green- to muddy green- to black
  • Keep it simple, use just 1 effect.
On Illustrator, I made a few examples of how we could animate the effect of disappearing or loss. I then consulted the group, to see which effect everyone liked the most. We all agreed on using the pucker tool (top line)

Ben sent his script for the animation.

I transformed the words into slides, on illustrator. (below) I liked the rhyme and rhythm he has used.

From reading the brief, I saw that the GIF needed to include the causes, effects and solution for deforestation.

I therefore, needed to script the rest of the GIF myself, because of time restrictions. (left)

I sent the PNG files of the slides to Holly and the illustrator file to the rest of the group. I invited the group members to change anything they didn’t like before the animation stage.

I shared with the group, the plan for the slides. This would allow Holly to be able to work from the plan with the PNG images.

Feedback for the animated GIF

  • The transitions are a bit too fast
  • The gap in ‘are cut down’ is not immediately obvious
  • Too many effects overall e.g. the black outlines on the word ‘Earth’s’

Un-creative writing: further experimentation

Il Pleut, Guillaume Apollinaire, 1918
Lewis Carrol, Mouse’s Tale, 1865

Using the text I came up with from the random word generator, I played around further with the tools I’ve learned so far.

The reason I like this collection of words, is the double meanings.

‘Palm’ could be a palm tree or the palm of a hand.

‘Match’ could mean a pairing of 2 objects or people, football match, or a matchstick used to start a fire.

This is found often in poetry.

I typed the words using the type tool in adobe illustrator. I then turned them into vector images and experimented from there.

Below are the first 4 examples. I included italic font in the second image, to place emphasis on the adjectives ‘Blank’, ‘revolutionary’ and ‘perfectly’. I liked the effect this had of almost breaking down the text. I feel it made it easier to understand.

In the fourth experiment, I formed the words into a bridge shaped structure to illustrate the word ‘bridge’. I enlarged the ‘A’, as I felt this letter also has a bridge-like structure.

Placing these images into adobe photoshop, I was able to add these effects:

‘Radial blur’

I then went back into adobe illustrator and experimented with the words again.

  1. Large to small and cluttered to neat. I feel this suggests a large blank space and a small match.

2) Disorder to calm, like a wave crashing on the shore or something disrupting the flow.

3) Use of serif font (Bodoni) sets the middle sentence apart from the rest of the text and suggests something more formal.

4) Image trace> line art> increase stroke> outline>invert fill. I then went back into the image with the pen tool and added lines to help the words be more legible. I arranged the words in a way that feels more free and perhaps palm-leaf-like.

When there are words with a double, or triple meaning, the way they are presented/ arranged can help suggest to the reader which meaning you want to get across.

Letter stamps

Text from the receipt in previous post