April 04, 2023

Typography Task 1:Exercises

4/4/2023 - 14/5/2023 / Week 1 - Week 5
Janice Marie Eng Chia Hui / 0361521
Typography / Bachelor of Design in Creative Media / Taylors University
Task 1 Exercises

Lectures

Week 1

Typo_0_Introduction

Font is the individual font or weight within the typeface
Typeface is the entire family of fonts / weight that share similar characteristics / style

Figure 1.1 Example of fonts

Figure 1.2 Examples of typeface

Typo_1_Development

1. Early letterform development: Phoenician to Roman

Done by scratching into wet clay or craving into stones
Tools used can effect the letterform

Figure 1.3 Evolution of Phoenician Letterform

'Boustrophedon' (how the ox plough) was used by the Greeks. This meant that the letterform was read from left to right then right to left alternatively.
This caused the orientation of the letterform to change with the flow of the words.

Figure 1.4 Boustrophedon

2. Hand Script from 3rd - 10th CE

Square capitals were found in Roman monuments. They contained serifs added to the main stroke. They were achieved by holding a pen at a 60 degree angle off perpendicular.
Rustic capitals were the compressed version of square capitals. They took less time to write compared to square capitals but were also harder to read. They were achieved by holding the pen at a 30 degree angle off perpendicular.
Cursive hand were used in everyday transactions. They were simplified for speed resulting in formation of some lowercase letterforms.
Uncials incorporated some aspects of Roman cursive hand. Uncials means 12th of anything. They were more readable then rustic capitals.
Half uncials marks the beginning of the lower cases letterform due to the formalization of the cursive hand.
Charlemagne issued an edict to standardize all ecclesiastical text. This was entrusted to Abbot of St Martin Tours. This monk rewrote the texts using uppercase, miniscule, capitalization and punctuation which set the standard for calligraphy in that century. One such example is the Caloline Miniscule.

Figure 1.5 Hand script from the 3rd - 10th CE

The dissolution of Charlemagne's empire led to a condense and strongly vertical letterform in Northern Europe known as Blackletter or Textura. In the South, a more rounder, openhanded letterform was used known as Rotunda.

3. Text Type Development

1450 Blackletter → 1475 Oldstyle → 1500 Italics → 1550 Script → 1750 Transitional →1775 Modern → 1825 Square Serif / Slab Serif → 1900 Sans Serif → 1990 Serif / Sans Serif

Figure 1.6 Text type

Week 2

Typo_3_Text_P1

1. Tracking : Kerning and Letterspacing

Kerning refers to the automatic adjustment of space between letters. Mostly used in headlines. letters ends up invading each other spaces
Letterspacing means to add space between letters
Tracking is the addition and removal of spaces in a word or sentence. There are normal tracking, loose track and tight tracking. The looser the tracking the lower the text readability.
Uppercases are always letterspaced because they can stand on their own whereas lowercases require counterform between letters to maintain readability. adding spaces to lowercases destroys the counterofrm.

Figure 1.7 Letters with kerning and letters without kerning

Figure 1.8 Counterform

2. Formatting Text

Gray value is the value of the entire text on a white page.
Flush left mirrors the asymmetrical experience of handwriting. Each line starts at the same point but end at the point at which the line ends. Creates an even gray value. Ragging happens on the right.
Centered format imposes symmetry upon the text giving equal value and weight on both ends of the lines. Adds a pictorial quality to material that is non-pictorial by nature. Creates a strong shape due to the right and left ragging hence important to amend line breaks to reduce ragging.
Flush right places emphasis on the end of the line. Useful in situations (like captions or axil) where the relationship between text and image is ambiguous without a strong orientation to the right. Ragging on the left.
Justified imposes a symmetrical shape on the text. It reduces space between word and letters resulting in 'rivers' of white space running through the text. Attention to line breaks and hyphenation is required to amend this problem.

Figure 1.8 Text Formatting

3. Texture

Type with generous x-height or relatively heavy stroke width produces a darker mass on the page than the type with a relatively smaller x-height or lighter stroke.
There is more readability if the x-height is larger than the ascender and descender.

Figure 1.9 Anatomy of A Typeface

4. Leading and Line Length

Goal of setting text type is to allow for easy prolong reading
Type size should be large enough to read at arms length
Leading is the space between 2 lines (usually +2 of the point size). Set too tightly will encourage vertical eye movement while setting it too loosely creates striped patterns that distracts the reader.
The shorter the line length the less leading required; longer lines more leading. A good rule of thumb is between 55-65 characters(letters).

Figure 1.10 Leading

5. Type Specimen Book

Shows samples of typefaces in various sizes. Used to provide accurate reference for type, type size, type leading, type line length etc.
Text should create a field that can occupy a page or a screen. Ideal text has middle gray value and not a series of stripes.
Useful to enlarge type to 400% on screen to get a clear sense of the relationship between descenders on one line and ascenders on the line below it.

Figure 1.11 Type Specimen Book: Times Gothic

Week 3

Typo_4_Text_Part 2

1. Indicating Paragraphs

Using a 'pilcrow' (¶) to indicate a paraagraph break. This was used in medieval manuscripts and is not often used today.
'Line space'(leading) between can be used as a paragraph break.
Ensure that the line space/paragraph break is the same as your leading(ie. leading is 12pt your line spacing is also 12pt)
Indentation can also be used to indicate the start of a paragraph. The size of the indent must be the same size as the line spacing or the same as the point size of your text.
Indentation is best used in justified text.
Extended paragraphs usually creates wide column of text. Despite these problems, there are strong compositional or functional reasons for choosing it.

Figure 1.12 Indentation and Extended paragraphs

Figure 1.13 Line space vs Leading

2. Widows and Orphans

A widow is a short line of type left alone at the end of a column of a text
An orphan is a short line of type left alone at the start of a new column.
Widows and orphans are serious gaffs in justified text. Widows may be pardoned in flushed right but orphans are unpardonable in any cases.
To solve widows, rebreak you line endings throughout your paragraph so that the last line of the paragraph is not noticeably short.
Orphans can be solved by making sure no column of text starts with the last line of the last paragraph.
When letterspacing/ kerning to solve orphans or widows make sure to not do it more than 3 times.

Figure 1.14 Orphans and Widows

3. Highlight Text

Some ways to highlight text are Italics, Bold, change typeface and bold, change colour (black, cyan, magenta and yellow) or creating a box around the text need to be highlighted.
When highlighting text by changing the typeface, make sure to consider the leading and if the point size needs to be reduced. ( change around 0.5 pt )
Sometimes necessary to place typographic elements outside the left margin of the left column of the type to maintain a strong reading axis. (like with quotations)
Prime is not a quote and is used in inches and feet.

Figure 1.15 Box around text to highlight

Figure 1.16 Primes and Quotation

4. Headline Within Text

The letters A B and C are use to indicate different type of headlines.
'A' head indicates a clear break between the topics within a section. They can be set larger than text, in bold, in small caps or 'extended' to the left of the text.
'B' heads are subordinate to 'A' heads. They indicate new supporting arguments or examples of the topic. (they are also placed in the reading axis and follows the leading space)
'B' heads should not interrupt the text as strongly as 'A' head does
'B' heads can be in small caps, Italics, bold serif or bold sans serif
'C' heads highlights specific facets of material within the 'B' head. They do not interrupt the flow of read. It is important to place 2 spacing between the 'C' head and the beginning of the sentence
'C' head can be shown in small caps, italics, serif bold or sans serif bold.
Putting all 3 together creates hierarchy

Figure 1.17 'A' head

Figure 1.18 'B' head

Figure 1.19 'C' head

5. Cross Alignment

Cross aligning headlines and captions with text type reinforces the architectural sense of the page while articulating the complementary vertical rhythms (make pg pretty)
Can maintain cross alignment by doubling the leading. For example, small text is 13pt the headline leading would be 13 x 2 = 26pt.

Week 4

Typo_2_Basic

1. Describing Letterforms(some not all)

Ascender height line above the cap line
A stroke is any like that defines the basic letterform
Apex/Vertex is are created when 2 diagonal stems joins(apex above vertex below)
Arms are short strokes off the stem of the letterform either horizontal(E F L) or inclined(KY)
Ascenders are strokes that exceeds the medial line
Barbs are half serif finish on some curved strokes
Beaks are the half serif finish on some horizontal arms
Bowls are the rounded form that describe a counter(can be open or closed)
Brackets are the transition between the serif and the stem
Cross Bars are the horizontal stroke in a letterform that joins two stems together
Cross Strokes are the horizontal strokes in a letterform that joins the 2 stems together
Crotch is the interior space where 2 strokes meet
Descenders are anything below the baseline
Ears are strokes that extend from the main stem or letterform
EM/EN: EM is the size of capital M and EN is half the size of EM
Ligature is the character formed by the combination of the 2 letterforms
Stress is the orientation of a letterform indicated by the thin strokes of the round form

Figure 1.20 EM/EN line

Figure 1.21 Anatomy of Letterforms

2. The Font

The full font of a typeface contains much more that 26 letters, to numerals and a few punctuation marks. For success make sure you working with full font.(like italics, bold, etc.)
Small capitals are smaller uppercases. They only reach the x-heigh of the typeface and are mainly used in acronyms

Figure 1.22 Small Capitals

Uppercase numerals(lining figures) argue same height as uppercase letters and are set to the same kerning width
Lowercases numerals (oldstyle figures or text figures) are set to the x-height with the ascenders and descenders. Used together with uppercase and lowercases( to do in InDesigs simply press type and select glyphs)
Italics come from the 15th century Italian cursive handwriting. Oblique are based on the roman typeface with a slant like Italics(rarely have italics for lowercases)

Figure 1.23 Uppercase Numerals and Lowercase Numerals

Punctuation is standard in most fonts but miscellaneous characters can change from typeface to typeface.
Roman: called roman because the uppercase forms are derived from inscription of roman monuments (lighter stroke of roman is called book)
Boldface: characterized by think thick stroke(thicker than roman)
Light : lighter stroke than roman even lighter than light is thin

Figure 1.24 9 typefaces we use in this course

Week 5

Type_5_Understanding

1. Understanding letterform

Some uppercase letterforms seems symmetrical but upon closer inspection they are actually slightly disproportionate. For example The A in the Univers typeface has a slightly thinner stroke on one of its stem.
This helps create a letterform that is internally harmonious and individually expressive.

Figure 1.25 A from Univers typeface

Figure 1.26 Difference between 2 letterform 'a'

2. Maintaining X-height

Letterforms that have a curved stroke have to rise above the median or sink below the baseline in order to appear the same size as the vertical and horizontal strokes stuck to it.

Figure 1.27 Curved strokes extending over lines

3. Form/Counterform

Counterform is important for readability. We should look/analyze existing counterform to between understand how to design a letterform.

Figure 1.28 Counterform

4. Letters/Contrast

Contrast is required to diffrentiate information in text.

Figure 1.29 Examples of contrast in Typography

Typo 6_ Screen & Print

1.Different Medium

Typography in screen is very restrictive because we have to view it through the screen.

Figure 1.30 Screen Design for Website

2. Print type vs screen type

Print type was around before screen type
It was the designers job to ensure that the text is smooth flowing and pleasant to read
Some good typeface for print is Calson, Garamond, Baskerville and some others due to their elegant appearance and high readability on print.

Figure 1.31 Example of Print Type

Typeface for screen are often modified to enhance the readability and performance for screen reading ( taller x-height, wider letterform, open counters and such)
When clicked on, a hyperlink will link you to another website or a different section of a page.
16 pixels is usually used foe screens caused it is read from far while 10 pixels is used on print because we are reading the print closer to our eyes.
Some fonts that is safe to use across all websites: Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond

3. Static vs Motion

Static typography has minimal characteristic in expressing words. Traditional characteristics such as bold and italic offer only a fraction of the expressive potential of dynamic properties.
Temporal media offer typographers opportunities to “dramatize” type, for letterforms to become “fluid” and “kinetic” (Woolman and Bellantoni, 1999). Film title credits present typographic information over time, often bringing it to life through animation. Motion graphics, particularly the brand identities of film and television production companies, increasingly contain animated type.

top ↑

Instructions

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

Task 1 / Type Expression

For type expression we were asked to choose 4 words to compose and express. After coming up with sketches and ideas for the 4 words, we were to digitize our designs with Adobe Illustrator. The letters were to be composed in a manner that allows the meaning of the words to be conveyed.

We were given 7 words to pick form and the words I choose are crush, water, dissipate and freedom. All feedback for work are placed in the FEEDBACK section.

1. Sketches

Figure 2.1 Type expression sketches (8/4/23)

We were asked to sketch out ideas for our chosen word. I decided to sketch mine out traditionally first before doing them digitally in Photoshop. to find some inspiration, I googled "things related to (chosen word)" and tried to create a sketch from that.

For water, I had some ideas, such as a cup of water or water ripples and a dripping water. Moving on for dissipate, well there was not much I could think of other than smoke, like smoke disappearing. So I just did letters becoming smaller and lighter in colour. Next is crush. Car crash came up when I googled crush, so that planted a seed of inspiration in my brain. For freedom, I wanted to show one of the letters breaking free from the rest and ended up with this.

2. Digitization of sketches

Figure 2.2 Process (16/4/23)

During the digitization process, I tried to find the most suitable font for each word. Then, I tried to find a good placement or composition for the words. I had a hard time coming up with a text expression for freedom and to properly show that it is freedom. In the end I came up with the letter F jumping out of the black box.

Figure 2.3 Alternative design for water (16/4/23)

Figure 2.4 Alternative design for crush, freedom and dissipate (16/4/23)

Final Digital Type Expression

Figure 2.5 Final Type Expression (18/4/23)

Figure 2.6 Final Type Expression (PDF) (16/5/23)

Crush was inspired by videos I have seen of stimulation of car crashes. The point was that the C and H would crush the 'rus' in the middle
Dissipate I feel is pretty self-explanatory. The words are slowly fading into nothing-ness
Freedom. This expression was to show the word F breaking free from the darker space with the help of the other letters. I was initially inspired by a picture of a fist breaking through a brick wall which lead to this.
Water. For this expression I had quite a lot of help from Mr Vinod and he was the one who suggested taking away the anchor points to form a funnel/cup, whereas in my initial sketch I just flipped the word water upside down to obtain the cup/funnel shape.

3. Type Animation

During week 3 after getting feedback from Mr Vinod on our type expression, we started animating one of our chosen words. Initially I had wanted to animate water, but I decided to do the word crush instead. I already had an idea of how I wanted to do it so I went ahead and did just that. After coming up with the storyboard and frames, I exported the frames into photoshop to animate them.

Figure 2.7 Animation Storyboard(24/4/23)

My plan was to have the letter C and H crush the 'rus' in the middle. I did a few test runs on the animation. My first few animation did not really achieve what I had in mind. I decided to go back to the storyboard and tweak the frames a little bit. After I had what I wanted, I went back to Photoshop to animate them yet again.

Figure 2.8 First Attempt at Animating(24/4/23)

Final GIF Animation

Figure 2.9 Final Animation after tweaks (24/4/23)

I decided to make the words 'RUS' further apart to allow the action of crashing to be understood more. I also kept the bounce of the C and H at the end.

Task 1/ Test Formatting

For this exercise, we were given a text called 'I am Helvetica' to edit in InDesign to have proper letterspacing, paragraph spacing, leading, good headline and byline as well as a good layout. Before starting the exercise, I carried out the practice that was in Mr Vinod lecture videos. The lecture videos taught us how to use InDesign.

Figure 2.10 Names with kerning practice(29/4/23)

After doing the practice, I took a break before commencing with the exercise. I downloaded the text from Facebook and read it. After that I tried to think of a layout for the text. I wanted to play it safe since this is my first time doing text formatting. So I went with a somewhat simple layout. I had initially split the text body evenly into 2 and was using the font Futura Sans. But I was having a hard time with the letterspacing with this font.

So I decided to throw that idea away and went with another layout and a different font, Univers. This time I split the text body unevenly and left a white space at the bottom of the page.

1st attempt where the text body is left justified

2nd attempt where the text body is left align and has white space at the bottom

Figure 2.11 1st and 2nd attempt at Text Formatting(29/4/23)

Figure 2.12 Final Text Formatting(3/5/23)

After getting feedback from Mr Vinod, I changed my work based on the feedback. I made the point size bigger and changed the leading and letterspacing accordingly. I also reduced the opacity of the picture to not make the top right comer look so heavy. I also changed the headline to make it highlight Helvetica.

Final Text Formatting Layout

Head

Font : Universe Lt Std (Roman/Black Oblique)
Type size : 35 pt and 25 pt
Leading : 36 pt
Paragraph Spacing : 0 pt

Body

Font : Universe Lt Std (Light)
Type size : 10 pt
Leading : 12 pt
Paragraph Spacing : 12 pt
Characters per line : 56
Alignment : Flushed left

Margines : Top/Bottom/Inside/Out (12.77mm)
Columns : 4
Gutter : 9 mm

Figure 2.13 Final Text Formatting (3/5/23)

Figure 2.14 Final Text Formatting (PDF) (3/5/23)

Figure 2.15 Final Text Formatting(Grids)(3/5/23)

Figure 2.16 Final Text Formatting (PDF & Grids) (3/5/23)

top ↑

Feedback

Week 2(11/04/23)

Specific feedback:

1. Are the exploration sufficient?

No, my ideation sketches were plenty similar with my classmates, hence I feel that I did not fully explore ideas.

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

Yes.

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

I'd give it a 3.

4. How can the work be improved?

Mr Vinod advice was to try and play around with the counterspace in the letters to create images. He showed a demonstration where he deleted some of the anchor points of the letter A and inverted it to create a cup/funnel. He also advice me to try and show the action freedom more in my freedom sketch.

General feedback:

When sketching out ideas for type do not use actual fonts, instead draw it out. /Mr Vinod also advised us to refrain from using too much graphical elements in our type expression to prevent the distortion of words. But he also added that logical graphical elements or distortion are accepted.

Week 3(18/4/23)
Specific Feedback:

1. Do the expressions match the meanings of the word?

Yes.

2. Are the expressions well-crafted (crafting/lines/shapes)?

Yes.

2a. Do they sit well on the art board?

Yes, they sit relatively well in the art-board.

2b. Are the composition engaging? Impactful?

Honestly, my compositions is not that impactful, I could have made it more impactful.

3. Are there unnecessary non-objective elements present?

There are none unnecessary non-objective elements present.

4. How can the work be improved?

Try to explore more word expression.

General Feedback:

Make use of the whole space /Choose the right font/Don't distort the letters too much

Week 4(25/4/23)

Specific Feedback:

Sir said to go ahead with my GIF

General Feedback:

Make the last frame of the GIF stationary to make the GIF smoother

Week 5(3/5/23)

Specific Feedback

1. Is the kerning and tracking done properly?

Yes.

2. Does the font size correspond to the line-length, leading & paragraph spacing?

No the font size is too small making the text body look black, increase text size.

3. Is the alignment choice conducive to reading?

Yes.

4. Has the ragging been controlled well?

No, add hyphenations to areas where ragging looks bad after letterspacing

5. Has cross- alignment been achieved using base line grids?

6. Are widows and orphans present?

General Feedback

Put paragraph spacing between text body and pictures/Use images that does not look part of the layout

top ↑

Reflections

Experience

I feel like I manage to learn a lot about the basics of type through this exercise. The exercises or tasks had their own lecture videos which teach us how to do the necessary things needed to complete the task, which is a good thing. All the task that were given in this exercise were give back to back. Maybe it cause I'm not used to it, but that was really stressful hahahaha. My experience with using Adobe Illustrator was ok cause of the lecture videos given. Although they were times where I had forgotten how to do something in AI(but it's ok I can Google it)

Observation

My observation is that text formatting is hard. When trying to letterspace for our text formatting exercise, I had a hard time trying to fix the ragging to make it look acceptable. I was alternating between typefaces, trying to find one that would work. In the end I just accepted my fate and decided to move on.

Findings

Overall, this exercise made me realise how detail orientated typography is. A lot of things need to be taken into consideration (layout, letterspacing, leading etc.). Typography is stressful.

Search This Blog

Janice Marie Eng Chia Hui (0361521)

Typography Task 1:Exercises

Table of contents:

Lectures

Week 1

Week 2

Week 3

Week 4

Week 5

Typo 6_ Screen & Print

Instructions

Task 1 / Type Expression

Task 1/ Test Formatting

Final Text Formatting Layout

Feedback

Week 2(11/04/23)

Week 3(18/4/23)

Week 4(25/4/23)

Week 5(3/5/23)

Reflections

Further Reading

Comments

Post a Comment