Typography Task 1: Exercise

7/4/23-14/5/23 Week 1- Week 6

Tiffany Tan Xuan /0362472

Bachelor of Design in Creative Media 

Task 1: Exercise 1&2 

---

LECTURES

Week 1(a): Briefing 

This week Mr. Vinod introduced himself and started briefing us:

The steps of E-Portfolio, Google Docs for fill in our Portfolio links and feedbacks and the form text given.

Week 1(b): Development and Timeline

Fig1.1 early letterform development

• uppercase forms are simple combination of straight lines and pieces of circles

Fig1.2 Direction of writing for the Greeks, ‘boustrophedon’

Fig1.3 Greek fragment, stone engraving

• The Greek developed a style of writing called ‘boustrophedon’ (how the ox ploughs), which meant that the lines of text read alternately from right to left and left to right.
• Greek like the Phoenicians, did not use letter space or punctuations.

Fig 1.4 Phoenician to Roman

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

Fig1.5 Square capitals

• The variety of stroke was achieved by the reed pen held at an angle of approximately 60 degrees of the perpendicular.

Fig 1.6 Rustic Capital

• Compressed version of square capitals
• Faster and simpler to get out, but slightly more difficult to read due to compression.

Fig 1.7 Uncials

• The broad forms of uncials are more readable at small sizes than rustic capitals
• Uncials DON'T have lowercase and uppercase 

Fig 1.8 Half-uncials

• mark the formal beginning of lowercase letterforms, replete with ascenders and descenders, 2000 years after the origin of the Phoenician alphabet.

Fig 1.9 Blackletter

• With the dissolution of Charlemagne’s empire came regional variations upon Alcuin’s script. 
• In northern Europe, a condensed strongly vertical letterform know as Blackletter or textura gained popularity.
• In the south, a rounder more open hand gained popularity, called ‘rotunda’. 
• The humanistic script in Italy is based on Alcuin’s minuscule. 

Timeline of letterforms

1. 1450 Blackletter
2. 1475 Old style 
3. 1500 Italic 
4. 1550 Script 
5. 1750 Transitional 
6. 1775 Modern
7. 1825 Square Serif / Slab Serif 
8. 1900 Sans Serif 
9. 1990 Serif / Sans Serif

Fig 1.10 Text type classifications

Week 2: Basic

Describing letterforms

1. Baseline — Visual base of the letterforms
2. Median — Line defining the x-height of letterforms
3. X-height — The height in any typeface of the lowercase
4. Stroke — Any line that defines the basic letterform
5. Apex/Vertex — Point created by joining two diagonal stems.
Arm — Short stokes off the stem of the letterform
Ascender — Portion of the stem of a lowercase letterform that projects above the median.
Barb — Half-serif finish on some curved stoke
Beak — Half-serif finish on some horizontal arms
Bowl — Rounded form that describes a counter 
Bracket — Transition between the serif and the stem
Cross Stroke — Horizontal stroke in a letterform that joins two stems together.
Crotch — Interior space where two strokes meet.
Descender — Portion of the stem of a lowercase form that projects below the baseline.
Ear — Stroke extending out from the main stem or the body of the letter form.
Em — Distance equal to the size of the typeface.
En — Half of the em.
Finial — Rounded non-serif terminal to a stroke.
Ligature — 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 — Right-angled or oblique foot at the end of the stroke.
Shoulder — Curved stroke that is not part of a bowl.
Spine — Curved stem of the S.
Spur — Extension the articulates the junction of the curved and rectilinear stroke.
Stem — Significant vertical or oblique stroke.
Stress — Orientation of the letterform, indicated by the thin stroke in round forms.
Swash —Flourish that extends the stroke of the letterform.
Tail — Curved diagonal stroke at the finish of certain letterforms.
6. Terminal — Self-contained finish of a stroke without a serif.

The font

The full font of a typeface contains much more than 26 letters, to numerals, and a few punctuation marks.

• Uppercase — Capital letters, including certain accented vowels
• Lowercase — Lowercase letters include the same characters as uppercase
• Small Capitals — Primarily found in serif fonts as part of what is often called expert set.

Fig 2.1 Small capitals

• Uppercase Numerals — Lining figures, these numerals are the same height as uppercase letter and are all set to the same kerning width

Fig 2.2 Uppercase numerals

• Lowercase Numerals — Old style figures / text figures these numerals are set to x-height with ascenders and descenders.

Fig 2.3 Lowercase numerals

• Italic & Roman — Refer back to fifteenth century Italian cursive handwriting. Oblique are typically based on the roman form of the typeface.
• Punctuation & Miscellaneous Characters — Important to be acquainted with all the characters available in a typeface before choose the appropriate type.
• Ornaments — Used as flourishes in invitations or certificates.

Describing typefaces

• Roman — Uppercase forms are derived from inscriptions of Roman monuments
• Italic — Fifteenth century Italian handwriting on which the forms are based.
• Boldface — Thicker stroke than a roman form
• Light A — Lighter stroke than the roman form
• Condense A — Version of the roman form, and extremely condense style 
• Extended A — extended variation of a roman font

Week 3: Text

Tracking: Kerning and Letterspacing

• Kerning — The automatic adjustment of space between letters. 
• Letterspacing means add space between the letters.

Fig 3.1 Kerning and Letterspacing

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

Fig 3.2 Normal tracking, loose tracking and tight tracking

Week 3(b): Formatting Text

• Flush left: Each line starts at the same point but ends wherever the last word on the line ends.

Fig 3.3 Flush Left

• Centered: Imposes symmetry, equal value and weight to both ends of any line. It transforms fields of text into shapes, thereby adding a pictorial quality. 

Fig 3.4 Centered

• Flush right: Format places emphasis on the end of a line as opposed to its start.

Fig 3.5 Flush right

• Justified: Imposes a symmetrical shape on the text. It is achieved by expanding or reducing spaces between words and, sometimes, between letters.

Fig 3.6 Justified

Leading and Line Length:

• Type size: Text type should be large enough to be read easily at arm's length.

• Leading: Text that is set too tightly encourages vertical eye movement; a reader can easily lose track.

• Line Length: Longer lines need more leading, whereas shorter lines need less. Make the line length between 55 to 65 characters.

Week 4: Text / Indicating Paragraphs

• Pilcrow: It is used to indicate paragraph space.

Fig 4.1 Pilcrow

• Line space: spacing between paragraph.

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

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

• Highlight text: Different kinds of emphasis require different kinds of contrast. It can be another way to increase the boldness or the weight of the text by making it bold or medium choosing a typeface families and making it bold other ways of doing it would be changes the typeface and making it bold right.

Week 5: Letters

Understanding letterforms

Fig 5.1 Baskerville 'A'

The uppercase letterforms suggest symmetry, but it is not symmetrical. Two different stroke weights of the Baskerville stroke form.

Fig 5.2 Univers 'A'

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.3 Helvetica and Univers

A comparison of how the stems of the letterforms finish and how the bowls meet the stems quickly reveals the palpable difference in character between the two.

Maintaining x-height

Fig 5.4 Median and baseline

X-height generally describe the size of the lowercase letterforms. Curved stroke such as 'S' must always rise above median line and sink below baseline in order to appear same size as vertical and horizontal strokes they adjoin.

Fig 5.6 Contrast

Week 6: Screen & Printing

Typography in Different Medium

Print Type VS Screen Type:

Fig 6.1 Typography for print 

It’s the designer’s job to ensure that the text is smooth, flowing, and pleasant to read. A good typeface for print- Caslon, Garamond. Baskerville are the most common typefaces that is used for print.

Typefaces intended for use on the web are optimized and often modified to enhance readability and performance onscreen in a variety of digital environments. This can include 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.

Hyperactive Link/ hyperlink: 

A word, phrase, or image that you can click on to jump to a new document or a new section within the current document. Found in nearly all Web pages. Text hyperlinks are normally blue and underlined by default.

Font Size for screen: 

16-pixel text on a screen is about the same size as text printed in a book or magazine; this is accounting for reading distance.

System Fonts for Screen/ Web Safe Fonts:

Each devise comes with its own pre-installed font selection. Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond.

Pixel Different Between Devices:

The screen used by our PCs, tablets, phones and TVs are not only different sizes, but the text you see on-screen differs in proportion too because they have different sized pixels.

Fig 6.2 Pixel Different Between Devices

Static Vs Motion:

Static typography 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.3 Billboard showing static typography

Motion typography, on the other hand, refers to a type that is designed to be viewed in motion or animation.

---

INSTRUCTIONS  

Task 1: Exercise 1- Type Expression

This week Mr. Vinod gave us a poll on Facebook to vote for 7 words and we are choosing 4 words by ourselves for design. I chose party , love , split , silence and here is my design for these 4 characters.

1.Sketches

Fig 7.1 Sketches, (11/4/23)

As the word LOVE I like the third one because it looks like a bit playful and cheeky.

For the word PARTY I make it more like a "party". The alphabet A is a party hat the they alphabet Y it is a laughing sign with the teeth there.

For the sketches part I didnt know that Mr Vinod wanted us by using the 10 typefaces to design a word. So that Mr Vinod rejected all of my artworks. 

2.Digitisation

Fig. 7.2 Digital type expression(20/4/23)

After listening Mr Vinod's preference, I've change all my designs of the word by using the typefaces that Mr Vinod allowed. 

Fig. 7.3 Type expression "party" (20/4/23)

The word PARTY I used ITC New Baskerville Std as my typeface. At first I type the PRTY (That's the word party without A) and spaced it to put in the letter A, then I insert another text box and enter the A. 

As the fig shown that the letter A is much more bigger than the other letter just to emphasize the A in the word and changed the letter A upside down and slightly rotate it. The next step I'm using pen tool by adding the strokes to make the letter A looks like a champaign glass to make the word feel like partying.

Fig. 7.4 Type expression "split" (20/4/23)

The typeface for the word SPLIT I used Univers LT Std. At first I type it SPIT (as the word SPLIT but without L) by using all capital letter. Then I spaced between SP and IT and select effect-warp-arc to turn the SPIT word into an arc shape.

I create a new textbox and put the letter L between SP and IT to make it like the letter L is breaking down the SP IT. It makes us feel like there's actually splitting the word SPLIT.

Fig. 7.5 Type expression "love" (20/4/23)

As for the word LOVE, the font I used is Bodoni Std, which is more like an Italian font. When we think of Italy, we will feel romantic, I think the word LOVE itself is very romantic, so it is a need to use a romantic font to match it.

Firstly, I used pen tool to trace the love shape then I select the type on a path tool and type the word LOVE on the love shape and that's the final looks of my word LOVE.

Fig. 7.6 Type expression "pause" (20/4/23)

I'm using Futura Std as my typeface for the worf PAUSE. I created a textbox to type the word pause and added two dash line besides the letter U to make it like its is on a pausing mode. Next, I changed the colour of the dash line and the letter U to grey colour to contrasts it and make people more focus on the U. Lastly, I used the shape tool to created two small rectangle and put it on the letter U as the pause sign. Thats the final artwork of my word PAUSE.

Final Type Expression

Fig. 7.7 Final Type expression JPEG (20/4/23)

Fig. 7.8 Final Type expression PDF (20/4/23)

3. Type Expression Animation

Fig. 7.9 Animation "split" (27/4/23)

I am using the SPLIT word to make a animation. I used 11 frames to create it. The animation goes like the word SPIT at first is separate then the letter L from upper side breaking down the words. 

Fig. 7.10 Final Animated type expression "split" (27/4/23)

That's my final look of my SPLIT gif.

Task 1: Exercise 2 Type Formatting 

1. Kerning & Tracking

Fig 8.1 Text formatting, (5/3/23)

We have to watch the video of text formatting that Mr. Vinod uploaded on his You-Tube playlist, then he will teach us step by step to adjust the spaces between the characters in a piece of text (such as kerning).

2. Layout

Fig 8.2 Text formatting, (5/3/23)

First thing for the layout, I inserted the text into it, then the font of body text is Univers LT Std 55 Roman and for the font size is around 8-12 and my final decision is let it be 9. That's the perfect font size as the number of characters per line must be between 55-65 characters. 

Then, I make the leading at 11pt to make the paragraph more tidy and easy to read. Next, I started to do the kerning of the sentence that won't make the end of the sentence wavy and untidy. ALT+ left/right arrow to control the directions.

I made the body text into two columns. The left column is longer then the right one is because I wanted to put the image on the top right of the text so it can be align with the left column of body text.

Fig 8.3 Text formatting, (5/3/23)

Secondly, I inserted an image that related to the text Helvetica, put it on the top right of the text and it is align with the left column of text.

Fig 8.4 Text formatting, (5/3/23)

Lastly, I inserted the headings into the top middle of the layout and the author is just right below the headings. For the headings I used ITC Garamond Std Ultra Condensed as my typeface, leading 24pt and font size 48pt. 

That's the final work for my Task 1: Exercise 2 Layout.

HEAD

Font: ITC Garamond Std Ultra Condensed

Type Size: 48pt

Leading: 24pt

Paragraph Spacing: 0

BODY

Font: Univers LT Std 55 Roman

Type Size: 9pt

Leading: 11pt

Paragraph spacing: 3.881 mm

Characters per line: 60

Alignment: align left

Margins: 12.7 mm top+ 12.7 mm left + 12.7 mm right + 50mm bottom

Columns: 4

Gutter: 5 mm

Fig 8.5 Final Text formatting JPEG (5/3/23)

Fig 8.6 Final Text formatting PDF (5/3/23)

Fig 8.7 Final Text formatting PDF with lines (5/3/23)

---

FEEDBACK

Week2

Specific Feedback: The alphabet A in the word PARTY I am using a graphic element that it is not allowed to use. Then, for the word LOVE my font is a cursive writing that is not inclusive in the 14 module fonts which means is not acceptable.

General Feedback: Ideas might be simillar with others but the outcome will be different and need to present it in a neatly and tidy way. Font better using black and white rather than using colour. Other than that, our font are not allowed to have graphic or illustrator element and not design it in a too "clever" way as ppl cant get what it means. 

Week3

General Feedback: There is no class on a public holiday, but Mr Vinod conduct a class at 8am for those who need additional feedbacks from Mr Vinod.

Week4

General Feedback: Animation is to fully present the meaning of the word.The more frames it used the smoother it goes for the animation. If you want your loop to be more seamless, add a few seconds at the last frame.

Week5

General Feedback: Bold is for headings and Italics is for emphasize so never these two typefaces for body text. The picture must be related to the text and double check it must be even overall and the gapping/spacing in the layout.

---

REFLECTIONS

Experience: 

At first I didn't understand what this lesson in typography was about, so I was worried that I wouldn't do well. But after Mr Vinod's patience, I started to find the class interesting and it was not the boring class that I had stereotyped it to be. 

Observations: 

I observed from this lesson that the more creative elements there are, the better the work will be. Often good work is simple and at first glance you understand the design concept and what it is trying to convey.

Findings: 

I think it's important to have a passion for creativity to keep going because typography is not an easy subject for me. But if you discover the techniques, it can be fun!

---

FURTHER READING

The elements of typographic style is by Robert Bringhurst is indeed an excellent recommendation for a book on typography. It is considered a definitive guide in the field and is highly regarded by designers and typographers.

In "The Elements of Typographic Style," Bringhurst covers a wide range of topics related to typography, including typefaces, spacing, layout, and the historical development of typography. The book is known for its insightful analysis, in-depth exploration of typographic principles, and its elegant and well-crafted design.

The book provides practical advice and guidance for typographic decisions, making it valuable for both beginners and experienced designers. Bringhurst's writing style is engaging and informative, making it an enjoyable read for anyone interested in typography and design.

"The Elements of Typographic Style" is widely considered a must-have resource for anyone working with typography, from graphic designers and typographers to writers and editors. It is a timeless reference that will help you develop a deeper understanding and appreciation for the art and craft of typography.

In a conclusion, I think this book is really fun and helpful for those beginner learners. It offers a comprehensive guide to the art and practice of typography, covering topics such as typefaces, spacing, punctuation, and much more. So, I will introduce this book to those who are interested to Typography.