Typography | Task 3: Type Design and Communication

Date: 09/06/2025 - 30/06/2025 (Week 08 - Week 12)
Aishath Eshal Shihab, 0381863
Bachelor of Design (Honours) in Creative Media - Taylor's University
Task 3: Type Design and Communication

Instructions

Module Information Booklet

Task 3: Type Design and Communication

Description -

In this task, you will have to design a number of western alphabets. Choose an existing font and study it carefully by analysing its anatomical parts. Start with rough sketches and come up with a few options. Upon approval, start digitization using Adobe Illustrator, and later, FontLab. You will be creating typface that has the hallmarks of a good typeface - subtelty or character, presence, legibility and, readability. Below are the letters you will design
A E P Y I T G D M O B / a e p y i t g d m o b and punctuation: , . ! #
Afterwards, you will make a basic A4 poster displaying your font.

Marking Criteria -

Evidence of in-depth research and visual analysis is visible.
Multiple ideas have been explored with great care deliberation.
The design process showcases knowledge of typographic convention, methodology, and production.
The designs are extremely well crafted, consistent, and technically sound.

Timeframe -

Week 08 - Week 12

Deadline -

Week 13

Learning Goals -

a) To develop students' ability to construct a readable and legible font.
b) To develop students' ability to design a font with consistent characteristics premised on research and analysis.

Process

Research

Figure 2.1 Letter Dissection Week 8 (09/06/2025)

We were first asked to choose any three letters in any font and use lines and circles to dissect them. This activity was done to get a better understanding of letter formations and observe how different parts of the letter align with one another. When completing this task, I realised that all of the aspects of the letters do not have to be symmetrical and sometimes, symmetry can make the letter look wrong or off. This is why it is so important to adjust by eye until the letter looks easy to read.

Then, I found inspiration on Pinterest for what I wanted my font to look like.

Figure 2.2 Font Style Inspiration Week 8 (09/06/2025)

Sketching

Using graph paper and either a pen or marker we sketched four font ideas for the letters a, b, g, and t. I came up with font styles inspired by:

Stars:

Figure 2.3 Star Font Sketch Week 8 (09/06/2025)

Crescent Moon:

Figure 2.4 Crescent Font Sketch 8 (09/06/2025)

Cats:

Figure 2.5 Cat Font Sketch Week 8 (09/06/2025)

Spider Webs:

Figure 2.6 Web Font Sketch Week 8 (09/06/2025)

After consulting with Mr.Max he told me that many students are doing crescent moon themed fonts so he would opt against it, the spider web design was very unique and asked me to do the full sketch (a, b, d, e, g, i, m, o, p, t, y, ., ,, !, and #) for the star, cat, and web fonts.

Figure 2.7 Cat Font Full Sketch Week 9 (16/06/2025)

Figure 2.8 Web Font Full Sketch Week 9 (16/06/2025)

Figure 2.9 Star Font Full Sketch Week 9 (16/06/2025)

During the next consultation, Mr.Max checked all my sketches and said that the spider web font was good but the star and cat fonts were more interesting. I was told to proceed with digitising whichever font I preferred. I chose the cat font.

Digitising

To digitise our fonts we used Adobe Illustrator.

Figure 2.10 Digital Sketch 1 Week 10 (23/06/2025)

I was asked to change the letters i, m and the exclamation mark to remove the flared base because the other letters did not have flared bases. The y also looked a little hard to read so I changed that too. I made the fullstop and comma smaller as well.

Figure 2.11 Digital Sketch 2 Week 10 (23/06/2025)

The letter t looked difficult to read so Mr.Max asked me to come up with a different variation. I made two. He also asked me to make the rounded parts of the b and d bigger so that it was at x-height.

Figure 2.12 Digital Sketch 3 Week 10 (23/06/2025)

We ended up choosing the second variation for the letter t.

Exporting

To export the font so that it could be installed we used FontLab. Here we had to adjust the kerrning of all the letters based on the chart provided by Mr.Vinod.
The first time I exported the font it was missing some elements and it did not look like the sketches. Mr.Max helped me realise that I had not used the shape builder tool in Adobe Illustrator to make the digital sketches one shape. If the elements overlap or are split in areas this can make the exported outcome look wrong.

Figure 2.13 Exported Font 1 [Preview] Week 11 (30/06/2025)

Figure 2.14 Exported Font 1 [Typed] Week 11 (30/06/2025)

The second time I exported the font it still did not look right. I went back to Illustrator, checked all the letters to make sure it was all one shape and tried again.

Figure 2.15 Exported Font 2 [Preview] Week 11 (30/06/2025)

Figure 2.16 Exported Font 2 [Typed] Week 11 (30/06/2025)

The third and last time I exported, the font still looked wrong in the preview but after I installed and typed using the font it worked perfectly. I named the font Purrvetica after the well-known font Helvetica.

Figure 2.17 Exported Font 3 [Preview] Week 11 (30/06/2025)

Figure 2.18 Exported Font 3 [Typed] Week 11 (30/06/2025)

Final Outcome

Download Font Here

https://drive.google.com/file/d/1pAdjn-x7LGmCnw6ydcs_RW7BWfw4e97B/view?usp=sharing

Figure 3.1 Initial Sketch Week 12 (07/07/2025)

Figure 3.2 Side-Bearings in FontLab Week 12 (07/07/2025)

Figure 3.3 Final Type Construction [JPEG] Week 12 (07/07/2025)

Figure 3.4 Final Type Construction [PDF] Week 12 (07/07/2025)

Figure 3.5 Poster [JPEG] Week 12 (07/07/2025)

Figure 3.6 Poster [PDF] Week 12 (07/07/2025)

Figure 3.7 Font Tester/Preview Week 12 (07/07/2025)

Feedback

Week 8:

General Feedback - We were briefed on task 3 and given feedback on our four sketches of four fonts for the letters a, b, g, and t.
Specific Feedback - My sketches were inspired by stars, crescent moons, cats, and spider webs. Mr. Max told me his favourite one was the spiderweb font because it unique from my classmate's and he asked me to sketch all the letters and characters for the stars, cats, and spider web font.

Week 9:

General Feedback - Created the template to start digitizing and Mr.Max showed us easier ways to digitize our sketches instead of just tracing with the pen tool.
Specific Feedback - My sketches were approved. Mr.Max said that the spider web font was good but it didn't stand out enough and told me I could pick between the star font and the cat font for my final one. I chose the cat font because I thought many others would be doing fonts similar to stars.

Week 10:

General Feedback - The class was mainly a consultations and feedbacks for our sketches but I had already gotten my sketches approved so I started digitizing.
Specific Feedback - None.

Week 11:

General Feedback - We got our digitized sketches approved by Mr.Max and he told us that if he had approved of it we could start with FontLab on our own using Mr.Vinod's video or we could wait for next class where he would explain it as well.
Specific Feedback - I had to adjust some of my letters because some of them had a wide base on the strokes and the others didn't. Consistency is important to make all the characters work well with each others. So i removed the flared bases and Mr.Max asked me to come up with different sketches for the letters y and t because it was a little difficult to read. I came up with one for y and three for t and got the okay to start with FontLab.

Week 12:

General Feedback - We were shown how to make our fonts in FontLab and how to export it. Some devices couldn't download FontLab or export the font so Mr.Max told us we could use the computers in the labs if to complete our work.

Specific Feedback - My font exported odd the first time and Mr.Max told me to it was because I hadn't turned my letters into one shape using the shape builder tool. I did that and it still exported wrong so I decided to use the computers in the lab but I tried again at home and it worked.

Reflections

Experience:

I would say that my experience with this task was very pleasant. I enjoyed including different elements in the letters and playing with the stroke weight. This was my first time creating or designing a font and I may do it in my free time again.

Observations:

I observed that at even if a letter on its own was legible it could still be difficult to read when you put it in a word with other letters so that must be considered when making a font style. I also realised that it is important for the elements in each letter to look as similar as possible or the font can look messy and the letters could not work well together. We should also make sure that the ascenders and descenders are all the same length.

Findings:

I found that creating a font with letters that look good individually but also look good together in words and are legible is not an easy task. It takes a lot of effort and most stylized fonts only work as headline fonts because too much of it can be difficult to read. Still, the end product is worth the effort.

1. Word and image

Posters from the collection

Museum of Modern Art New York

2. Wort und Bild

Plakate von der Sammlung

3. Parole et image

Les affiches de la collection

It is certainly possible to articulate the hierarchy of information by changing just the size or weight. The page is then arranged in a nine-field grid. Note that because all our text is essentially display type, the gutters are not specifically keyed into leading or ems. Even with only nine fields there are many possible ways to place the information on the grid. In each example, each language reads down. Levels of hierarchy read across.

Figure 7.7 Nine Field Grid 1 Week 13 (14/07/2025)

In this example, the reading is reversed. Language reads across, hierarchies read down.

Figure 7.8 Nine Field Grid 2 Week 13 (14/07/2025)

In these examples, horizontal reading is stressed by extending the title on one line and connecting two levels of information. We first connect the subtitle and the publisher then the title and subtitle.

Figure 7.9 Nine Field Grid 3 Week 13 (14/07/2025)

Different people will think differently about each of these solutions. Some will find one successful, while the other may think it is expressive and others feel it is more dynamic, maybe just "prettier", or too obvious. A grid of 3x3 may not provide enough options. The point is that there are various possibilities for organization and expression.

Figure 7.10 Various Grid Dimensions Week 13 (14/07/2025)

Grids at a Larger Scale

Organization by rows finds similarly vertical rhythms resulting in fields that grow out of the type details in the upper right corner of the composition. This demonstrates how grids can support, and even strengthen, complicated typographic content. But, in this composition the grid is secondary, the hierarchical sequence is primarily established using scale, colour, tone, and manipulation of counterform.

Figure 7.11 Large Scale Grid 1 Week 13 (14/07/2025)

In the example below, the grid not only organizes the composition, it also expresses hierarchy. The same rules that determine a grid at text scale operate at a larger scale as well.

Figure 7.12 Large Scale Grid 2 Week 13 (14/07/2025)

Creating a Grid for Text

Most grid are not so straightforward, working with text demands solutions that are less pictorial, less from without, and more organic, coming from the text itself.

Figure 7.13Organic Grid for Text Week 13 (14/07/2025)

When setting up horizontal gutters, remember to determine the height of the gutter by the leading of one line of text.

Here is a 48-field grid based on the text width and leading of the original text type. This means there are 48 active corners to place type or images. Once you create the grid, find what size and length type has to be to feel like a caption. What is small/short enough? What is too small? What works with the grid? And then devise the optimal headline. What is big enough? And in both cases, is a shift in size required? While establishing these type samples, both the caption's and headline's lengths should be multiples of the text length. Their leadings must also be multiples of the text type and leading. This is because every few lines, the three will cross-align with each other.

Figure 7.14 Gutter Height Determined by Leading Week 13 (14/07/2025)

Figure 7.15 48-Field Grid Week 13 (14/07/2025)

In application, text grids often accommodate more than one level of text in two or more sizes. In this example, sidebars highlight individuals or incidents touched upon in the main text. After determining the typeface, size, leading and line length for the text and sidebars, horizontal fields should be established based on the line lengths. Five intervals most closely match the text but adjustments to the line length are necessary.

Figure 7.16 Text with Sidebar Week 13 (14/07/2025)

Then, adjust the line length to match the five horizontal fields and check the text for readability.

Figure 7.17 Text Adjusted to Fit Fields 13 (14/07/2025)

After this, adjust the leading to allow cross-alignment. In this example, the text and sidebar cross-align every three lines of text to every four lines of text.

Figure 7.18 Cross-Alignment Week 13 (14/07/2025)

Based on the cross-alignment, fields can be established and the gutter between vertical lines is based on the leading of a line of the text.

Figure 7.19 Fields and Gutters Established Week 13 (14/07/2025)

Finally, the grid can be tested by setting up possible layouts. Headlines for the sidebars can be introduced, running flush bottom in their grid to reinforce the strong horizontal axis created by the columns of text underneath. Thereafter, folios, text heads, and running heads/feet can be introduced.

Figure 7.20 Possible Layout Week 13 (14/07/2025)

This is when the grid becomes a system for expressing hierarchy. Horizontal axes can be established for primary, secondary and tertiary texts. Type size, line length, and the "voice" of the text is expressed by where it appears on the page from top to bottom. Left/right orientation is based on the length of the material. Similarly, depending on the content, all three kinds of text may or may not appear on the same page.

Figure 7.21 Text Hierarchy Week 13 (14/07/2025)

Creating a Grid for Text and Images

Most grids are developed to accommodate both text and images. The goal is to devise a grid for a book based on design principles. In this example, the bulk of the images are square, displaying various graphic images. Images are presented singly or in sequences of five. Text serves as an introduction and explanation of the compositions. First approximate margins and determine sample text to set type size, line length, and leading.

Try out different sizes of the square art within the page size and watch as certain relationships begin to form. These simple arrangements suggest six intervals across and four intervals up and down but to determine where exactly those intervals are, we need to bring in the text.

Figure 7.22 Relationships Between Images on the Grid 1 Week 13 (14/07/2025)

Figure 7.23 Relationships Between Images on the Grid 2 Week 13 (14/07/2025)

Figure 7.24 Relationships Between Images on the Grid 3 Week 13 (14/07/2025)

When we bring in the text, we see that the suggested horizontal intervals do not match those indicated by the images. We could alter the line length of the text to fit this structure but once we've determined the line length prescribed by the images would either feel too short or too long, we need to consider altering the horizontal intervals. In this case, changing the number of intervals from six to twelve provides a format that accommodates both image and text.

We've already determined that the images suggest four vertical intervals. The text we have allows for 30-40 lines of text per page. Establishing nine lines per field gives us the four intervals suggested by the images.

Figure 7.25 Before Adjusting Horizontal Intervals Week 13 (14/07/2025)

Figure 7.26 After Adjusting Horizontal Intervals Week 13 (14/07/2025)

Setting up gutters here takes the same process as creating grids for just text. Vertical gutters are 1.5-2 times the typesize and horizontal gutters are the same as one line of leading.

Figure 7.27 Determining Vertical Gutters Week 13 (14/07/2025)

Figure 7.28 Determining Horizontal Gutters Week 13 (14/07/2025)

The grid is applied here, but the text and the grid do not coincide. The art tends to tun short of the right edge of the fields. This is a great example of how fields have active and passive corners. There is no need for the art to fill the grids.

Figure 7.29 Layout 1 Week 13 (14/07/2025)

The least used horizontal axis can be activated with the placement of folios.

Figure 7.30 Layout 2 Week 13 (14/07/2025)

Placing identification for the images demonstrates when it is okay to break the rules. The numbers fall flush bottom in their fields but if they appeared at the top the art would be lost. Clarity of meaning and ease of reading always triumphs the formal restraints.

Figure 7.31 Image Identification 1 Week 13 (14/07/2025)

Similarly, placing identification at the bottom of the image strengthens the structure of the page even though specific placement works against one of the grid's requirements.

Figure 7.32 Image Identification 2 Week 13 (14/07/2025)

After sorting out all the primary relationships between text and images the grid now expresses a true system - the logic of presentation. The position o the page is now an expression of hierarchy and meaning, not just an aesthetic choice.

Figure 7.33 Primary Relationship Between Text and Image Week 13 (14/07/2025)