Typography ✦Task 1: Exercises✦

Square capitals: composed of serifs added to the finish of main strokes.
Rustic capitals: compressed version of square capitals allowing double the amount of words on each sheet of parchment.
Informal lowercase letterforms: developed due to the simplification of square and rustic capitals for speed.
Uncials: Small letters that are one inch high.
Half-uncials: Formal lowercase letterforms replete with ascenders and descenders.
Charlemagne: Issued the standardization of texts by the utilization of majuscules, miniscules, capitalization and punctuation.

1.2 Text Type Classification

Figure 1.1: Text type classifications.

Lecture 2: Text Part 1

2.1 Kerning and Letterspacing

Kerning : The adjustment of spacing of two particular characters.

Letterspacing: the overall addition of space between letters

Tracking : the addition and removal of space uniformly in a word or sentence.

Normal tracking: Standard space between letters suitable for paragraphs.
Tight tracking: Minimal space between letters reduce readability of paragraph.
Loose tracking: Excessive space between letters reduce readability of paragraph.

Letterspacing is preferred when working with uppercase letters to allow a more presentable effect.

Figure 2.1: Types of tracking.

2.2 Formatting Text

Flush Left : Asymmetrical text in which each line starts at the same point but stops at where the last word ends.

Flush Right : Asymmetrical text in which the emphasis is on the end of a line instead of its start with a strong orientation to the right.

Centered : Symmetrical text in which equal value and weight are assigned to both ends of each line.

Justified : Symmetrical text in which the spaces between each word are adjusted in which each line starts and ends at the same point.

2.3 Texture

Different typefaces allow different texture on a page which aids in the overall presentation of a layout.
Typefaces with heavy strokes give a darker mass on a page.

2.4 Leading and Line Length

Type size : The size of a typeface must be sufficiently large to be readable at an arms length.

Leading : The space between lines in a paragraph.

Loose leading: Create striped patterns that distract the reader from material.
Tight leading: Encourage vertical eye movement causing the loss of pace of the reader.

Line Length : The length of each line in a paragraph.

Excessive or minimal line length impairs the readability of a page.
Rule of thumb: 35-65 characters.

Lecture 3: Text Part 2

3.1 Indicating Paragraphs

Figure 3.1: Ways to indicate paragraphs.

3.2 Widows and Orphans

Widow : Short line of type left alone at the end of a column of text.

Solved by rebreaking line endings throughout the paragraph.

Orphan : Short line of type left alone at the start of new column.

Careful planning of paragraphs to avoid orphans.

3.3 Highlighting Text

Ways to highlight text:

Italic
Bold
Variation of fonts
Coloured text
Placement of a field of colour at the back of text
Bulletin points
“Quotation marks”

3.4 Headline within Text

A head : Indicates a clear break between topics within a section.

B head : Indicates a new supporting argument and does not interrupt as strongly as A head.

C head : Indicates the highlight of specific facets of material within B head text.

Figure 3.2: Types of headlines.

Lecture 4: Basic

4.1 Describing Letterforms

Baseline	The visual base of letterforms.
Median	The x-height of letterforms.
X-height	The height in any typeface of the lowercase ‘x’.
Stroke	Any line that defines the basic letterform.
Apex/ Vertex	The point of connection between two diagonal stems.
Arm	Short horizontal or vertical strokes off the stem of the letterform.
Ascender	The portion of stem of a lowercase letterform that projects above the median
Barb	The half-serif finish on some curved stroke.
Beak	The half-serif finish on some horizontal arms
Bowl	The rounded form that describes a counter.
Bracket	The transition between the serif and stem.
Crossbar	The horizontal stroke connecting two stems in a letterform
Crotch	The interior space where two strokes meet.
Descender	The portion of stem of a lowercase letterform that projects below the baseline.
Ear	The stroke extending out from the main stem or body of the letterform.
Em	The distance equal to the size of typeface.
Finial	Rounded non-serif terminal to a stroke.
Leg	Short stroke off the stem of letterform.
Ligature	The character formed by the combination of two or more letterforms.
Link	Stroke connecting the bowl and the loop of a lowercase G.
Loop	Bowl created in the descender of the lowercase G (in some typefaces).
Serif	The right-angled or oblique foot at the end of the stroke.
Shoulder	The curved stroke that is not part of a bowl.
Spine	Curved stem of the S.
Spur	Extension that articulates the junction of the curved.
Stem	The significant vertical or oblique stroke.
Stress	The orientation of the letterform, indicated by the thin stroke in round forms.
Swash	The flourish that extends the stroke of the letterform.
Tail	The curved diagonal stroke at the finish of certain letterforms.
Terminal	The self-contained finish of a stroke without a serif.

4.2 The font

UPPERCASE
lowercase
SMALL CAPITALS
Uppercase Numerals
Italics
Punctuation, Miscellaneous
Ornaments

4.3 Describing/Comparing Typefaces

Figure 4.1: Typefaces.

Lecture 5: Understanding

Most uppercase letterforms are asymmetrical which demonstrates the details taken for a designer to create a harmonious and individual design.

Figure 5.1: The asymmetrical design of uppercase letters of different typefaces, Baserville (left) and Univers (right).

The MOST powerful dynamic in design – CONTRAST

Based on a format devised by Rudi Ruegg

Figure 5.2: Contrast between different typefaces creates dynamic.

Lecture 6: Screen & Print

6.1 Print Type

Designed which emphasizes the intention for reading from physical material.
Typeface examples:
Calson, Garamond, Baskerville.

6.2 Screen Type

Designed which emphasizes the intention for use on the web.
Typefaces are modified to improved readability on digital environments.

Increase x-height
Wider letterforms
Open counters

Utilization of hyperlink

Clickable word, phrase or image to jump to a new document or new section.

Font Size : 16 pixels
Typeface examples:

Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond

6.3 Static vs Motion

Static

Minimal characteristic in expression of words.
Used for posters, billboards, magazines etc.

Motion

The dramatization of letterforms to become “fluid” and “kinetic”.
Used for music videos and film productions.

◇─────────────────────────────────────────────────────────◇

✦INSTRUCTIONS✦

Figure 7.1: Assignment guidelines for Typography.

◇─────────────────────────────────────────────────────────◇

✦1.0 TYPE EXPRESSIONS✦

The task 1 of exercise requires us to choose four words from seven of the suggested words by our class, in which I selected:

Throw
Melt
Kill
Dance

1.1 Sketching

We are required to create sketches and draft out the composition of words selected to allow the presentation of their respective definitions. Hence, I create three sketches for each word and brainstormed various fun compositions for them. I also wrote little notes to describe my thought process better.

Figure 8.1: Draft for the words 'Throw' and 'Melt'. (08.04.23)

Figure 8.2: Drafts for the words 'Kill' and 'Dance. (08.04.23)

1.2 Digitalization

After the evaluation of the drafted ideas, the best ideas were selected based on the lecturer's evaluation as well as my personal preferences. They were then digitalized utilizing the functions in Adobe Illustrator.

A. Melt

Figure 8.3: The design process for the word 'Melt'. (12.04.23)

I have used the typefaces, Gill Sans Std Shadowed and Regular to design the word ‘Melt’. The outlined font of ‘M’ makes it seemed like it is melting like a stick of butter resulting in a puddle. The puddle is widened as opposed to the draft as to utilize fully the space given. This resulted in better overall composition giving a more pleasant visual effect. The remaining words, ‘E’, ‘L’ and ‘T’ were distorted and scattered on the puddle. Hence, it appeared as they are swimming in the puddle caused by the melted ‘M’.

B. Throw

Figure 8.4: The design process for the word 'Throw'. (13.04.23)

The typefaces, Futura Std Condensed and Regular as well as Bembo Std Regular were utilized in the design of the word, ‘Throw’. The ‘R’ was enlarged to appear as a person throwing a basketball. Bembo Std Regular was chosen for the word ‘O’ to make it as round as a ball. ‘W’ was also distorted to perspective to appear as a basketball hoop on the wall. Moreover, graphic was added such as the basketball lines and the line of direction in which the ball was thrown. This gives a visual effect to enhance the definition of the word.

C. Kill

Figure 8.5: The design process for the word 'Kill'. (13.04.23)

The design for ‘Kill’ was selected to be simple yet effective. I have used the typefaces, Futura Std Light and Light Condensed in the word. The letter ‘K’ was rotated 90 degrees and distorted to perspective to appear as if it is lying on the ground. This is followed by the addition of a puddle of blood on the side of ‘K’. Hence, it appeared that K’s murdered body was found by the remaining letters which stirred some mystery as to who killed it.

D. Dance

Figure 8.6: The design process for the word "Dance". (14.04.23)

The design for the word, ‘Dance’, changed a lot since the drafting stage as it was quite a difficult word to convey the meaning from. I used the design principle, contrast, by using two different typefaces, ITC Garamond Std Light Narrowed Italic and Gill Sans Std Shadowed. The italic font of the word ‘N’ makes it look like it’s dancing in contrast to the remaining letters that is standing still. The contrast is enhanced by adjusting different opacity for the words. Then, graphics were added to further show that the ‘N’ is moving.

Final Outcome

Figure 8.7: Final design of Type Expressions-JPEG. (15.04.23)

Melt: The 'M' is like a butter melting, forming a puddle on the ground. The remaining letters are scattered and swimming about in the melted puddle.

Throw: The 'R' is a tall basketball player that throws the ball, 'O', into the hoop that is represented by the letter 'W'.

Kill: The 'K' laid on a puddle of blood as it was killed. The remaining letters stood aside the corpse, wondering which among them could have been the murderer.

Dance: The 'N' seemed to be the only one dancing among the stoic group.

Figure 8.8: Final design of Type Expressions-PDF. (15.04.23)

1.3 Animation

The last part of the type expression assignment require us to choose one of the digitalized words and animate it in cohesion with its design and definition. Before animating in Adobe Illustrator, I have chosen the word 'Kill' and sketched out a short storyboard about how I envisioned the animation will be.

Figure 8.9: Storyboard sketch of the animation of 'kill'. (22.04.23)

Based on the sketch, I started animating by the addition of different artboards with different motion of the word.

Figure 8.10: Initial idea of animation for the word 'Kill'. (23.04.23)

I noticed when I placed the whole word, 'Kill', from the start, the composition looked slightly awkward. Hence, I have decided to change it into featuring the letter 'K' first, then bringing in the remaining letters at the end of the animation.

Figure 8.11: A total of 25 artboards were used in the making of the animation for the word, 'Kill'. (23.04.23)

During the making of each artboard, I would mark checkpoints and constantly import the frames into photoshop to see my current animation progress. This is to allow changes to be made easily while the animation is still in progress. I have also adjusted the duration of each frame to allow a better flow of animation.

Figure 8.12: Animation frames for the word, 'Kill'. (23.04.23)

The animation is then completed in which 'K' was killed and a pool of blood forms beneath it.

Figure 8.13: Animated type expression for the word, 'Kill'. (24.04.23)

After the evaluation, it was recommended to increase the duration of the final frame before the loop starts again to allow better visual viewing.

Figure 8.14: The duration of the final frame is increased from 0.5second to 1 whole second. (25.04.23)

Final Outcome

The final animation showcases that 'K' died a mysterious death, killed by an unknown murderer. 'K' was then found by their friends laid in a pool of blood, who wonders who could have killed 'K'.

Figure 8.15: Final animated type expression for the word, 'Kill'. (25.04.23)

◇─────────────────────────────────────────────────────────◇

✦2.0 FORMATTING TEXT✦

Exercise 2 for Typography is a technical assignment which requires us to format a large body of text emphasizing on information hierarchy and spatial arrangement. We are required to arrange a page of text utilizing our knowledge in text formatting to create a visually pleasing page. Factors that are taken into consideration include type choice, type size, leading, line-length, paragraph spacing, forced-line-break, alignment, kerning, widows and orphans.

2.1 Kerning and Tracking Exercise

Based on the recorded lectures regarding text formatting, I have practiced tracking and kerning on each of the 10 typefaces provided using Adobe Indesign. First, I adjusted the leading and type sizes of the text.

Figure 9.1: Text before adjustment of leading. (25.04.23)

Figure 9.2: Text after adjustment of leading and before kerning. (25.04.23)

Then, I changed the typeface of each font as well as apply tracking and kerning to give a pleasant overall composition of each word.

Figure 9.3: Tracking and kerning exercise. (25.04.23)

2.2 Layout Exercise

For Exercise 2, I have copied and pasted the body of text into Adobe Indesign followed by creating margins and columns to start the exercise. I adjusted the font size and leading first before trying out different layouts in which I have settled with type size of 9pt and leading of 11pt as it gives a line length of an average 55-65 which is ideal.

Figure 9.4: Adjustments of leading and typesize. (29.04.23)

Then, I adjusted the cross-alignment of the paragraphs using the baseline grid as a guide following the tutorial videos provided by Mr. Vinod.

Figure 9.5: Cross alignment of body paragraph based on the baseline grid. (29.04.23)

I have explored multiple layout after adjusting the base text in which I have created two different layouts. I used left-justify on the body paragraph as well as adjusted the kerning and tracking to reduce hyphenation. I have also added a greyscale picture to make the page look more interesting.

Figure 9.6: Exploration of two different layouts, Layout#1 (left) and Layout#2 (right). (29.04.23)

After comparing the two layouts, I have decided to choose Layout 2 as I felt it was more interesting than Layout 1. I have slightly moved the placement of headers to improve the overall balance of the page.

Figure 9.7: Initial Text Formatting Layout. (29.04.23)

During the evaluation on Week 5, Mr. Vinod gave some advice to improve the layout I have created in which I have made the adjustments accordingly. I have change the font as I agree with the comment in which the Serif font initially used was not coherent with the meaning of the body text as Helvetica is not a serif font. Hence, I have changed the typeface to Gill Sans Std. Furthermore, I have also adjusted the kerning and tracking to ensure an even spacing between the white and grey areas and prevent any uneven spacings.

Figure 9.8: Adjustment of layout after feedback. (02.05.23)

I have also changed the shape of the picture according to Mr. Vinod's advice to give the page a more organic flow. The spacing between the headline and the byline is also increased as the narrow spacing caused a sense of unpleasant tension.

Final Outcome

Head

Font/s: Gill Sans Std Bold (headline+byline)
Type Size/s: 48 pt (headline), 9 pt (byline)
Leading: 44 pt (headline), 22 pt (byline)
Paragraph spacing: -

Body

Font/s: Gill Sans Std Regular
Type Size/s: 9 pt
Leading: 11 pt
Paragraph spacing: 11 pt
Characters per-line: 57
Alignment: Left justified

Captions

Font/s: Gill Sans Std Light Italic
Type Size/s: 9 pt
Leading: 11 pt
Paragraph spacing: 11 pt
Alignment: Left

Margins: 36 mm top, 20 mm bottom, 20mm left + right
Columns: 2
Gutter: 10 mm

Figure 9.9: Final Text Formatting Layout (without baseline grids) - JPEG. (03.05.23)

Figure 9.10: Final Text Formatting Layout (without baseline grids) - PDF. (03.05.23)

Figure 9.11: Final Text Formatting Layout (with baseline grid) - JPEG. (03.05.23)

Figure 9.12: Final Text Formatting Layout (with baseline grid) - PDF. (03.05.23)

◇─────────────────────────────────────────────────────────◇

✦FEEDBACK✦

Week 2

General Feedback:

During this week, Mr. Vinod evaluated some of our sketches of Task 1 of Exercises and gave some feedback to the class which can be applied to our own designs. Simple yet effective designs are the most successful in which not much distortion are required to the typefaces. Graphical elements must also be minimal. This will avoid overcomplication that will cause confusion in the motive of the design.

Specific Feedback:

Mr. Vinod have mentioned for the word “Throw”, Design B is good as there is minimal distortion. The line which mimics the line of direction the action should be thinner, specifically 0.5 stroke to give a better visual effect. Both Design A and B for “Melt” is acceptable but B is creative in a way that utilizes the clipping mask function into the melting effect.

Other than that, Design B for “Kill” is a very simple and effective. However, Design C is a little complicated in which the splatter may be sized down to not overwhelm the word. Design A for “Dance” is very good as it utilizes the design principle, contrast, by implementing two different types of font. This effectively convey the definition of word without the need of graphical elements.

Week 3

General Feedback:

Mr. Vinod have checked up on our E-portfolio and gave us comments on how to improve it. Our lecturer has commented that information regarding the current task should be added at the start of the blog as well as the vital information should be kept on the left. Other than that, most of the information is updated well and arranged neatly in each of the section.

Specific Feedback:

The space in the artboard must be utilized in a way that allows the work to sit well on the artboard. The expressions also well match the meaning of the words. However, some composition may look a little messy which can be fixed by resizing or making certain letters grey. In summary, all the words are well done and only small tweaking need to be made to the overall visual.

Week 4

General Feedback:

Mr. Vinod stated that whenever something pronounce happens, especially at the end of the animation, it is encouraged to add a pause or a delay before the loop begins again. This is to give a separation between each loop and prevent the animation for looking too rushed. Other than that, 24 frames per second is ideal to give a smooth animation.

Specific Feedback:

As the letters ‘ill’ comes into the frame, the duration of the end frame can be increased to allow a pause before the loop restarts. This separates between each loop of animation and give a clearer view. Overall the animation is good and conveys the word well.

Week 5

General Feedback:

This week Mr. Vinod evaluated our task 2 for Exercises. He stated that the ideal font size for handheld reading is between 8 to 12 pt, any size lower than 8 pt will degrade the readability of the text. Furthermore, kerning and tracking should be done after the alignment of text in which the text should be not formatted prior to alignment. Appropriate kerning and tracking can be determined by closing half of your eyes in which a grey area can be seen. Even spacing between the white areas and grey x-height indicates good kerning and tracking.

Specific Feedback:

Mr. Vinod commented on both of my layouts. He commented that both layouts are appropriate. There is a sense of balance between the text, picture and headline. The font size for headline is suitable as it clearly indicates the title of the page. However, the choice of font is not that appropriate as the Helvetica font is not a serif font in contrast to the font chosen. Moreover, kerning and tracking is required to be adjusted as some text are wide apart compared to others resulting in unevenness.

◇─────────────────────────────────────────────────────────◇

✦REFLECTIONS✦

Experience

The first exercise of the assignment was really challenging as there was a lot to be done within the first four weeks. We had to get accustom to the tools and functions of Adobe Illustrator while we were working on the typeface designs. Hence, there was a lot of trial and error to be done causing a lot of time to be spent on it. However, I really enjoy this exercise as it gave us a lot of opportunities to explore various ways to express a particular word using the typefaces given. Other than that, the second exercise was more on the technical side in which many details are required to be noted. It was slightly more difficult than Exercise 1 as there were many information to be studied before the assignment can be carried out. Although the exercises are challenging, the practical knowledge gained will be greatly useful for our upcoming assignments.

Observation

The weekly classes are conducted in a way that our module lecturer, Mr. Vinod, would evaluate each of our submitted works in which advice would be given to the rest of the class. This allowed me to observe the design works of other classmates and take into consideration each of the advice given. Hence, I am able to learn more about what makes a good design and apply them into my own designs.

Findings

Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. At first, I did not notice the many care that went into creating a single page of words to provide pleasant and efficient viewing experience for the readers. After a few lectures of typography, I found that a single page filled with words contain so many details that need to be considered before publishing. Every little adjustment from the kerning and leading is able to greatly influence the overall balance of a body paragraph on a page, hence, affecting the appeal to the viewers. Hence, I now know the importance of typography as a form of art that is widely seen in our surroundings, such as newspapers, magazine and billboards.

◇─────────────────────────────────────────────────────────◇

✦FURTHER READING✦

I have chosen to read the book, Vignelli Canon on Design to complete my further reading as it being one of the few books recommended by Mr. Vinod. This book was written by Massimo Vignelli, a well-known Italian Designer who lives by the words ‘If you can design one thing, you can design everything’. The book mainly entails the three important aspects in design which is highly interesting to read about the process of a professional designer’s in the creation of a successful work.

Figure 10.1: The Vignelli Canon on Design (2010)

The first aspect in design is Semantic, which defines as the search of the meaning of the subject that is to be design. Prior to designing any form of art, we should pinpoint the meaning we want to convey through the design. This can be achieved by researching on the history of the selected subject to better understand the nature of the design. The notion of creating a design that is meaningless is incredibly vulgar which purposely ignores the established culture, hence, showing dishonesty.

The next aspect in design is Syntactics. This defines as the discipline in controlling the proper use of grammar in constructing phrases and articulation of the language of design. Syntatical elements are the structure, grid, typefaces, text, headlines and illustrations, which are all elements that make up a design. The appropriate relationship between these elements allow a design with great composition, hence, achieving syntactic consistency.

Figure 10.2: Two of the pages in 'Vignelli Canon on Design' which explains the aspect in design.

The last aspect is Pragmatics. This principle emphasizes the importance of communication in design. It is important to understand the starting point and all assumptions of the project to fully comprehend the final result in order to measure efficiency. The clarity of the intention of a particular design will allow an increased clarity of result.

In conclusion, this book gave me new insights in the morality of design as well as the ethical ways to create a proper design. A good design should be intellectually elegant in which the concept is timeless. Thus, I have learnt and gain new views in how to achieve a successful design.

Search This Blog

✦Ariel Chin Bei Yi 0343651✦