Typography - Task 1

04/04/2023-02/05/2023  week1-week14

Tai Tong En   0363164

Bachelor of Design (Honours) in Creative Media-Typography

Task 1：Exercise 1 & 2

---

LECTURES

WEEK 1(a) / Introduction

Typography

Typography could be deemed the act of creating letters. Typography is the creation of typefaces or type families. Typography is also animation right it can come in animation animated forms like the beginning of movie titles. Besides, typography is visible and prevalent in website designs.

We can find typography in bottle labels, obviously books and posters, and many different facets of the design discipline but also in real life. 

Typography is not just the text but the attributes and characteristics and skill sets and thinking that are developed from typography have ramifications.

Black letter calligraphy

Font 

Font refers to individual font or weight within a typeface, for example: Georgia regular, Georgia italic, or Georgia bold. These are all individual fonts within a typeface.

Typeface

Typeface refers to the entire family of fonts or weights that share similar characteristics or styles so Georgia is a typeface area is a typeface times new roman is a typeface d dot and Futuna are typefaces.

• Typography: The art and technique of arranging type to make written language legible, readable, and appealing when displayed.
• Font: The individual font or weight within the typeface.
• Typeface: The entire family of fonts/weights that share similar characteristics/styles.

WEEK 1(b) / Development

Early Development / Timeline

Early letterform development: Phoenician to Roman

Initially writing meant scratching into wet clay with a sharpened stick or carving into stone with a chisel. At their core, uppercase forms are a simple combination of straight lines and pieces of circles, as the materials and tools of early writing required.

The Greeks changed the direction of writing.The Greeks developed a style or writing called “boustrophedon”,which meant that the lines of text read alternately from right to left and left to right.

Etruscan carvers worked in marble-painted letterforms before inscribing them. Certain qualities of their strokes-a change in weight from vertical to horizontal, a broadening of the stroke at start and finish.

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

Square capitals were the written version that can be found in Roman monuments. The variety of stroke width was achieved by the reed pen held at an angle of approximately 60o off perpendicular.

A compressed version of square capitals, rustic capitals allowed for twice as many words on a sheet of parchment and took far less time to write. The pen or brush was held at an angle of approximately 30o off the perpendicular.

Both square and rustic capital were typically reserved for document of some intended performance. Typically written in cursive hand in which forms were simplified for speed.

Uncials incorporated some aspects of the Roman cursive hand, especially in the shape of the A, D, E, H, M, U and Q. The broad forms of uncials are more readable at small sizes than rustic capitals.

A further formalisation of the cursive hand, half-uncials mark the formal beginning of lowercase letterforms, replete with ascenders and descenders,2000 years after the origin of the Phoenician alphabet.

Charlemagne, the first unifier of Europe since the Romans, issued an edict 789 to standardise all ecclesiastical texts.

Blackletter to Gutenberg’s type

In Northern Europe, a condensed strongly vertical letterform known as blackletter or texture gained popularity. In the south, a rounder more open hand gained popularity, called the “rotunda”.

Gutenberg’s skill included engineering, metalsmithing, and chemistry. His type mood required a different brass matrix, or negative impression, for each letterform.

Text Type Classifications

• 1450 Blackletter: The earliest printing type – based on the hand-copying styles used in books in northern Europe at the time.
  
  
  
• 1475 Oldstyle: Based on the lowercase forms used by Italian humanist scholars for book copying and the uppercase letterforms found inscribed on roman ruins.
  
  
  
• 1500 Italic: Condensed and close-set (now not considered as a separate typeface).
  
  
  
• 1550 Script: An attempt to replicate engraved calligraphic forms.
  
  
  
• 1750 Transitional: A refinement of oldstyle forms – thick and thin relationships were exaggerated, and brackets were lightened.
  
  
  
• 1775 Modern: Serifs are unbracketed, and the contrast between thick and thin are extreme.
  
  
  
• 1825 Square Serif / Slab Serif: Unbracketed with little variation between thick and thin strokes. 
  
  
  
• 1900 Sans Serif: Eliminated serifs.
  
  
  
• 1990 Serif / Sans Serif: Includes both serif and sans serif alphabets.
  
  
  

WEEK 2 / Basic

Describing Letterforms

To identify specific typefaces, it’s essential to understand a letterform’s components.

• Baseline: Visual base (imaginary) of the letterforms.
• Median: (Imaginary) line defining the x-height of letterforms.
• X-height: The height of the lowercase ‘x’.

• Stroke: Any line that defines the basic letterform.

• Apex/Vertex: Point created by joining two diagonal stems.

• Arm: Short strokes off the stem of the letterform.

• Ascender: Portion of the stem of a lowercase letterform that projects above the median line.

• Barb: Half-serif finish on some curved stroke.

• Beak: Half-serif finish on some horizontal arms.

• Bowl: Rounded form that describes a counter.

• Bracket: Transition between the serif and stem.

• Cross Bar: Horizontal stroke in a letterform that joins two stems together.

• Cross Stroke: Horizontal stroke in a letterform that joins two stems together.

• Crotch: Interior space where two strokes meet.

• 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.

• Stress: Orientation of the letterform, indicated by the thin stroke in round forms.

• Terminal: Self-contained finish of a stroke without a serif.

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

• 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: The significant vertical or oblique stroke.
• Tail: The curved diagonal stroke at the finish of certain letterforms.

The Font

• Uppercase & Lowercase
• Small Capitals
• Uppercase & Lowercase Numerals
• Italic & Roman
• Punctuation & Miscellaneous Characters 
• Ornaments

Describing Typefaces

• Roman & Italic
• Boldface & Light
• Condense and Extended

WEEK 3 / Text

Tracking: Kerning and Letterspacing

• Kerning: The automatic adjustment of space between letters (=/= letterspacing).

• Letterspacing: Adding space between the letters.
• Tracking: The addition and removal of space in a word or sentence.
• normal tracking, loose tracking & tight tracking

Normal tracking 

Loose tracking 

Tight tracking

Formatting Text
Important – legibility is always the number one priority.

• Flush left
• Centered
• Flush right
• Justified

Texture

Different typefaces suit different messages. A good typographer has to know which typeface best suits the message at hand. Type with a relatively generous x-height or relatively heavy stroke width produces a darker mass on the page than type with a relatively smaller x-height or lighter stroke. Sensitivity to these differences in colour is fundamental for creating successful layouts.

Leading and Line Length

Goal – allow for easy, prolonged reading.

• Type Size – Text type should be large enough to be read easily at arms length.
• Leading – Text too tightly > reader can easily loose his or her place. Type set too loosely > distract the reader from the material at hand.
• Line Length – Keep line length between 55-65 characters.

WEEK 4 / Text

Indicating Paragraphs

There are several option for indicating paragraphs.

    

• Extended Paragraphs
• Pilcrow: A holdover from the medieval manuscripts.
  
• Paragraph Spacing
  Cross-alignment is achieved when the leading and paragraph spacing is the same size.
• Indentation 
  Typically the same size of the line spacing or the point size of the text.

Widows & Orphans
Widows may be acceptable at times, but orphans are unacceptable.

• Widow: A short line of type left alone at the end of a column of text.
• Orphan: A short line of type left alone at the start of new column.

Highlighting Text
Different ways to emphasise a certain body of text is by making it: italics, bold, bold + changing the typeface (note: san-serifs often look larger than serifs), or changing the colour. Other ways of highlighting the text is by placing a field of colour at the back of the text.

Headline within Text

There are many kinds of subdivision within text of a chapters.

Cross Alignment

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

WEEK 5 / Letters

Understanding letterforms

The uppercase letter forms below suggest symmetry, but in fact it is not symmetrical. It is easy to see the 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 are.

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

The complexity of each individual letterform is neatly demonstrated by examining the lowercase 'a' of two seemingly similar sans-serif typefaces 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

As you already know, the x-height generally describe the size of the lowercase letterforms. However. you should keep in mind that curved strokes, such as in 's, must rise above the median (or sink below the baseline) itoappear to be the same size as the vertical and horizontal strokes they adioin.

Counterform

One of the most rewarding way to understand the form and counter of a letter is to examine them in close detail. The examinations also provide a good feel for how the balance between form and counter is achieved and a palpable sense of letterform's unique characteristics.It also gives you a glimpse into the process of letter-making.

Contrast
Important! – Contrast is the most powerful dynamic in design.

WEEK 6 / Typography in Different Medium

Today, typography exists not only on paper but on a multitude of screens. It is subject to many unknown and fluctuating parameters, such as the operating system, system fonts, the device and screen itself, the viewport, and more. Our experience of typography today changes based on how the page is rendered, because typesetting happens in the browser.

Print Type

The most common typefaces used for print are print-Caslon, Garamond, and Baskerville as they are highly readable when set at small font size.

Screen Type

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 -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 hyperlink is a word, phrase, or image that you can click on to jump to a new document or a new section within the current document. Hyperlinks are found in nearly all Web pages, allowing users to click their way from one page to another. Text hyperlinks are normally blue and underlined by default. When you move the cursor over a hyperlink, whether it is text or an image, the arrow should change to a small hand pointing at the link.

Font size for screen

Pixel Differential Between Devices

Static VS Motion

Static typography has a minimal characteristic in expressing words.

Traditional characteristics such as bold and italic offer only a fraction of the expressive potential of dynamic properties.

Type is often overlaid onto music videos and advertisements, often set in motion following the rhythm of a soundtrack. On-screen typography has developed to become expressive, helping to establish the tone of associated content or express a set of brand values. In title sequences, typography must prepare the audience for the film by evoking a certain mood.

---

INSTRUCTIONS

Task 1: Exercises - Typo Expression

Sketches
The words I selected are kill, speed, dance, and throw. As instructed, I first began by digitally sketching out my ideas.

KILL

Type Expression Sketches

SPEED

Type Expression Sketches

DANCE

Type Expression Sketches

THROW

Type Expression Sketches

I would say my favourites are dance #(bottom left), kill #1, speed #2 (top right), and throw #(bottom right). After receiving feedback from Mr Vinod, I moved on to the digitisation process.

Digitisation

I decided to first digitise all 4 different versions of each word and later on choose what I liked best. To begin, I compared the words in different typefaces and chose what worked best.

Kill

Digitisation Process

SPEED

Digitisation Process

DANCE

Digitisation Process

THROW

Digitisation Process

FINAL Type Expressions

 Final Type Expressions

Final Type Expressions (PDF)

      

Type Expression Animation

I first tried to animate 'kill'.

Kill Animation

Kill Animation Frames

However, it seemed too simple and strange, so I was unsatisfied with it.

I then decided to animate dance. I first had 10 frames, which seemed too complex and unhappy.

Dance Animation

Dance Animation Frames

FINAL Animated Type Expression

Dance Animation

Dance Animation Frames

Therefore, I added 2 more frames and adjust them to look more coordinated, making them 12 in total. 

TASK 1 / Exercise 2 – Text Formatting

"You will be given incremental amounts of text that address different areas within text formatting i.e. type choice, type size, leading, line-length, paragraph spacing, forced-line-break, alignment, kerning, widows and orphans and cross-alignment. These minor exercises (Formatting Text 1:4 to 4:4A) will increase your familiarity and capability with the appropriate software and develop your knowledge of information hierarchy and spatial arrangement. The task ends with the submission of one layout in A4 size demonstrating."

–––

Kerning and Tracking
I first practiced kerning and tracking with my name using the 10 typefaces provided.

Without Kerning

With kerning

Layouts
Then, following the tutorials and text provided, I started working on InDesign.

Process

After adjusting the technicalities, I explored different layouts:

Layout

I decided to left justify the body of my text as I like the clean look of it. To reduce hyphenation, I played around with kerning and tracking. I succeeded in getting rid of most of the hyphens. In addition, to avoid the fonts from being too small or not sustainble, I choose the type size is 10.

Out of the six, I liked #1 and #4 best as the typography makes me look comfortable and has a sense of design. I also thought they were different from most of the layouts I've seen. I ended up deciding to go with layout #1.

Layout #1

FINAL Text Formatting Layout

HEAD
Font/s: Serifa Std
Type Size/s: 33 pt
Leading: 39.6 pt
Paragraph spacing: 0

BODY
Font/s: ITC Garamond Std
Type Size/s: 10 pt
Leading: 12 pt
Paragraph spacing: 12 pt
Characters per line: 54
Alignment: left justified 

Margins: top 12.7mm, left 12.7mm, right 12.7mm, bottom 50mm
Columns: 4
Gutter: 5 mm

Final Text Formatting Layout

 

Final Text Formatting Layout (PDF)

Final Text Formatting Layout-Grids

 

Final Text Formatting Layout-Grids (PDF)

FEEDBACK

Week 1
Specific Feedback
General Feedback

Week 2
Specific Feedback
General Feedback： I think the fonts I designed are not enough to attract the attention of others. I just echo the meaning of the font itself and need to strengthen the concept and technology to make the overall look more impactful. After reading my classmates' works found that my works are invariable and lack imagination and innovation ability.

Week 3
Specific Feedback
General Feedback: My work is more like sketches, so I didn't use the 10 font the lecturer provided. Last, this work cant use the drawing tool in Illustrator.

Week 4

Specific Feedback

General Feedback: The word "dance" look unhappy and very strange. 

Week 5

Specific Feedback

General Feedback: The overall typography is messy, making people look uncomfortable and untidy. Also, the kerning and tracking are not quite right.

---

REFLECTIONS

Experience

My experience from the first week was to learn how to render fonts and various ways to adjust them. I found the class very interesting and relaxing. I also think this class is a very important class in life, and I have benefited a lot from this class. Among them, I like the animation of the font class the most. I think it is very fulfilling to design the sauce font to be dynamic, and it also makes the font more lifelike. In addition, I also learned a lot of application software, such as Illustrator, and InDesign. After learning this software, I found that many things can be done with this software, which is very convenient. Of course, I also encountered various difficulties in the process. For example, I used the Illustrator app for the first time and it was very unfamiliar and I didn’t know where to start. However, through the continuous teaching of the teacher, I gradually mastered the skills.

Observations

Since we are in class every week, the professor will ask us to put the homework completed in the previous week under the comments on Facebook. The professor will check the student's homework one by one and point out what is wrong or inappropriate. So I can see everyone's work in the class and thus refer to their work and why it doesn't fit. This way, I can learn more than just the professor's comments on my assignments.

Findings

Through task 1, I learned that typography is very interesting and very important. Good typography gives people in a good mood. Typography can also help convey a lot of information, much like the typography of fonts. In particular, the animation of font has benefited me a lot. The moving font can better express the meaning of the font itself.

---

FURTHER READING

As Mr. Vinod suggested the book "The Vignelli Canon Design", I decided to read sections of it on a weekly basis.

Introduction (pg7)

I looked into the significance of such a publication at the publisher's request and found that it may prove to be a beneficial tool for a better knowledge of typography in Graphic Design. This tiny book displays our rules—the ones we established for ourselves.

I have mentioned the absence of several fundamental typographic concepts among new designers in different educational contexts. I reasoned that sharing some of my expert knowledge with others could be beneficial in helping them develop their design abilities.

The Tangibles: A company letterhead (pg45)

The Tangibles: A company letterhead (pg53)

The Tangibles: Typefaces -The Basic Ones (pg62-63)

The Tangibles: Typesize Relationship (pg69)

To help me with the week 5&6 Exercises (text formatting layout), I read the section "The Tangibles". The content of this section is Paper Sizes, Grids, Margins, Columns, Modules, A Company Letterhead, Grids for Books, Typefaces, The Basic Ones, Flush left, centered, justified, and others. Through reading the section above, I have known how to make my text formatting layout looks cleaner and more comfortable.

The Tangibles: Layout (pg82-83)

The Tangibles: Layout (pg86)

This section plays an important role in typography. A publication is a cinematic medium, whether it be a tabloid, a book, a magazine, or anything else where flipping the pages is a necessary component of the reading process. A publication is both a static experience in the form of a spread and a cinematic experience in the form of a series of pages. Therefore, we consider this aspect of the design process to be quite important.

The Intangibles: Visual Power (pg24-25)

I am interested in this section which is "visual power".I believe that good design is always an expression of creative strength that puts out clear notions presented in lovely shapes and colors, where each piece strongly communicates the message.

The Tangibles: Grids, Margins, Columns and Modules (pg40-41)

This week I went back to part 2: The Tangibles as I thought I would need the information for my next task. The discussion of how different grid variants alter readers' reading experiences was the section's main topic.