Typography - Project 2

May 17, 2019

Typography - Project 2

17/5/2019 - 31/5/2019 (Week 7 - Week 9)
Vun Wan Min (0334263)
Typography
Project 2

LECTURE NOTES

Lecture 7: Text (Part 1)

17/5/2019 (Week 7)

‘Kerning’ is the term for automatic adjustment of space between letters. Often mistakenly referred to as ‘letterspacing but in fact, letterspacing means to add space between the letters while the addition and removal of space in a word or sentence is referred to as ‘tracking’.

Fig. 1.1: Kerning Comparison

Fig. 1.2: Tracking Comparison

Uppercase letterforms are drawn to be able to stand on their own, whereas lowercase letterforms require the counterform created between letters to maintain the line of reading.

Fig. 1.3: Example of Tracking

There are 4 types of type:

Flush left: It is closely mirrors the asymmetrical experience of handwriting. Each line starts at the same point but ends wherever the last word on the line ends. Spaces between words are consistent throughout the text, allowing the type to create an even gray value.

Centered: It imposes symmetry upon the text, assigning equal value and weight to both ends of any line. It transforms fields of text into shapes, thereby adding a pictorial quality to material that is non-pictorial by nature. Centered type creates a strong shape on the page, its important to amend line breaks so that the text does not appear too jagged.

Flush right: It places emphasis on the end of a line as opposed to its start. It can be useful in situations (like captions) where the relationship between text and image might be ambiguous without a strong orientation to the right.

Justified: Like centering, it imposes a symmetrical shape on the text. It is achieved by expanding or reducing spaces between words and, sometimes, between letters. The resulting openness of lines can occasionally produce ‘rivers’ of white space running vertically through the text. Careful attention to line breaks and hyphenation is required to amend this problem whenever possible.

Depending on several factors, personal preference, prevailing culture and the need to express play important roles. When setting the field of type, designers keep in mind the typographer’s first job—clear, appropriate presentation of the author’s message.

Type that calls attention to itself before the reader can get to the actual words is simply interference, and should be avoided. Quite simply if you see the type before you see the words, change the type.

Fig. 1.4: Example of Type

On the left side, the type is appropriate for the invitation written on as it is to celebrate a wedding.

On the right side, the type is clear to read but not a suitable type for an invitation.

It is important to understand how different typefaces feel as text. A good typographer has to know which typeface best suits the message at hand. It is because different typefaces suit different messages.
Consider, too, the different textures of these typefaces. Type with a relatively generous x-height or relatively heavy stroke width produces a darker mass on the page than type with a relatively smaller x-height or lighter stroke. Sensitivity to these differences in colour is fundamental for creating successful layouts.

Fig. 1.5: Comparison of Typefaces

The goal in setting text type is to allow for a easy prolonged reading.

There are 3 rules that provide an important role:
Type size: Text type should be large enough to be read easily at arms length—imagine yourself holding a book in your lap. Good reading size is between 8 -12 pt.

Leading: Text that is set too tightly encourages vertical eye movement; a reader can easily loose his or her place while type that is set too loosely creates striped patterns that distract the reader from the material at hand. If the type is a point size 9, the leading should increase by 3 or 4.

Line Length: Appropriate leading for text is as much a function of the line length as it is a question f type size and leading. Shorter lines require less leading; longer lines more. A good rule of thumb is to keep line length between 35-65 characters. Extremely long or short lines lengths impairs reading. A good line length is between 40 - 60 character per line.

Fig. 1.6: Example of Leading

A type specimen book shows samples of typefaces in various different sizes. It is to provide an accurate reference for type, type size, type leading, type line length etc.

Lecture 8: No Lecture
24/5/2019 (Week 8)

There was no lecture but Mr Vinod taught us how to use FontLab and show us how to transfer our fonts in.

Lecture 9: Text (Part 2)
31/5/2019 (Week 9)

Fig. 2.1: Example of Pilcrow

The ‘pilcrow’ (¶), a holdover from medieval manuscripts that is seldom use today. It is to create paragraph. It was used to cut down cost of animal skin because it was expensive.

Fig. 2.2: Example of Line Space

By having the same leading and line space ensures cross-alignment across columns of text. Hence if the line space is 12pt, then the paragraph space is 12pt.

Fig. 2.3: Line space vs. Leading

There two unpardonable gaffes:

Window - is a short word/text of type left alone at the end of a column of text.
Orphan - is a 1 or 2 words/single line of type left alone at the start of new column.

Fig. 2.4: Example of Widow and Orphan

Highlighting text is to state the importance of it or for a name/quotation.

Italic
Bold
Change typefamily/colour
Reduce point size by 0.5
Create light-coloured box
Use bullet point
Use quotation mark

Fig. 2.5: Example of Highlight Text 1 (Changing Typefamily)

Fig. 2.6: Quick Tip

The subdivision within text of a chapters is important. The relationship between the text to each other have been labeled as A,B, and C, according to the level of importance.

The A head indicates a clear break between the topics within a section. In the following examples ‘A’ heads are set larger than the text, in small caps and in bold. The fourth example shows an A head ‘extended’ to the left of the text.

Fig. 2.7: Example of A Heading

The B head here is subordinate to A heads. It is smaller than A heading. B heads indicate a new supporting argument or example for the topic at hand. As such they should not interrupt the text as strongly as A heads do. Here the B heads are shown in small caps, italic, bold serif, and bold san serif.

Fig. 2.8: Example of B Heading

The C heads, although not common, highlights specific facets of material within B head text. They not materially interrupt the flow of reading. As with B heads, these C heads are shown in small caps, italics, serif bold and san serif bold. C heads in this configuration are followed by at least an em space for visual separation.

Fig. 2.9: Example of C Heading

Putting together a sequence of subheads = hierarchy.
The possibilities to express hierarchy within text.

Fig. 2.10: Example of Hierarchy

Cross aligning headlines and captions with text type reinforces the architectural sense of the page, the structure while articulating the complimentary vertical rhythms. In this example, four lines of caption type (leaded 9 pts.) cross-align with three lines of text type (leaded to 13.5pts).

Fig. 2.11: Example of Cross-alignment 1

Below, one line of headline type cross-aligns with two lines of text type, and (right; bottom left) four lines of headline type cross-align with five lines of text type.

Fig. 2.12: Example of Cross-alignment 2

INSTRUCTIONS

Project 2

Week 7
Using Illustrator, we had to dissect the letters of our chosen typeface from the 9 typefamily.

We had to dissect 4 to 5 letters and sketch out a new font based on the chosen typeface.

Fig. 3.1: Dissection of Letter

Fig. 3.2: Sketch 1 (Gill Sans)

Fig. 3.3: Sketch 2 (Gill Sans)

Fig. 3.4: Sketch 3 (Gill Sans)

Fig. 3.5: Sketch 4 (Gill Sans)

Fig. 3.6: Sketch 5 (Gill Sans)

Week 8

Fig. 4.1: First Attempt of Digitization (Gill Sans)

This is the first attempt of digitization of the letters and it didn't came out how I wanted. So, I asked Mr Shamsul's opinion on how to make it looked.

Fig. 4.2: Second Attempt of Digitization (Gill Sans)

After showing Fig. 3.1 to Mr Shamsul, he taught me to use the width tool to make the consistency of the width.

Fig. 4.3: Letter "s" First Attempt (Gill Sans)

Fig. 4.4: Letter "s" Second Attempt (Gill Sans)

I had struggled to get the consistency of the width with "s" but with the width tool, it was too hard anymore.

Fig. 4.5: Completion of the 15 Letters (Gill Sans)

The lecturer haven't said anything yet, but I think it looks consistent.

Fig. 4.6:Completion of Letters (Gill Sans)

This is all the alphabet including the apostrophe and full stop.

Fig. 4.7: Minor Errors (Gill Sans)

Apparently, we are suppose to do all the letters stated in the MIB but Mr Vinod said that this was a good attempt. So, I went to reconstruct the letters with the minor errors.

Fig. 4.8: Third Attempt of the alphabets (Gill Sans)

A completion of the alphabets and symbols including the 15 stated letters.

Week 9

Fig. 5.1: JPEG of Finalize Design (Vun Sans)

I changed the "c" to make it more smoother and the letter "l" more thinner while the others are unchanged.

Fig. 5.2: JPEG of 13 Letters (Vun Sans)

All the letters in one line.

Fig. 6.1: Screenshot of Metric Window in Fontlab

After that, I transferred all the letters in Fontlab and typed out in the metric window. "i survived mr vinod and mr sam's class." is what we have to type out and it includes all the letters we designed. I named my font "Vun Sans" from my family name.

Link for my font (Vun Sans):

https://drive.google.com/file/d/10tqEaso7WfWEw0KpGlTXlYr7RoTEvgqw/view?usp=sharing

Fig. 6.2: First Design (Vun Sans)

Our exercise is to arrange the letters we designed interestingly. I arranged it into this, "survived", "and" and "class" are smaller than the others so that they would fit in and to emphasize that I have survived their class.

Fig. 6.3: Screenshot of Varies Designs (Vun Sans)

I had more design arrangement because I wasn't satisfied with the first one. Mr Shamsul taught me a shortcut key that can resize the words and adjust the spacing and Mr Vinod told us that we need to have all the words to have one point size font.

Fig. 6.4: Final Design (Vun Sans)

I changed the arrangement and went with this design.

FEEDBACK

Week 7:
General Feedback: Our blog has to write down the caption more specifically.

Specific Feedback: For my project, 1 he said that my layout was good and to get rid of the background and for project 2, he said to learn from the typefamily and create something new from it.

Week 8:
General Feedback: Mr Vinod said that we should have our letter digitalized before class and to read the books that are recommended in the MIB at the library. He also reminded us that before putting our artwork into FontLab, we should make sure that it has no open spaces as it would not show it the application.
Specific Feedback: Mr Shamsul said that my letters have many problems, it did not have a consistent width and it did not look the same.
It’s a good attempt but there are many small issues... abc looks different in its angle and stress (the bowl), the letter s doesn’t seem to be as wide as: o, a, etc, and the link and loop of the g seems to have no contrast... generally that type of g is usually used in serif fonts. Exception being in gill sans because.

Week 9:
General Feedback: It is not good enough of have a caption and that we need to add description to the pictures we include in our blog. Reflections are for our learning progress. It's to self analyzation and helps the lecturer to improve teaching methods
Specific Feedback: Mr Vinod said that the style of my font is there but the thickness of my font needs to be smoother.

REFLECTION

Experience:

Week 7: It is challenging to make your own font based from existing typefaces.
Week 8: Creating the same thickness of the width is not easy.

Week 9: Exporting the fonts we created are confusing and a lot of work using Fontlab.

Observation:

Week 7: I observed that letters have different structures as the stresses and lines are not the same.
Week 8: The structure of the letter "s" has different size. The upper curve is smaller than the bottom.
Week 9: The metric window is interesting as it can determine the letter spacing of our font.

Findings:

Week 7: I found that dissecting the letters can help to see the structure more clearly.
Week 8: There is a useful tool to change the thickness of width to be the same, which is the width tool and it is challenging.
Week 9: After exporting our font, I fond that we have to double check our setting so that the font is not distorted.

In summary, I found that designing our own font is hard work but the outcome is rewarding. In truth, it was difficult to maintain the same thickness and stress of the letters. Using Fontlab was a challenge especially exporting the font. After I exported the font there many problems particularly the apostrophe, so I had to change the settings until I got it right. In conclusion, it was fun doing the project and liked it even though it was difficult and got me a headache.

Search This Blog

Wan Min's Design Journal