26.09.2023 - 24.10.2023 | Week 1 - Week 5

Maisarah binti Mohd Sufian | 0358458

Typography | Bachelor of Design (Hons) in Creative Media

Task 1: Exercise 1 & 2

___________________________________________________________________________________

LECTURES

Week 1 - Lecture 0, Lecture 1

Typography = the act of creating letters/typefaces

- Influences all aspects of text/design down to the eligibility and appeal, aiding in effective communication to the viewer/reader.

Typeface = The entire family of the distinct typefaces that do not share characteristics (Georgia, Arial, Times New Roman, etc.)

Font = Individual font or weight within the typeface (xx Bold, xx Italic, etc.)

Early letterform development: Phoenician to Roman

Fig. 1.1 The development of Phoenician letters to Roman letters.

The development of uppercase letterforms were influenced by the tools and materials used to write (wet clay and sticks, stone and chisel).

Fig. 1.2 Evolution from Phoenician letter.

Phoenicians (Semitic people in general) wrote from right to left.

Fig. 1.3 Boustrophedon writing style.

The Greeks developed 'boustrophedon' (how the ox ploughs) where the writing style alternated form right to left and left to right for every line.

Fig. 1.4 Greek fragment, stone engraving.

They did not use spacing or punctuation (like the Phoenicians), the orientation of the letterforms changed with the direction of reading.

Etruscan carvers drew out writing based on their tool which altered the weight and broadness of their strokes before being inscribed.

Fig. 1.5 Late 1st Century B.C.E., Augustan inscription in the Roman Forum, Rome.

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

Square capitals were used in Roman monuments, with serifs and variety of stroke widths achieved by holding a reed pen at a 60 angle off the perpendicular.

Fig. 1.6 4th or 5th Century: Square capitals.

Rustic capitals were a compressed version of square capitals used to write quicker, save parchment and were less legible. The pen or brush was held at a 30 angle off the perpendicular.

Fig. 1.7 Late 3rd-4th Century: Rustic capitals.

Roman cursive was used for everyday transactions and simplified for speed. This introduced lowercase letterforms.

Fig. 1.8 4th Century: Roman Cursive.

Uncials were small letters, integrating both uppercase and lowercase in the writing style and were more readable in small sizes than rustic capitals.

Fig. 1.9 4th - 5th Century: Uncials

Half-uncials were completely in lowercase letterforms as a further formalization of the cursive hand.

Fig. 1.10 C. 500: Half-uncials.

Charlemagne entrusted and edict in 789 to standardize all ecclesiastical texts to Alcuin of York, Abbot of St Martin of Tours that rewrote texts using both majuscules, minuscules, capitalization and punctuation.

Fig. 1.11 C. 925: Caroline minuscule.

Blackletter to Gutenberg's type

Blackletter or textura was popular in northern Europe whereas 'rotunda' was popular in the south. The humanistic script in Italy is based on Alcuin's minuscule.

Figure 1.12 C. 1300: Blackletter (Textura).

Gutenberg's type mold required a different negative impression for each letterform, marshaled from his skills in engineering, metalsmithing and chemistry, mimicking the work of the Blackletter of northern Europe.

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

Text type classification

1450 Blackletter (Cloister Black, Goudy Text)

Fig. 1.14 Example of Blackletter letterform.

The earliest printing type.

1475 Oldstyle (Bembo, Calson, etc.)

Fig. 1.15 Example of Oldstyle letterform.

Based upon Caroline minuscule and uppercase letterforms inscribed in Roman ruins.

1500 Italic

Fig. 1.16 Example of Italic letterform.

Complements roman forms.

1550 Script (Kuenstler Script, Mistral, etc.)

Figure 1.17 Example of Script letterform.

Not entirely appropriate for paragraphs but accepted in shorter applications.

1970 Transitional (Baskerville, Century, etc.)

Fig. 1.18 Example of Transitional letterform.

A refinement of oldstyle with exaggerated thick to thin relationships.

1775 Modern (Bell, Bodoni, etc.)

Fig. 1.19 Example of Modern letterform

Further rationalization of oldstyle with extreme thick and thin strokes and unbracketed serifs.

1825 Square Serif / Slab Serif (Clarendon, Serifa, etc.)

Fig. 1.20 Example of Square Serif / Slab Serif letterform.

Developed for heavy type in commercial printing.

1900 Sans Serif (Grotesk, Helvetica, etc.)

Fig. 1.21 Example of Sans Serif letterform.

Eliminated all serifs and only became wide-spread in the 20th century due to it being less visually appealing.

1990 Serif/Sans Serif (Rotis, Scala, etc.)

Figure 1.22 Example of Serif/Sans Serif letterform.

Includes both serif and sans serif alphabets.

In our face to face lecture, Mr. Vinod briefed us on the module outcomes, class rules, e-portfolio and our first task with advice.

Week 2 - Lecture 2

Text / Tracking: Kerning and Letterspacing

Kerning = Automatic adjustment of space between letters.

Letterspacing = Add space between the letters.

Tracking = Removal of space in a word.

Fig. 2.1 Example of letter pairings without kerning (left) and with kerning (right).

Fig. 2.2 Example of normal tracking, loose tracking and tight tracking.

Tracking can affect the readability of certain words due to the cognitive patterns our minds use to recognize it.

Letterspacing between uppercase letters are common, however letterspacing between lowercases are highly discouraged due to the design of the typeface that has already taken the letterspacing into consideration.

Fig. 2.3 Example of the counterforms between letterforms

When the tracking or kerning is adjusted, the counterforms are broken which reduces the readability of the word.

Fig. 2.4 Example of normal tracking (left) and loose tracking (right) in text.

The readability of the left paragraph is greater than the text on the right.

Fig. 2.5 Example of tight tracking in text.

Visually, the words are harder to recognize due to the lack of negative spaces.

Text / Formatting Text

Flush Left: Mirrors the asymmetrical experience of handwriting, forming a ragged right.

Centered: Imposes symmetry, assigning equal value and weight to both ends of the lines, forming a ragged right and left.

Flush Right: Places emphasis on the end of a line, forming a ragged right.

Justified: Similar to centering, but imposes a symmetrical shape on the text by expanding or reducing spaces between words or letters, forming 'rivers' of white space running vertically through the text.

*'Rivers' should be amended is not encouraged.

Type should draw attention to the words, not the type itself which is deemed as an interference.

Figure 2.6 Text in an invitation to a wedding in different formats.

The text on the right uses a typeface that is appropriate to the occasion, whereas the text on the left uses a typeface that is more legible with unique formatting.

Text / Texture

Different typefaces suit different messages, the texture of a typeface affects how the text is felt and interpreted.

Fig. 2.7 Anatomy of a typeface.

Characteristics such as the x-height and stroke width affects the visual presentation of the text.

Fig. 2.8 Comparing various typefaces.

Text / Leading and Line Length

Easy, prolonged reading and comprehension should be kept in mind when setting text type.

Type size: Should be large enough to be read at arms length.

Leading: Text should not be set too tightly or loosely which could easily distract or make the reader lose their place.

Line length: Should be kept between 55-65 characters as to not impair reading.

Fig. 2.9 Examples of appropriate and not appropriate leading.

Fig. 2.10 Comparisons of various leadings in text.

Text / Type Specimen Book

Judgements of typefaces should be made on the intended output such as on screen or a physical copy. Type specimen books help with making this judgements by providing visual examples of how the typeface will appear for reference.

Fig. 2.11 Example of a type specimen book.

Fig. 2.12 Examples of text composition.

Text composition should create a field occupying a page or screen, ideally having a middle gray value (left), not a series of stripes (right).

Fig. 2.13 Comparison of different leading in text.

Enlarging text to 400% can help to distinguish the relationship between the lines of text which can be unrecognizable at 100%.

Week 3 - Lecture 3

Text / Indicating Paragraphs

Pilcrow (¶)

Fig. 3.1 Example of the pilcrow in text.

Seldomly used today, more common in medieval manuscripts.

Fig. 3.2 Example of the use of line space.

Line spacing should be equal to paragraph space, ensuring cross-alignment across columns of text.

Fig. 3.3 Comparison of line spacing vs leading.

Fig. 3.4 Example of the standard indentation.

The indent should be the same size as the line spacing or the point size of the text.

Fig. 3.5 Example of extended paragraphs.

Creates unusually wide columns of text however can have strong compositional or functional reasons for being chosen.

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 new column.

Fig. 3.6 Widows and orphans in text.

Widows and orphans in justified texts are unpleasant, whereas flush right and ragged left text is more forgiving.

Widows can be solved by rebreaking the line endings throughout the paragraph. Orphans however must be corrected by ensuring no column of text starts with the last line of the preceding paragraph.

Text / Highlighting Text

Fig. 3.7 Examples of how text can be highlighted.

Different kinds or emphasis require different kinds of contrast. In the case of using different typefaces, the size of the complimentary typeface might need to be adjusted to match the x-height of the main typeface.

Fig. 3.8 Comparison of different placements of field of colour.

When highlighting text using a field of colour, the left reading axis should be maintained (right) to ensure good readability.

Fig. 3.9 Comparison of different placements of a typographic element.

Certain typographic elements should be placed outside the left margin of a column of type (right) as opposed to indenting to maintain a strong reading axis.

Fig. 3.10 Examples of the usage of quotation marks.

Quotation marks can create a clear indent, breaking the left reading axis. This can be compared with the text on the bottom which does not break the left reading axis.

Text / Headline within Text

Headlines should clearly show the relative importance within the text and their relationship with each other.

Fig. 3.11 Examples of 'A' heads in text.

Indicates a clear break between the topics within a section.

Fig. 3.12 Examples of 'B' heads in text.

Subordinate to A heads, B heads indicate new supporting arguments or examples for the current topic. Thus, they should not be as strong as A heads.

Fig. 3.13 Example of 'C' heads in text.

Highlights specific facets of material within a B head text and do not interrupt the flow of reading, followed by an em space for visual seperation.

Fig. 3.14 Examples of sequences of subheads.

Putting together a sequence of subheads creates a hierarchy, which can be expressed in many ways.

Text / Cross Alignment

Cross aligning headlines and captions with the text reinforces the structure of the page.

Fig. 3.15 Example of cross alignment of text.

Ideally, cross alignment should look like the text on the left as opposed to the one on the right.

Week 4 - Lecture 4

Basic / Describing Letterforms

Specific typefaces can be identified more easily when we familiarise ourselves with the components of a letterform.

Baseline = Imaginary line as the visual base of letterforms.

Median = Imaginary line defining the x-height of letterforms.

X-height = Height in any typeface of the lowercase 'x'.

Fig. 4.1 Components of a letterform.

Capital letters are slightly shorter than the ascender height as an optical adjustment to make the capital letter look equal to the height of ascending letter stems because it is wider than lowercase letterforms.

Stroke = A line that defines the basic letterform.

Fig. 4.2 Letterform strokes.

Apex/Vertex = A point created by joining two diagonal stems.

Fig. 4.3 Apex (top) and vertex (bottom) highlighted

Arm = Short strokes off the stem of the letterform (horizontal or inclined upward)

Fig. 4.4 Horizontal arm (F, T) and inclined upward arm (Y) highlighted.

Ascender = Portion of a lowercase letter stem that exceeds the median height.

Fig. 4.5 Stems highlighted.

Barb = The half-serif finish on some curved strokes.

Fig. 4.6 Barbs highlighted.

Beak = The half-serif finish on some horizontal arms.

Fig. 4.7 Beaks highlighted.

Bowl = The rounded form that describes a counter, may either be open or closed.

Fig. 4.8 Bowls highlighted

Bracket = The transition between the serif and the stem.

Fig. 4.9 Brackets highlighted.

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

Fig. 4.10 Cross bars highlighted.

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

Fig. 4.11 Cross strokes highlighted.

Crotch = The interior space where two strokes meet.

Fig. 4.12 Crotch highlighted.

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

Fig. 4.13 Descenders highlighted.

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

Fig. 4.14 Ears highlighted.

Em/en = Em refers to the distance equal to the size of the typeface, en is half the size on an em.

Fig. 4.15 Em/en highlighted.

To put it more simply, em is the gap between words or size of em-dash indication.

Finial = The rounded non-serif terminal to a stroke.

Fig. 4.16 Finial highlighted.

Leg = A short stroke off a stem either inclined at the bottom or downwards.

Fig. 4.17 Bottom leg (L) and downwards leg (K, R) highlighted.

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

Fig. 4.18 Examples of ligatures.

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

Fig. 4.19 Link highlighted.

Loop = The bowl created in the descender of the lowercase G (in some typefaces).

Fig. 4.20 Bowl highlighted

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

Fig. 4.21 Serifs highlighted.

Shoulder = The curved stroke that is not part of a bowl.

Figure 4.22 Shoulders highlighted.

Spine = The curved stem of the S.

Fig. 4.23 Spine highlighted.

Spur = The extension that articulates the junction of the curved and rectilinear stroke.

Fig. 4.24 Spurs highlighted

Stem = The significant vertica or oblique stroke.

Fig. 4.25 Stems highlighted.

Stress = The orientation of the letterform indicated by a thin stroke in round forms.

Fig. 4.26 Stresses highlighted

Swash = The flourish that extends the stroke of the letterform.

Fig. 4.27 Swashes highlighted.

Tail = The curved diagonal stroke at the finish of certain letterforms.

Fig. 4.28 Tail highlighted.

Terminal = The self-contained finish of a stroke without the serif.

Figure 4.29 Terminals highlighted.

Terminals may be flat, flared, acute, grave, concave, convex or rounded as a ball or teardrop.

Basic / The font

Uppercase = Capital letters including certain accented vowels (a/e and o/e ligatures).

Lowercase = Include the same characters as uppercase.

Small Capitals = Uppercase letterforms drawn to the x-height of the typeface (primarily found in expert sets of serif fonts)

Fig. 4.30 Comparison between small capitals and uppercase letters.

Can be used to make text more uniform.

Uppercase Numerals = Aka lining figures, numerals that are the same height as uppercase letters set to the same kerning and width.

Lowercase Numerals = Aka old style figures or text figures, numerals that are set to the x-height with ascenders and descenders.

Italic = Italic forms refer back to 15th century Italian cursive handwriting.

Punctuation, misc. characters should be familiarized with when choosing a typeface as they can vary.

Ornaments = Used as flourishes in invitations or certificates.

Fig. 4.31 Example of ornaments.

Basic / Describing Letterforms

Roman = Uppercase forms are derived from inscriptions of Roman monuments.

Book = Slightly lighter stroke in Roman.

Oblique = Based on Roman form of a typeface.

Boldface = A thicker stroke than a roman form. (also called semibold, medium, black or extra bold)

Light = A lighter stroke than the Roman form.

Thin = Even lighter strokes of Light.

Condense = A version of the Roman form.

Compressed = Extremely condensed Roman forms.

Extended = An extended variation of the Roman form.

Fig. 4.31 Different letterforms within a typeface.

*Lecture 5 onwards recorded in Task 2
___________________________________________________________________________________

TASK 1 - Exercise 1 (Type Expression)

Instructions

Fig. 5.1 Module Information.

We are required to compose and express 4 words, using a given set of 10 typefaces through research and sketches without graphic elements or distorting the letterforms.

I have chosen to sketch out more than 4 words to play around with and find which I can express best.

1. Research

Figure 5.2 Examples of expressive typography work found on Pinterest.

By searching 'Expressive Typography' on Pinterest I could get an idea of how I can alter the elements of the typefaces given to fully express the words based on my sketches.

2. Sketches

Fig. 5.3 My sketches of the words 'windy', 'dive', 'chop', 'stab', 'roar' and 'shock'. (27/09/23)

I sketched out my ideas in Procreate and presented them during class.

Most of my sketches, although did not involve graphic elements or distorted letterforms, relied on pictorials which affected the legibility of the text. I was advised that sometimes skewing or flipping letters were not always necessary and I should focus more on readability.

The sketches preferred by Ms. Hsin were #1, #3, #4, #5 and #13. I was initially suggested to utilize the letterforms for #13 by using the descender of the 't' and the ascender of the 'a' to hook together, however Mr Vinod preferred sketch #14 and urged me to stick with that.

I proceeded with #1, #4, #5 and #14 for digitisation.

3. Digitisation

Fig. 5.4 Digitisation of my chosen sketches. (3/10/23)

Mr. Vinod suggested I use Futura for the words 'stab' and 'roar' as the letterforms have a clean and pointed look which was suitable for what I wanted to express.

I revised what I did for the words 'windy' and 'shock' during digitisation as I played around using the tools in Adobe Illustrator.

When presented, Ms. Hsin taught me how to refine the connecting points for the letterforms in 'windy' to make it smoother and seamless by outlining the text and adjusting the anchor points.

4. Animation

Fig. 5.5 Frame artboards in Adobe Illustrator. (10/10/23)

Fig. 5.6 Photoshop timeline. (10/10/23)

My timeline has more frames than my artboards, as I used photoshop to add more frames between #1 and #2.

Fig. 5.7 Final animation. (17/10/23)

I initially was going to animate the word 'windy', but I personally found that it did not express the word as well. I then chose to do the word shock. Mr Vinod suggested that I push the word out of the boundaries of the box and have it fill up the entire space however there were limitations such as colour (layers were getting too light and were not visible) and it felt more like expressing the word 'bleed'. Instead, I chose to make it appear as if the word is creeping up and suddenly move sporadically to 'shock' the reader.

Task 1 - Exercise 2 (Text Formatting)

Fig. 6.1 Text formatting with kerning. (17/10/23)

Fig. 6.2 Text formatting without kerning (17/10/23)

Fig. 6.3 Text formatting with kerning and without kerning overlayed. (17/10/23)

I did very minimal kerning as the letterforms in my name appeared mostly uniform.

Before moving on to the next stage of this exercise, I watched the lecture recordings on text formatting and made sure to take note of these information:

Leading: +2 of point size (+2.5 or +3 depending on the typeface).

Body text: Negative and positive should be equal to obtain middle gray value

Line length: 55 - 65 (body text), 35 (subtext).

Headings: x2 point size and leading of body text.

- The same text of information should have the same text width. Different widths can confuse the reader into thinking it is separate pieces of information.

- Do not exceed +3/-3 for tracking to reduce ragging (line).

- Turn off hyphenation. If not, there should not be too many tracking adjustments.

- Either use left align or left justify (left alignment is preferred).

- If using justify, ensure there aren't many rivers.

- Maintain cross alignment.

- Avoid widows and orphans.

With this in mind I created 4 variations of formatted text.

Fig. 6.4 My Variations of formatted text. (22/10/23)

The feedback I received from Ms Hsin was:

- 1 and 2 have good balance but 4 was too heavy and overwhelming on the right side.

- The typefaces used in the heading can be switched while maintaining the contrast and emphasis on the word 'Helvetica'.

I decided to proceed with 1 to make further refinements.

Fig. 6.5 Before making adjustments. (22/10/23)

Fig. 6.6 After making adjustments. (24/10/13)

I decided to change the font for 'I am' from Futura to Adobe Caslon Pro and the font for 'Helvetica' from Adobe Caslon Pro to Futura that is similar to the Helvetica font. I also changed my alignment from left alignment to left justify as I felt it was more suitable.

Final Layout

Fig. 6.7 Final layout without grid. (25/10/23)

Fig. 6.8 Final layout with grid. (25/10/23)

Fig. 6.9 Final text formatting without grid. (25/10/23)

Fig. 6.10 Final text formatting with grid. (25/10/23)

HEAD
Fonts: Futura Std, Adobe Caslon Pro (Bold)

Type Size: 48 pt
Leading: 48 pt
Paragraph spacing: 12 pt

BODY
Fonts: Futura Std, Adobe Caslon Pro (Italic, Bold [captions])
Type Size: 10 pt
Leading: 12 pt
Paragraph spacing: 12 pt
Characters per-line: 55 - 62
Alignment: Left Justify

Margins: 12.7 mm top, 12.7 mm left + 12.7 mm right + 97.4 mm bottom
Columns: 2
Gutter: 4.2 mm

___________________________________________________________________________________

FEEDBACK

Week 5:

Specific feedback: #2 #1 balanced okay, #4 rightside heavy, explore more typefaces for the title to contrast and emphasize (make helvetica actually look like helvetica).

Week 4:

General feedback: Include subpoints of what is to be added in reflections in e-portfolio.

Week 3:

General feedback: Include weekly feedback in e-portfolio. Specific feedback: The connecting points of my letterforms can be refined using the pen tool, Mr Vinod suggested making the typeface in my animation more exaggerated (pushing out of the square boundary).

Week 2:

General feedback: Further reading is compulsory every week, websites should be screenshotted and book covers should be shown in the e-portfolio. Sections must always be segregated with horizontal lines. Sketches should be numbered, labeled, described and dated. Specific feedback: I relied mostly on pictorials, which is discouraged and instead should focus more on legibility when expressing the word in my typeface. Skewing my letters are not always necessary and some of my sketches could have more interesting compositions.

Week 1:

General feedback: E-portfolio should be organised and updated consistently, further reading is necessary every week alongside lectures.

___________________________________________________________________________________

REFLECTION

Experience

The online lectures were easy to understand and I liked how I could follow along at my own pace throughout the week. The face to face sessions we had every week gave us ample time to work on our tasks and ask for feedback from the lecturers as these were the only sessions we could bring up questions to them.

Observation

Prior to understanding the process behind typography, the projects I worked on with little knowledge always had something that was off about it that I could not pinpoint. After learning and gaining information on the basics of text and how to create designs with them I was able to point out the problems in my work and fix them by applying the knowledge I obtained.

Findings

I found that if I did not continue further reading throughout the week, I easily forgot what aspects I should keep in mind of when working on a task. By brushing up my knowledge consistently I was able to keep up good performance and did not face much creative block.

___________________________________________________________________________________

Typography Task 1: Exercise 1 & 2

LECTURES

Week 1 - Lecture 0, Lecture 1

Early letterform development: Phoenician to Roman

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

Blackletter to Gutenberg's type

Text type classification

Week 2 - Lecture 2

Text / Tracking: Kerning and Letterspacing

Text / Formatting Text

Text / Texture

Text / Leading and Line Length

Text / Type Specimen Book

Week 3 - Lecture 3

Text / Indicating Paragraphs

Text / Widows and Orphans

Text / Highlighting Text

Text / Headline within Text

Text / Cross Alignment

Week 4 - Lecture 4

Basic / Describing Letterforms

Basic / The font

Basic / Describing Letterforms

TASK 1 - Exercise 1 (Type Expression)

Instructions

1. Research

Figure 5.2 Examples of expressive typography work found on Pinterest.By searching 'Expressive Typography' on Pinterest I could get an idea of how I can alter the elements of the typefaces given to fully express the words based on my sketches. 2. Sketches

3. Digitisation

4. Animation

Task 1 - Exercise 2 (Text Formatting)

Final Layout

FEEDBACK

Week 5:

Week 4:

Week 3:

Week 2:

Week 1:

REFLECTION

Experience

Observation

Findings

FURTHER READING

Early Evolution of Roman Letters

First Alphabets

Comments

Post a Comment

Figure 5.2 Examples of expressive typography work found on Pinterest.

By searching 'Expressive Typography' on Pinterest I could get an idea of how I can alter the elements of the typefaces given to fully express the words based on my sketches.

2. Sketches