Typography Task 1/Exercises

25 Aug 2021 - 29 Sept 2021 (Week 1 - Week 6)
Zetie Binti Bahaman / 0351297 / BDCM
Typography
Task 1: Exercise 1 & 2

---

LECTURES

Week 1:

The first day of class included a lot of guidelines and briefings by both lecturers, Mr. Vinod and Dr. Charles. Mr. Vinod guided us through the Facebook Group, Google Sheets and Blogger. These are some of the ‘must-knows’ that we should know about throughout this semester. I find it interesting that Mr. Vinod also suggested note taking for his class because it's very rare to hear from a design lecturer. (at least for me haha) 

Halfway through class, Mr. Vinod gave us a break for those that have not watched the E-Portfolio briefing (aka me…) for us to have an understanding before he explains further.

I was struggling with the HTML coding at first but I managed to figure out my mistake, which was switching <hr /> with the insert jump break option. (woops..)  Meanwhile, the lecturers chose a few student’s blogs to show all the do’s and don’ts of the e-portfolio. This helped me to see and check my work if I made the same mistakes.

Some of the points that we should take note for the e-portfolio are:

• Starting with a new Gmail account
• Summarizing important points from the lecture
• Labelling photos properly
• Presenting sketches/development in good lighting
• Final output of our work
• READ! At least a section or any sub-topic that we find interesting for further readings

The class ended with him explaining the assignment brief and making a poll of words for our Type Expression task. Mr. Vinod also has a playlist of pre-recorded lectures on Youtube for us to refer to before/after class. This week, I watched four videos.

Video 1: Introduction (A brief video explanation about typography, terminology etc.)

Typography is an act of creating typefaces/families. It’s everywhere in our daily lives. For example:

• Movie titles
• Website/app design
• Signage
• Bottle labels
• Books, posters
• Logo creation

Line-spacing = Leading

Letter-spacing = Tracking

Adjusting space within letter pairs = Kerning

Font: Individual font or weight within the typeface

E.g.: Georgia Regular, Georgia Italic, Georgia Bold

Typeface: The entire family of fonts/weights that share similar characteristics/styles.

E.g.: Georgia, Arial, Times New Roman

Video 2: Development (A video explanation about typographic development from the perspective of Western world)

 

Early letterform development: Phoenician>Greek>Roman

Fig 1.1  Phoenicians to Romans, (28/08/2021)

Phoenician: Right to left.

The Greeks: 'Boustrophedon’ (how the ox ploughs), read alternately from right to left and left to right. The same goes to the orientation of the letterforms.

Like the Phoenicians, the Greeks did not use letter space or punctuations.

Etruscan (and then Roman): Carved letterforms before inscribing them

Hand script from 3rd - 10th century C.E.

Square capitals>Rustic Capitals>Roman Cursive>Uncials>Half Uncials>Charlemagne>Blackletter to Gutenburg

Different typefaces also started to develop in different eras.

For example:

• 1531: The Golden Age of French painting [Typecast by Claude Garamond]
• 1761: Baskerville's innovations [William Congreve, typeset and printed by John Baskerville, Birmingham]

Text Type Classification: Dates of origin approximated to the nearest quarter century.

Modern day people look back and realize certain typefaces can be classified under certain types.

From 1450 Blackletter to 1900 Sans Serif

Video 3 & 4: Type Expression Words 1 and 2 (A video guide for the Task 01 Assignment)

Mr. Vinod showed some tips and tricks in Adobe Illustrator to help us in our assignment. He emphasized that we should NOT distort the text. We do this by making sure the scale value is at 100% value. 

Fig 1.2 Vertical and Horizontal Scale of Text in Adobe Illustrator, (28/08/2021)

Then, he showed us some of the right ways that we can distort and play around with the type fonts. For example, using kerning, distort tool and effects.

Week 2:

Video 5: Basic (A video on the basics of typography)

Describing Letterforms

Baseline: The imaginary line the visual base of letterforms

Median: The imaginary line defining the x-height of letterforms

X-height: The height in any typeface of the lowercase 'x'.

Fig 1.3 Describing Letterforms - Terminology, (5/09/2021)

Based on the photo, Mr Vinod explained that capital letters are usually wider, and have more surface area on the top. Lowercase letters with a single stroke are slightly above the capital letter. This is to give illusion that both are of equal heights.

Stroke: Any line that defines the basic letterform.

Fig 1.4 Stroke, (5/09/2021)

Apex/Vertex: The point by joining two diagonal stems (Above=Apex // Below=Vertex)

Fig 1.5 Apex/Vertex, (5/09/2021)

Arm: Short strokes off the stem of the letterform, either horizontal (Letters E,F,L) or inclined upward (Letters K,Y)

Fig 1.6 Arm, (5/09/2021)

Ascender: The portion of the stem of a lowercase letterform that projects above the median.

Fig 1.7 Ascender, (5/09/2021)

Barb: The half-serif finish on some curved stroke.

Fig 1.8 Barb, (5/09/2021)

Beak: The half-serif finish on some horizontal arms.

Fig 1.9 Beak, (5/09/2021)

Bowl: The rounded form that describes a counter. The bowl may be either open or closed.

Fig 1.10 Bowl, (5/09/2021)

Bracket: The transition between serif and the stem.

Fig 2.1 Bracket, (5/09/2021)

Cross Bar: The horizontal stroke in letterform that joins two stems together.

Fig 2.2 Cross Bar, (5/09/2021)

Cross Stroke: The horizontal stroke in a letterform that joins two stems together (lowercase letter)

Fig 2.3 Cross Stroke, (5/09/2021)

Crotch: The interior space where two strokes meet.

Fig 2.4 Crotch, (5/09/2021)

Descender: The portion of the stem of a lowercase letterform that projects below the baseline.

Fig 2.5 Descender, (5/09/2021)

Ear: The stroke extending out from the main stem or body of the letterform.

Fig 2.6 Ear, (5/09/2021)

Em: Generally refers to the width of the uppercase M, as well as, the space between two words. It can also indicate a long dash at the end of a quotation, before a person's name.

En: A space that is half the uppercase M. Its used in expressing a period of time.

Fig 2.7 Em(Left) and En(Right), (5/09/2021)

Ligature: The character formed by the combination of two or more letterforms.

Fig 2.8 Ligatures for letters F and L, (5/09/2021)

This is important when designing fonts in order to avoid having proximity/clash of the fi/fl strokes.

Spine: The curved stem of the S.

Fig 2.9 Spine of S, (5/09/2021)

Stress: The orientation of the letterform, indicated by the thin stroke in round forms.

Fig 2.10 Letterform in Diagonal and Vertical Stress, (5/09/2021)

Some letters have a diagonal/vertical stress. Serif letterforms was developed by mimicking the handwriting and it tends to be slightly slanted. John Baskerville decided to depart creating letters with vertical stress.

Swash: The flourish that extends the stroke of the letterform.

Fig 3.1 Swash, (5/09/2021)

Mr. Vinod stressed capital forms of these swashes should never be together and never to form a word or name. "NEVER DO IT FOR THE REST OF YOUR LIFE."

The Font

The full font of a typeface contains much more than 26 letters, to numerals and a few punctuation marks. A full font is a type family that has many typefaces.

Choose a type family with a good range of typefaces, especially when you have to design something with a lot of information.

Uppercase: Capital letters

Lowercase: Lowercase letters

Small Capitals: Uppercase letters drawn to the x-height, primarily found in serif fonts. Used in acronyms in a large amount of text.

Fig 3.2 Small Capitals, (5/09/2021)

We are advised to not force the uppercase letter into a small capital, as the thickness of stroke changes.

Uppercase Numerals: Lining figures, same height as uppercase letters 

Lowercase Numerals: Old style figures/text figures set to x-height with ascenders and descenders.

Italics vs Roman

Fig 3.3 Italics (Left) and Roman (Right), (5/09/2021)

Punctuation, Misc. Characters: Important in mathematical content.

Fig 3.4 Punctuation and Misc. Characters, (5/09/2021)

Ornaments: Available in 'Adobe Caslon Pro'

Fig 3.5 Ornaments, (5/09/2021)

Describing Typefaces

Roman: Derived from inscriptions of Roman monuments.

Italics: Based on handwriting

Obliques: Not based on handwriting

Boldface: Characterized by a thicker stroke

Light: A lighter stroke than the Roman form.

Categories/Weights in a type family:

• Roman (Book)
• Italic
• Oblique
• Boldface (Semibold/Medium/Poster/Black)
• Light (Thin)
• Condense (Compressed)
• Extended

Comparing Typefaces

10 Typefaces that represent 500 years of type design. There typefaces also are the only typefaces that are allowed for us to use in class.

Fig 3.6 The 10 Typefaces, (5/09/2021)

The men and women that rendered them all had two goals:

• Easy readability
• Appropriate expression of contemporary esthetics.

As a designer, you have to convey a message with your design. Hence, choose the appropriate type family that best respects that message and presents that message effectively.

Mr. Vinod shared that as we progress, we will learn that some designers have a limited palette of typefaces. He also ended his lecture with a quote and reminded us that READING IS ESSENTIAL!

Week 3:

Text in Typography - Part 1

1. Tracking: Kerning and Letterspacing

Fig 3.7 Kerning and Letterspacing, (11/9/2021)

Kerning: Automatic adjustment of space between letters.

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

Letterspacing: To add space between letters.

When do we not kern?
- large amount of body text

When do we kern?

- headlines/newspapers for uppercase letters - to give it more breathing room/space


Illustrator vs. InDesign

Illustrator - Graphical creations (logo, illustrations, etc.)

InDesign - Use when dealing with large amount of text (brochures, leaflets, etc.)

Three types of tracking:

• Normal tracking
• Loose tracking
• Tight tracking

Fig 3.8 Normal tracking, loose tracking and tight tracking, (11/9/2021)

Most designers would usually uppercase letters. Why?

- Uppercase letterforms are able to stand on their own;

- Lowercase letterforms are a (big NO). They require the counterform created between letters to maintain the line of reading.

Fig 3.9 Counterform: black spaces between white letterforms, (11/9/2021)

In typography, we don't just look at the letterform, we are also looking at counterform of negative space between the strokes. The white areas that make up the particular word are important to consider when doing ls and tracking.

Fig 3.10 Normal tracking vs Loose tracking, (11/9/2021)

Normal Tracking (Left): Normally tracked paragraph - easier to read

Loose Tracking (Right): Letterspacing is given - counterforms have been changed, reduce the readability of text


2. Text Formatting

Flush left//[Ragged right]

• 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//[Ragged left & right]

• Imposes symmetry upon the text, assigning equal value and weight to both ends of any line.
• Difficult to read, not advisable in a large body of text.
• Used sparingly for small amount of text

Flush right//[Ragged left]

• Emphasis on the end of a line as opposed to its start.
• Useful in situation (like captions) where the relationship between text and image might be ambiguous without a strong orientation to the right.

Justification

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

*Justify is not always the best choice and it depends on the context that you're using. 

Gaps (rivers) should be avoided at all costs. We are advised to use flush left by Mr. Vinod.

Clear, appropriate message will always be the priority - We need to strike a balance between the message and the typeface, which will take time to develop.

Script typefaces should never be used with capital letters in this way using this typeface (especially in Mr. Vinod's class).

Fig 4.0 Sample of script typeface with capital letters, (11/9/2021)

3. Texture

Fig 4.1 Anatomy of A Typeface, (11/9/2021)

Ascender : The space above the X-height

Descender : The space below the X-height

Text is more readable if Ascender and Descender is smaller in comparison to the X-height.

Fig. 4.2 Different typefaces, different gray values, (11/9/2021)

A type with a great X-height and heavy stroke width produces a darker mass on the page, so sensitivity to these differences in colour is important in creating successful layouts.

4. Leading and Line Length

As a designer, consider the readers and their comprehension of the text/information.

Type size: Text type should be large enough to be read easily at arms length—imagine yourself holding a book in your lap.

Leading: Text that is set too tightly encourages vertical eye movement; a reader can easily loose his or her place. Type that is set too loosely creates striped patterns that distract the reader from the material at hand.

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

*Rule of Thumb: Not more than 55 to 65 characters occupy one sentence - >65 reduce readability exponentially

Fig 4.3 Example of bad leading (left) and too much leading (right), (11/9/2021)

5. Type Specimen Book

Fig.4.4 Sample Type Specimen Sheet, (11/9/2021)

A sheet/book that shows samples of typefaces in various different sizes 

- Provides an accurate reference for type, type size, type leading, type line length, etc.

Compositional Requirement:

- Text should be judged based on the output version. (Print/Screen)

- An ideal text has a middle grey value, not a series of stripes.

Text in Typography (Part 2)

6. Indicating Paragraphs

Pilcrow (¶): A holdover from medieval manuscripts seldom use today.


Line Space vs Leading
Line space (leading*): Space between the paragraphs, from one descender to another descender of a sentence.

Leading: Should be 2.5-3 larger than the type point

*If the line space is 12pt, then the paragraph space is 12pt. This ensures cross-alignment across columns of text. (cross-alignment: text line aligned to each other in the next column)

Fig 4.5 Line space vs Leading, (12/9/2021)

Indentation

Fig 4.6 Standard indentation, (12/9/2021)

Indent: the same size of the line spacing = same point size used for text.

* Best used when text is justified, no ragging on the left and right.


Extended paragraphs

Fig 4.7 Extended Paragraphs, (12/9/2021)

- Create unusually wide columns of text. Despite these problems, there can be strong compositional or functional reasons for choosing it. Used in academia books.


7. Widows & Orphans

  Fig 4.8 Widows & Orphans, (12/9/2021)

Widows: short line of the type left alone at the end of a column of text.

Orphans: short line of the type left alone at the start of the new column.

Solutions for Widows: 

• use forced line break (Shift + Enter)
• use Alt + left/right arrow key (not more than 3)
• adjust (Edit-Preferences-Tracking) to 5
  
  

8. Highlighting Text (large amount of text)

Fig 4.9 Highlighting text with quotation marks, (12/9/2021)

Fig 4.10 Prime (Top) and Quotations (Bottom), (12/9/2021)

Different kinds of emphasis require different kinds of contrast:

• Bold
• Italic
• Colour the text (Cyan, Magenta, Black)
• Change typeface (Reduce pt size of highlighted text by 0.5)
• Sometimes it is necessary to place certain typographic elements outside the left margin of a column of type
• Prime″ is not a quotation marks“”.

9. Headline within Text

A Head:

Fig 5.0 A Heads, (12/9/2021)

• indicates a clear break between the topics within a section. 

B head:

Fig 5.1 B Heads, (12/9/2021)

• subordinate to A heads.
• indicate a new supporting argument or example for the topic at hand.
• not interrupt the text as strongly as A heads do.
• the B heads are shown in small caps, italic, bold serif, and bold san serif.

C head:

Fig 5.2 C Heads, (12/9/2021)

• highlight specific facets of material within B head text.
• They don't interrupt the flow of reading.
• C heads in this configuration are followed by at least an em space for visual separation.

Putting together a sequence of subheads = hierarchy.

Fig 5.3 Hierarchy in a sequence of subheads, (12/9/2021)

10. Cross-Alignment

Fig 5.4 Cross Alignment Sample 01, (12/9/2021)

Fig 5.5 Cross Alignment Sample 02, (12/9/2021)

Cross aligning captions and text reinforces the architectural sense of the structure of the page.



Week 4:

Typography: Letters

1. Understanding Letterforms

The uppercase letterforms below suggest symmetry, but in fact, it is not symmetrical. Two different stroke weights of the Baskerville stroke form (below); more noteworthy is the fact that each bracket connecting the serif to the stem has a unique arc.

Fig 5.6 Baskerville A, (16/9/2021)

Fig 5.7 Univers A, (16/9/2021)

The uppercase letterforms may appear symmetrical, but a close examination shows that the width of the left slope is thinner than the right stroke. (Fig 5.7) Both Baskerville and Univers demonstrate the meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive.

Designing own fonts:

• Avoid making too many changes to the letter as it will create an overly decorative font.
• The font needs to be simplified characteristics within the strokes of the letters, and consistent and replicable. (less is more)
• Analyze an already existing typeface, examine the treatment of a particular letter ('s' & 'g') in different typefaces.

2. Letters

The complexity of each individual letterform is neatly demonstrated by examing the lowercase 'a' of two seemingly similar sans-serif typefaces (Helvetica & Univers)

Fig 5.8 Helvetica (Left) vs Univers (Right), (16/9/2021)

3. Maintaining X-height

Curved stroke such as 's' MUST rise above the median & sink below the baseline in order to appear to be the same size as the vertical & horizontal strokes that adjoin.

Fig 5.9 Median and baseline, (16/9/2021)

4. Form/Counterform

Counterform: the blank spaces between individual letters optimized to create equal spacing between letters

Fig 5.10 Form/Counterform, (16/9/2021)

It is equally important to know the space outside the letterform, for the readability and legibility of the text. To understand the form & counter of a letter is to examine them in close detail.



5. Contrast

Contrast: a design principle that can be applied in Typography

Useful to show different levels of information in the text. These variations can also be in the form of threes. E.g.  Light/Bold + Condensed

Fig 6.0 Variations in twos for contrast, (16/9/2021)

Week 5:

Understanding Different Mediums in Typography

1. Print Type vs Screen Type

Type for Print

It is important to ensure text is smooth, flowing, and pleasant to read. When a good typeface is used within the typefamily, it makes the typesetting process much easier.

• Caslon, Garamond, Baskerville - suggested typefaces be used for print
• Elegant, intellectual but readable when set at small font size
• Versatile, neutral, and easy to digest classic typeface. 

*Note: However, this does not mean sans serif fonts are not readable, univers/franklin gothic (amongst others) that are equally good in readability

and legibility.

It depends on the type of material you are designing for. Purely text-based books like novels are not suggested to be experimental compared to reading materials with infographics etc.

Fig 6.1 Sample Type for Print, Week 5 (Lecture Slides, 23/9/2021)

Type for Screen

• optimized and often modified to enhance readability and performance onscreen in a variety of digital environments
• a taller x-height (or reduced ascenders and descenders), wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, as well as modified curves and angles for some designs.
• Open spacing — to improve character recognition and overall readability in the non-print environment, which can include the web, e-books, e-readers, and mobile devices.

Verdana and Georgia - suggested typefaces be used for screen

*Note: If these typefaces are used on paper, the lecturer will question the students' depth of understanding of typefaces used in screen/print. BUT there are no clear-cut rules, it is subject to the target audience and the designer's sensibility.

Fig 6.2 Sample Screen Design for Website, Week 5 (Lecture Slides, 23/9/2021)

Hyperactive Link/Hyperlink

Def: A word, phrase, or image that you can click on to jump to a new document/section within the current document.

Exists not only on web pages but in other places too. For example, PDFs, social media platforms like hashtags. 

Font Size for Screen

• 16-pixel text on-screen = the same size as text printed in a book or magazine; (include reading distance)
• If read pretty closely — typically set at about 10 points.
• If you were to read them at arm’s length — at least 12 points (same size as 16 pixels on most screens)
  

Fig 6.3 Comparison of the same text in screen vs in print, Week 5 (Lecture Slides, 23/9/2021)

System Fonts for Screen/Web Safe Fonts

No longer an issue of different platforms (Windows/Mac OS) with the existence of Google Fonts. (Not the vast majority at least.)

Suggested typefaces for screen:

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



Pixel Differential Between Devices

Fig 6.4 Pixel Differential Between Devices, Week 5 (Lecture Slides, 23/9/2021)

The text we see on-screen differs in size, proportion as they have different sized pixels. Even within a single device class, there will be a lot of variation.




2. Static vs Motion

Static Typography 

Def: Has minimal characteristics in expressing words. Traditional characteristics such as bold and italic offer only a fraction of the expressive potential of dynamic properties.

Fig 6.5  Sample Static Typographic Poster, Week 5, (Lecture Slides, 23/9/2021)

Mr. Vinod stated that a static typographic poster can still have a dynamic effect despite not being in motion, provided that it is designed with all the right visual elements.

Motion Typography

Def: Type is often overlaid onto music videos and advertisements, often set in motion following the rhythm of the music. It establishes the tone of associated content or expresses a set of brand values.

This can be seen in title sequences/title credits, the typography is brought to life through animation/motion graphics for the film by evoking a certain mood to the audience.

Mr.Vinod suggested we watch this title sequence of a movie in the mid-90s. It's one of the good samples for motion typography that is still considered great today.

Fig 6.6 Se7en Title Sequence (1995) - Week 5, (Youtube, 23/9/2021)

I really like the experimental look and feel of this motion typography. It really sets in motion for the audience to see how the story unfolds. Just the intro already gave me the chills (my horror film tolerance is low). The fact that this was produced in 1995 really amazed me.

---

INSTRUCTIONS




Task 1: Exercise 1 - Type Expression

For Exercise 1, each of us has to pick out three from a set of words given. The words I decided to work on are terror (mandatory), melt, gone, and shiver. No graphical elements are allowed and we are limited to only 10 typefaces provided by Mr.Vinod.


1. Sketches

Fig 3.7 Type Expression Sketches for Terror and Shiver, Week 2 (1/9/2021)

Fig 3.8 Type Expression Sketches for Gone and Melt, Week 2 (1/9/2021)

These are my hand-drawn sketches for the words that I have chosen. Some of the sketches have notes about how I visualize it or an idea inspiration. My personal favorites are terror #2, shiver #1, melt #1, and gone #3.

Based on the peer feedback session, they had a similar preference as me for some of the sketches. However, some needed more exploration and development to have an effective expression. I explored more on shiver and terror as I struggled most with them. Due to time constraints, I decided to digitize them straight away and merge some of my sketch ideas into one.




2. Digitisation

Fig 6.7 'Terror' digitalization progress, Week 2 (5/09/2021)

I merged my idea #1 (serif typeface) and #2 (distortion as if its laying flat). I realized my earlier digitization was too distorted and looking messy. Hence, I decided to opt for attempt #6 since it is the least distorted and has a cleaner look out of all of them.

Fig 6.8 'Shiver' digitalization progress, Week 2 (5/09/2021)

For Shiver, I went with a motion blur effect to express the word. #1 concept was not readable enough hence, I picked attempt # styles. For my final choice, I chose #2C thinking the hierarchy would express the shiver as the letters get bigger in size. 

Fig 6.9  'Gone' digitalization progress, Week 2 (5/09/2021)

I chose the concept of #2 to develop as it was more readable. However, I felt it was too simple and there was no contrasting element that expresses the word. I decided to reposition the words as if they were falling. Then, I added a graphical element of a hole.

Fig 7.0 'Melt' digitalization progress, Week 2 (5/09/2021)

After all the attempts, I ended up picking my first attempt. (#1a) It is still readable and I can still
see the melt expression with the stems extended till the bottom.

Fig 7.1 Draft 01 Type Expression - JPEG, Week 2 (5/09/2021)

Fig 7.2 Draft 02 Type Expression - JPEG, Week 3 (8/09/2021)

Following the feedback session from Mr. Vinod, we had to send in our final drafts before class ended. Melt and Gone only needed minor adjustments. I am still not satisfied with Terror, but due to time constraints, I had to submit it. However, I decided to keep working on it and resubmit a new expression for Gone and Shiver.

Fig 7.3 Exploration for Terror type expression, Week 3 (11/09/2021)

I decided to still sort of kept the essence of having the letter T to be the terrifying figure in this expression. I kept the other letters small to show contrast. I played with graphical elements to give the terror look and feel by giving them 'eyes and mouths' but still kept it to a minimum. I chose #2B as my final expression for terror since it is still readable and less distorted.

Fig 7.4 Amended Terror, Week 3 (11/9/2021)

I developed Shiver slightly more to enhance the shiver on the letter I. I also changed the layout of the letters by placing them centered in the middle and making the letter bigger than the rest. This shows emphasis on the shivering I. 

Fig 7.5 Amended Shiver, Week 3 (11/9/2021)

Final Type Expressions

Fig 7.6 Final Type Expression - JPEG, Week 3 (11/9/2021)

Fig 7.7 Final Type Expression - PDF, Week 3 (11/9/2021)

3. Type Expression Animation

We were separated into breakout rooms since there were some of us that don't have Adobe Illustrator. We had to watch Mr. Vinod's tutorial on Youtube about Type Expression Animation and make a gif based on one of our digitized sketches.

I was confident with my Gone expression the most. Hence, I chose to animate the letters disappearing into the hole, and we had to post it on Facebook before class ended.

Fig 7.8 Attempt 01 at animating 'Gone', Week 3 (8/09/2021)

This is a practice animation that I did during class. My idea is to have the letters disappear into the hole but I only managed to get until the letter E. I realized this will take a lot of artboards for me to import into Photoshop to get the whole word in. I also want to achieve a smoother animation when some of the letters 'squeeze' their way into the hole.

  

Fig 7.9 32 Artboards in Illustrator, Week 4 (15/9/2021)

Fig 7.10 Final Animation Timeline in Photoshop, 32 frames, Week 4 (15/9/2021)

Final Animated Type Expression 

 

Fig 8.0 Final Animated Type Expression "Gone" - GIF, Week 4 (15/9/2021)

Task 1: Exercise 2 - Text Formatting

We were assigned to do task formatting for our name, as well as a layout based on the text/photo he gave. In this exercise, we used Adobe InDesign.

Lecture 1/4 of Text Formatting: Kerning and Tracking

Fig 8.1 Text Formatting without kerning, Week 4 (15/9/2021)

Fig 8.2 Text Formatting with kerning, Week 4 (15/9/2021)

Fig 8.3 Difference between with kerning (top) and without kerning (bottom), Week 4 (15/9/2021)

Lecture 2/4 to 4/4 of Text Formatting: Kerning and Tracking

Based on the text and photo given, we had to create a layout following the text formatting guidelines like ragging, cross alignment, paragraph spacing, etc.

Fig 8.4 Baseline Grid in view with hidden characters, Week 5 (15/9/2021)

Fig 8.5 Layout Class Exercise, Week 5 (15/9/2021)

Final Task 1: Exercise 2 - Text Formatting

Fig 8.6 Final Text Formatting - JPEG, Week 5 (22/9/2021)

Fig 8.7 Final Text Formatting - PDF, Week 5 (22/9/2021)

---

FEEDBACK

Week 1: X

Week 2:

General Feedback:

The lecturers advised us to try to utilize the typeface to express the wording as much as we can. Overly distortion on the typefaces is not recommended. They suggested playing around with the text weight (Bold/Black) to help express the word. Graphical elements are allowed as long as it doesn't overpower the text expression.

Specific Feedback: (Peer Feedback - Jodiann/Shofwa/Adriel)

1. Are the explorations sufficient?

To my peers, my exploration was sufficient. Personally, I need to explore more on Terror and Shiver.

2. Does the expression match the meaning of the word?

Yes

3. On a scale of 1-5, how strong is the idea?

3.5-4 to my peers. I critically give myself a 2.5 to 3. I am unsatisfied with my sketches for Terror and Shiver.

4. How can the work be improved?

Terror: #2 and #3 was a favorite among them. Terror #4 is not advisable since the wording in the shape of the gun is not easily captured.

Shiver: Everyone liked #4 best.

Gone: #2 feels messy but if I really want to try it, I was advised to try it in a digitized version. My peers suggested I develop #3 and #4 further.

Melt: #1 was good, as well as #3. My peers mentioned that these two versions are the ones with less distortion which is recommended by the lecturers.

Specific Feedback: (E-Portfolio)

Improve photos of sketches, my photos still showed bad lighting despite taking it with natural lighting.

Start reading and update further readings section

Reflections should be updated weekly instead of an overall reflection.

Ways to avoid formatted text when copy/pasting into the Blogger post:

1. Pasting the text using the option 'Paste with plain text' 

2. Using Notepad for Windows

2. Backspace until reaching the first line



Week 3:

General Feedback:

Some of the type expressions were not dominantly using the space that has been provided. He explained that how we compose our design inside the square is important to the whole look and feel. Mr. Vinod also pointed out that if the type expression is not expressed well or explored properly, he will just tell us to keep working on it/make a new one. We need to reach at least 50% or more before he can suggest or demonstrate any tweaking that can be done. All in all, he's definitely not gonna give a solution. Both he and Mr. Charles also reminded us to keep our e-portfolio updated, as well as the feedback sheet. We should also learn to articulate our designs into words better based on design principles. Explain why we picked out/did not pick out the design for the final draft.

Specific Feedback:
My overall type expressions were quirky, half was good while the other half was problematic.. especially Terror.

Gone: Interesting - Tweak the placement of the overall design lower, to enhance the effect of my hole and as if the letters are disappearing into the hole on the 'ground.' 

Melt: Good, add a melting effect using the anchor point tool to enhance it better.

Shiver: Amendments had to be made but still accepted. He gave a few suggestions for me to try. Create contrast between the shivering letters and the non-shivering letters only by shiver applying the letter 'I' with the motion blur effect. Using another typeface that is thinner/longer will accentuate the shiver more like (Univers Light Condensed). I can also try putting (1) letter I with motion blur and  (1) letter I without motion blur over each other.

Terror: Needs more thinking and exploration to express the word. My initial design was not good enough to have the impression of terror. Instead, I should try to create a contrast between the rest of the letters if I wanted to put emphasis on the letter 'T'.

Week 4

General Feedback:

Complete the E-portfolio following the sample portfolio that Mr. Vinod has shared. That is the benchmark that he has set for all of us. It needs to be updated every week with our progression and our final work. This applies the same to the Google Sheets Reflection as it will be graded and tracked by the lecturers to see as evidence for our work. Unresponsiveness in class is important too as it will be marked as no participation in class.

We have to finish watching all the recorded lectures by next week and we should take notes while we watch them. We have the option to choose how we upload the lecture notes and we don't necessarily need to add photos etc. It is just a summary of what we have learnt, but if we do add photos, label it! 

When uploading JPEG on the blog, take note of the export options to export in greyscale, 300ppi.

Next week, our E-portfolio has to be completed from lectures to further readings, together with our submission for the Task 2 Exercise.

Specific Feedback:

My animated Gone was approved. The animation was smooth and Mr. Vinod liked how the letters are 'squeezed' into the holes.

For the Task Formatting task, the margin settings are entirely up to me. I can adjust it to however I want my layout to be. The samples in Mr. Vinod's recorded lecture would be a rule of thumb for me to see a well ragged text, with the curvature that is expected. I also need to check my settings in InDesign for my tracking, it should be (5) and not (20).



Week 5:

General Feedback:
The overall class performance should be better since Mr. Vinod has endlessly reminded us to update our E-portfolio for the past four weeks. He advised us to take note for the next submission and expects us to do better in the next round. He also highlighted that the marks are gone through a series of marking by various groups of people before the final grade. Hence, he suggests we ask him the grade we're in if we want to know where we stand in this module.

Specific Feedback:
My E-portfolio submission was given an excellent remark for documentation and organization. He also mentioned to keep up the good work. 

---

REFLECTIONS

Experience:

Typography has been an interesting module since day one, but also a difficult one in the sense that it requires you to be detailed and meticulous with your work. The first few weeks were challenging for me and it took me a while to adjust myself to Mr. Vinod's workflow. I also learned to use Adobe InDesign for the first time, it was quite a struggle trying to figure out the tools in the beginning. The text formatting exercise was a tricky process, questioning myself from time to time - "Did I kern enough?" "Should I make the letters closer?" 

Observation:

Throughout the Task 1 Exercises, I have learned that words and fonts used that I see in my everyday life have a reason behind them. All of them have history and meaning. Different typefaces can convey different types of messages. Other design elements like hierarchy, scale also play a role in the whole look and feel of the final layout.

Findings:

Other than being meticulous and detailed, I find that this module helps to train us about discipline, having to show our work every week with proper updates on our E-Portfolio. It's not something to take lightly as it requires a set amount of time to watch lectures, take notes, as well as, record our progressions. This module also has taught me to be critical of my own work, make decisive decisions about my designs, and not rely on approval from lecturers. I hope to be able to produce works that are expected of us throughout this semester and apply my typography skills in my other design subjects where applicable.

---

FURTHER READINGS

Week 1:

Fig 8.8 Module: Type History (Fonts.com)

Type History

Part 1: Early Evolution of Roman Letters

Square Capitals: Used exclusively to produce the most formal books and documents.

Fig 8.9 Roman Square Capitals (Source: Fonts.com)

Rustic Capitals: Narrower letterform  which allowed for twice as many words on a page. This also saves space and saves time.

Fig 8.10 Roman Rustic Capitals (Source: Fonts.com)

Roman Cursive: The Roman cursive was simplified for speed. These letters led to the beginning of lowercase letterforms

Fig 9.0 Roman Cursive (Source: Fonts.com)

Part 2: First Alphabets

Symbol Alphabets: the first form of communication took place using symbols. However, these symbols were getting inaccurate and difficult to express more complicated, sophisticated thoughts. Hence, new writing systems were developed to allow more precise information.

Fig 9.1 Symbol Alphabets (Source: Fonts.com)

Week 2:

Fig 9.2 Typographic Design: Form and Communication (2015)

Based on the list of recommended readings in the module information booklet, I did some further reading with the book "Typographic design: Form and communication".

Reference:

Carter, R., Day, B., Meggs, P. B., Maxa, S., & Sanders, M.

(2015). Typographic design: Form and communication.

Hoboken, New Jersey: John Wiley & Sons, Inc.

Chapter 2: The Anatomy of Typography

I figured this book's visuals would help me reinforce the information I learnt from the lecture I watched, which is, The Basics of Typography.

Fig 9.3 Parts of Letterform - Letterforms Analyzed, Chapter 2, page 33

I skimmed through the ones Mr. Vinod had covered in class and read more in depth the ones he didn't. For example, the sans-serif typefaces.

Fig 9.4 Sans Serif - Historical Classification of Typefaces, Chapter 2, page 39

Just like the name, these typefaces have one thing in common; the absence of serifs. I learned that in most sans serif typefaces, their characteristics are:

• uniform strokes
• stress is almost always vertical
• have no contrast between thick and thin strokes
• geometric in their construction;some combine both organic and geometric qualities.

Week 3:

Fig 9.5 Computer Basics Typography (2003)

Chapter: Character and Word Spacing

Fig 9.6 Character and Word Spacing, (12/9/2021)

I read up this guide to further enhance what I learned during this week's lecture. It was very overwhelming since the two videos are long. I skimmed through the pages and looked at the visuals to compare and contrast the examples given.


Section: Leading and Baseline Grid

Fig 9.7 Columns of text cross aligning using Baseline Grid, (12/9/2021)

Week 4:

I decided to look up more samples of ragging for the upcoming text formatting exercise. I felt that I was still unclear on knowing when a text is well ragged or vice versa.

Fig 9.8 Module: Text Typography, (Fonts.com)

Section: Rags

When setting type with a ragged margin, pay attention to the shape that the ragged line endings make.

Good rag: goes in and out from line to line in small increments.

Poor rag : created distracting shapes of white space in the margin.

To correct poor rags: making manual line breaks, editing your copy, or slight adjustments in point size/column width. (Refer photo)

Fig 9.9 Poor Rag (Left) vs Corrected Rag (Right), (Source: Fonts.com)

Section: Widows and Orphans

Fig 9.10 Widow (Left) vs Corrected Without Widow (Right), (Source: Fonts.com)

Widow: a very short line (usually one word / the end of a hyphenated word) at the end of a paragraphh/column.

Cons: Leaves too much white space between paragraphs / at the bottom of a page.

Orphan : a single word / part of a word / very short line appears at the beginning of a column/page.

Cons: Poor horizontal alignment at the top of the column/page.

Section: Kern Text Type

Fig 10.0 Without kerning (upper) vs With kerning (Bottom), (Source: Fonts.com)

The red dots indicate the troublesome character combinations that usually call for kerning (upper). When kerning is applied, overall color and texture, as well as readability, are greatly improved (lower).

Week 5:

Fig 10.1 Typography, Referenced: A Comprehensive Visual Guide to the Language, History, and Practice of Typography (2012)

Reference:

Jason Tselentis, ‎Allan Haley, ‎Richard Poulin (2012).

Typography, Referenced: A Comprehensive Visual Guide to the Language, History, and Practice of Typography, Rockport Publishers

This week we're given a briefing on our Task 2 assignment on text formatting and expression. Hence, I decided to read up on the use of Grids since it's an important component in designing layouts.

Chapter: Typographic Principles

The Grid :  A tool for designers to create compositions with some semblance of unity and variety.

Elements to consider during a project:

• media

• format

• use

• image size

• typographic scope

• word count (or lack thereof)

• expandability

Anatomy of a Grid

Fig 10.2 Anatomy of a Grid, page 221

Grid Types

Fig 10.3 Grid Types (Columnar - Above), (Modular - Below), page 221

1. Book and Manuscript Grid
    - have the least complexities but takes time and forethought

    - proportional relationships between the inside, outside, top, and bottom margins, such that readers          can grasp the book’s pages without obscuring the text they’re reading.

2. Columnar Grid
    - can have as little as two columns or as many
    - the example shows how the blocked tan-colored content could sit in a full-column length (I) or  be broken into separate elements (II) (Refer photo)

3. Modular Grid

    -  horizontally and vertically aligned modules create the structure on which text and image can reside.