June 01, 2023

Typography Task 3 / Type Design and Communication

28/5/2023 - 23/6/2023 / Week 8 - Week 13
Janice Marie Eng Chia Hui / 0361521
Typography / Bachelor of Design in Creative Media / Taylors University
Task 3 / Type Design and Communication

Lectures

Lectures have been completed in Task 1.

Instructions

https://drive.google.com/file/d/1aSquXrVogMYgOAUI00c7mUurxYK06ghw/view?usp=sharing

Type Design and Communication

1. Visual Reference / Research

Figure 1.1 Morph

Figure 1.2 Public Pixel Font

Figure 1.3 Courier Std Bold

Overshoot

Figure 1.4 Overshoot

When rounded or pointed letters like 'O, A' extends over the x-height to make them appear larger than they are to achieve an optical effect of being the same size; it compensates for inaccuracies in human visual perception

2. Deconstruction

We were to deconstruct some of the existing fonts to see the small details in the font. Mr Vinod ask us to pick fonts that were similar to our sketches. I had initially chosen to deconstruct ITC Garamond Std, but gave up halfway because the 'm' was making me cry blood. I then choose the next closest font that I thought was similar to my sketch, Bembo Std, regular. I also deconstructed a font that was not similar to my sketch but I liked it, Courier Std Bold. The strokes of all the letters are not the same thickness.

Bemb0 Std

Figure 2.1 Bembo Std deconstruction

m

The middle stem is thicker than the other 2 stems.
One of the arcs is larger than the other and one arm is shorter than the other.
Something messed up is happening with the last stem because it is slightly curved compared to the other 2.
Out of the 3 serifs on the bottom, the 1st two are not symmetrical. The last serif is also not symmetrical but the angles are similar to one another.
The top serif and the arm is at an angle.
The width between the stems are similar somewhat, as the last stem is curved

b

The stress of the b is leaning slightly towards the left. I just released I drew the stress on wrong and am too lazy to change it so pretend its leaning to the left.
The thickness of the stem is similar to the 1st and last stem of the letter m.
The bowl on the top tapers toward the end

t

The stem is slightly thicker than the middle stem of m
The crossbar is shorter on the left

Courier Std Bold

Figure 2.2 Courier deconstruction

The stems are similar in width
Serifs are all of different lengths
The inside of the letter are similar in size
2nd arc has a larger circumference that the 1st
Large overshoot

The thickness of the stroke is all the same width
crossbar shorter on the left

Stem is slightly thinner than t
The bowl cuts into the stem, an indentation in the stem
No stress / stress is upright

3. Writing Calligraphy / Letters

For this task, we were to design a type of the letters a, e, t r, k, g, i, r, p, m, n and the symbols # and !. Before designing anything, Mr Vinod got us to write the letters out to practice writing and get us more familiar with the way the letter is formed. We were asked to first try out 5 different nibs and pick the nib we liked the most to practice writing with. In the end, the nid that I choose was an extra thic flat head.

Figure 3.1 Practice and final outcome with 5 pen nibs (21/6/23)

Figure 3.2 Practice and final outcome with thic nib(29/5/23)

Figure 3.3 Practice for a new idea (3/4/23)

4. Digitizing the written letters

Mr Vinod had us digitize some of our sketches in class to see if we know how to do it. After that, I tried to digitize the fonts based on my sketch using the brush tool and pencil tool.

Figure 4.1 Initial digitization (30/5/23)

I reliased I did not like how it looked so I decided to change it. I did some research, which I probably should have done before starting, talk about messing around and finding out, and managed to find some fonts with styles that I liked. Visual reference is placed in the visual reference section. After that, I came up with a new sketch and practiced writing with the tool I had chosen. Sketch placed in writing calligraphy/letters section.

Moving onto the new idea, I wanted to make the letter consist of mostly straight lines, somewhat like a box. This time I decided to use the shapes tool to construct the shape.

Figure 4.2 Shapes Used

I had initially wanted to add serifs to the letters but they did not look good with my letter so I omitted them.

Figure 4.3 Serif vs no Serifs

Figure 4.4 Outline of shapes

After I cried, then I united all the shapes to further edit them. They were very block-like so I tried to make some of the edges rounded a bit. After asking my friends about my font, they said that the thin strokes were too thin, so I went and made it thicc-er.

Figure 4.5 Thin and Thic next to the written work

Figure 4.6 Initial font(4/6/23)

After getting feedback from Sir, I changed the font accordingly.

Figure 4.5 Font after feedback (6/6/23)

Figure 4.6 Process / Evolution

5. Slapping the fonts into Fontlab

Downloaded Fontlab and migrated my letters into them. My first attempt in Fontlab, I set the cap height to 700 pt because I did not know how cap height works. In the end, all my letters were wonky. I manually changed the letters and then later found out that because I am human, the letters were still off. So I deleted everything and started again, this time with the cap height at 500 pt, similar to my x-height. I still had to change some of the letters manually, but it was better than before.

After that, I typed out a few words and found out that the k might be a bit too small in width. I went back to AI and re-did the 'k' to make it the same width as the 'a'. After getting feedback from Mr. Vinod, I changed the orientation of the # from upright to a tab bit slanted.

Figure 5.1 Pokemon evolution of # and k evolution

Figure 5.2 Letters and symbols in Fontlab( no kern, after kern)

Figure 5.3 Sentence kerning and character map

6. Poster

We were told by Sir that we need to make a poster with the fonts. Sir gave us free rein on what sentence we would like to put in the poster. This was hard because we only had the letters and symbols 'aegikmnprty,.!#'. Which was why I decided to make more letters :D.

After showing Mr Vinod my work, I decided to choose 'eat, sleep, die, make great type. I later found out that I was missing the letter n in my poster do I changed it to 'eat, sleep, n die, make great type'. Mr Vinod said he didn't like the composition of my original poster so I changed that too.

Figure 6.1 Test run poster 'your mom, my mom'(14/6/23)

Figure 6.2 Poster process(before/after feedback) (18/6/23)

7. Font Tester

Test the font by typing some words below

8. Final Work

Font details :

x-height : 500pt
ascender : 628pt
descender : -213pt

Download font here

Figure 8.1 New Metric Window with sentence Screengrab(20/623)

Figure 8.2 Final construction of 'Shingles'(kerned)(JPEG) (20/6/23)

Figure 8.3 Final Poster 'eat, sleep, n die, make great type' JPEG (20/6/23)

Figure 8.4 Final construction of 'Shingles(kerned)(PDF) (20/6/23)

Figure 8.5 Final Poster 'eat, sleep, n die, make great type' PDF (20/6/23)

Top ↑

Feedback

Week 9

General Feedback: Use fewer anchor points / make it look less mechanized by adding, deleting, or curving anchor points / permitted to use the brush tool, pen tool, the combination of both, and whatever to is available to us / give texture to the font for character

Specific Feedback: Start by drawing the base of the letter first then, after having the base of all letters, only move on to adding details.

Week 10

General Feedback: Sir started talking about research for next sem and to find a topic that has not been researched/refine the lines of the writing to make the letter fonts font-like / notice all the little details in our sketch

Specific Feedback: Strokes parallel should be the same thickness / the thing hanging from the 'm n r p g' looks weird, change it to the hook like on your 'a e'.

Week 11

General Feedback: Exclamation mark thinner at the bottom/dissect the # to see how it looks/maintains the angle of the stroke

Specific Feedback: Exclamation point and full stop needs to be thicker and the hashtag should not be straight

Week 12

General Feedback: Make sure to align the small name text to something / use all letters given / the name can be part of the composition

Specific Feedback: The composition of the poster can be improved on

Top↑

Reflection

My experience with this task was relatively fine. In my opinion, this task is different from our last few tasks as it focuses less on the layout and more on the 'creating a font' part. I had a bit of a struggle with Fontlab cause it was a software I had never used before and I had to learn how to use it. Am I satisfied with the font I created? Somewhat it gets the job done.

Some of the things I have observed is that using shapes to make the base of your font at the start is really helpful and helps make the font look consistent. I struggled a bit when using the pencil and brush tool to make my font because all the lines came out looking too human-like and not consistent enough.

Overall I enjoyed this task. It was nice to just sit and keep on refining the font till they all looked similar (though I did feel like crying at times). Of course, I did struggle a bit because creating a type is completely new to me, but I have gotten a lot of information from this about designing in general.

Antialiasing is a technique to smoothen out the edges f the letterform when rendered on a digital screen. The pixels blend into the background to make it look smooth. Hinting alters the actual outline of the letters by selectively activating pixels, thus improving the legibility of the letters on the screen and from a low-resolution output device. 2 widely used on-screen typefaces that were specifically created for use as web page text are Verdana and Georgia(this font right there).

Figure 9.2 Pixel Font

Techniques for displaying on-screen fonts are pixel font, type as image, and @font-face. Pixel fonts are designed as a bitmapped type. They can degrade when used at larger or smaller sizes than the intended size. Type as image, as it says, is when the type is converted into a picture file format. It helps maintain the designer's intent and is compatible with almost all websites. However, it cannot be scaled in size. @font-face allows designers to link any number of third-party URL to different browsers.

Simplicity in type is important because typefaces consisting of elemental shapes translate more effectively into the domain of pixels. If elaborate typefaces are used they must be employed as part of a strategic communicative plan.

Figure 9.3 Slab serif vs Old Style vs Transitional vs Modern

Sans serif have a clearer visual presence on the web compared to a serif typeface due to how they are simpler in form. Usually, a well-proportioned sans serif typeface has a medium stroke weight and a balanced ratio of form to counterform. Some of the traditional sans serifs are Helvetica, Univers, and Futura. When serif typeface are used, they should be selected on the basis of their legibility on screen at small sizes. Slab serifs usually provide more legibility than Old Style, transitional, or Modern typeface.

Figure 9.4 Contrast

Effective webpage utilizes no more than 2 or 3 different typeface. Any more would interfere with hierarchical clarity. When combining typefaces, the most important thing is contrast. Plenty of contrast between typefaces ensures that each will effectively fulfill its task. Antialiasing, lower resolution, and backlit presentation dull typographic detail, which lowers the contrast. Because of this, all shifts in typesetting and typeface selection must be further emphasized to promote proper clarity, texture, and hierarchy. These can be done by using different typeface, size, weight, posture, orientation, margin, and colour.

Figure 9.5 Webpage layout

Generous interline spacing is recommended for displaying text on a computer display. Ultimately, interline spacing must rely on optical judgment and an experienced designer's eye. The right weight and width of a type must be established to distinguish the letters from one another. Flushed-left, ragged right alignment is best for languages that read from left to right. Small units of text retain reader's attention, preventing the monotony of the vast sea of texts. Properly dividing and articulating units of text helps to retain information and interest. To make the text interesting. White space should be added between typographic elements. FOr longer passages, white space can be used to marks a reader's progress.

2. GT Academy : Punctuation

Figure 9.6 GT Academy

This Instagram post goes through the anatomy of the punctuations and how to properly design one.