27.8.2021- 24.9.2021 (Week 1 - Week 5)
Moey Jo Min (0350567)
Typography / Bachelor of Design (Hons) in Creative Media
Task 1: Exercise 1 & 2

Jump Links

LECTURES
INSTRUCTIONS (Exercise 1 ; Exercise 2)
FEEDBACK
REFLECTION
FURTHER READING

LECTURES

WEEK 1

Typography: Development / Timeline

1. Early letterform development: Phoenician to Roman

Uppercase forms are simple combination of straight lines and pieces of circles, due to the materials and tools of early writing required.

Fig 1.1 Evolution of Phoenician to Arabic and Modern Latin

Fig 1.2 Letter 'A', from Phoenician to Roman

Direction of Writing:

Phoenicians (and other Semitic people): right to left

The Greek: Boustrophedon

Boustrophedon:

a writing style developed by the Greek
the lines of text read alternately from right to left and left to right
orientation of letterforms change as direction of reading change

Fig 1.3 Boustrophedon

2. Hand script from 3rd-10th century

Square Capitals:

can be found in Roman monuments
have serifs added to the finish of the main strokes
reed pen was held at an angle of approximately 60° off the perpendicular

Fig 1.4 4th or 5th century: Square Capitals

Rustic Capitals:

compressed version of square capitals
allowed for twice as many words on a sheet of parchment
took far less time to write
pen/brush was held at an angle of approximately 30° off the perpendicular
slightly harder to read due to their compressed nature

Square Capitals and Rustic Capitals - reserved for some documents of some intended performance

Fig 1.5 Late 3rd - mid 4th century: Rustic Capitals

Roman Cursive:

for everyday transactions
forms were simplified for speed
lowercase letterforms (developed by writing uppercase letterforms quickly)

Fig 1.6 4th century: Roman Cursive

Uncials:

incorporated some aspects of the Roman cursive hand, especially in the shape of A, D, E, H, M, U, and Q
"uncia" - twelfth of anything (Latin)
some scholars think that uncials refer to the letters that are one inch (one twelfth of foot) high
might be more accurate to think uncials simply as small letters
the broad forms of uncials are more readable at small size than rustic capitals
have no lowercase and uppercase

Fig 1.7 4th - 5th century: Uncials

Half-uncials:

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

Fig 1.8 c. 500: Half-uncials

Caroline Minuscule:

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 text using both majuscules (uppercase), miniscules (lowercase), capitalization and punctuation
set the standard of calligraphy for a century
to standardize writing system & convey messages more accurately

Fig 1.9 c. 925: Caroline Minuscule

3. Blackletter to Gutenburg's type

Blackletter (Textura):

with the dissolution the Charlemagne's empire came regional variations upon Alcuin's script
Northern Europe
a condense strongly vertical letterform

Fig 1.10 c. 1300: Blackletter (Textura)

Rotunda:

Southern Europe
rounder, more open hand

https://en.wikipedia.org/wiki/Rotunda_(script)

Fig 1.11 Rotunda

Gutternberg:

the person who invented modern printing press
his skills included engineering, metalsmithing, and chemistry
he marshalled them all to build pages that accurately mimicked the work of scribe's hand - Blackletter of Northern Europe
type mold required a different types of brass matrix, or negative impression, for each letterforms

Fig 1.12 c. 1455: 42 line bible, Johann Gutenburg, Mainz.

4. Humanist script to Roman type

Fig 1.13 Timeline of the development of typefaces (1)

*Important: Jenson, Grifo, Garamond

Fig 1.14 Timeline of the development of typefaces (2)

* Important: Caslon, Baskerville, Bodoni

5. Text type classification

Typeforms

developed in response to prevailing technology, commercial need, and esthetic trends
certain models have endured well past the cultures that spawned them

1450 Blackletter:

the earliest printing type
based on the hand-copying styles that were then used for books in Northern Europe
Example: Cloister Black, Goudy Text

Fig 1.15 Blackletter

1475 Oldstyle:

based upon the lowercase forms used by Italian humanist scholar for book copying and the uppercase letterforms found inscribe on Roman ruins
the forms evolved away from their calligraphic origins over 200 years - migrated across Europe, from Italy to England
Example: Bembo, Caslon, Dante, Garamond, Janson, Jenson, Palatino

Fig 1.16 Oldstyle

1500 Italic:

echoing contemporary Italian hand writing
first Italics - condensed & closed-set, allowing more words per page
soon cast to complement roman forms (although originally considered their own class of type)
since 16th century, virtually all typefaces have been designed with accompanying Italic forms

Fig 1.17 Italic

1550 Script:

originally and attempt to replicate engraved calligraphic forms
is not entirely appropriate in lengthy text settings
forms now range from the formal and traditional to the casual and contemporary
Example: Kuensler Script, Mistral, Snell Roundhand

Fig 1.18 Script

1750 Transitional:

a refinement of oldstyle forms
was achieved in part due the advances in casting and printing
thick to thin relationships were exaggerated, brackets were lightened
Example: Baskerville, Bulmer, Century, Time Roman

Fig 1.19 Transitional

1775 Modern:

represents a further rationalization of oldstyle letterforms
serifs: unbracketed
the contrast between thick and thin strokes extreme
English versions (like Bell) are also known as Scotch Roman and more closely resemble transitional forms
Example: Bell, Bodoni, Caledonia, Didot, Walbaum

Fig 1.20 Modern

1825 Square Serif / Slab Serif:

originally heavily bracketed serif
with little variation between thick and thin strokes
responded to the newly developed needs of advertising for heavy type in commercial painting
brackets were dropped as they evolved
Example: Clarendon, Memphis, Rockwell, Serifa

Fig 1.21 Square Serif

1900 Sans Serif:

these typerfaces eliminated serifs altogether
first introduced by William Caslon IV in 1816, but its use did not become widespread until the beginning of the 20th century
variation tended towards either humanist forms (Gill Sans) or rigidly geometric (Futura)
strokes were flared - to suggest the calligraphic origins of the form (Optima)
Sans Serif is also referred to as grosteque and Gothic
Example: Akzidenz Grotesk, Grotesk, Gill Sans, Franklin Gothic, Frutiger, Futura, Helvetica, Meta, News Gothic, Optima, Syntax, Trade Gothic, Univers

Fig 1.22 Sans Serif

1990 Serif/Sans Serif:

this style enlarges the notion of a family of typefaces to include both serif and sans serif alphabets (and often stages between the two)
semi-sans/semi-serif
Example: Rotis, Scala, Stone

Fig 1.23 Serif/Sans Serif

WEEK 2

Typography: Basic / Describing letterforms

1. Baseline: The imaginary line, the visual line base of the letterforms

2. Median: The imaginary line, defining the x-height of letterforms

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

Fig 2.1 Baseline, Median, X-height

4. Stroke: Any line that defines the basic letterform

5. Apex (above) & Vertex (below): The point created by joining 2 diagonal stems

Fig 2.2 Apex & Vertex

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

7. Ascender: The stem of a lowercase letterform that exceeds the median

8. Descender: The stem of a lowercase letterform that projects below the baseline

9. Barb: The half-serif finish on some curved stroke

10. Beak: The half-serif finish on some horizontal arms

Fig 2.3 Barb

Fig 2.4 Beak

11. Bowl: The rounded form that describes a counter → open / closed

Fig 2.5 Bowl

12. Bracket: The transition between the serif and the stem

Fig 2.6 Bracket

13. Cross Bar: The horizontal stroke in a letterform that joins 2 stems together (A, H)

14. Cross Stroke: The horizontal stroke seen in the lowercase letterform 'f' and 't'

15. Crotch: The interior space where 2 strokes meet

Fig 2.7 Crotch

16. Ear: The stroke extending out from the main stem or body

Fig 2.8 Ear

17. Em/en:

Originally referring to the width of an uppercase M.
Em → the distance equal to the size of the typeface
En → half the size of an em.
Most often used to describe em/en spaces(gap between words) and em/en dashes (quotation long dash)

https://opusdesign.us/wordcount/what-is-the-difference-between-em-dash-and-en-dash/

Fig 2.9 Em dash, en dash & hyphen

18. Finial: The rounded non-serif terminal to a stroke

Fig 2.10 Finial

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

20. Ligature: The character formed by the combination of 2 or more letterforms

https://www.fonts.com/content/learning/fontology/level-3/signs-and-symbols/ligatures-1

Fig 2.11 Ligature

21. Link: The stroke that connects the bowl and the loop of a lowercase G

22. Loop: the bowl created in the descender of the lowercase g (*in some typefaces)

Fig 2.12 Link

Fig 2.13 Loop

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

Fig 2.14 Serif

24. Shoulder: The curved stroke that is not part of a bowl (Example: h, n, m)

25. Spine: The curved stem of the S

26. Spur: The extension articulates the junction of the curved and rectilinear stroke

Fig 2.15 Spur

27. Stem: The significant vertical or oblique stroke

28. Stress: The orientation of the letterform, indicated by the thin stroke in round forms

diagonal / vertical stress

Fig 2.16 Stress

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

30. Tail: The curved diagonal stroke at the finish of certain letterforms (Q, y)

31. Terminal: self-contained finish of a stroke without a serif. May be flat ('T' above), flared, acute ('t' above), grave, concave, convex, or rounded as a ball or a teardrop (finial)

Fig 2.17 Terminal

Typography: Basic / The font

1. Uppercase: Capital letters

2. Lowercase: Small letters

3. Small Capitals (expert set): Uppercase letterforms draw to the x-height of the typeface

Fig 2.17 Comparison between small capitals (above) & uppercase letters (below)

4. Uppercase Numerals (lining figures):

Numerals that are the same height as uppercase letters and are all set to the same kerning width
Most successfully used with tabular material or any situation that calls for uppercase letters

Fig 2.18 Uppercase Numerals

5. Lowercase Numerals (old style figure/ text figures):

Numerals that are set to x-height with ascenders and descenders
Best used whenever using upper and lowercase letterforms
Far less common in sans serif typefaces that in serif
glyph

Fig 2.19 Lowercase Numerals

6. Italic:

15th century → Italian cursive handwriting
*small caps are almost always only roman

7. Punctuation & Miscellaneous Characters:

All font contains standard punctuation marks
Miscellaneous characters can change from typeface to typeface

8. Ornaments:

Used as flourishes in invitations or certificates
Usually are provided as a font in a larger typeface family
Adobe Caslon Pro

Fig 2.20 Ornaments

Typography: Basic / Describing Typefaces

1. Roman:

'Roman' → uppercase forms are derived from inscriptions of Roman monuments
slightly lighter stroke → 'Book'

2. Italic: Named for 15th century Italian handwriting

3. Oblique: Conversely are based on roman forms of typeface

*Italic → based on handwriting (serif letters)

*Oblique → not based on handwriting (letters without serif)

Fig 2.21 Italic & Oblique

4. Boldface:

Thicker stroke than a roman form
Depending upon the relative stroke widths within the typeface, it can also be called 'semibold', 'medium', 'black', 'extra bold', or 'super'.
In some typefaces (example: Bodoni), the boldest rendition of the typeface → 'Poster'

5. Light: A lighter stroke than roman form. 'Thin' → even lighter stroke

6. Condense (Compressed)

7. Extended

Typography: Basic / Comparing Typefaces

-easy readability
-an appropriate expression of contemporary esthetics

Typefaces given:

Baskerville
Bembo
Bodoni
Caslon
Futura
Garamond
Gill Sans
Janson
Serifa
Univers

Fig 2.22 Comparison between typefaces

WEEK 3

Typography: Text / Tracking: Kerning and Letterspacing

Kerning: The automatic adjustment of space between letters

Letterspacing: To add space between the letters

Tracking: The addition and removal of space in a word or sentence (doing kerning & letterspacing at the same time)

Normal tracking: the normal letterspacing and kerning

Loose tracking: letters given letterspacing

Tight tracking: letters given kerning

uppercase letterforms → drawn to be able to stand on their own

lowercase letterforms → require the counter form created between letters to maintain the line of reading

*(student designers) not encouraged to add spacing to lowercase letterforms

Typography: Text / Formatting Text

1.Flush left:

most closely mirrors the asymmetrical experience of handwriting
each line starts at the same point, ends wherever the last word on the line ends ('align left')
spaces between words are consistent → allowing the type to create an even *gray value
ragged right (jagged edge of the end point of the left aligned text)

Gray value*:

text on a white page. Half close your eyes, look at a text that has been formatted.

Grayness too dark → given kerning / not enough leading (space between each line of text)

Grayness too light → given too much letterspacing / leading

2. Centered:

imposes symmetry upon the text
assign equal value and weight to both ends of any line
centered type creates strong shape on the page → line break →text does not appear too jagged
not suitable for large amount of text

3. Flush right:

emphasizes on the end of a line as opposed to its start
can be useful in situations (like captions), where the relationship between text and image might be ambiguous without a strong orientation to the right
ragged left

axial layout

4. Justified:

imposes a symmetrical shape on the text
achieved by expanding / reducing spaces between words and letters (sometimes)
can occasionally produce 'rivers' of white space running vertically through the text
line breaks & hyphenation to avoid 'rivers'

When setting the field of type → clear, appropriate presentation of the author's message comes first

If you see the type before the words, change the type

Typography: Text / Texture

What we should learn:

characteristics of each typeface
a typeface's place in history
how different typefaces feel as text
the different textures of typefaces

⚝ Sensitivity to the differences in color (/gray value) is fundamental for creating successful layouts

X-height larger than ascender & descender → increases readability

example:

Fig 3.1 Comparison between Adobe Caslon and Baskerville

The x-height of Baskerville is larger than Adobe Caslon. Therefore, the text written in Baskerville is more readable.

Fig 3.2 Comparison between Bembo and Adobe Garamond Pro

The stroke of Garamond is slightly thicker than Bembo. Thus, increase the readability. The contrast in Bembo is more, which reduces its efficacy.

Fig 3.3 Comparison between Bauer Bodoni and Adobe Jenson Pro

Bauer Bodoni has a high contrast level (the thickness and thinness of strokes), thus reduces legibility of some of the strokes. Jenson Pro has thicker stroke width, the color is stronger, which is more readable.

Typography: Text / Leading and Line Length

Type size: Text type should be large enough to be read easily at arms length

Leading: Text that is set too tightly encourages vertical eye movement, a reader can easily loose his or her place. Type that is set too loosely creates striped patterns that distract the reader

Line Length: A good rule of thumb is to keep line length between 55-65 characters (number of letters).

Fig 3.4 Text written in Adobe Jenson with different leading

Leading should be 2-3.5 points larger than type size. In this case, 10/12 is the best, 10/13 is a little loose.

Typography: Text / Type Specimen Book

Type Specimen Book

shows samples of typefaces in various sizes
to provide an accurate reference for type, type size, type leading, type line length etc.

Fig 3.5 Sample of Type Specimen Sheet

Text should create a field that can occupy a page or a screen.

Fig 3.6 Leading and Line Length

Ideal text: having middle gray value(left), not a series of stripes (right)

Enlarge type to 400% to get a clear sense of the relationship between descenders on one line and ascenders on the line below

Fig 3.7 Text with different leading enlarged to 400%

The text above has less leading than the text below, resulting the text above has darker color.

WEEK 4

Typography: Text / Indicating Paragraphs

Pilcrow (¶):

a holdover from medieval manuscripts seldom use today
to indicate paragraph space
a glyph that can be found in most typefaces

Fig 4.1 Pilcrow

Leading and paragraph spacing should be at the same point size to maintain cross alignment

Cross Alignment: The baseline of two paragraphs siting beside is the same

Fig 4.2 Leading between the paragraphs

Leading: the space between two sentences

Line Spacing: the space between the descender of a sentence to the descender of the sentence on top

Fig 4.3 Difference between leading and line spacing

Indentation:

indent = line spacing / text point size
was used to save space
align left causes right ragging →justify

Extended Paragraph:

creates unusually wide columns of text
mostly used in academic writing

Typography: Text / Widows and Orphans

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 a new column (add / reduce column height to avoid)

In justified text, widows and orphans should never occur.

Flus right and ragged left text is somewhat more forgiving towards widows, but only a bit. Orphans are still unpardonable.

Fig 4.4 Widows and orphans

Typography: Text / Highlighting Text

Ways to Highlight Text:

1. Italic

2. Increase the weight of a text (bold / medium from the same type family)

3. Change the type family

if the original text is a serif typeface and the highlighted text is a san serif typeface, the point size of the highlighted text should be reduced by .5 (san serif typefaces tend to be larger)

Fig 4.5 Highlighting Text: change the type family

4. Change color of text (cyan, magenta or black)

5. Place a field of color at the back of the text

best to maintain the left reading axis (right example) to ensure readability

Fig 4.6 With and without indentation

Left with indentation, reading axis is not being broken

Right without indentation, reading axis is being broken

Typography: Text / Headline within Text

HIERARCHY

A Head

indicates a clear break between the topics within a section
Example (Fig 00): in bold, extended to the left of the text, larger than the text, in small caps

Fig 4.7 A Head

B Head

subordinate to A heads
using force line breaks (leading space)
indicate a new supporting argument or example for the topic at hand
Example (Fig 00): in small caps, italic, bold serif, bold san serif

Fig 4.8 B Head

C Head

highlight specific facets of materials within B head text
followed by at least an em space
Example (Fig 00): in small caps, italic, serif bold, san serif bold

Fig 4.9 C Head

Typography: Text / Cross Alignment

Fig 4.10 Cross Alignment

Headline leading point → body text leading point times 2

WEEK 5

Typography: Letters / Understanding Letterforms

The uppercase letterforms below suggest symmetry, but in fact they are not symmetrical

Fig 00 Uppercase letter 'A' in Baskerville

two different stroke weights
each bracket connecting the serif to the stem has a unique arc

Fig 5.2 Uppercase letter 'A' in Univers

the stroke on the left is slightly thinner than the right

Fig 5.2 Comparison between letter 'a' in Helvetica and Univers

Typography: Letters / Maintaining x-height

Curve strokes must rise above the median (or sink below the baseline) → to appear to be the same size

Fig 5.3 Letters with curve stroke rise above median / sink below baseline

Typography: Letters / Form / Counterform

Develop a sensitivity to the counterform

How easily we can read what has been set

Before designing a typeface → analyze existing typefaces from the same family

Typography: Letters / Contrast

Fig 5.4 Contrast in typography

Typography / Different Medium

Print Type vs Screen Type

Type for Print

Common typefaces used for print: Caslon, Garamond, Baskerville
elegant & intellectual characteristics
highly readable when set at small font size

Type for Screen

typefaces intended for use on the web are optimized
often modified to enhance readability and performance on screen
characteristics: taller x-height (/reduced ascenders and descenders), wider letterforms, more open counters, heavier thin strokes and serifs, reduces stroke contrast, modified curves and angles
typefaces specifically for screen: Georgia, Verdana

Hyperactive Link/ hyperlink

Font Size for screen

16-pixel text on a screen is about the same size as text printed in a book / magazine
Books: typically set as 10 points. Read at arm length → at least 12 points

System Fonts for Screen/ Web Safe Fonts

each device comes with its own pre-installed font selection
if the designer picked obscure, paid font family for site's design → the font you see would default back if you don't have the font already installed
Web Safe Fonts: Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond

Pixel Differential Between Devices

each device has different sizes of screen and different sized pixels

Static vs Motion

Static Typography

has minimal characteristic in expressing words
traditional characteristics (bold, italic) offer only a fraction of the expressive potential of dynamic properties
billboards, posters, magazines, fliers
the level of impression and impact they leave on the audience is closely knitted to their emotional connection with the viewers

Fig 6.1 Static typography

Motion Typography

temporal media offer typographers opportunities to "dramatize" type, for letterforms to become "fluid" and "kinetic" (Woolman and Bellantoni, 1999)
animation, motion graphic
overlaid onto music videos & advertisements → often set in motion following the rhythm of a soundtrack

INSTRUCTIONS

Task 1: Exercises - Type Expression

In exercise one, we are given 10 typefaces and we are to design 4 words out of the top 7 words using the typefaces given.

Fig 7.1 Top 7 words to design

1. Sketches

Fig 7.2 Sketches of Terror & Space (3.9.2021)

Fig 7.3 Sketches of Bark & Glitch (3.9.2021)

The words I chose to design are terror, space, glitch and bark. I try not to distort the characters too much or use illustrations while sketching, as we are not allowed to do so. I find it challenging because I only have limited knowledge about Typography. Thus, I tried searching for the definitions of each word before start sketching and looked through some pass artwork done by seniors. Finally, I came up with some ideas and I am quite satisfied with them.

2. Digitization

1)Terror

Fig 7.4 'Terror' Sketch (3.9.2021)

Among three of my sketches for the word 'terror', I personally like the second design the most. So, I immediately try digitizing it first.

Fig 7.5 'Terror' digitized version (3.9.2021)

I intended to make the letter 'T' huge, and 'e-r-r-o-r' really small to make a strong contrast. Besides, I changed the baseline and spacing of 'e-r-r-o-r', and rotate each of them slightly to show that they are running away from the 'T'. The shadow in the first version (left) looks weird, so I adjusted it a little and got the better outcome (right).

Fig 7.6 Another version of 'Terror' (10.9.2021)

In class, Mr Vinod suggested to put 'e-r-r-o-r' in one line. After trying, I think the original one looks better, and I wanted the letters look like they are escaping. So, I decided not to change it.

2) Space

Fig 7.7 'Space' Sketches (4.9.2021)

I decided to digitize both the sketches shown in Fig 5.7 and see how they will look like.

Fig 7.8 Two versions of 'Space' (4.9.2021)

I think the one on the left turns out better. I used Serifa for this design and I really like it, it looks like the font of a typewriter. The right one, I didn't manage to find a typeface that suits the letter 'S'. I think it looks okay, but it doesn't brings the meaning of 'space' too much. So, I will use the one on the left.

3) Bark

Fig 7.9 'Bark' Sketch (3.9.2021)

For bark, I like the second design the most, as it shows more strength. The reason why I made the direction of the word from the bottom left to the upper right of the frame is because I want to show that 'the dog' is barking at something taller than it.

Fig 7.10 Two versions of 'Bark' (3.9.2021)

I tried 2 typefaces for the word 'bark', one is Univers (left) and the other is Futura (right). I couldn't decide which to use, as I think both of them feel like bark, but they sound different. I asked for feedback from my family and friends, majority like the one on the left. For me, I think the left one is more strong, it's like a guard dog. While the one on the right is like a friendly dog. After considering thoroughly, I decided to use the left one.

Fig 7.11 'Bark' Comparison (10.9.2021)

During class, Mr Vinod said that the 'bark' on the left in figure 6.10 is okay, but can be better. Hence, I tried changing the perspective of it to exaggerate the smaller part and the bigger part of the word. I think it looks better than before.

4) Glitch

Fig 7.12 'Glitch' Sketches (4.9.2021)

I think both of the sketches feel 'glitchy', but I can't really make a firm stand. Thus, I digitized both of them and I'll make my final decision after that.

Fig 7.13 Two versions of 'Glitch' (4.9.2021)

After digitizing, the right one seems to look more 'glitchy'. I added more words behind it to make it look like it's malfunctioning. The left one, however, seems to be like 'slice'. I don't really like the outcome. Hence, I decided to proceed with the one on the right.

Fig 7.14 Another version of 'Glitch' (10.9.2021)

I was given feedback that my design for 'glitch' can be better. So, I came up with another design inspired by my sketches. I used an exclamation mark instead of an 'i' to indicate glitch. I tried playing around with the opacity and overlap words to make a glitchy feeling. I think both colors work, but when it is placed together with my other three artwork, the left one seems to be more balanced. So, I decided to use the left one.

Final Type Expression

Fig 7.15 Final Type Expression - JPEG (10.9.2021)

Fig 7.16 Final Type Expression - PDF (10.9.2021)

3. Animate

Fig 7.17 'Terror' GIF first attempt (10.9.2021)

I decided to animate the word 'terror'. I made 'e-r-r-o-r' running away from 'T', but I think I can add a few frames in front to make the meaning of terror stronger.

Fig 7.18 'Terror' GIF second attempt (16.9.2021)

I made the letter 'T' from small to big, and 'e-r-r-o-r' are afraid of the huge T, so they run away. I think the meaning of terror looks clearer in this version compared to the first one (Fig 7.17), but the size of 'T' should be smaller at the beginning.

Fig 7.19 'Terror' GIF third attempt (16.9.2021)

After some adjustment for the letter 'T', this looks better. Compared to the second one (Fig 6.18), the 'T' gives a scary feeling instead of just scaling up size.

Fig 7.20 Final Animation Timeline: 18 frames (16.9.2021)

There are 18 frames in total for this GIF, which I think is average amount for this exercise.

Final Animated Type Expression

Fig 7.21 Final Animated Type Expression -Terror (17.9.2021)

Task 1: Exercise 2 - Text Formatting

In exercise 2, we are tasked to do text formatting and create a layout in Adobe InDesign.

Kerning & Tracking

Fig 8.1 After kerning & tracking (19.9.2021)

Fig 8.2 Before kerning & tracking (19.9.2021)

Fig 8.3 Space between 'Moey' and 'Jo' before and after kerning (19.9.2021)

Fig 8.4 'Moey' before and after kerning (19.9.2021)

Exercise 2 - Text Formatting

Fig 8.5 Ragging before adjustment (19.9.2021)

Fig 8.6 Ragging after adjustment (19.9.2021)

Fig 8.7 Screenshot of Hidden Characters (19.9.2021)

Fig 8.8 Layout progress (21.9.2021)

I actually like layout 2 because the composition is unusual. However, I realized that the reading flow is messed up, and it does not show cross alignment. Layout 1 is has strong visual hierarchy and flow, but it is almost the same as the demonstration. After comparison, I think layout 4 will be the best choice.

Fig 8.9 Layout 1 (21.9.2021)

Fig 8.10 Layout 2 (21.9.2021)

Fig 8.11 Layout 3 (21.9.2021)

Fig 8.12 Layout 5 (21.9.2021)

Fig 8.11 Layout 4 (21.9.2021)

Typeface: ITC New Baskerville (Roman, Bold and Italic)

Font Size: 28 pt (headline), 15 pt (sub-headline), 10 pt (body text, caption)

Line Length: 64 characters

Leading: 12 pt (body text), 24 pt (headline)

Paragraph Spacing: 12 pt

Alignment: Left alignment

Fig 8.12 Screenshot of hidden characters - Layout 4 (21.9.2021)

Amendment

I was given feedback that my layout is lack of exploration. So I tried working on layout 2 (Fig 8.10)

Fig 8.13 Revised version 1 of layout 2 (24.9.2021)

I tried rearranging the composition. The reading flow is now more fluent, but it doesn't show cross alignment in the body text and I think the composition can be better.

Fig 8.14 Revised version 2 of layout 2 (24.9.2021)

Fig 8.15 Revised version 3 of layout 2 (24.9.2021)

Fig 8.16 Revised version 4 of layout 2 (24.9.2021)

After a few adjustments, this version looks better. I think the arrangement of the images are quite interesting, cross alignment in body text can also be seen.

Typeface: ITC New Baskerville (Roman and Bold)

Font Size: 28 pt (headline), 15 pt (sub-headline), 10 pt (body text, caption)

Line Length: 64 characters

Leading: 12 pt (body text), 24 pt (headline)

Paragraph Spacing: 12 pt

Alignment: Left alignment

Fig 8.18 Screenshot of hidden characters and alignment (24.9.2021)

Final Text Formatting

Fig 8.17 Final Text formatting - JPEG (24.9.2021)

Fig 8.18 Final Text Formatting - PDF (24.9.2021)

FEEDBACK

WEEK 1

General Feedback:

The lecturer advises us to stick the default theme of blogger, as we have not mastered certain design skills.

WEEK 2

General Feedback:

I am advised to use a darker shade of pencil (5B/6B) while doing pencil sketches so that the sketches can be seen clearly in the pictures. Avoid cutting a space into half exactly diagonally, as the contrast looks disturbing. Blog should be updated consistently starting from week 1. Be aware of the hierarchy of each title (heading, sub-heading...), so that the blog will be more pleasing to the eyes.

Specific Feedback:

For terror, design 1 and 2 are okay. Design 1 for space is good, and design 3 looks interesting. Design 2 for bark shows more strength. As for glitch, design 1 and 2 are okay, but needs to work on. Change blog theme to another color instead of white, so images with white background can be seen.

WEEK 3

General Feedback:

This exercise is not just to show our idea of each word, but also how it present in the frame, and even how the four artwork present. Blog and feedback sheet should be updated as soon as we receive feedback.

Specific Feedback:

Terror is good, but can try to make 'e-r-r-o-r' in one line. Space is great. Bark and glitch are both okay, but can be better.

WEEK 4

General Feedback:

For the GIF, we should not be dependent on graphical elements. We should learn to give feedbacks on others' work, and we will get to learn while doing this.

Specific Feedback:

The shadow and the size of the letter 'T' does give the impression of terror, the little 'e-r-r-o-r's jumping up and down is also quite good. There is also a sense of perspective.

WEEK 5

Specific Feedback:

Exercise 1 is done well. Layout for exercise 2 is lack of exploration, can be better. Good e-portfolio progress - well organised! Excellent documentation and progress evidences! Keep it up!

REFLECTION

Experience:

I enjoyed doing the exercises a lot, though it was difficult at the beginning. In exercise 1, what I found the most difficult is the sketching part. I don't really have much ideas, I just tried sketching whatever I can think of without distortion. After getting my sketches done, it was a lot more easier. My favorite part in exercise 1 is animating the type expression. It was a little hard at the beginning, but I got used to it by several tries. Exercise 2 was a bit more challenging compared to exercise 1, but I also had fun doing it. When I see the text becoming something more pleasing to the eyes, I felt stress is being released.

Observations:

I found out that I produce better work by asking others' opinions instead of doing the whole thing on my own. Pre-recorded short lectures made my learning more effective, because I am able to stay focused throughout the video. I also discovered that I am able to remember what was being taught by taking notes while watching the lectures.

Findings:

I realized that I am weak at giving feedback to others verbally, or make my opinion clear. I think I should learn more vocabulary in order to express my thoughts clearly. Also, I should practice jotting down key words of my opinion even though I am not asked to give feedback so that I can improve.

My sensitivity towards typefaces isn't strong enough, sometimes I might not be able to know which typeface looks better. What I can do is to spend more time studying the characteristic of the 10 typefaces and how each of them feel.

Typography / Task 1: Exercise 1 & 2

Jump Links

WEEK 1

Typography: Development / Timeline

3. Blackletter to Gutenburg's type

4. Humanist script to Roman type

5. Text type classification

1475 Oldstyle:

1500 Italic:

1550 Script:

1750 Transitional:

1775 Modern:

1825 Square Serif / Slab Serif:

1900 Sans Serif:

1990 Serif/Sans Serif:

WEEK 2

Typography: Basic / Describing letterforms

Typography: Basic / The font

Typography: Basic / Describing Typefaces

Typography: Basic / Comparing Typefaces

Typefaces given:

WEEK 3

Typography: Text / Tracking: Kerning and Letterspacing

Typography: Text / Formatting Text

Typography: Text / Texture

Typography: Text / Leading and Line Length

Typography: Text / Type Specimen Book

Type Specimen Book

WEEK 4

Typography: Text / Indicating Paragraphs

Typography: Text / Widows and Orphans

Typography: Text / Highlighting Text

Typography: Text / Headline within Text

Typography: Text / Cross Alignment

WEEK 5

Typography: Letters / Understanding Letterforms

Typography: Letters / Maintaining x-height

Typography: Letters / Form / Counterform

Typography: Letters / Contrast

Typography / Different Medium

Font Size for screen

System Fonts for Screen/ Web Safe Fonts

Pixel Differential Between Devices

Static vs Motion

1. Sketches

2. Digitization

1)Terror

2) Space

3) Bark

4) Glitch

Final Type Expression

3. Animate

Final Animated Type Expression

Kerning & Tracking

Exercise 2 - Text Formatting

Amendment

Final Text Formatting

WEEK 1

WEEK 2

WEEK 3

WEEK 4

WEEK 5

Comments

Post a Comment

Popular posts from this blog