April 03, 2023

Typography Task 1/Excersices

4.4.2023-2.5.2023/week 1 - week 5

Guan Wee Lun/0364012
Typography/Bachelor of Design in Creative Media
Task 1

LECTURES

Week 1

TYPO_0_INTROUDUCTION

TYPOGRAPHY =The act of creating letter, the creation of typefaces or type family. Typography can be an animation, a logo, an app design, it is all over our world.
CALIGRAPHY = The writing style, as write out the word.
LETTERING =Draw out the circumferences of the letter.

Terminalogical Reference between font and typefaces

FONT (from French word "find") =refer to individual font or weight within the typeface
i.e.: Georgia Regular, Geogia Italic, Geogia bold and more

Figure 1.0 Georgia font

TYPEFACES = refer to the entire family of fonts that share similar characteristic or styles.
i.e.: Georgia, Arial, Times New Romans, Didot, Futura and more

TYPO_1_DEVELOPEMENT

TIMELINE

A. Phoenician to Roman

In the early days, writing means to be scratching into wet clay with sharpened stick or carving into stone with a chisel. The evolution of uppercase letterform is because of the tool and materials.

figure 1.1.1 development of Phoenician writing

Greek

The Greek changed the direction of writing (Phoenician writing are from right to left). They develop boustrophedon (the lines of text read alternately from right to left and left to right).

figure 1.1.2 boustrophedon

HOW THEY WRITE?

Etruscan carvers working in marble painted letterforms before inscribing them.

figure 1.1.3 from Phoenician to Greek and to Roman

B. Hand Script from 3rd to 10th century C.E.

Square Capital (4th to 5th century)

They started to use repent with a broader edge and a slant to the tool that being used. As a result, the thick contained stoke developed and they added the serifs to the finish of the stroke

figure 1.1.4 Square Capital

Rustic Capital (Late 3rd to mid 4th century)

A compressed version of square capitals. It was developed for pragmatic reason and to write faster, but the readability is not that good a Square Capital.

figure 1.1.5 Rustic Capital

Roman Cursive (4th century)

It was developed in order to write faster.

figure 1.1.6 Roman Cursive

Uncials (4th to 5th century)

It didn't have any lower and uppercase letterform, but they have element of lower and uppercase intergraded into the writing system.

figure 1.1.7 Uncials

Half Uncials (4th to 8th century)

A further formalization of the cursive handwriting. An introduction to formal letterform

figure 1.1.8 Half Uncials

Charlemagne (Name of the first unifier of Europe) (500)

Standarization of writing system in the early day of Europe

figure 1.1.9 Charlemagne

C. Blackletter to Gutenberg

Blackletter (c.1300)

After the dissolution of Charlemagne Empire, in southern Europe, Blackletter gained popularity.

figure 1.1.10 Blackletter

Gutenberg (the name of the developer of printing press) (1455)

Johannes Gutenberg type mold required a different brass matrix, or negative impression, for each letterform.

figure 1.1.11 Gutenberg

D. Text Type Classification

Blackletter (1450): Earliest printing type, it is based on handwriting upon northern Europe.

figure 1.1.12 Blackletter

Oldstyle (1475): Based upon the lowercase forms used by Italian humanist scholars for book copying.

figure 1.1.13 Oldstyle

Italic (1500): the first italics were condensed and close-set, allowing more words per page. Since the sixteenth century, virtually all text typefaces have been designed with accompanying italic forms.

figure 1.1.14 Italic

Script (1550): Originally and attempt to replicate engraved calligraphic Forms now range from the formal and traditional to the casual and contemporary.

figure 1.1.15 Script

Traditional (1750): A refinement of oldstyle forms Thick to thin relationships were exaggerated, and brackets were lightened.

figure 1.1.16 Traditional

Modern (1775): A further rationalization of oldstyle letterforms.

figure 1.1.17 Modern

Sans Serif (1900): As their name implies, these typefaces eliminated serifs altogether.

figure 1.1.18 Sans Serif

Serif/San Serif (1990): A recent development, this style enlarges the notion of a family of typefaces to include both serif and sans serif alphabets.

figure 1.1.19 Serif/San Serif

Week 2

TYPO_3_TEXT PART 1

KERNING AND LETTERSPACE

Kerning: Automatic adjustment of space and letterform between letters

figure 1.2.1 Kerning
Letterspacing: Add space between the letters. (Usually for uppercase letter in headline)

not encourage to letterspace for lowercase letterform because it will break the counter form which reduce the readability of the letterform.

Tracking: Add and reduce space in a letter or sentence.

Normal Tracking
Loose Tracking
Tight Tracking

FORMATTING TEXT

Flush Left: The most natural way of formatting text because this format most closely mirror the asymmetrical experience of handwriting.
Centered: This format imposes symmetry upon the text, assigning equal value and weight to both ends of any line. (don't do it for a large amount of text)
Flush Right: This format places emphasis on the end of a line as opposed to its start. (don't do it for a large amount of text)
Justified: Like centering, this format imposes a symmetrical shape on the text, assigning equal value and weight to both start and end at the same point.

READABILITY HAVE THE PRIORITY BEFORE ANYTHING IN FORMATTING TEXT

TEXTURE

Different typeface and texture can give different impact to the reader who were reading the text.

LEADING AND LINE LENGTH

Type size: It affects the readability of the reader, so it should be large enough to read.
Leading: Text that is set too tightly encourages vertical eye movement. Type that is set too loosely creates striped patterns that distract the reader from the material at hand.
Line Length: A good rule of thumb is to keep line length between 55-65 characters. Extremely long or short lines lengths impairs reading.

Week 3

TYPO_3_TEXT PART 2

INDICATING PARAGRAPH

Pilcrow (¶)
Line space: The leading should be THREE point larger than the text size, the paragraph spacing should be same as the leading in order to maintain cross alignment.

figure 1.3.1 Difference of Leading and Linespacing

Indentation: It was used to save space for Newspaper, it is the same size of life spacing as the point size of the text (It is best use in JUSTIFIED)

figure 1.3.2 Indentation

Extended Paragraph: Create unusually wide column of text (Sometimes in academic writing)

figure 1.3.3 Extended Paragraph

WIDOWS AND ORPHANS

Widows: A short line of type left alone at the end of a column of text
Orphans: A short line of type left alone at the start of new column

figure 1.3.4 Widows and Orphans

HIGHLIGHTING TEXT

Different kinds of emphasis require different kinds of contrast. i.e., Italics, increase the boldness, highlighting Cyan, Maganda and black, placing a field of color at the back of text, quotation mark.

*Reduce the point size 0.5 (different typeface) to match the x-height between different typefaces.

*Reduce aligned figures (numbers) or All Capital acronyms embedded in text by 0.5 to ensure visual cohesion of the text.

HEADLINE WITHIN TEXT

A head: A clear break between topics within a section.
B head: subordinate to A head.

C head: highlights specific facets of material within B head text.

figure 1.3.5 Headline

Week 4

TYPO_2_BASICS

DESCRIBING LETTERFORMS

Baseline: The visual base of the letterform (Imaginary line)
Median: The imaginary line defining the X height of the letterform.
X-height (between the baseline and the median line): The height of any lowercase 'x' (in every typeface)
Cap height: Above median line.
Ascender line: Above Cap Height
Descender line: below Baseline.
Optical Adjustment: Ascending letter tend to be slightly above the Capital letter in order to give the impression of equal height.

figure 1.4.1 Describing Letterforms
Stoke: Any line that defines the basic letterform
Apex: The point above created by joining two diagonal stems.
Vertex: the point below created by joining two diagonal stems.
Arm: Short stroke extend from the stem stroke

figure 1.4.2 The Arm

Ascender: Stoke that exceed the median line (for lowercase letterform)
Barb: Half-serif of the curve stoke

figure 1.4.3 The Barb
Beak: Half-serif finish on some horizontal arm

figure 1.4.4 The Beak

Bowl: The rounded form that describes a counter
Bracket: The transition between the serif and the stem
Cross bar: Stroke connected two stems s.
Cross Stroke: Horizontal stroke that join two stems together (i.e., lowercase 'f' and 't')
Crotch: The interior space where two stoke meet.

figure 1.4.5 The Crotch

Descender: Stem below the baseline (lowercase letterform)
Ear: Stoke extending from the main stem/body of the letterform
Em: Distance equal to the size of typefaces (about width of a long dash—)
En: Half the size of Em (about width of short dash-)
Finial: The rounded non-serif terminal to a stroke

figure 1.4.6 The Finial

Leg: Short stroke off the stem of letterform
Ligature: Character form by two letterforms

figure 1.4.7 The ligature
Link: Stroke that connected the bowl and the loop of a lowercase 'g'

figure 1.4.9 The link

Loop: The bowl created in the descender of lower case 'g'
Serif: The 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: The extension the articulates the junction of the curved and rectilinear stroke.

figure 1.4.10 The Spur
Stem: The significant vertical or oblique stroke.
Stress: The orientation of the letterform, indicated by the thin stroke in round forms.

figure 1.4.11 The Stress

Swatch: The flourish extending the stroke

figure 1.4.12 The Swatch
Tail: Curved diagonal stroke at the finish of certain letterforms.
Terminal: The self-contained finish of stroke without a serif.

THE FONT

Uppercase and lowercase
Small Capitals: Uppercase letterforms draw to the x-height of the typeface.

figure 1.4.13 Smal Capitals
Uppercase Numerals: Numbers that are same height as uppercase letterform.
Lowercase Numerals: Number that are same height as lowercase letterform.
Italic and Romans

figure 1.4.14 Italic and Roman

Punctuation & Miscellaneous Characters
Ornaments: Used as flourishes in invitations or certificates

figure 1.4.15 Ornaments

DESCRIBING TYPEFACES

figure 1.4.16 Typefaces

You can’t be a good typographer, if you aren’t a good reader. — Stephen Cole

Week 5

TYPO_5_UNDERSTANDING

UNDERSTANDING LETTERFORM Most of the alphabet letterform look symmetrical, but in closer inspection, it's not symmetrical for some reason.

figure 1.5.1 Baskerville Stoke and Univers Stroke

figure 1.5.2 Comparison between Helvetica and Univers

MAINTAINING X-HEIGHT Curved strokes, such as in ‘s’, must rise above the median (or sink below the baseline) in order to appear to be the same size as the vertical and horizontal strokes they adjoin.

FORM/COUNTERFORM Knowing the space outside the letterform are equally important because it aids in readability and legibility of formatted text. Reducing or adding the space between letterform would affect the readability of the letterform. Before designing a letter, it's important to analyze existing letterform.

figure 1.5.3 Counter form

CONTRAST

figure 1.5.4 Rudi Ruegg diagram

Week 6

TYPO_6_SCREEN & PRINT

PRINT TYPE Good typefaces for print i.e., Print-Caslon, Garamond, Baskerville (Their characteristic which are elegant and intellectual but also 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 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. Another important adjustment – especially for typefaces intended for smaller sizes – is more open spacing. All of these factors serve to improve character recognition and overall readability in the non-print environment, which can include the web, e-books, e-readers, and mobile devices.

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. Hyperlinks are found in nearly all Web pages, allowing users to click their way from page to another. Text hyperlinks are normally blue and underlined by default.
Font Size for Screen: 16-pixel point size as about same size as text printed in a book, this is accounting for reading distance.
Web Safe Fonts: Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond.
Static Typography: It has minimal characteristic in expressing words. Traditional characteristics such as bold and italic offer only a fraction of the expressive potential of dynamic properties.
Motion Typography: Temporal media offer typographers' opportunities to dramatize type, for letterforms to become fluid and kinetic.

INTRUCTIONS

Week 1 (04.04.2023)

Task 1 exercise 1 type expression (sketch)

Task 1, we have been given seven word which are Speed, Shatter, Melt, Blur, Dance, Throw, Kill, and I have tried to sketch out of them, the sketches below (figure 2.1) is the draft.

figure 2.1.1 sketch progression 1(7.4.2023)

And I choose four words from these seven words and enhance it. The word I choose are BLUR, THROW, MELT, SHATTER.

figure 2.1.2 sketch (10.4.2023)

Week 2 (11.04.2023)

Task 1 exercise 1 type expression (digitization)

So, for the exercise two I digitize these four words on top which is shatter, blur, melt and throw. At the beginning, I just digitize it and try to add some effect on it, it is a tough try for me that I didn't use adobe illustrator before, but I managed to enhance it and digitize.

Figure 2.2.1 digitize work (13.4.2023)

After some feedback from MR Vinods, I enhanced some of the part of the word according to the feedback, I remove some of the object that are not needed and changed the composition of the word. The work below is the digitize work 2.0 that are already updated a bit.

Final Outcome

figure 2.2.2 digitize work 2.0.(15.4.2023)

Final Outcome (digitization work)

figure 2.2.3 final digitization work (16.4.2023)

Week 3 (16.04.2023)

Task 1 exercise 1 type expression (animation)

So, animating word for the first time is tough, I have done two version for the word "throw." For the first version is the dumb idea, so I update it into second version.

figure 2.3.1 animation 1 (20.04.2023)

And for the below is the version two, I will probably choose this version as my final outcome animation.

First Step-making frame on Adobe Illustrator

figure2.3.2 animation progression 1

Second Step-Insert into Photoshop

figure 2.3.3 animation progression 2

Third Step-adjust timeframe speed

figure 2.3.4 animation progression 3

Step 4-export and done

After the feedback from Mr vinod, I change the motion of throw

figure 2.3.5 animation 2.1 (23.4.2023)

figure2.3.6 animation2.2 (26.4.2023)

After the other feedback from Mr vinod, I changed the composition of animation to make it more related to it.

figure 2.3.7 animation 3( 08.05.2023)

Final Outcome

Week 4

Task 1 exercise 2 formatting text

Kerning and Tracking

First, I watch all of the lecture playlist first, and the main video for this exercise is the text part, and the formatting text video, So I went through formatting text video and revise on the text video. I just Insert my name 10 times and change to 10 kinds of font.

figure 2.4 text formatting 1(without kerning) (01.05.2023)

After that, I tried to change the typeface and kern it.

figure 2.4.2 text formatting 2 (with kerning) (01.05.2023)

Layout exercise

For the exercise, I went through the Video (text formatting2:4-4:4

figure 2.5.1 Layout exercise progression (02.05.2023)

First, I created the margin and column and insert the text given. After that I Insert the headline and do kerning to the text and Headline, and I choose an image and insert it.

After that, I tried different composition and create some different layout.

figure 2.5.2 Layout 1 (02.05.2023)

figure 2.5.3 Layout 2 (04.05.2023)

figure 2.5.4 Layout 3 (04.05.2023)

figure 2.5.5 Layout 4 (05.05.2023)

Final Outcome

HEAD
Font/s: Futura Std
Type Size/s: 48 pt
Leading: 50 pt
Paragraph spacing: 0

BODY
Font/s: Bembo Std
Type Size/s: 9 pt
Leading: 11 pt
Paragraph spacing: 11 pt
Characters per-line: 60
Alignment: left justified

Margins: 300 pt top, 36 mm left + right + bottom
Columns: 4
Gutter: 14.173 pt

figure 2.5.6 final text formatting layout without grids (09.05.2023)

figure 2.5.7 final text formatting layout with grids (09.05.2023)

figure 2.5.8 final text formatting layout pdf-grids (09.05.2023)

figure 2.5.9 final text formatting layout pdf (09.05.2023)