Advanced Typography Task 3: Type exploration & Application

November 18, 2024

Advanced Typography Task 3: Type exploration & Application

27 April 2024- 3 July 2024

NABIL JULIUS DORN (037978)

(Advanced typography) | Bachelor of Design in Creative Media | Taylor's University

Task 3: Type Application and Exploration

List

INSTRUCTIONS

This is the Module Information Booklet for this module:

TASK 3

For this task, we were required to use the knowledge gained from the previous exercises and apply it in this task.

There were three different styles we could choose for this task. The one I chose required to create a font that is intended to solve a larger problem in the area of interest.

End result: A complete generated font (,tff) with applications.

We began this task by creating a proposal discussing our intentions, examples and attempts/sketches. We were required to discuss three ideas.

Here is the proposal I made to present:

<Feedback Week 9, 19/11/24 :

- Try to make it organic in shape and not too rigid.>

Following the proposal, I decided to go ahead with my 4th idea, the Moiré Pattern.

After doing some research, I learnt that the moiré pattern emerges when two repetitive patterns, such as lines, grids or dots overlay with slight misalignment or varying spacing. This interference creates a new wavy or rippling visual effect, with areas of contrast and oscillation. Moiré patterns are often seen in printed materials, screens and fabric textures, where they can result unintentionally form overlapping grids or intentionally as a design element to create optical effects. In digital design and printing, managing or using these patterns can involve adjusting scale, alignment, or spacing to achieve desired visual outcomes.

Fig 1.0.1 Moire pattern example 1, (Week 9, 12/11/24)

Fig 1.0.2 Moire pattern created by two overlapping sets of concentric circles., (Week 9, 12/11/24)

With this in mind, I began looking for inspiration on pinterest.

Fig 1.0.3 Inspiration found from pinterest (Week 9, 12/11/24)

The one that stuck to me the most was the top left one.

Now knowing more about the moire pattern and finding references for the style I liked, I began researching if there were any moire pattern typography fonts out there already.

The closest one i could find was this one by Qiwen Ju

Fig 1.0.4 Moire font by Qiwen Ju, (Week 9, 12/11/24)

Seeing that there isnt any other font like the style I liked, I decided to attempt doing the effect in Photoshop (and will likely be proceeding with Ps for the rest of the assignment) as I am best versed with that program and have been using it for years now.

I first tried making the moire pattern. This in its essence is just a bunch of lines that are overlayed and rotated slightly to create a pattern.

Fig 1.0.5 Moire pattern attempt, (Week 9, 12/11/24)

I then decided to try using this effect on a Serif font. Keeping in mind Mr Vinods feedback, I decided to use Field blur in the blur gallery to soften some edges.

I didnt really like the way lines looked on the font as it made the effect look weird overlayed on the font. I decided to use the Halftone pattern in the filter gallery and make a repeating radial pattern that was adjustable in thickness.

Fig 1.0.6 Pattern created from Halftone effect (Week 9, 12/11/24)

Fig 1.0.7 Dizzying Moire pattern effect (Week 9, 12/11/24)

Tip: Try scrolling the screen up and down and look at the pattern in effect. Its moving!

I then used this pattern instead of lines with the fonts.

Here are some of my attempts:

Fig 1.0.8 Attempt 1 (Week 9, 12/11/24)

I thought it looked really good but I encountered the problem of legibility on different colored backgrounds. Also the effect wasnt working as expected.

Fig 1.0.9 Font on a darker background (Week 9, 12/11/24)

Fig 1.0.10 Attempts (Week 9, 12/11/24)

I decided to rework the method I was using the get the effect. I was also considering using a thicker San Serif font instead and see how that'll look.

Fig 1.0.11 Attempt 3 (Week 9, 12/11/24)

I felt like this effect looked better on a thicker font. I attempted to do this on other alphabets.

Fig 1.0.12 Other attempts (Week 9, 12/11/24)

I still felt like it could've been done better.

Fig 1.0.13 Final attempt (Week 9, 12/11/24)

This final attempt turned out to be the best version yet. I then recreated this with the other alphabets.

Fig 1.0.14 Other alphabets made with this effect (Week 9, 12/11/24)

I decided to mess with some gradient maps to see how thatll look too

Fig 1.0.15 Gradient map on font (Week 9, 12/11/24)

<Feedback Week 10, 26/11/24 :

- This font is too similar to the base font>

With the feedback given by Mr. Vinod, I decided to draw some shapes and use a different method to break up the shapes. I also had to tackle the problem of not being able to vectorize the font when importing to FontLab.

Fig 1.0.16 Process (Week 10, 21/11/24)

I first started with blurring the alphabet using the field blur again. I then used a threshold filter to harden the soft shapes of the blurred alphabet. I used the color range selection to only select the blacks and used that as the map for the pattern. I again duplicated the new alphabet and offset it a little to give it the Moire effect.

Eventually doing this, I managed to streamline the process allowing me to output all the alphabets, numbers and some important punctuations.

Here is the final output:

Fig 1.0.17 Alphabet output (Week 10, 21/11/24)

Fig 1.0.18 Numbers output (Week 10, 21/11/24)

Fig 1.0.19 Punctuation output (Week 10, 21/11/24)

I then brought it into Vectorizer.ai as it did a better job than Adobe Illustrator's Image trace feature.

Fig 1.0.20 Vectorized alphabet (Week 10, 21/11/24)

Vectorized alphabets, numbers and punctuations:

Fig 1.0.21 Vectorized output (Week 10, 21/11/24)

After vectorizing the alphabets, I brought it into FontLabs 8

Fig 1.0. 22 First version with kerning (Week 10, 21/11/24)

Fig 1.0.23 Final version with fixed kerning (Week 10, 21/11/24)

I realised that the output didnt look like the final version done in FontLabs, so I redid the alphabets with a thicker line weight for the moire pattern. I then standardized the process so each alpabet has the same weight and look.

Fig 1.0.24 New Distortion pattern (Week 11, 5/12/24)

Font measurements:

Ascender: 34px
Overshoot: 23px
Cap Height: 900px
X-Height: 500px
Baseline: 0px
Baseline Overshoot: -18px
Descender -122px

Fig 1.0.26 Font measurements (Week 11, 5/12/24)

Fig 1.0.25 Second attempt (Week 11, 5/12/24)

FontLab

I then exported the fonts from Adobe Illustrator into FontLabs 8 using SVG

Fig 1.0.26 Imported fonts into FontLab 8 (Week 11, 5/12/24)

I then adjusted the sidebearing and kerning for all the alphabets using the reference Mr Vinod provided us.

Fig 1.0.27 Kerning adjustment and testing (Week 11, 5/12/24)

Download Moire font here!

Font Presentation

We were required to create 5 art pieces to showcase and present our designed font.

Presentation output:

Fig 1.1.0 Alphabets presentation (Week 11, 5/12/24)

Fig 1.3.2 Numerals presentation (Week 11, 5/12/24)

Fig 1.3.4 Font presentation (Week 11, 5/12/24)

Fig 1.3.3 Punctuation presentation (Week 11, 5/12/24)

Fig 1.3.5 Font presentation (Week 11, 5/12/24)

Fig 1.3.6 Font presentation(Week 11, 5/12/24)

Font application

The purpose of this font was to be eye capturing for the viewers. It was also made to have an optical illusion effect. With that being said, the applications of this font are for poster design related material as well as signage for corporate usage or personal.

Here are the application outputs ive made with the usage in mind:

Fig 1.3.7 Font application (Week 11, 5/12/24)

Fig 1.3.8 Font application (Week 11, 5/12/24)

Fig 1.3.9 Font application (Week 11, 5/12/24)

These posters showcase the usages of this font. It can be used digitally or physically.

Here are some mock ups using the font:

Fig 1.3.10 Font application (Week 12, 10/12/24)

Fig 1.3.11 Font application (Week 12, 10/12/24)

Fig 1.3.12 Font application(Week 12, 10/12/24)

Ive also gone ahead and created 3D shoplots with the typography in use for the signages.

Here are the 3D shoplot mock ups:

Fig 1.3.13 Font application(Week 12, 10/12/24)

Fig 1.3.14 Font application(Week 12, 10/12/24)

Fig 1.3.15 Font application (Week 12, 10/12/24)

Ive also gone ahead and made a 3D animation video showcasing the font in movement.

via GIPHY

Final Output Compiled:

Final submission:

Download Moire font here!

Fontlab screen grab:

Fig 1.3.0 Imported fonts into FontLab 8 (Week 11, 5/12/24)

Font Presentation:

Fig 1.3.1 Alphabets presentation (Week 11, 5/12/24)

Fig 1.3.2 Numerals presentation (Week 11, 5/12/24)

Fig 1.3.3 Punctuation presentation (Week 11, 5/12/24)

Fig 1.3.4 Font presentation (Week 11, 5/12/24)

Fig 1.3.5 Font presentation (Week 11, 5/12/24)

Fig 1.3.6 Font presentation (Week 11, 5/12/24)

Font application:

Fig 1.3.7 Font application (Week 11, 5/12/24)

Fig 1.3.8 Font application (Week 11, 5/12/24)

Fig 1.3.9 Font application (Week 11, 5/12/24)

Mock ups:

Fig 1.3.10 Font application (Week 12, 10/12/24)

Fig 1.3.11 Font application (Week 12, 10/12/24)

Fig 1.3.12 Font application(Week 12, 10/12/24)

Fig 1.3.13 Font application(Week 12, 10/12/24)

Fig 1.3.14 Font application(Week 12, 10/12/24)

Fig 1.3.50 Font application(Week 12, 10/12/24)

Animation:

via GIPHY

Final Output Compiled:

FEEDBACK

Week 9:

General feedback:

- Ultimate choice is yours when it comes to Task 3 ideation.

Specific feedback:

- Try to make it organic in shape and not too rigid. Can reference Tate museum logo.

-Using abstract shapes for the font may make it harder for kerning and leading will be difficult to adjust.

Week 10:

General feedback:

- Make your own font

- Is this experimental or not? What is the purpose of this typeface?

Specific feedback:

- This font looks too similar to Arial if youre not doing experimental typeface.

- Make your own font if youre going to make your own typeface.

- In experimental, you dont have to do the entire alphabet, can just do a sentence.

Week 11:

General feedback:

- Good

Specific feedback:

- Can carry on with font showcase

Week 12:

Absent

REFLECTIONS

Experience

During this task, I explored the intricacies of type design, specifically incorporating moiré patterns into font creation. It was both fascinating and challenging to experiment with optical illusions while ensuring the letters remained legible and visually appealing. Overcoming these challenges brought a deep sense of satisfaction.

Observation

I discovered that designing fonts with moiré patterns requires a balance between aesthetics and functionality. It made me appreciate the subtlety and precision needed to make visually dynamic typefaces stand out without overwhelming the design.

Findings

The process allowed me to push creative boundaries and experiment with optical effects in typography. Despite the technical challenges, the outcome was rewarding: a unique, visually striking typeface that can be used in both contextual and branding designs

The name itself is derived from the Latin word rotundus, which refers to a building that has a round, circular floorplan. Although Rotunda letterforms share many of the same structural qualities as textualis letterforms, they contain more rounded strokes. This adds more variety to the alphabet and makes the style far more legible when written narrowly.

Fig 2.3 Rotunda

Bastarda (14th – 16th Century AD)

Bastarda (also known as “hybrida”) is an evolved variety of textualis for,s that surfaced in Northern Europe in the late 14th century. True to their name, bastarda scripts can be characterized as bastardized treatments of textualis since the style itself is defined as a hybrid mix of traditional textualis and the simplified cursiva styles that came about thereafter.

Bastarda scripts were quicker to write as their letterforms involved less reorientation of the pen. The deliberation of formality and consistency ranged contextually. Some manuscripts were carefully written while other forms of correspondence were loose and more informal. Because of this spectrum of application, as well as the regional varieties and nuanced treatments of the letterforms, bastard fonts are difficult to categorize holistically.

Fig 2.4 Bastarda

Fraktur (16th – 20th Century AD)

Fed up with the difficult-to-read textualis hands, German emperor named Maximillian had his chancery Leonhard Wagner work with a woodblock cutter, Hieronymus Andreae to develop a new typeface, which is Fraktur.

Fraktur letterforms are broken apart into fractured strokes laid out at many angles. This variety of angles make Fraktur more legible, compared to textualis, which were vertically rigid and narrow.

Fig 2.5 Fraktur

Search This Blog

Nabil Julius Dorn