AD TYPOGRAPHY TASK III - Type Exploration and Application/Presentation
MODULE GCD61004: ADVANCED TYPOGRAPHY
17 June 2024 - 22 July 2024 : Week 9 - Week 14
Bachelor of Design (Hon) in Creative Media
Task 3 / Exercises: Type Exploration and Application/Presentation
MODULE INSTRUCTIONS:
“APR - JUL 2024: GCD 60904 / ADVANCED TYPOGRAPHY MODULE INFORMATION BOOKLET”
Task 3 / Exercises: Type Exploration + Application/Presentation (Week 9 - 14)
Type Exploration: Students within the cohort are expected to create a typeface/font which has been designed to solve a larger problem or to serve as a part of the solution in the area of interest. Students can take their interests in adjacent mediums such as graphic design, animation design, new media/entertainment design but students are also allowed to explore fields beyond their specialisation. At the end of this task, students should have developed a custom generated font (.ttf) which includes Capitals, Minuscules, Punctuation and additional characters.
Application/Presentation: With their completed, custom font; students within the cohort are expected to utilise said font in a way which reflects its application or as a means to present it in real-world examples. Their font should be designed and demonstrated solving the previously determined problem in ways which adds value to an existing use. Students are free to produce experimentative outputs which may result in something novel and unique. Their work can manifest into any kind of format related to the issue being solved or explored or experimented: animation, 3d, print, ambient, projection, movie title or game title, music video, use of different material etc.
MODULE PRACTICAL:
WEEK IX - Task 3: Type Exploration
Ideation of Font: Before we would be able to begin working on the design aspect of the font, we were instructed by the lecturer to come-up with three ideas for the fonts; each one being based on our interests across the medium. For this project, the main interest I was looking the most forward to developing was fonts designed for Entertainment Design/Animation Design, personal/promotional use or, template for new brand identities. While Entertainment Design has always been my passion; Promotional/branding fonts is a recent design style I’ve been interested in learning/making plus, work from other modules suggests the importance of ‘standing-out’ with your designs.
“Week 9 - Proposal Document and References for Font Design”
Font Choice and Explanation: In the beginning, I found it difficult to make an informed choice and, after discussing my ideas with the lecturer; I ultimately decided to develop a ‘Display Font’ for personalised use in future endeavours. While I felt more confident in making a font similar in style to the diegetic fonts in entertainment mediums; the lecturer believed that this might be ‘too ambitious’ and would warrant a lot of time on research and prototyping (time we do not have.) As a result, designing a personal font with the intent to be used in personal/promotional use was the next best idea. Following my example from the previous task, I thought it would be interesting to create a custom font which could be used as an ‘expansion’ of the Word-mark Idea; creating a font which is connected to my identity but is still subtle enough to make said Word-mark more important. This is where the concept of a ‘display font’ first appeared; a unique font which is mainly used for titles, heading etc. but not body text. Because of this some-what limitation, my custom font would need to be unique enough to warrant its design and solving the problem of personal/promotional design but subtle enough that it could pair nicely with existing fonts.
The main challenge presented for this task was now to design a font which could be used alongside various other typefaces which suggests the design needs to have interesting elements but also needs to remain simple and not-overly engineered. In trying to design a font with these self-imposed limitations, I began follow-up research on existing Display Fonts and looking how A) they were designed to be unique and B) What typefaces they are often paired with. For my reference, I looked at existing fonts such as “Auge Modern Serif, Blake 2.0 Black, Wren Capitals and Chomsky Black Letter.” I also looked into existing brands with unique fonts such as the Newer “The Guardian” for better references. From my research (and my preference for fonts,) I felt that making a serif font with a mixture of thin-line/thick-line would allow for it to mix well with existing fonts, including san-serifs given that their line work was lighter. For the unique Design aspect, my custom font style would appear in simple decals within the letterforms and, by using a grid-system, would create interesting shapes which would help it stand out a bit while not being too distracting.
“Examples Designs of Chomsky, Wren, Blake 2.0 Black, Auge Modern Serif (Left to right)”
References: Chomsky Black-letter is a version of black letter, popularised by publications such as the New York Times. The Font is a great example of a display font, appearing to outline a title which is then paired with regular fonts for the body text. In its design, I find it similar to the previously outlined goals. It possesses thick-line/thin-line which is used well in the sharp angles of the letterforms. However, the font becomes slightly unfavourable due to it being overly-engineered; while it does work in its original context, Chomsky Black Letter is too much.
Wren is a unique custom font, specifically designed to be used as a display text and only features basic punctuation and capitals. This font is mainly designed for artistic promotions and is often paired with serif fonts. Its design becomes favourable to this project due to its use of repeating small motifs in-between letterforms which is further emphasised with its lineage. Wren also allows for minor ‘expansions’ of the font, being further stylised by overlapping letterforms or creating connectors which are unique to the font. Despite its inherent benefits, the main concern is the fact that the font lacks minuscules as well as the thin-lines used can be difficult to spot if not blown-up on a large scale.
Blake 2.0 Black font is similar in design to the Wren font however additional emphasis has been placed on the tails of the serif style. While this font has the same weaknesses as Wren such as having no Minuscules and having very thin-lines, the font is still worth looking at due to its simple styling. The main flair appears in the tails of the font, smoothly exiting the thick-lines on one side and, the tails being used to highlight the near-invisible very thin lines. Its design is simple and non intrusive but it pairs nicely with other serif fonts.
WEEK X - Task 3: Type Sketches and digitalisation
Sketching Fonts: With the reference gathered from the previous week, I was able to begin developing some concept designs for the font I intended to create. The general idea was to develop a serif-based font with alternating line thickness which I wanted to explore in different ways. Furthermore, when all designs were completed; I would be able to take inspiration between the concepts to make the final design.
.JPG)
“Sketches Design 1, Design 2, Design 3 (top-bottom)”
Design 1: For this first design, I wanted to experiment by developing a smooth transition between the thin-lines and the thick lines; a feature which is often not seen in fonts with different line thicknesses. In order to achieve this smooth transition, all curved strokes would need to be heavily rounded which allowed the inner and outer sides to meet at the same point easily. To add more emphasis to this overall roundedness, I thought it would be interesting to rotate the newly formed ‘crescent’ shape by ~45 degrees as best seen by the letter “O.” Not only did this slight change make the font look a little more interesting but, I also helped give the letter “D” more character as it would create a small cut-out in the vertical stroke. This curve motif carried over into the other Letters such as “H” and “N” where the horizontal connecting lines featured large ‘curving flicks’ which seamlessly connected with the Vertical Strokes. One downside looking back on this design comes from the minuscules; a majority of them look like a common serif.
Design 2: In the second design, I took heavy inspiration from the Wren design which makes this design function more like a dissection to see how to manage strokes and how to integrate consistent motifs. When designing this concept, one thing that became clear was the amount of white space created by the original motif. In essence, this motif was often placed in locations where thick-lines and thin-lines would meet and would serve as transition between the two; however, its inclusion cut deep into the thick strokes which appeared to divide said stroke into separate parts. This would ultimately make reading the font difficult at greater distances which is not desired for promotional opportunities. Another interesting point of the motif is that I tried to place them in letterforms which didn’t require them such as the letter “D” where the motif makes the curved line look a bit odd. The final major concern was that not all letterforms possessed serif tails, making the font feel a bit janky and unplanned. Despite these set-backs, this concept was still useful as it gave insight and ideas as to how to incorporate simple and easily repeatable patterns within letterforms.
Design 3: For the final Design, I wanted to experiment with a more rigid, grid-like design which is complemented with angled serifs. Using the information I had gathered from the previous concept, I wanted to re-introduce a thin-line motif which shares the same angle as the serif tails, creating a consistent, repeatable design. In addition, I ensured that this new motif would only appear in the centre of curved-based letterforms, the connector between strokes in a letterform and the additional hand within a letterform. Overall, I’m quite happy with how this final design came out; it looks unique enough to be special but has enough familiarity in its design to allow it to fit seamlessly with other fonts. The only concern which was explained by the lecturer was the thin-lines. In general, these lines should be made a little thicker to improve readability which would be important going into the digitisation phase; ensuring that the new line-weight doesn’t throw-off the connecting lines too much.
“Capitals designed for the custom font”
Digitising Capitals: Switching over to Adobe Illustrator, I decided to go with the Third Design which I would develop using a custom letterform-grid and the parts from the concept letterforms. When developing the grid, I started by measuring out the thick-line width and comparing the distance using the letters “G, H, O” Which initially created a tile size of 5x5 which was then increased to 7x5 (wide, tall) due to letterforms such as “M & W.” For the curve of the thick-line strokes (seen in letterforms “G, O, U, S”) a 2x2 circle was used to keep a consistent dimension while the serif tails were created using a simple 1x1 circle attached at the base of each line. For the repeating motif, 2 lines would be placed on the 3rd tile from the bottom and would appear in letterforms which featured a bowl or, had a significant horizontal bar design.
To begin the process of creating letterforms, I first created the ones featured in the concept design (being “G, O, D, H, N, S” respectively) as these letterforms could be broken down into simple parts which could be re-constructed into the remaining letterforms. For example, the backstroke of the letter “D” was re-used to create the letters “K, R, L, U, h etc.” In more extreme cases, letter parts from “S & N” were reused to make the letter “B & V (V later leading to M/W).” Not only does this help save on time but it also makes the designs feel more consistent. The first major Road-Block in the capital letter design came from letters with high Horizontal bars such as “F, T, J;” as it was difficult to create appealing designs which were also consistent with the style. As a result, parts from the letter “C” were used in order to make the top line; however, it is not the most appealing solution. The next major concern came with the letters “M & W” Due to them featuring multiple peaks with unique lining. In a weird event, the letter “M” was designed first before isolating the middle peak to make the letter “V” which was then tweaked and inverted (the inversion was inspired by Black-letter and its design of V & W.) Additionally, due to “V” having a thin line which ends in a serif; a custom serif needed to be designed to fit at the base of thin-lines (later reused in the letter X). Once fixed, the “V” was reused to make a second version of “M” (now facing the correct way according black letter) and was also reused twice to make the letter “W.”
WEEK XI - Task 3: Digitalisation pt.II
“Minuscules designed for the custom font”
Digitising Minuscules: In a similar creation process to the Capitals, the minuscules would be created using the same grid system however; elements such as the grid was given a descender tile-row, the motif was lowered down the 2nd tile to fit-in and, the average letter width was reduced from 4 tiles wide down to 3 tiles wide. Once again, the first letterforms created were the ones in the concept design due to these letters having the most repeatable elements which helps in keeping consistency.
When it came to designing letterforms, the 3 wide tiles size was made to ensure that the x-height would be in-line with Capitals such as “B, P, S and K.” This decision led to an interesting design where all the Minuscule characters looked ‘rounder’ due to them still being constructed using a 2x2 circle. Looking back on these designs, while the circle helps keep the letterforms looking unique however, the 1x1 circle made the Minuscules look a bit off due to their serif tails (mainly “a, u, n, m, w.”) Another concern I have with the Minuscules is the letter ‘t’ which was designed to mimic the curved base which it is often written with. The main concern is that the letter looks a little off balance but looks alright when placed alongside other letters.
FontLab: After obtaining FontLab by legal means, the final requirement for the font was to create a version which was usable by computers; using the .tff format. FontLab was the program recommended by the lecturer as it presented the least amount of limitations when porting designs over from Adobe illustrator; however it was not fully perfect. As mentioned in the previous week, the main concern with these designs is the thin-line width which does not always show up in FontLab (and was originally, not appearing for me.) To counteract this issue, the letterforms being copied over would first be scaled up in size before being altered by using the “Outline Path” Tool. These letterforms would then be compressed into one shape using the “Unite Pathfinder” Tool and then pasted into FontLab.
.png)
.png)
While in FontLab, Certain letterforms would need to be tweaked, mainly removing the increased amount of anchors found along the lines as well as certain elements being moved to match the guidelines (example being the letter “M” with the middle peak needing to be moved up to match with the base-line or the letters “f & t” which saw their arms lowered to match the x-height.) When all letterforms were transferred over, each letter would need to have their side-bearings re-adjusted to ensure that they looked fine when placed against one another. To achieve the best outcome in a short amount of time; the ‘cheat-sheet’ shown below was used to determine the right lengths for each side-bearing. With this final step completed, the font was ready to be used as a .tff file and can be obtained from the link below:
Measurements (from baseline)
Capital height: 1000 px
Median / x-height: 600 px
Ascender Height: 1000 px
Descender height: -200 px
Measurements of final font
Tiles: 200 px
Stroke width Thick: 200 px
Stroke width Thin: 20 px
Serif Tails: 100 px
WEEK XII - Task 3: Type Application
“References for the final Design”
General Presentation: With the Custom Font created and able to be used within programs such as Adobe Illustrator, I was now able to produce the final five designs required to showcase my font. From the requirements, students at this phase have two options to progress; they can either use their fonts and apply it to projects to show how it is intended to be used or, they can present the font which looks at all the details and speciality behind it. In my case, I decided to go with Application as my font was designed with the purpose to be used as a ‘Display Font’ and thus, needs a full demonstration to show how it is intended to be used.
Going into this task, I wanted to make a custom font with the intention to solve a problem where I needed a font to be made for personal use which extends to my promotional use. The font was to be designed to appear unique but was not supposed to be distracting and could take away from what is being presented. It also should blend seamlessly with other existing fonts, similar in design. In essence, I wanted to make a font for promotional use which is stylised enough to be noticed and recognised but not intrusive enough that it distracts the presentation of goods and services.
“Final Design for a Promotional piece, displaying the font”
Design 1 (Promo): This first piece was more-or-less a test way to present the font while showing a bit of its creation process. Because this font is supposed to be an ‘expansion’ of my Typographical design, it features my personal mantra of “continuing on & on…” which is also in the style of the custom font.
“Final Design for a promotional piece, showing its use in photography and advertising”
Design 2 (Porsche): My most favourite piece made using my custom font; this piece was made to show how the font could be used alongside subject-matter which individuals may want to promote. In this piece, the unique appearance of the font is enough to be note-worthy but, it doesn’t take away from the main thing being displayed and, the font is able to be used alongside additional typefaces without looking out-of-place.
“Final Design for a decorative piece, showing its use in short messages/posts”
Design 3 (Rush): This third piece was supposed to be a short promotional one done in the style of Typographic designs commonly seen on spaces such as “Instagram.” In this instance, I wanted to experiment with counter-space letterforms in conjunction with full letterforms as this draws a lot more attention to the message which then makes the font centre-stage. The Font completes its job by not being too intrusive, and the font is able to be used alongside additional typefaces without looking out-of-place.
“Final Design for a Promotional piece, displaying the font”
Design 4 (Topo-Typo): This fourth piece was a more serious attempt of the first piece; designed to display the font in a creative way where it is front-and-centre. Once again, as an expansion of my Typographical design, not only does it feature the mantra which pops more with the colour but it also features recurring symbols, linking it more to my original design.
“Final Design for a Promotional piece”
Design 5 (Explore): This Final Design was supposed to be another exploration into how the font could be used to promote something (similar to an advertisement to an event) as well as being an exploration of counter-forms. However, I’m not too happy with how this one turned out and maybe could’ve been done better.
General Application: With the Custom Font created and able to be used within programs such as Adobe Illustrator, I was now able to produce the final five designs required to showcase my font. From the requirements, students at this phase have two options to progress; they can either use their fonts and apply it to projects to show how it is intended to be used or, they can present the font which looks at all the details and speciality behind it. In my case, I decided to go with Application as my font was designed with the purpose to be used as a ‘Display Font’ and thus, needs a full demonstration to show how it is intended to be used.
“Final Design for a Application piece”
“Final Design for a Application piece”
“Final Design for a Application piece”
“Final Design for a Application piece”
“Final Design for a Application piece”
TASK FEEDBACK:
TASK 3 WEEK IX: Key Artwork
General Feedback: working with the lecturer, they believe that the ideas that I presented are great choices and are open to a lot of creative input. The major concern addressed by the lecturer is that some sections require a vast amount of research and understanding for effective readable fonts (mainly referring to section A with game design.) As for the other two ideas, they are “fun and exciting endeavours” but I must be careful with the scope of this project; I cannot be too ambitious. It is suggested looking for designs which are realistic: “You should want something impactful but “doable” within the time period. Test out options and see how you feel about it.”
TASK 3 WEEK X: Key Artwork
General Feedback: Showing off what I had of my fonts, my lecturer appeared to be quite happy with the results. The lecturer was quite happy with aspects such as the grid and how it brings structure which is also being explored. The only concern that they have is the ‘motif’ or the consistent double-dashed line. While not too distracting, it loses readability with a few letters and may wish to be dropped on certain letterforms to ensure readability. Fonts are useless if they cannot be read.
TASK 3 WEEK XI: Key Artwork
General Feedback: Public Holiday, no class.
TASK 3 WEEK XII: Key Artwork
General Feedback: Falling very ill, unable to make this week’s lesson. From discussions on the side with the lecturer, the display pieces need to be altered in order to put the font more centre. Ensure that my goals are clearly outlined and addressed.
TASK 3 WEEK XII: Key Artwork
General Feedback: Looking at other students and my work, the lecturer would provide the following information to improve our Works:
FURTHER READINGS:
WEEK X - XIII: Typography, Referenced: A Comprehensive Visual Guide to the Language, History, and Practice of Typography: Frameworks by Allan Haley
General Reading: Allan Haley plus other authors’ 2012 novel, “Typography Referenced” is a comprehensive visual guide which focuses on the language, history, and practice of typography (the part that was the most important.) The novel looks at elements of typographic design including terminology and design principles; showing examples of Typefaces from significant type designers—both past and present.
In the context of this final task, I mainly used this book to aid me in designing a custom font with a specific goal in mind; something the book was able to help me with. One interesting aspect is how it groups similar typefaces together in order to see common traits shared by all which would become important in this task as I needed mine to “blend in.”
Comments
Post a Comment