Advanced Typography - Task 3

19.06.2024 - 24.07.2024  / week 9 - week 14

Velicia Raquel Dewi Setiawan | 0369188 | Bachelor of Design (Honours) in Creative Media

Advanced Typography

JUMPLINK:

1. Lecture
• In Task 1 - Exercises 
• In Task 2
2. Instruction
3. Task 3 Type Exploration and Application
• Research
• Progress
• Final Result
4. Feedback
5. Reflection
6. Further Reading

1. LECTURE

• In Task 1 - Exercises 
• In Task 2

2. INSTRUCTION

Requirements 

• Laptop, Adobe Creative Suite, FontLab, Eportfolio (Blogspot), Gmail Ac, Facebook Ac, etc.

Submission 

• Eportfolio: All gathered information (failures, successes, epiphanies, sketches, visual research, printouts, websites, images, charts, etc.) must be documented logically and chronologically in the portfolio for the task's duration in one post.

• Eportfolio: All images/sketches/diagrams/scans must be captured/photographed/scanned well with good, even, natural light, without shadows — use of tube/bulb/flashlight is not allowed. All images/sketches/diagrams/scans must be labeled (fig 1.), described and dated. Final submission must be indicated clearly (distinguishable from process work) and uploaded as PDF and JPEG (not PNG) or as instructed in class.

• (Only if instructed) Tasks to be documented in a printed A4 enclosed in a Clear Sheet, logically and chronologically. The works must be labeled and dated – use a pencil and write neatly.

3. Task 3 - Type Exploration and Application

1. Research

Fig 3.1 Proposal, Week 8 (12/06/2024)

After presting the proposal to sir, I chose the 3rd ide from it. Due to it being the easiest to do and i have already multiple ideas on the application. This defenitly going to have more of a "matrix" vibe. Im still aiming for a blocky VHS terminal esqe font, but with modern feeling to it. Something that can be used in today modern era without it being too old retro.

Fig 3.2 Font Reference, Week 8 (12/06/2024)

This is the VHS tape font that i found as main reference. 

Mr also said that I should do more reserch on how the VHS terminal screen work. So i look trough the internet and got some inetrestic facts about them.

The Origins and Decline of VHS Tapes

VHS (Video Home System) tapes were introduced in the late 1970s as a consumer-level analog recording and playback format for video. They quickly became the dominant home video format, surpassing Betamax, and remained popular throughout the 1980s and 1990s.

However, with the rise of DVDs in the late 1990s and early 2000s, VHS tapes began to decline in popularity. DVDs offered superior video and audio quality, as well as additional features like chapter selection and bonus content. By the mid-2000s, most major movie studios had stopped releasing new titles on VHS.

Today, VHS tapes are largely obsolete, with most people having moved on to newer formats like DVDs, Blu-rays, and digital streaming. Many people have forgotten the nostalgic appeal of VHS tapes and the unique aesthetic they brought to home video.

Fig 3.3 How the 90s VHS look works, Week 8 (12/06/2024)

• VHS tapes can be damaged due to various factors, including a belt failure during playback, which can cause tracking issues.
• Tape damage, also known as pop lines, is caused by dust or debris sticking to the tape, creating streaks and scrolling wrinkles.

2. Progress

The way I decided on how to make it look modern, is by removing the pixels and using smooth strokes to give it the sleek new feel. 

Fig 3.4 Sketch, Week 9 (19/06/2024)

This is the initial digitalizing of the font. I changed the sharp top of the A, due to the sharpness looking out of place with the other letters. It does work out in the reference font though, it is because the reference uses pixelated blocks stacked together instead of my style. I tried a couple styles as I felt like the initial structure of the reference was too tall, so I made it shorter, definitely giving it a friendlier look compared to the long version.

Fig 3.5 Digitazation, Week 9 (19/06/2024)

Then I made the whole capital letters with a couple variations, I struggled with how to make the letters weigh the same because I chose the short, more bulky letter style, and I encountered problems with some letters such as I, J, P, E, and more. I wanted the letters to take up the same width and length but especially with the short gris it's just not possible. 

Fig 3.6 Capital letters, Week 10 (26/06/2024)

Another problem is the K and the R, these letters' legs are too short for the grid I have, so I ended up changing the rotation on the whole letter strokes, sigh... it's very tedious.

Mr also give feedbacks on it:

• Proportional issues on later K, J.
• Grid structure.
• For the letter B, I don't need to give space in the upper counter, but I could try to allow a smaller counter above and a slightly bigger counter below.
• Letter S lower counter space needs to be slightly wider.
• Explore different options of the letterforms.
• Latter Q tail is problematic, is the tail needed or not?
• Latter Z has issues.

Fig 3.7 Font Spread, Week 10 (26/06/2024)

Thus I added the grid, made changes according to the feedback, and made the small letters. I made a bold version of the capitals too, because I planned to have other variations of the fonts as well, such as scanlines and glitches. (I didn't end up doing it, it would take too much time, time that I did not have)

Then I did the numerals and the punctuation marks. Mr said for the punctuation, I should reference other existing fonts so that it is proportionally correct. Here is the attempt at it:

Fig 3.8 Punctuation, Week 11 (03/07/2024)

I said before that I didn't end up making the other variation of the font, but I did make a couple attempts at it. This is the glitch font effects:

Fig 3.9 Glitch effects, Week 11 (03/07/2024)

Then it's just a matter of putting it in Fontlab, tweaking the kerning and sidebearing and then the font is done. During this either, the computer or the program keeps restarting my adjustment, pretty annoying but I get through it. 

Fig 3.10 Fontlab, Week 12 (10/07/2024)

For the font presentation, I looked through Pinterest for inspiration first, then started doing them. Mostly has the code/matrix vibe. I made a couple and showed it to Mr. Vinod. Most of them I took inspiration from code/matrix vibes, and cryptic messages. 

The two on the left are a bit variation from each other, one with capital letters and the other one with smaller letters. While making this, I realized it's better to make something readable for the viewers to read even though mr said we could just put in the letters we liked. I think it's due to the nature of the font that I made which people naturally associate with something mysterious as it is often used in media as codes, symbols, clues, and hackers. People would want to read it and get closure and who am I to deny that.

Following that concept, I ensure that all of the other presentations have slightly cryptic messages to them. The combining numbers and words presentation inspiration is from a vague memory i have from watching a movie where the numbers would randomly glitch out to spell out something. Of course, that would be hard to display without the animation so I contact the numbers and words with colors. 

The "Your File Has Been Redacted file is inspired by a COD game where the classified files have black stripes over the information. I think it fitting to use it in this presentation too, even though it's not common to see on a technology media display.

The middle top is inspired by when you block text normally, usually, it's blue, but uses other colors to give it more variety, it's actually the most eye-catching out of all of them due to the whitespace. The bottom middle is another variety from the two on the left but I want the letters to continue to the next row but it doesn't look readable. 

Because I already used a lot of the letters, I want to make use of the punctuation and just highlight them in green. All of the other are just me trying to replicate the format on the application, terminal display, and cassette.

Fig 3.11 Type presentation, Week 13 (17/07/2024)

Mr. Vinod chose six and told me to change the color palate on some of them so they all look balanced together. interestingly the presentation that I thought was terrible, Mr actually liked it. Dont know whether this is my dull design instinct or Sir and I just have different tastes. This is the chosen and improved presentation. 

During this, I also realized that I forgot something on fontlab that made the font cant change color, so I needed to expand the text first and then color it.

Fig 3.12 Type presentation, Week 13 (17/07/2024)

For the application same as task 2, I made a couple of variations and different background from dull geay to vhs effects over green in the background, also tried it with bunch lines of codes, but it looked to crowded and settled with the green vhs background. I used the leftovers from the type presentation in this mock-up and I thought that it looked good.

Fig 3.13 Font applications, Week 13 (17/07/2024)

I tired buch of presentation that fit for the tv and settled on the numbers with the letters "CAN YOU HEAR THEM?", because its the most readeble compared to the others below. Technicly i can make the tv background white or green, but then the white just destroy the color pallate going on and the green would be to much with the background.

Fig 3.14 Font applications, Week 13 (17/07/2024)

I did the mockups in Photoshop, so I had the liberty to enhance the model itself. adjusting the lighting and contrast.

Fig 3.15 Font applications, Week 13 (17/07/2024)

Then also made a new design for the Billboard mock-up, and went through a couple of adjustments and its definitely harder due to it being in Photoshop but it turns out really cool. This mock-up is the best in my opinion. Also added an adjustment to the picture, just a touch of green.

Fig 3.16 Font applications, Week 13 (17/07/2024)

Fig 3.17 Font applications, Week 13 (17/07/2024)

For the other mockups, I also use many variations of design to see which fits. Here are the attemps at that:

I really like the sleek modern design on this one, especially the ones on the left, they have good contrast to them, but I do not know if that is appropriate for a cassette tape. The color black also added to the modern feel too

Fig 3.18 Font applications, Week 13 (17/07/2024)

I liked the Game Boy mock-up, but also the space to show the design is quite small it's worrying.

Fig 3.19 Font applications, Week 13 (17/07/2024)

3. Final Result

Link: https://drive.google.com/file/d/1G-kk4QimBMKYZHfC1Uf_i-OhlEc3MvV0/view?usp=drive_link

Fig 3.1 Typography Basics, Week 14 (24/07/2024)

3.1 Font Presentations

Fig 3.2 Font presentations, Week 13 (17/07/2024)

Fig 3.3 Font presentations, Week 13 (17/07/2024)

Fig 3.4 Font presentations, Week 13 (17/07/2024)

Fig 3.5 Font presentations, Week 13 (17/07/2024)

Fig 3.6 Font presentations, Week 13 (17/07/2024)

Fig 3.7 Font presentations, Week 13 (17/07/2024)

3.2 Font Applications

Fig 3.8 Font applications, Week 13 (17/07/2024)

Fig 3.9 Font applications, Week 13 (17/07/2024)

Fig 3.10 Font applications, Week 13 (17/07/2024)

Fig 3.11 Font applications, Week 13 (17/07/2024)

Fig 3.12 Font applications, Week 13 (17/07/2024)

4. Feedback

Week 8: 

General feedback:

• If you lack confidence and time and do not want to waste time, Mr suggests making unicase font.

Specific feedback:

• For the first idea, the reference font is too light and not suited for titles. Also, the reference font is just reflecting the Viking aspect and not the dragons, which the movie is about.
• The purpose of the first idea could be for collateral such as merch and posters.

• The second idea is for narrative purposes, a person talking the word or diagram appears, or on pages too and the letterforms can use my letterforms. Find other ways to use the letterforms.
• These letterforms are from Icelandic, Norway. People there write in a particular way and I need to study those manuscripts.
• 7-8 design producing text in that form, design of letter forms needs to be plain but also have a bit of character. it's not just straight letters, the strokes have different weights depending on how you write it (it reminds me of the Mandarin characters too, what order stroke is and from up or down or left or right.)

• VHS tape font usually only uses the uppercase for its application. Maybe because there's more legibility in the past screen (Cube screen). Some lowercase fonts from the reference font do not follow the baseline such as p, q, g, j.
• Could add related symbols such as arrow, reverse arrow, rewind, pause, and play. Need more exploration on VSP display.
• Need to explore more on how the application is used in today's era, where it would feature? Modern and contemporary, could be fashion merchandise, based on technology from the past. 
• Maybe a non-pixelated font the VHS tape font, but instead follows modern lines. 

Week 9: 

General feedback:

• What is your contribution to the existing font? When there's already so much variation of it. How are you gonna stand out from the many fonts out there?
• Your potential target needs to be specific, it cannot be for everyone.
• What is the problem and solution? It needs to be clear.
• We can't take existing typeface and corrupt it.
• Research the history of the existing font and the reasoning behind how the design is the way it is.
• Mr doesn't have an understanding of how it will look like, Mr needs to see what it will look like before confirming it.
• The sketch needs to be better than the reference.
• How the font is going to stand out against the imagery (need application example)
• Give the letterforms baseline, medium, descender, structure, and height. (Experimental)
• Make upper and lower case in the same guidelines side by side.
• Begin systematically and orderly, it takes time. Start correctly research properly and absorb, how people did it.
• The process is important evidence needs to be sufficient that you are the one making the font.
• The process needs to be evident, record every evolution, and copy and paste the letterforms.

Week 10: 

General feedback:

• Rotating the latter m to w is lazy.
• Be careful of reference, analyze then close it, and don't look at it again.
• Do not plagiarise it.
• Document the entire process.

Specific feedback:

• Proportional issues on later K, J.
• Mr needs to see the grid structure.
• For the letter B, Mr said that for my mechanical letterform,  I don't need to give space in the upper counter, but I could try to allow a smaller counter above and a slightly bigger counter below.
• Letter S lower counter space needs to be slightly wider.
• Explore different options of the letterforms.
• Latter Q tail is problematic, is the tail needed or not?
• Latter Z has issues.

Week 11: 

General feedback:

• Uppercase, lowercase, and punctuation mark. all need to be completed.

Specific feedback:

• Make the m and w wider.
• I could try different explorations.
• I need to finish the base font of upper and lowercase before adding effects.

Week 12: 

General feedback:

• We can allow other typefaces
• Minimal colors 3 colors
• You could use only the liked letters, does not have to be all of them
• look at shack folder for example
• 1024x1024px 300 ppi
• can use images related to the context
• application id the solution
• look at the instruction and the resources in teams

Week 12: 

General feedback:

• We can allow other typefaces
• Minimal colors 3 colors
• You could use only the liked letters, does not have to be all of them
• look at shack folder for example
• 1024x1024px 300 ppi
• can use images related to the context
• application id the solution
• look at the instruction and the resources in teams

Week 13: 

General feedback:

• Make sure to finish all work before next week

Specific feedback:

• add more colors to the type presentation.
• make sure the color is balanced between one another (originally the black is too much and the green is lacking)
• I should fix the type font after I do this task because i can't color in the font.

5. Reflection

1. Experience

Creating a modernized VHS terminal-esque font was both challenging and rewarding. I was excited about blending retro aesthetics with contemporary design. Researching the history and characteristics of VHS terminals provided a solid starting point. The digitization process was intricate, with proportional issues, especially with letters like K, J, and P. Adjusting strokes to fit the grid while maintaining a cohesive look was quite tedious. Despite occasional frustrations with Fontlab hiccups, it all paid off.

Also, feedback from Mr. Vinod, the insights on specific letter adjustments and proportional issues were invaluable, as well as on the type presentation on color balance. This project not only tested my technical skills but also deepened my appreciation for the meticulous nature of font design. I'm pretty proud of myself for this one, mainly because I was actually not so behind on my work. Woohooo!

2. Observation

The project focused on balancing a retro aesthetic with a modern look, removing pixelation, and using smooth strokes to modernize the design while preserving the VHS terminal blocky style. The feedback from Mr Vinod shows the importance of proportionality and consistency in font design. Experimenting with different design variations and mock-ups to see how sometimes my personal preference is not quite appropriate for the application. And just because I don't like certain designs, other people might enjoy them, so I should try as many as possible ways can compose the design.

3. Findings

Having a consistent workload each week feels so good, I'm glad that I'm starting to manage my time better this time around. Also don't expect too much of myself, be realistic (there's no way I could the other variations of this font such as scanlines, bold, or glitch). It's okay to make as many designs as possible because other people might like it. Paying attention to the color balance in my work. Always use references, not to plagiarize them, but to analyze them and then implement them in the design.

6. Further Reading

Fig 6.1 Typography Basics, Week 9 (19/06/2024)

1. Computer Characters Overview

• Use of foreign characters and special symbols.
• Difficult for beginners.
• Manual reference or on-screen character locator available.

2. Kerning and Tracking 

• Kerning:
• Inter-character spacing for a pleasing text look.
• Most word processors and page-layout programs automatically apply kerning.
• Manual adjustments may be required for certain letter combinations.
• Kerning is necessary for all low-ercase and uppercase letters.

• Tracking:
• Adjustment of word spacing, similar to kerning.
• Aims to fit type into required space without altering type size or line spacing.
• Can be negative (words closer together) or positive (words farther apart).
• Used to fix single words or 2-3 short words at the end of a paragraph.

3. Line Spacing for Headlines and Subheads

• Advanced layout programs offer options for line spacing, including a percentage of type size and a set amount.
• Auto leading, or percentage, should be avoided to avoid a spread-out appearance of larger heads.
• Line spacing (Leading) refers to the space between lines of type.
• Factors to consider include font used, line length, and type size.
• Leading, derived from hand-set type, can be character format or paragraph format.
• Type size and line spacing are typically written together, with the common format being 10/12, indicating a ten-point type size and a 12-point line spacing.

4. Paragraph Alignment and Spacing Overview

• Paragraph Alignment:
• Refers to the side of the page or column where the text is even.
• Options include flush left, aligned left, rag right, centered, justified, and forced justified.
• Most body text is flush left or justified.
• Headlines and subheads are usually flush left or centered.
• Flush right should be used for design purposes and small amounts of text.
• Forced justified is rarely used.

• Paragraph Spacing:
• Automatic space between each paragraph applied when starting a new paragraph.
• Can be adjusted globally or by fractional line spaces.
• Space is not inserted when a paragraph falls at the end of a page