Advanced typography: Task 3

Create a font that is intended to solve a larger problem or meant to be part of a solution in the area of your interest be it graphic design, animation, new media or entertainment design or any other related area not necessarily reflecting your specialization. End result: a complete generated font (.ttf) with applications.

Ideas for Proposal:

Researching

I was torn between doing the solution font or experimental font, but I ended up with the solution-based font, specifically the Math Rock font idea because I feel like there is more for me to learn in the area of typography that I wouldn't have learned had I went with my experimental idea.

I chose to create a font for the music genre Math Rock because it's one of my favorite music genres. The genre has been coined quite recently in the 1980s, thus have not formed a collective visual identity as of yet. My idea is to create a font that encapsulates the essence of the Math Rock genre, in the same way that sub-genres of rock (like Punk, Psychedelic, Metal..etc.) have.

Fig. 1.0: Psychedelic, Punk, and Metal Rock fonts (1/7/2024)

Throughout the age of vinyls, CDs, and records, typography played a vital role in the representation of musicians' music; the whole designs of their album covers reflects the music they serve. Each genre has a certain set of characteristics because of precedents already set by notorious bands and artists of the genre.

Math rock is a malleable form of genre, it bears similarities to prog-rock, and it is a style of alternative and indie rock characterized by its atypical rhythmic structures, and complex, odd time signatures. it has its roots from bands like King Crimson, and with current popular bands like American Football and Chon.

Before I begin my design, I needed to search how the genre currently looks like, as in, is there a common denominator between the design of math rock band/album covers? So I compiled album covers of the genre that I deemed similar, and they all consist of geometric shapes or patterns, whether simple or intricate.

Fig. 1.1: Compilation of Math Rock Album Covers (1/7/2024)

1. Horselords Logo

2. Horselords - Comradely Objects

3. Horselords - The Common Task

4. This Town Needs Guns - 13.0.0.0.0

5. Polarhorse - Data

6. Toe - Songs, Ideas We Forgot

7. Pretend - Bones in the Soil, Rust in the Oil

8. Gangs - And So I Watch You from Afar

9. Tricot Logo

10. Totorro - Home Alone

11. Chon - Chon (2019)

Although the math rock sound is full of intricate patterns and rhythms, it is generally represented through a minimalist design of geometric shapes and lines. I decided to use this as a basis for my font, to combine both minimalist and intricate elements. So I looked at existing fonts that are modern and geometric that could help give me direction in my design. Below is a geometric font, Futura, Monoton, and Orbitron.

Fig. 1.2: Compilation of Font Inspiration (1/7/2024)

Sketching

I tried sketching letters in different styles that I thought could visually represent the elements of math rock which are: Complex, angular, geometrical, innovative, and non-traditional. I sketched out ideas that I thought were both promising and bad, just to get every idea out there.

I knew I wanted to incorporate geometric elements in the letterforms, so I tried out different methods: either the letterform's basic structure is the geometric shape, or the stroke of the letterform is textured with geometric patterns, or small geometric shapes are placed between the strokes.

Fig. 1.3: Sketching Out Ideas (1/7/2024)

Fig. 1.4: Sketching
Out More Ideas (1/7/2024)

Font Construction

My initial idea was to create a font similar to the Monoton font, where the texture of the font is composed of thin lines, but instead of lines it would be intricate patterns. However, after visualizing that idea, I scrapped it and tried out different ideas.

Fig. 1.5: Trying out Different Font Styles (1/7/2024)

Instead of focusing on the texture and details of the font first, I realized I should work on the basic structure of the letterforms first. In order to form letterforms in best practice, I must lay down the guide lines and work with a grid structure, so i restarted with that, and began building my letterforms using geometric shapes and lines.

Fig. 1.6: Digitization Process of Building Letterforms (1/7/2024)

The grid structure is made out of the width of the stroke that I had decided, which was 35 pixels, as well as the descender, base-line, x-height, and ascender.

Fig. 1.7: Proper Grid Structure (1/7/2024)

I ensured there was consistency in the letterform in size both vertically and horizontally, with the exception of letters such as M, H, and O that are generally wider than the other letters, so they are not exactly inside the set parameters of width like the rest of the letters. So after constructing al the letters, I revised each letter individually and modified them to ensure consistency throughout.

Fig. 1.8: First Attempt at Basic
Letterform Structure (1/7/2024)

Fig. 1.9: Modified Letterforms and
Added Consistency (1/7/2024)

After I finished constructing the uppercase letterforms, I start constructing the lowercase letterforms using the same guides as the uppercase and the font overall. Using the same method I used for the capital letters, I start with simple geometric shapes such as the line and circle tool with the width of the stroke being 36 px.

Fig. 1.11: Constructing Lowercase
Letter 'o' (3/7/2024)

Fig. 1.10: Beginning the Process for
Lowercase Letters (3/7/2024)

Once I finished constructing all the lowercase letterforms, I realized that the descender line is too close to the baseline, causing the letters to look too compact. I had to adjust the guides into increasing the space between the baseline and the descender, and thus making the ascender higher to not lose the scale and measurements of the unaffected existing letterforms.

Additionally, letters 'm' and 'n' were adjusted. Prior to fixing them, the letter 'm' was too narrow, it needed to be almost 2 times the letter 'n'. I also fixed the angle of the curvature where the horizonal line of 'm' and 'n' connects with the stem.

Fig. 1.13: After fixing the descender
height (3/7/2024)

Fig. 1.12: Before fixing the descender
height (3/7/2024)

After finishing up with the basic construction of both the upper and lowercase, I turn the letterforms from strokes to outlined paths and modify the width of the strokes to add contrast. I mainly focused on the intersections, when strokes meet, and horizontal lines; because they appear to be thicker even if they are the same width. Thus I manually modify the weights.

Fig. 1.15: Added Contrast to Lowercase
Letters (3/7/2024)

Fig. 1.14: Added Contrast to Uppercase
Letters (3/7/2024)

Then, I start constructing the numerals. I used capital letters as a basis for the numbers, such as the letter S for numbers 2, 3, and 5.

Fig. 1.17: Constructing Numerals
Process 2 (5/7/2024)

Fig. 1.16: Constructing Numerals
Process 1 (5/7/2024)

The angle of the numbers, such as the pointed tip of number 1 and 2, or the slanted angle of 3 and 4, all depend on my uppercase letterforms to match the font's consistency.

Fig. 1.19: Constructing Numerals
Process 4 (5/7/2024)

Fig. 1.18: Constructing Numerals
Process 3 (5/7/2024)

After multiple back and forth revisions, I modify the numbers more to ensure consistency across my font. I made the tip of number '1' curved, replaced the sharp angle in number '2' with a curve, fixed the curvatures and width of number '3', disconnected the 2 strokes in number '4' to increase the white space inside the number, adjusted the curvatures in number '5', changed the ending strokes' angle in number '6' and '9', and, finally, narrowed the number '0'. All the scrapped drafts are placed above the artboards.

Fig. 1.20: Constructing Numerals
Process 5 (5/7/2024)

After finishing up with my numerals, I began constructing all the punctuation marks. I start off with the simplest: periods and commas. The period circle was slightly bigger than the circle of the lowercase 'i', and the colon is placed at the top and bottom of the x-height roughly. The brackets are longer than the cap height of the letterforms.

Fig. 1.21: Compilation of the Process of Constructing Punctuation Marks. (3/6/2024)

For the character '&', I used the number '8' as the basis, then used the scissor tool and cut the areas I needed to and modifies the curves.

All the mathematical symbols are constructed of the same rectangles, just at different heights and angles respectively.

Initially, for the comma, I went with the traditional circle and its curved extension, but after reflecting on it, the font looked a bit too modern for it, so I changed into a simple stroke; the same goes with my quotations.

Fig. 1.23 Process of Constructing
Punctuation Marks (After) (6/7/2024)

Fig. 1.22 Process of Constructing
Punctuation Marks (Before) (6/7/2024)

Lastly, the final thing to do was adding the texture of the font. I tried different texture variations which were mainly 2 different types: simple geometric shape additions or intricate patterns.

Fig. 1.24 Texture/Pattern Variations 1 (6/7/2024)

Eventually, I went with the latter. I adjusted the patterns and toned them down so it could also be seen at a distance.

Fig. 1.25 Texture/Pattern Variations 2 (6/7/2024)

I used the same early layer of when the letterforms were still composed of strokes, however, instead of a uniform black stroke, I used one of Adobe's patterned strokes and adjusted the size and frequency of the pattern. Since simply turning it into a patterned stroke didn't look good, I converted them into shapes and modified them one by one to suit each letter form's angles and curves.

Fig. 1.26: Adding Texture to Letterforms (7/7/2024)

I ensured to have a copy of each modified form of the patterned texture especially due to its intricacy and tediousness.

Fig. 1.27: Texture outlines for letters, numbers, and punctuation (7/7/2024)

Below is the full illustrator file, consisting of all the process and evolution of letterforms artboard by artboard.

Fig. 1.28: Full Font Process Screen Grab (14/7/2024)

Font Generation

I generated my font on FontLab 8 using the university's computer lab (D7.04), so unfortunately I do not have much documentation on transferring my font from illustrator to FontLab as well as adjusting the kerning and side-bearings.

Fig. 1.30: Transferring Font from Illustrator
to FontLab (14/7/2024)

Fig. 1.29: Transferring Font from Illustrator
to FontLab (14/7/2024)

Initially. using FontLab 8 and a mac computer on top of that for the first time, was a struggle to say the least. I cannot emphasize the amount of times I was frustrated over having to redo things multiple times and having no proof of it.

I previously used FontLab 7, so some of the features were placed differently on the newer version. I struggled to find it especially during the kerning process. At first, because I couldn't find where to kern each letter's individual side-bearings, I was kerning each letter relative to another letter (kerning pairs), but I realized throughout this process that it was almost impossible for me to adjust every single combination of letters one by one. I was almost going to give up, until I accidentally mashed the keyboard and found out how to kern the letters individually, to turn off the kerning-pair mode all I had to do was press 'm'. After figuring this out, I deleted all the kerning pairs I've done so far because the side bearing measurements were far too much, and I started the kerning process all over again.

Fig. 1.32: Adjusting Side-bearings
in FontLab (14/7/2024)

Fig. 1.31: All the transferred Glyphs
in FontLab (14/7/2024)

After exporting the font from the computer lab and on to my laptop, I opened the font in the FontLab 7 demo to review it. This back and forth of opening it from my laptop and back to the computer has been done several times to ensure the kerning is done.

Fig. 1.33: Exported 'Math Font' as a Generated Font (15/7/2024)

Type Presentation

for the type presentation, I looked at many references including the sources the lecturer provided, so I had a guidance as to how I need to present the font.

First, I wanted to showcase the font character set, and that includes the uppercase, lowercase, numerals, and punctuation characters. I wanted it to have a modern feel, simple, and straight to the point.

Fig. 1.29: Type Presentation Process 1 (16/7/2024)

Then I moved on to thinking of creative ways to showcase the characters. I wanted to focus on the details of the texture of the font, thus why I enlarged the characters so the details are clear. On the right, I tried to use abstract geometric art as a reference for the composition.

Fig. 1.30: Type Presentation Process 2 (16/7/2024)

Fig. 1.31: Type Presentation
Process 3 (16/7/2024)

Then, I wanted to focus on the constructions of the characters themselves. On the left, I deconstructed the strokes of the font including all the angles and curvatures, as well as a the measurements of the baseline and cap height. On the right, I focused more on the vertices that make up the structure of the letters.

Fig. 1.32: Type Presentation
Process 4 (16/7/2024)

Fig. 1.33: Type Presentation
Process 5 (16/7/2024)

Lastly, I wanted to showcase the font as a body of text to show the letter-spacing, kerning, and how the characters look like from a smaller size.

Fig. 1.34: Type Presentation Process 6 (16/7/2024)

Here is the compilation of the 5 type presentations.

Fig. 1.35: Compilation of Type Presentations (16/7/2024)

Type Application

For the type application, I wanted to redesign an album cover of one of the existing Math Rock bands using the font I have designed. My first attempt was at the band Toe, you can see their album cover below on the left.

Fig. 1.37: Toe Album Cover Design Attempt (16/7/2024)

Fig. 1.36: Toe:
'Songs, Ideas We Forgot'
album cover (16/7/2024)

My second attempt at recreating an album cover was with the band Chon, I experimented with the designs, but I was not satisfied with any of them.

Fig. 1.38: Chon Album Cover Design
Attempt 1 (16/7/2024)

Fig. 1.39: Chon Album Cover Design
Attempt 2 (16/7/2024)

Then I moved on to the band This Town Needs Guns (TTNG), and experimented with different designs as well. I played around with the line and strokes tool to create geometric shapes.

Fig. 1.40: TTNG Album Cover Design
Attempt 1 (16/7/2024)

I ended up with the circular design, similar to their '13.0.0.0.0' album cover design, but I used the same stroke pattern as the one I used in my font, creating similarity between the font and the design elements

Fig. 1.42: TTNG Album Cover Design
Attempt 2 (16/7/2024)

Fig. 1.41: This Town Needs Guns
'13.0.0.0.0' Album Cover
(16/7/2024)

I designed the album vinyl/cd cover on illustrator, then uploaded it in photoshop to edit it and dimensions to it.

Fig. 1.44: TTNG Vinyl Album Cover Design
on Photoshop 1 (16/7/2024)

Fig. 1.43: TTNG Vinyl Album Cover Design
on Illustrator (16/7/2024)

Then I photoshopped the album cover I designed with my font in several other applications: vinyls, guitar pedal, and a person holding the album.

Fig. 1.46: TTNG Vinyl Album Cover Design
on Photoshop 2 (16/7/2024)

Fig. 1.45: TTNG Vinyl Album Application
in store on Photoshop (16/7/2024)

Fig. 1.47: TTNG Album Cover Design
on a Guitar Pedal on Photoshop (16/7/2024)

Fig. 1.48: TTNG Album Cover Design
with Nardwuar on Photoshop (16/7/2024)

Fig. 1.49: TTNG Album Cover Design
with a Guy on Photoshop (16/7/2024)

Final Submissions

Download Font here

Final Type Presentation Submission

Fig. 1.50: Final Type Presentation JPEG 1 (19/7/2024)

Fig. 1.51: Final Type Presentation JPEG 2 (19/7/2024)

Fig. 1.52: Final Type Presentation JPEG 3 (19/7/2024)

Fig. 1.53: Final Type Presentation JPEG 4 (19/7/2024)

Fig. 1.54: Final Type Presentation JPEG 5 (19/7/2024)

Fig. 1.55: Final Type Presentation Compilation PDF (19/7/2024)

Final Type Application Submission

Fig. 1.56: Final Type Application JPEG 1 (19/7/2024)

Fig. 1.57: Final Type Application JPEG 2 (19/7/2024)

Fig. 1.58: Final Type Application JPEG 3 (19/7/2024)

Fig. 1.59: Final Type Application JPEG 4 (19/7/2024)

Fig. 1.60: Final Type Application JPEG 5 (19/7/2024)

Fig. 1.61: Final Type Application JPEG 6 (19/7/2024)

Fig. 1.62: Final Type Application Compilation PDF (19/7/2024)

3. Feedback

Week 9:

Specific feedback: All three topics approved, up to me to decide which one to work on. Ensure if I am proceeding with the math rock font idea, that it isn't too stylistic but also remains readability and functionality despite it being a display font.

Week 10:

General feedback: The letter M tends to be wider than letter O, and D's width is compared with the letter O. The letter J's curve shouldn't be so wide because of kerning issues with the letter T for example. Ensure all the letterforms are made in the same graph so you don't struggle with inconsistency and inaccuracy later on, it is recommended to do them in one line to refer to the other letters. The basic structure of the letters should be refined first before adding all the detailed modifications/texture.

Specific feedback: The letter B's bottom parts needs to be fixed and it doesn't compliment the upper part. Use both horizonal and vertical guides for the grid. The intricacies in the letters should be toned down; from 8 shapes to 3 shapes so the pattern could be visible at a smaller size.

Week 11:

Specific feedback: The slant in my numbers need to have variation, they do not have to be consistent within the numbers. Use letterforms as reference for my numbers and punctuation to achieve consistency in the overall font. My x-height and descender is a bit too short, therefore the lowercase letters look condensed, it needs to be modified. And my lowercase letter ‘m’ needs to be wider.

Week 12:

General feedback: Must generate the font and start working on the type presentation and application

Week 13: Specific feedback: For my 5th type application, maybe try to showcase one of the band members holding the album. Perhaps a nerdy guy to showcase the 'math' rock genre.

Week 14: Specific feedback: I have to finish my final compilation and reflections, otherwise everything else is done.

4. Reflections

Experience

Initially I struggled a bit with the ideation process and generating ideas; I personally felt like I had a ‘creativity block’. I held a pen on paper and thought that ideas would come to naturally, whether good or bad, but the pages were barely filled. I tried multiple times till I ended up with a couple of ideas that I could potentially work with, so I tried to move on to the digitizing process. I thought that maybe a change of medium would push the momentum further, and it did. Once I used the tools in illustrator, it helped me visualize my ideas faster so the filtration process was quicker.

Compared to the first semester in the Typography class where we constructed our own letterforms, I personally feel like I have improved in this Advanced Typography class. I had more direction and improved my eye for detail and imperfections, whereas in my first time, I had less of a grasp about the basics of typography.

Observations

During my research in the ideation process, I read about the importance of typography in album art and covers, which I will elaborate on in further readings, but after reading more about this I've come to pay attention a lot more on the typography in album art rather than just the visual graphical aspect of it like I'd usually do. Because of this module, I feel like my eye has been trained to pay more attention to the details of type, and the vast world that is typography.

Findings

In this task, my idea was to represent the music genre ‘math rock’ in a font. In my research, I’ve observed artists’ albums from different genres of music and how that plays a role in the typography and graphic design decisions in their album covers. However, nowadays with online streaming and the gradual loss of cds and vinyls, type isn’t primarily used to represent the artists’ music visually. The trendy push for more visual and less text is primarily the cause. That being said, typography still remains to be important in music albums.

5. Further Readings

Typography in Album Art: The Power of Words

Although the images in album art typically steal the spotlight, typography still plays a significant role. Typography sets the tone of the album; whether the font is elegant, bold, playful, or aggressive.

The choice of font can immediately tell the listener what type of music they'll be getting into. Additionally, an artist or band's name is an essential part of their branding, and what font they choose to represent themselves serves a vital role for their identity.

Not only that, but it also enhances the artwork; it's a powerful tool. It's capable of conveying emotions, genre aesthetics, and information.

For example, The pointy gothic logos with knife-shaped letters can be immediately identified with heavy metal.