Typography - Task 1 / Exercises

28/3/2022 - 25/4/2022 (Week 1 - Week 5)
Anna Chin Siaw Fong / 0354370 
Typography / Bachelor of Design (Honours) in Creative Media / Taylor's University
Task 1 / Exercises

---

LECTURES

Week 1

Typography: Development / Timeline

1. Early letterform development: Phoenician to Roman

Writing meant scratching into wet clay with sharpened stick or carving into stone with a chisel. The forms of uppercase letterforms (for nearly 2000 years the only letterform) can be seen to have evolved out of these tools and materials. 

Fig 1.0 Evolution of Phoenician letters

The Greeks changed the direction of writing. Phoenicians wrote from right to left. The Greek developed a style of writing called 'boustrophedon' (how the ox ploughs), which meant the lines of text read alternately from right to left and left to right. They also chenged the orientation of the letterforms. Like the Phoenicians, the Greeks did not use letter space or punctuations.

Fig 1.1 Direction of writing, 'boustrophedon'

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

Square capitals - Written letterforms found in Roman monuments. These letterforms have serifs added to the finish of the main strokes

Fig 1.2 4th or 5th century: Square capitals

Rustic capitals - 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. Faster and easier to write, but were slightly harder to read due to its compressed nature

Fig 1.3 Late 3rd - mid 4th century: Rustic capitals

Roman cursive - For everyday transactions. Written in cursive hand in which forms were simplified for speed. Roman cursive is the beginning of lowercase letterforms

Fig 1.4 4th century: Roman cursive

Uncials - Incorporated some aspects of the Roman cursive hand. The broad forms of uncials are more readable at small sizes than rustic capitals. 

Fig 1.5 4th - 5th century: Uncials

Half-uncials - Marks the formal beginning of lowercase letterforms, replete with ascenders and descenders, 2000 years after the origin of the Phoenician alphabet

Fig 1.6 C. 500: Half-uncials

Charlemagne, the first unifier of Europe since the Romans, issued an edict in 789 to standardize all ecclesiastical texts. He entrusted this task to Alcuin of York, Abbot of St Martin of Tours. The monks rewrote the texts using both majuscules (uppercase), minuscule, capitalization and punctuation which set the standard for calligraphy for a century

Fig 1.7 C. 925: Caloline miniscule

3. Blackletter to Gutenberg's type

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

 

Fig 1.8 C. 1300L Blackletter (Textura)

Gutenberg's skill included engineering, metalsmithing, and chemistry. He marshaled them all to build pages that accurately mimicked the work of the scribe's hand - Blackletter of northern Europe. His type mold required a different brass matrix, or negative impression, for each letterform

Fig 1.9 C. 1455: 42 line bible, Johann Gutenberg, Mainz

4. Text type classification

1450 Blackletter - The earliest printing type. Its forms were based upon the hand-copying styles 

Fig 1.10 1450 Blackletter

1475 Oldstyle - Based upon the lowercase form used by Italian humanist scholars for book copying and the uppercase letterforms found inscribed on Roman ruins, the forms evolved away from their calligraphic origins over 200 years, as they migrated across Europe, from Italy to England

Fig 1.11 1475 Oldstyle

1500 Italic - Echoing comtemporary Italian handwriting, the first italics were condensed and close-set, allowing more words per page. Italics were soon case to complement roman forms. Since the sixteenth century, virtually all text typefaces have been design with accompanying italic forms

Fig 1.12 1500 Italic

1550 Script - Originally and attempted to replicate engraved calligraphic forms. Forms now range from the formal and traditional to the casual and contemporary

Fig 1.13 1550 Script

1750 Transitional - A refinement of oldstyle forms, this style was achieved in part because of advances in casting and printing. Thick to thin relationships were exaggerated, and brackets were lightened

Fig 1.14 1750 Transitional

1775 Modern - This style represents a further rationalization of oldstyle letterforms. Serifs were unbracketed, and the contrast between thick and thin strokes extreme. English versions (like Bell) are also known as Scotch Romans and more closely resemble transitional forms

Fig 1.15 1775 Modern

1825 Square Serif / Slab Serif - Originally heavily bracketed serif, with little variation between thick and thin strokes, these faces responded to the newly developed needs of advertising for heavy type in commercial printing. As hey evolved, the brackets were dropped

Fig 1.16 1825 Square Serif / Slab Serif

1900 Sans Serif - These typefaces eliminated serifs alltogether. Although the forms were first introduced by William Caslon IV in 1816, its use did not become wide-spread until the beginning of the the twentieth century. Variation tended toward either humanist forms (Gill Sans) or rigidly geometric (Futura). Occasionally, strokes were flared to suggest the calligraphic origins of the form (Optima). Sans serif is also referred to as grotesque (from the German word grotesk) and Gothic

Fig 1.17 1900 Sans Serif

1990 Serif / Sans Serif - A recent development, this style enlarges the notion of a family of typefaces to include both serif and sans serif alphabets (and often stages between the two)

Fig 1.18 1990 Serif / Sans Serif

Week 2  

Typography: Basic

1. Describing letterforms

Baseline - The imaginary line the visual base of the letterforms

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

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

Fig 2.0 Baseline, Median and X-height

Stroke - Any line that defines the basic letterform

Fig 2.1 Stoke

Apex / Vertex - The point created by joining two diagonal stems (apex above and vertex below)

Fig 2.2 Apex and Vertex

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

Fig 2.3 Arm

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

Fig 2.4 Ascender

Barb - The half-serif finish on some curved stroke

Fig 2.5 Barb

Beak - The half-serif finish on some horizontal arms

Fig 2.6 Beak

Bowl - The rounded form that describes a counter. The bowl may be either opened or closed

Fig 2.7 Bowl

Bracket - The transition between the serif and the stem

Fig 2.8 Bracket

Cross Bar - The horizontal stroke in a letterform that joins two stems together

Fig 2.9 Cross bar

Cross Stroke - The horizontal stroke in a letterform that joins two stems together

Fig 2.10 Cross stroke

Crotch - The interior space where two strokes meet

Fig 2.11 Crotch

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

Fig 2.12 Descender

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

Fig 2.13 Ear

Em/en - Originally refering to the width of an uppercase M, and em is now the distance equal to the size of the typeface (an em in 48 points, for example). An en is half the size of an em. Most often used to describe em/en spaces and em/en dashes

Fig 2.14 Em/en

Final - The rounded non-serif terminal to a stroke

Fig 2.15 Final

Leg - Short stroke off the stem of the letterform, either at the bottom of the stroke (L) or inclined downward (K, R)

Fig 2.16 Leg

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

Fig 2.17 Ligature

Link - The stroke that connects the bowl and the loop of a lowercase G

Fig 2.18 Link

Loop - In some typefaces, the bowl created in the descender of the lowercase G

Fig 2.19 Loop

Serif - The right-angled or oblique foot at the end of the stroke

Fig 2.20 Serif

Shoulder - The curved stroke that is not part of a bowl

Fig 2.21 Shoulder

Spine - The curved stem of the S

Fig 2.22 Spine

Spur - The extension the articulates the junction of the curved and rectilinear stroke

Fig 2.23 Spur

Stem - The significant vertical or oblique stroke

Fig 2.24 Stem

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

Fig 2.25 Stress

Swash - The flourish that extends the stroke of the letterform

Fig 2.26 Swash

Tail - The curved diagonal stroke at the finish of certain letterforms

Fig 2.27 Tail

Terminal - The self-contained finish of a stroke without a serif. This is something of a catch-all term. Terminals may be flat (‘T’ above), flared, acute, (‘t’ above), grave, concave, convex, or rounded as a ball or a teardrop (see finial).

Fig 2.28 Terminal

2. The Font

Uppercase - Capital letters, including certain accented vowels, the c cedilla and n tilde, and the a/e and o/e ligatures

Fig 2.29 Uppercase

Lowercase - Lowercase letters include the same characters as uppercase

Fig 2.30 Lowercase

Small Capitals - Uppercase letterforms draw to the x-height of the typeface. Small Caps are primarily found in serif fonts as part of what is often called expert set

 

Fig 2.31 Small Capitals

Uppercase Numerals - Also called lining figures. These numerals are the same height as uppercase letters and are all set to the same kerning width

Fig 2.32 Uppercase numerals

Lowercase Numerals - Also known as old style figurs or text figures. These numerals are set to x-height with ascenders and descenders. Lowercase numerals are far less common in sans serif type-faces than in serif

Fig 2.33 Lowercase numerals

Italic - Reder back to fifteenth century Italian cursive handwriting. Oblique is typically based on the roman form of the typeface

Fig 2.34 Italic

Punctuation & Micellaneous Characters - Miscellaneous characters can change from typeface to typeface. It’s important to ensure that all the characters are available in a typeface before choosing the appropriate type.

Fig 2.35 Punctuation & Micellaneous Characters

Ornaments - Used as flourishes in invitations or certificates. They usually are provided as a font in a larger typeface family. Only a few traditional or classical typefaces contain ornamental fonts as part of the entire typeface family (Adobe Caslon Pro).

Fig 2.36 Ornaments

3. Describing Typefaces

Roman - Uppercase forms are derived from inscriptions of Roman monuments. A slightly lighter stroke in roman is known as ‘Book’

Fig 2.37 Roman

Italic - Named for fifteenth century Italian handwriting on which the forms are based. Oblique conversely is based on the roman form of typeface.

Fig 2.38 Italic

Boldface - Characterized by a thicker stroke than a roman form. It can also be called ‘semibold’, ‘medium’, ‘black’, ‘extra bold’, or super. In some typefaces (notably Bodoni), the boldest rendition of the typeface is reffered to as 'Poster'

Fig 2.39 Boldface

Light - A lighter stroke than the roman form. Even lighter strokes are called ‘thin’

Fig 2.40 Light

Condense - A version of the roman form, and extremely condense styles are often called ‘compressed’ 

Fig 2.41 Condense

Extended: An extended variation of a roman font

Fig 2.42 Extended

4. Comparing Typefaces

Beyond the gross differences in x-height, the forms display a wealth of variety, in line weight, relative stroke widths and in feeling. These feelings connote specific use and expression. Examination of typefaces tells people how to feel about type and specific typefaces and what they can bring to the discussion of appropriateness in type choices.

Fig 2.43 Comparing typefaces

Week 3

Typography: Text

1. Kerning and Letterspacing

Kerning - The automatic adjustment of space between letters

Letterspacing - The addition of space between letters

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

Fig 3.0 Kerning and letterspacing

Fig 3.1 Normal tracking, loose tracking and tight tracking

2. Formatting Text

Flush left - Most 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 

Fig 3.2 Flush left

Centered - Imposes symmetry upon the text, assigning equal value and weight on both ends of any line. It transforms fields of text into shapes, thereby adding a pictorial quality. Centered type creates such a strong shape on the page, it's important to amend line breaks so that the text does not appear too jagged

Fig 3.3 Centered

Flush right - Places emphasis on the end of a line as opposed to its start. It can be useful in situations (like captions) where the relationship between text and image might be ambiguous without a strong orientation to the right

Fig 3.4 Flush right

Justified - Imposes a symmetrical shape on the text. It is achieved by expanding or reducing spaces between words and, sometimes, between letters. The resulting openness of lines can occasionally produce ‘rivers’ of white space running vertically through the text. Careful attention to line breaks and hyphenation is required to amend this problem

Fig 3.5 Justified

3. Texture

Different typefaces suit different messages. 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 succesful layouts

Fig 3.6 Anatony of a typeface

Fig 3.7 Different typefaces with different gray value

4. 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. Type that is set too loosely creates striped patterns that causes distraction

Line Length - Shorter lines require less leading while longer lines more. A good rule of thumb is to keep line length between 55-65 characters. Extremely long or short line lengths impair reading

Fig 3.8 Leading and line length

5. Type Specimen Book

A type specimen book shows samples of typefaces in various different sizes. It is to provide an accurate reference for type, type size, type leading, type line length, etc

Fig 3.9 Sample Type Specimen Sheet

6. Indicating Paragraphs

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

Fig 3.10 Pilcrow

Line space (leading*) - Between the paragraphs. If the line space is 12 pt, then the paragraph space is 12 pt. This ensures cross-alignment across columns of text

Fig 3.11 Line space

Fig 3.12 Line space vs leading

Standard indentation - The indent is the same size of the line spacing or the same as the point size of the text

Fig 3.13 Standard indentation

Extended paragraphs - Create unusually wide columns of text. Despite these problems, there can be strong compositional or functional reasons for choosing it

Fig 3.14 Extended paragraphs

7. Widows and Orphans

Widow - Short line of type left alone at the end of a column of text

Orphan - Short line of type left alone at the start of a new column

Fig 3.15 Widow and orphan

8. Highlighting Text

Different kinds of emphasis require different kinds of contrast

Fig 3.16 Example of highlighted text

When highlighting text by placing a field of colour at the back of the text, maintaining the left reading axis (right example) of the text ensures readability is at its best

Fig 3.17 Highlighting with a field of colour at the back of the text

Sometimes it is necessart to place certain typographic elements outside the left margin of a column of type (extending as opposed to indenting) to maintain a strong reading axis

Fig 3.18 Highlighting with typographic elements

Quotation marks, like bullets, can create a clear indent, breaking the left reading axis. Compare the indented quote at the top with the extended quote at the bottom

Fig 3.19 Highlighting with quotation marks

A prime is not a quote. The prime is an abbreviation for inches and feet. Due to the limited number of keys on a typewriter, they were substituted. They were later known as ‘dumb quotes’

Fig 3.20 Prime and quote

9. Headline within Text

A head indicates a clear break between the topics within a section

Fig 3.21 A head

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

Fig 3.22 B head

C heads highlight specific facets of material within B head text. They do not interrupt the flow of reading. As with B heads, these C heads are shown in small caps, italics, serif bold and san serif bold. C heads in this configuration are followed by at least an em space for visual separation

Fig 3.23 C head

10. Cross Alignment

Cross aligning headlines and captions with text type reinforces the architectural sense of the page—the structure—while articulating the complimentary vertical rhythms

Fig 3.24 Cross Alignment

Week 4

Typography: Letters

1. Understanding letterform

The uppercase letter forms suggest symmetry, but it is not symmetrical. Two different stroke weights of the Baskerville stroke form; more noteworthy is the fact that each bracket connecting the serif to the steam has a unique arc

Fig 4.0 Baskerville 'A'

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

Fig 4.1 Univers 'A'

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

Fig 4.2 Helvetica and Univers 'a'

2. Maintaining x-height

X-height - The size of the lowercase letterforms. 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

Fig 4.3 X-height

3. Form / Counterform

Counterform (or counter)—the space describes, and often contained, by the strokes of the form. When letters are joined to form words, the counterform includes the spaces between them

The latter is particularly and important concept when working with letterforms like lowercase ‘r’ that have no counters per se. How well you handle the counters when you set type determines how well words hang together—in other words, how easily we can read what’s been set

Fig 4.4 Form / 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

Fig 4.5 Details of letters 's' and 'g'

4. Contrast

Contrast—the most powerful dynamic in design. The simple contrasts produces numerous variations: small+organic/large+machined; small+dark/ large light…

Fig 4.6 Contrast

Week 5

Typography in Different Medium

1. Print Type Vs Screen Type

Type for Print - Type was designed for reading from print long before screen. 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. Because of their characteristic which are elegant and intellectual but also highly readable when set at small font size

They are versatile, easy-to-digest classic typeface, which has a neutrality and versatility that makes typesetting with it a breeze

Fig 6.0 Type for print

Type for Screen - 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

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. Because we read books pretty close — often only a few inches away — they are typically set at about 10 points. If you were to read them at arm’s length, you’d want at least 12 points, which is about the same size as 16 pixels on most screens

System Font for Screen / Web Safe Fonts - Each device comes with its own pre-installed font selection. Which is based largely on its operating system

Fig 6.1 Font size for Screen and Print

Pixel Differential Between Devices - The screens 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 differences between devices

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

Fig 6.3 Static Typography

Motion Typography - 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

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

<iframe src="https://drive.google.com/file/d/1TW5nIaTYmdafgVlvaQsjut1f3h0p4QC4/preview" width="640" height="480" allow="autoplay"></iframe>

EXERCISES 

Exercise 1 - Type Expression

Sketches

A set of words were given to create type expression of. Students were to choose 4 from the 5 given words (Cough, Squeeze, Pop, Grow, and Explode) where "Cough" was mandatory. After choosing, students were to sketch out their ideation for the chosen words.

Fig 1.0 Sketches for "Cough" and "Squeeze"

- 3/4/2022 -

Fig 1.1 Sketches for "Grow" and "Explode" 

- 3/4/2022 -

Digitalization

Sketches were to be digitalized using only the 10 typefaces provided in Adobe Illustrator.

Fig 2.0 Digitalization of sketches

- 9/4/2022 -

After getting feedback from Mr. Vinod, I improved on my digitalization for explode.

Fig 2.1 Improved digitalization of sketches

- 12/4/2022 -

Final Digitalization

Fig 2.2 Finalized digitalization of sketches

- 12/4/2022 -

Fig 2.3 Finalized digitalization of sketches (PDF)

- 12/4/2022 -

<iframe src="https://drive.google.com/file/d/1tIEurNasbTwS0puZaFmE4MCCimAkSpv9/preview" width="640" height="480" allow="autoplay"></iframe>

Type Expression Animation

We were to choose one of our digitalizations and animated it into a GIF. I chose to animate "Squeeze". I used 23 frames to animate "Squeeze".

Fig 3.0 Animation Frames (23 Frames)

- 11/4/2022 -

Fig 3.1 Type Expression Animation Timeline (23 frames)

- 11/4/2022 -

Fig 3.2 Type Expression Animation (GIF)

- 11/4/2022 -

Final Type Expression Animation

Fig 3.2 Finalized Type Expression Animation (GIF)

- 11/4/2022 -

Exercise 2 - Text Formatting

Kerning & Tracking

We were to kern and track our names in Adobe InDesign.

Fig 4.0 Text formatting without kerning and tracking

- 16/4/2022 -

Fig 4.1 Text formatting after kerning and tracking

- 16/4/2022 -

Text Formatting

We were given an incremental amount of text to format. I pasted the text into Adobe InDesign and adjusted the font size, line-length, leading and paragraph spacing.

Fig 4.2 Adjusted font size, line-length, leading and paragraph spacing

- 18/4/2022 -

After adjusting the font size, line-length, leading and paragraph spacing, I added an image and removed the hyphenations from the text.

Fig 4.3 Added image and removed hyphenation

- 18/4/2022 -

Subsequently, I ragged the text to create a smooth ragging for the paragraphs. I also did cross alignment using the baseline grid for the text.

Fig 4.4 Ragged text

- 18/4/2022 -

Fig 4.5 Cross alignment with baseline grid

- 18/4/2022 -

I proceeded to design the layout for the text after that. I came up with 3 layouts.

Fig 4.6 Layout 1

- 18/4/2022 -

Fig 4.7 Layout 2

- 18/4/2022 -

Fig 4.8 Layout 3

- 18/4/2022 -

Fonts: Bembo Std

Typeface: Bembo Std Regular, Italic and Extra Bold

Font size: 11 pt (body text),  16 pt (heading), 14 pt (subheading)

Leading: 13 pt (body text), 26 pt (heading)

Paragraph spacing: 13 pt

Average characters per line: 55 ~ 65

Margin: 12.7 mm

Columns: 2

Gutter: 5 mm

Alignment: Left align

Final Text Formatting

Fig 4.9 Final Text Formatting

- 18/4/2022 -

Fig 4.10 Final Text Formatting with baseline grid (PDF)

- 18/4/2022 -

<iframe src="https://drive.google.com/file/d/1Mg1M0GxSvwOwLEnMKOAxBHJzjq8QsPrN/preview" width="640" height="480" allow="autoplay"></iframe>

Fig 4.11 Final Text Formatting (PDF)

- 18/4/2022 -

<iframe src="https://drive.google.com/file/d/1ho6GXNx9uRlQse7tROmqrUV0FgNKh-nZ/preview" width="640" height="480" allow="autoplay"></iframe>

---

FEEDBACK

Week 2 - Exercise 1: Type Expression

General feedback: -

Specific feedback:

Ideation Sketches - The face in the first type expression for cough is not allowed as it is a graphical element. Good idea for the toothpaste but graphical elements are not allowed. Second type expression for squeeze is really nice. More exploration is needed for explode. First type expression for explode is not good as it relies on the illlustration to express the word. Type expression for grow is fine as it conveys the message.

E-portfolio - Must include date under uploaded pictures.

Week 3 

General feedback: -

Specific feedback:

Digitalized Type Expression - The bomb in the digital type expression for explode is a bit too illustrative. Fuse for the bomb can be made thinner. Digitalization for squeeze looks great.

Type Expression Gif - It's good. Can try rotating the letter if I want. 

Week 4

General feedback: -

Specific feedback:

E-portfolio - There is discrepancy in the hierarchy for instructions and exercises. Maybe can add progression as description. Add a new heading for final submission.

Week 5

General feedback: Screen grab the the final text formatting with grids and guides.

Specific feedback: 

E-portfolio - Can add another picture for thumbnail. Maybe can change background of blog to a light grey colour.

---

REFLECTION

Experience
I have been enjoying all my typography classes so far. All the classes are pretty chill which is really nice. It is really fun and interesting as I get to learn new things. I have learnt how to create blogs, how to makes gifs, new shortcut keys, and others. I even learnt how to use Adobe InDesign which is an app that I have never used before. 

Observation

I realized that I was struggling to come up with ideas when I was doing my sketches for the type expression. 

Findings

I found that that typography is more than just letters. I also found out that there's actually a difference between font and typeface. Other than that, I found that creating gifs are really tiring because you need to make a lot of frames and small adjustments if you want to make the animation really smooth. It is also really time consuming. 

---

FURTHER READING

Letterforms: Typeface Design From Past to Future

Fig 5.0 Letterforms Book Cover

I read the book Letterforms: Typeface design from past to future for my further reading. I read about the legacies of typography. I learnt about the stroke, counter, structural groups, common structural variation, body, font, face and family.

Fig 5.1 Stroke and Counter

Fig 5.2 Structural Groups and Common Structural Variation

Fig 5.3 Body, Font, Face and Family