ADVANCED TYPOGRAPHY (TASK 3): Type Exploration and Application

Fig. 1. Scarab from Fiona & Cake (S1EP10)

ADVANCED TYPOGRAPHY (TASK 3): TYPE EXPLORATION AND APPLICATION

–––

24/06/2025 - 23/07/2025 (Week 9 - Week 14)
Irdhina binti Mazli Sham (0366894)
Advanced Typography - Bachelor of Design in Creative Media - Taylors University
Task 3 Type Exploration and Application

TABLE OF CONTENTS:

LECTURES

LEC 01 – 04: ADVANCED TYPO TASK 1

LEC 05: ADVANCED TYPO TASK 2

INSTRUCTIONS

https://drive.google.com/file/d/1nd3fZ8PxqWPcVXoOJb25KxRR7eZu1qTb/preview

TASK 3

TYPE EXPLORATION

SKETCH

For Task 3, we were required to create our very own typeface based on either solving a problem, expansion or experimentation.

We started out with a proposal briefly explaining several ideas for the task. Below is my proposal with mostly ideas on either experimentation or expansion.

PROPOSAL

After a tutorial/practical section with Mr Vinod where he reviewed our ideas, I decided to go with a typeface experimentation based on the wild runes from Arcane. The typeface would have patterns similar to the patterns seen on wild runes and the consonants would be connected to the vowels for the lowercase letters. For capital letters, their letter connection would rely more on references from Arcane such as JAY, VIK, TIME, BOMB, HEX, ARC, FOUR.

Fig. 2. Reference 1 (Week 9)

Additionally, Jayce and Viktor's notes on Hextech would be subtly integrated in the lowercase by making the "webbings" be formed from circles with parts of them coming out as dotted lines.

Fig. 3. Reference 2 (Week 9)

To envision as to what the design would look like better for the sketches, I decided to look for references of fonts that have a somewhat similar appearance.

Fig. 4. Reference 3 (Week 9)

Fig. 5. Reference 4 (Week 9)

The original plan was to have a unicase where my lowercase would just be small capitals. With that in mind, I started by sketching the capital letters on Clip Studio Paint. I made two designs but settled for the latter because it is more flexible for to mould and add on the connections later on without it looking awkward. Moreover, the overall form fits the wild runes more as they are chaotic and unpredictable.

Fig. 6. Uppercase Sketch (Design 1) (Week 10)

Fig. 7. Uppercase Sketch (Design 2) (Week 10)

Initially, I was going to do unicase but decided otherwise and therefore did both uppercase and lowercase letters.

Fig. 8. Lowercase Sketch (Week 11)

Afterwards, I moved onto numbers and symbols with guidelines based on the digitised letters. However, I did not use or design all of the symbols since my work would be considered a display font.

Fig. 9. Numerical Sketch (Week 11)

Fig. 10. Symbols Sketch (Week 11)

PROGRESS WORK

DIGITISATION

UPPERCASE

Once the sketches were ready, I moved on to digitising on Illustrator, starting with the capital letters. Once I finished the uppercase letters, only then I realised I accidentally digitised all of them with the x-height as the ascender line rather than the actual correct height. After finding out, I resized everything to the correct size.

Fig. 11. Progress screenshot (Illustrator) (Week 10)

Fig. 12. Progress screenshot (Illustrator) (Week 10)

LOWERCASE

Once done, I continued with the lowercase letters where I used a triangle as the general base shape, which proved to only made my progress work harder because I had a lot more letters to kern rather than if I had used a base shape with parallel sides.

I made two versions with the second having dotted line in a circular shape following the inside strands as shown in the final result.

Fig. 13. Progress screenshot (Illustrator) (Week 11)

Fig. 14. Progress screenshot (Illustrator) (Week 11)

NUMBERS AND SYMBOLS

Afterwards, I digitised the numbers and symbols using similar methods but this time, the designs were a lot simpler or at least easier to execute since I could copy and paste some of the elements instead of making a new one every time to truly stick to the concept of wild runes.

To properly measure the proportions of numbers and symbols, I typed out a random sequence using a san serif font and created guides based on the heights presented.

Fig. 15. Progress screenshot (Illustrator) (Week 12)

Fig. 16. Progress screenshot (Illustrator) (Week 12)

Fig. 17. Progress screenshot (Illustrator) (Week 12)

Fig. 18. Progress screenshot (Illustrator) (Week 12)

LETTER CONNECTIONS

For the letter connections, I had in mind that as the person types out the text, the connections would "pull" the letters closer together as well as the next letter after. It was a tedious process, however, as I had to do every consonant+vowel combination, which adds up to 105 extra glyphs followed by a few uppercase combinations.

Fig. 19. Progress screenshot (Illustrator) (Week 12)

Fig. 20. Progress screenshot (Illustrator) (Week 12)

FONTFORGE + FONTLAB

I first started with Fontforge, which easily crashed but other than that was going fine up until I started adding in the connections. The moment I added the last connection glyph, the software crashed and removed all my progress but thankfully I had a backup from the night before that I sent to myself on WhatApp just in case iCloud stopped loading.

On Fontforge, I had to learn how to use lookup tables and its subtables in order to create the pairings, which was complicated at first and time-consuming but I got the hang of it eventually even though I had to later change softwares.

Fig. 21. Progress screenshot (Fontforge) (Week 12)

After changing softwares, I had to relearn how but I figured out when it comes to Fontlab, what matters is your naming format, which I found out when my connections were listed as discretionary ligatures (dlig) instead of standard ligatures (liga) for substitution. Thankfully, instead of importing every letter one by one to Fontlab, I managed to find a way to export a file from Fontforge to Fontlab by exporting the font as ttf and importing the ttf file into Fontlab.

Fig. 22. Progress screenshot (Fontlab) (Week 13)

Fig. 23. Progress screenshot (Fontlab) (Week 13)

However, I switched the suffix back to dlig as I found out that discretionary ligatures were used for more decorative glyphs as opposed to standard ligatures. I also figured out how to imitate randomisation using contextual alternates (calt) for the uppercase connections. Once I edited everything, I decided to export as otf instead since it is more flexible compared to ttf.

Fig. 24. Classes (Fontlab) (Week 13)

Fig. 24. Contextual Alternates (Fontlab) (Week 13)

Fig. 25. Discretionary Ligatures (Fontlab) (Week 13)

APPLICATION

FONT PRESENTATION

Firstly, I decided on a colour palette that is similar to the colours of space since an important arc for one of the main characters involved in the wild runes took place there. Once I had the desired colour palette, I came up with several ideas for the font presentation where I wanted to combine the font itself with graphics similar to the former's elements.

Fig. 26. Progress screenshot (Illustrator) (Week 13)

Mr. Vinod advised I increase the size of the font to make them more impactful since the font had smaller details designed that would be harder to see when it is presented small. I also decided to highlight the letter connections in at least one of the presentations.

Fig. 27. Progress screenshot (Illustrator) (Week 13)

Additionally, I wanted to make references to the show itself including Ekko's tree and the number four. However, I decided to scrap the tree as I thought it leaned too much on visuals rather than the font itself.

Fig. 28. Progress screenshot (Illustrator) (Week 14)

FINALISED FONT PRESENTATION

Fig. 29. Font Presentation 1 (Week 13)

Fig. 30. Font Presentation 2 (Week 13)

Fig. 31. Font Presentation 3 (Week 13)

Fig. 32. Font Presentation 4 (Week 13)

Fig. 33. Font Presentation 5 (Week 13)

FONT APPLICATION

Since I did not partake in the competition, I decided to do three applications based on Arcane itself and two applications using mockups.

Fig. 34. Progress Screenshot (Illustrator) (Week 13)

I wanted to do an application based on Viktor's commune in Zaun, specifically how it ended up in ruins if it were to go on. I decided to make the first two applications be parallels of each other and when connected, they spell the show's name, Arcane.

Fig. 35. Progress Screenshot (Illustrator) (Week 13)

Next, I used another scene involving Jayce, Ekko and Heimerdinger where the visuals were slightly distorted. Following the distortion, I decided to use a portion of a quote by Viktor and distorted TIMELINES using intertwine.

Fig. 36. Progress Screenshot (Illustrator) (Week 13)

The last two applications are collaterals using a journal and a billboard with the wild runes patterns scattered around.

Fig. 37. Progress Screenshot (Illustrator) (Week 13)

FINALISED FONT APPLICATION

Fig. 38. Font Application 1 (Week 13)

Fig. 39. Font Application 2 (Week 13)

Fig. 40. Font Application 3 (Week 13)

Fig. 41. Font Application 4 (Week 13)

Fig. 42. Font Application 5 (Week 13)

FINAL OUTCOME

TYPE EXPLORATION:

Fig. 45. Fontlab Screengrab (lowercase) (Week 13)

Fig. 46. Fontlab Screengrab (uppercase) (Week 13)

Fig. 47. Fontlab Screengrab (numbers and symbols) (Week 13)

Fig. 48. Fontlab Screengrab (lowercase connections) (Week 13)

Fig. 49. Fontlab Screengrab (uppercase connections) (Week 13)

FONT PRESENTATION:

Fig. 50. Font Presentation 1 (Week 13)

Fig. 51. Font Presentation 2 (Week 13)

Fig. 52. Font Presentation 3 (Week 13)

Fig. 53. Font Presentation 4 (Week 13)

Fig. 54. Font Presentation 5 (Week 13)

FONT APPLICATION:

Fig. 55. Font Application 1 (Week 13)

Fig. 56. Font Application 2 (Week 13)

Fig. 57. Font Application 3 (Week 13)

Fig. 58. Font Application 4 (Week 13)

Fig. 59. Font Application 5 (Week 13)

Link to Download Entanglement

Note: Be sure to enable Discretionary Ligatures, Contextual Alternates and Standard Ligatures by going Window > Type > OpenType (Illustrator).

Fig. 60. OpenType Panel (Week 13)

Font Tester:

FEEDBACK

Week 9

General Feedback: When creating the typeface design, use a canvas with 1000 pts for height (width does not matter).

Specific Feedback: Go with either the wild rune extraction or the scenic pictograms. Expand more on the idea and if the wild rune is chosen, there will be some glyphs and coding required to have different letters connect to each other. For pictograms, research more to find a balance between illustration and typographic purpose, have a base theme so they are not too random. Additionally, double to grid to make lowercase and uppercase letters.

Week 10

General Feedback: Mr. Vinod gave everyone their respective feedback.

Specific Feedback: Mr. Vinod said to make the T more obvious. For lowercase letters, look into small capitals and while I can incorporate inspiration from notes that made the capital letters' theme, make sure the differences are little to none (especially for small capitals)

Week 11

General Feedback: Mr Vinod gave everyone their respective feedback.

Specific Feedback: Mr. Vinod advised I hurry with the digitisation as kerning will take a while, especially with the letter connections.

Week 12

General Feedback: Mr. Vinod gave everyone their respective feedback.

Specific Feedback: Mr. Vinod advised I move to Fontlab but if it is mostly done, I can stay on Fontforge because the pairings were already executed. However, I decided to move to Fontlab either way as Fontforge keeps crashing. Additionally, Mr Vinod said I do not need to enter the competition so the five products can be anything outside of the given competition theme.

Week 13

General Feedback: Mr Vinod gave everyone their respective feedback and announced the actual submission date for Task 3 (Next Tuesday, 11:59pm).

Specific Feedback: Because my font is graphic-based, it is better that the presentation showcases those details so increase the lettering size and avoid reduced contrast to get more impact. Additionally, Mr. Vinod asked whether I was joining the typeface competition but I had to decline as it would have copyright issues due to the source origin (Arcane/Riot Games).

REFLECTION

EXPERIENCE: This was a very enjoyable assignment despite the time and tears spent on the design as well as trying to make the software(s) work. I got to revisit one of my favourite shows and study one of its key plot that involved my characters, which made the harder parts a lot more tolerable. Throughout making this assignment, I gained a lot of respect for font designers, especially ones who dabble in more features such as OpenType. Despite how time-consuming this task was, it is definitely something I would look back on because I definitely missed certain aspects when designing and doing the coding for the font due to time limit.

OBSERVATION: At first, I did not know whether to proceed with the idea I had since it was more illustrated and 'chaotic' in form than I expected and I wasn't sure whether it would be accepted. However, after seeing some of the seniors' work where they experimented a lot with their font, I decided to go ahead and try to proceed with the best of my abilities. It was tough at first, especially with the amount of reading and searching I had to do but in the end, I would say it came pretty okay.

FINDINGS: While searching for ways to connect the different glyphs to their corresponding connections and simulating a way to cause randomisation, I found various ways to succeed them with some more complicated than others. There are most likely easier ways to do the coding than what I had but it is interesting to see different methods achieve the same result. Additionally, I found my work to be more efficient once I got the hang of the shortcut keys of both Fontforge and Fontlab.

FURTHER READING

OpenType Features in Fontlab

LINK: https://help.fontlab.com/fontlab-vi/OpenType-Features/

Fig. 61. Content List of help.fontlab (Week 13)

Once moving to Fontlab, this is where I learned how to differentiate the different kinds of OpenType features, specifically the Substitution lookups. Substitution in the Features panel consist of single, ligature, multiple, alternate and context dependant substitutions. I mostly used ligature and alternate substitution since the connections I made consist of the combination between two or more letters.

Irdhina binti Mazli Sham (0366894)