Typography Task 1(Exercise)

4/4/2023 - 12/5/2023 (Week 1 - Week 6)

Seh Zi Qi/ 0355872/ Bachelor of Design(Honours) in Creative Media

Module Name: GCD 60104/ Typography

Task 1 (Exercises 1 & 2)

LIST

Lectures
Class Summaries
Exercise 1
Exercise 2
Feedback
Reflection
Further Reading

LECTURES

Lecture 1.1: Development/ Timeline

1000 B.C.E. - Phoenician:

Using sharp sticks or stones with chisels, they've made uppercase forms which are simple combinations of straight lines and pieces of circles.
Written from Right to Left.

900 B.C.E. - Greeks:

'Boustrophedon' was developed
Changed the direction where it's Right to Left and Left to Right.

100 B.C.E. - Roman

Etruscan carvers would draw the letterforms with paintbrushes before chiselling it into the marble, this changes the weight vertically or horizontally.

Fig 1.1, Phoenician to Roman writing development

3rd to 10th Century C.E. - Hand Scripts

Square Capitals [4th to 5th C.E.]:

Letterforms that have serifs that have added to the finish of the main strokes.
Width is achieved by using a reed pen held at a 60-degree angle off the perpendicular.

Rustic Capitals:

A compressed version of square capitals
Much faster and easier to write though harder to read.
Achieved by holding the pen at a 30-degree angle off the perpendicular.

Informal Lowercase Letterforms:

The forms of the square and rustic capitals were simplified due to the speed.

Uncials:

Letters that are one inch in height/one-twelfth of a foot in height.
Incorporated some aspects of the Roman cursive hand, especially A, D, E, H, M, U and Q.
The broad forms were much more readable in small sizes than the rustic capitals.

Half Uncials [2000 years after Phoenician]:

Further formalisations of the cursive hand
The formal beginning of formal lowercase letterforms, filled with both ascenders and descenders

Charlemagne:

Issued an edict to standardise all ecclesiastical texts.
Monks rewrote the texts using both majuscules (uppercase), minuscule, capitalisation and punctuation; this became the standard for calligraphy for a century.
This allows for clearer and better communication.

[Later on, different variations of the were formed in different parts of Europe which can be the result of different cultures, environments, tools and skills.]

Lecture 1.2: Type Classification

1450 Blackletter:

The earliest printing type.
The forms were based on hand-copying styles that were used for books in Northern Europe.
E.g. Cloister Black, Goudy Text

1475 Oldstyle:

These were based on the lowercase forms used by Italian humanist scholars for book copying and the uppercase letterforms found inscribed on Roman ruins.
E.g. Bembo, Caslon, Dante

1500 Italic:

Echos the contemporary Italian handwriting.
The first ever condensed and close-set italics.
Originally their own typeface, but was soon added to the complement Roman forms.

1550 Script:

Originally an attempt to replicate the engraved calligraphy forms.
Best not used in large and lengthy texts, but widely enjoyed in a shorter form/ application.
Forms can range from formal and traditional to casual and contemporary.
E.g. Kuenstier Script, Minstral, Snell Roundhand

1750 Transitional:

A refined version of Oldstyle forms, achieved by the advances in casting and printing.
Thick and thin relationships were exaggerated and the brackets were lightened.
E.g. Baskerville, Bulmer, Century, Time Roman

1775 Modern:

Represents the further rationalisation of Oldstyle letterforms.
Serifs were unbracketed and the contrast between thick and thin strokes was extreme.
E.g. Bell, Bodoni, Caledonia

1825 Square Serif/ Slab Serif:

Originally heavily bracketed serifs with little variation between thick and thin strokes; after they evolved, the brackets were dropped.
Used mostly in advertising where they were in need of a heavy type in commercial printing.
E.g. Clarendon, Memphis, Rockwell, Serifa

1900 Sans Serif:

This eliminates the serifs altogether.
Wasn't widespread until the beginning of the 12th century.
E.g. Akzidenz Grostek, Gill Sans, Helvetica

1990 Serif/ Sans Serif:

The most recent development.
Enlarges the family of typefaces which include both serif and sans serif alphabets.
E.g. Rotis, Scala, Stone

Fig 1.2, Text Type Classification

_______________

Lecture 2: Text part 1

2.1 Kerning and Letterspace

Kerning:

The automatic adjustment of space between letters.
Often mistaken for letterspacing, which is adding space between the letters.

Fig 2.1, Kerning

Tracking:

The addition and removal of space in a word or sentence.
Normal Tracking: Standard space between the letters that are suitable for paragraphs.
Tight Tracking: Minimal space between letters to reduce the readability of a paragraph.
Loose Tracking: Excessive space between letters that also reduce the readability of a paragraph.

Fig 2.2, Types of tracking

[Letterspacing uppercase letters have always been accepted while lowercase letters aren't so much. This is because lowercase letters have already been accounted for when it comes to letterspacing as this helps with the readability, while uppercase letters were meant to stand on their own.]

2.2 Formatting Text

!!IMPORTANT - Legibility is always the first priority.!!

Flush Left:

An asymmetrical handwriting/text where each line starts at the same point but ends wherever the last word on the line ends.
Spaces are consistent between words throughout the texts to create an even grey value.

Centred:

Symmetrical text is assigned with equal value and weight to both ends of any line.
This creates the text into shapes, making it more pictorial than it actually is.
May need line breaks to have the text not appear jagged.

Flush Right:

Emphasizes the end of a line as opposed to its start.
Useful in situations like captions or where relationships between text and image may be ambiguous.

Justified:

Similar to centring, it creates a symmetrical shape on the text which can be achieved either by expanding or reducing the spacing between words or letters.
The openness may produce 'rivers' where there's a lot of white space running vertically through the text.

Fig 2.3, Types of Text Formatting

2.3 Texture

Different typefaces suit different messages, as a good typographer knows which typeface best suits the message at hand.
Examples such as types with relatively generous x-height or heavy strokes that can produce a darker mass than ones with a smaller x-height or lighter stroke which can help with creating a successful layout.

Fig 2.4, Types of Text Texture

2.4 Leading and Line Length

!!GOAL - To be able to read prolonged text easier!!

Type Size:

Should be large enough to read easily even at arm's length.
If a typeface is 10pts, Leading will be either 12, 12.5 or 13pts.

Leading:

Tight Leading: causes vertical eye movement where readers can easily lose their position.
Loose Leading: creates striped patterns that distract the reader from the material.

Line Length:

Keep line length between 55 to 65 characters.
Shorter lines = lesser reading; longer lines = more reading

Fig 2.5, Leading and Line Length

2.5 Type Specimen Book

Shows different samples of typefaces in different sizes.
Ebooks provide an accurate reference for type, type size, type leading, type line length etc.

Compositional Requirements:

The text should be able to create a field to occupy the page or screen.
The ideal text would be to have a middle grey value than a series of stripes.
Enlarged to 400% to get a clear sense of relationships between descenders and ascenders.

Fig 2.6, Type Specimen Book

_______________

Lecture 3: Text Part 2

3.1 Indicating Paragraphs

Pilcrow:

A holdover from medieval manuscripts.
Used as a paragraph space which is seldom used today.

Line Space:

Ensured cross-alignment across columns of text, between the paragraphs.
If line space is 12pt, paragraph space is 12pt.
Difference between leading: takes into consideration the descender into another descender rather than just the space.

Standard Indentation:

Indent is the same size as line spacing or the point size of the text.
Best used when the text is justified.

Extended Paragraphs:

Creates unusually wide columns of text that, despite its problems, can have a strong compositional or functional paragraph if used correctly.
May be used in academic writing.

Fig 3.1, Ways to Indicate Text

3.2 Widows and Orphans

!!IMPORTANT - These must never happen/ avoid as much as possible!!

Widow:

A short line of type that's left alone at the end of a column of text.
Rebreaking line endings throughout the paragraph can help to make it less noticeably short.

Orphans:

A short line of type that's left alone at the start of a new column.
Careful consideration towards the column of texts that starts with the last line of a preceding paragraph can avoid orphan texts.

[For justified text, both widows and orphans are considered serious gaffes. While the flush right is more forgiving towards widows, it stays the same for the orphan texts.]

Fig 3.2, Widow and Orphan Texts

3.3 Highlighting Text

Ways to highlight text:

Italic
Bold (Sans serif font will become larger so reduce it by 0.5pt)
Variation in fonts
Coloured text
Placement of a field of colour at the back of the text
Bulletin points
"Quotation marks"

3.4 Headline within Texts

A subdivision within the text of chapters, to clearly signify to the reader the relative importance of the text and their relationships.

A Head:

Indicates a clear break between topics within a section.

B Head:

Indicates a new supporting argument or example for a topic at hand.
It doesn't interrupt the text as strongly as A Head does.

C Head:

Highlights a specific facet of material within B Head text.
Not made to interrupt the flow of reading.
Not as common as A and B Head.

[No single way to express the hierarchy within text therefore the possibilities are endless.]

Fig 3.3, A to C Headlines within Text

3.4 Cross Alignment

Reinforces the architectural sense/structure of a page while articulating the complimentary vertical rhythms.
Hard to maintain cross alignment with small type sizes while still possible with large type sizes; this can depend on the type of sizes it portrays such as 13 pts with 26 pts may match while 15 pts with 28 pts may not.

Fig 3.4, Cross Alignment Text

_______________

Lecture 4: Basics

Just like any type of craft, typography employs a number of technical terms which mostly describes specific parts of the letterforms.

Baseline: Imaginary line as the visual base of the letterforms.
Median: Imaginary line that defines the x-height of letterforms.
X-height: The height of the lowercase 'x'.
Stroke: Any line that defines the basic letterform.
Apex/Vertex: The point created that joins the two diagonal stems.
Arm: Short strokes off the steam of the letterform, either horizontal or inclined upward.
Ascender: The portion of the stem of a lowercase letterform that projects above the median.
Barb: The half-serif finish on some curved stroke.
Beak: The half-serif finish on some horizontal arms.
Bowl: The rounded form that describes a counter, may either be closed or open.
Bracket: The transition between the serif and the stem.
Cross Bar: The horizontal stroke in a lowercase letterform that joins two stems together.
Cross Stroke: The horizontal stroke in an uppercase letterform that joins two stems together.
Crotch: The interior space where two strokes meet.
Descender: A portion of the stem of a lowercase form that projects below the baseline.
Ear: The stroke extending out from the main stem or body of the letterform.
Em: The distance is equal to the size of the typeface.
En: Half of the distance of Em.
Finial: The rounded non-serif terminal to a stroke.
Leg: The short stroke off the stem of the letterform.
Ligature: The character formed by the combination of two or more letterforms.
Link: The stroke connecting the bowl and the loop of a lowercase G.
Loop: The bowl created in the descender of the lowercase G, only for some typefaces.
Serif: The right-angled or oblique foot at the end of the stroke.
Shoulder: The curved stroke that isn't a part of the bowl.
Spine: The curved stem of the S.
Spur: An extension that articulates the junction of the curved and rectilinear stroke.
Stem: The significant vertical or oblique stroke.
Stress: The orientation of the letterform, indicated by the thin stroke in round forms.
Swash: The flourish that extends the stroke of the letterform.
Tail: The curved diagonal stroke at the finish of certain letterforms.
Terminal: The self-contained finish of a stroke without a serif.

Fig 4.1, Basics of Text

4.2 The Fonts

To work successfully with type, it is best to work with a full font and know how to use it.

Types of Fonts:

UPPERCASE
lowercase
SMALL CAPITALS
Uppercase & lowercase Numerals
Italics
Punctuation, Miscellaneous
Ornaments ☺❤💀

4.3 Describing/ Comparing Typefaces

Once recognise the parts of a letterform, you can then apply them to identify different typefaces.

Types of Typeface:

Roman
Italic
Boldface
Light
Condense
Extended

Fig 4.2, Typefaces

4.4 Comparing Typefaces

These 10 typefaces represent 500 years of type design, having achieved two goals: easy readability and an appropriate expression of contemporary esthetics.

Fig 4.3, 10 Typefaces

Note the differences, the accumulation of choices can render each typeface unique. The variety in line weight, relative stroke widths and feelings can connote specific use and expressions.

Fig 4.4, Variation of 'a' and 'R'

As much as anything, it tells us how to feel about a certain type or typeface. Other designers' works may go throughout their careers using a limited amount of typefaces, even going to as low as one or two.

_______________

Lecture 5: Understanding

5.1 Letters

The uppercase letterforms below suggest symmetry but are in fact not symmetrical. With the Baskerville font, the two different stroke weights are more noteworthy; with each bracket connecting the serif to the stem, having a unique arc.

Fig 5.1, Baskerville 'A'

The uppercase letterforms below may appear asymmetrical, but using the grid and closer inspection, the width of the left slop is thinner than the right stroke. Both the previous font and this font, Univers, demonstrate the meticulous care that goes into creating letterforms that are harmonious and individually expressive.

Fig 5.2, Univers 'A'

The complexity of individual letterforms can be simmered down to 2 factors: the comparison of how the stems of the letterforms finish and how the bowls meet the stems. These can reveal the difference in letterforms.

Fig 5.3, Helvetica and Univers 'a'

5.2 Maintaining x-height

Generally described the size of the lowercase letterforms. However, the curved strokes, seen on the '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've adjoined.

Fig 5.4, Lowercase Letterforms

5.3 Form/Counterform

Just as important as recognising specific letterforms is developing a sensitivity to the counterform. When letters are joined to form words, the counterform includes the spaces between them. This is particularly crucial as lowercase letterforms, like 'r', have no counters; this determines how well words hang together or how readable it is.

Fig 5.5, Counterforms

5.4 Contrast

!!IMPORTANT - The MOST powerful dynamic in design!!

A format devised by Rudi Ruegg.

Fig 5.6, Examples of Contrast

_______________

Lecture 6: Screen and Print

Unlike in the past, typography today exists not only on paper but on a multitude of screens. This may affect the experience of typography as the page may be rendered which can change the appearance of the typeface.

6.1 Print Type

The most common typefaces used for prints are Print-Caslon, Garamond, and Baskerville. This is because their characteristics are elegant and intellectual, even highly readable in small font sizes.

Fig 6.1, Print Type Example

6.2 Screen Type

Typefaces are designed for the intended use on the web. They've modified it to enhance readability, this can include a taller x-height, 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 spacing. All of these serve the purpose of having overall better readability in non-print environments like ebooks.

Fig 6.2, Screen Type Example

Hyperlinks are clickable words, phrases or images that jump to new documents or new sections within the current document.
The font size for the screen should be 16 pixels as that's the same size printed on books or magazines; this accounts for reading distance.
Web Safe Fonts are fonts that appear across all operating systems, this small collection of fonts overlaps from Windows to Mac to Google. They include Open Sans, Lato, Ariel, Helvetica, Time New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond
Pixels Differential Between Devices:

Fig 6.3, Pixels Differential Between Devices

6.3 Static vs Motion

Static:

Has minimal characteristics in expressing words.
Traditional characteristics like bold and italic are often a fraction of the expressive potential of dynamic properties.
Used in billboards, posters, magazines etc.

Fig 6.2, Static Characteristics

Motion:

Temporal media offers typographers the opportunity to "dramatise" type, for letterforms to become more "fluid" and "kinetic".
Used in music videos and film productions.

Fig 6.3, The introduction to the film "Seven" by David Fincher

[Good design is dynamic, irrespective of the platform]

CLASS SUMMARIES

Week 1:

An introduction towards Typography and what we needed in this class.
The lecturer, Mr Vinod, explained to us what the Facebook group was used for and what tabs to look for when information is given, links for the feedback sheet, book list and lecture playlists were listed in the featured section of the tabs.
He also told us what to do such as make a blog spot for e-portfolio purposes and read the books given from the book list.
He then explained the first assignment which was Task 1 where we choose 4 words from the 7 that were given, to at least draw 3 sketches of each of the 4 words chosen by the next class and finish doing the headers for the e-portfolio.

Week 2:

Mostly gave feedback towards our drawn designs, using 4 rules to determine whether or not the design itself was either good, needed improvement or asked the teacher for more feedback.
Was told to write on the feedback sheet on Google Sheets.
After everything, he showed us how to use some of the functions in Adobe Illustrator and a pep talk to get us to start working and be better towards the future.

Week 3:

Did an online session where Mr Vinod gave feedback towards the e-portfolios and the 4 digitised versions of the chosen words.
Mr Vinod said that the e-portfolios should be attended to every week or when possible, as we can retain what we’ve learned and write it down instead of putting off our work until the very end of the semester; makes it much easier for us.
The 4 rules were used again for the digitised version of the chosen words to see if our words are fine or not, we also talked about how sometimes less is better; not everything has to have an additional design than the word intended.

Week 4:

Mr Vinod gave us feedback towards the animated type expressions we chose to do.
Most designs either needed to be improved upon with timing or placement on where and how the type expressions should be.
Exercise 1 should be fully updated on the e-portfolio, from sketches to the final animation.
Mr Vinod briefed us on what Exercise 2 will be about and how we will need to at least finish Lecture 2 by the end of this week to at least know what we need to do.

Week 5:

Mr Vinod gave us feedback for our layouts and what to do to improve on those layouts.
He also briefed us on what to do for Task 2, where we have to make a 2 page editorial spread for us to express the contents via typography.

INSTRUCTIONS

Task 1: Exercise 1 - Type Expression

The task is to choose 4 words of our liking to create a visual representation of them. Starting with sketches and then digitizing them in Adobe Illustrator and Photoshop. This process will take 2 weeks.

_______________

Sketches

I chose 6 words as my starting point in case some of them aren't up to Mr Vinod's liking, I could have some ideas that I can fall back on if they needed immense changes:

- Melt, Shatter, Blur, Kill, Speed and Dance

Fig 7.1, Type Expression Sketches, (06/04/2023)

Personally, I felt that Melt #2, Melt #3 and Shatter #2 were my favourites out of all 6 mini designs, though Melt #3 wasn't accepted as it was too distorted which I'll further improve on when I get to the digitisation.

Semi-Update

I made new ones as see if I was able to keep the distortion to a minimum, I tried to stay true to what Mr Vinod had asked us and used the 4 rules to keep my new sketches in check. Though not as graphical as I wanted, it does stay within the realms of what he had asked, even if it was really simplistic.

Fig 7.2, Type Expression Sketches, (11/04/2023)

_______________

Digitisation

I started by digitising the 4 words I liked the most or have chosen to be my final 4 words which were Melt, Shatter, Blur and Kill.

All of these were made in Inkscape as we didn't have access towards both Adobe Photoshop and Illustrator. I eventually moved them into Photoshop once I've gotten access.

A. Melt

Fig 7.3, 'Melt' Type Expression A, (13/04/2023)

Font: Serifa Std [weight=850/ 55 Roman]

Melt A had taken inspiration from Melt #2.

I lowered the distortion and made it much easier as all I needed to do was to convert the typeface into a shape and add additional nodes towards the areas I wanted to bend and curve to make the melt possible.

Fig 7.4, 'Melt' Type Expression B, (13/04/2023)

Font: Serifa Std [65 Bold]

Melt B, taking inspiration from Melt #6 in the new sketches, was similar to the first one but I just added a puddle using the Pen Tool.

The puddle adds depth towards Melt B because it looks like it was the one creating the puddle.

B. Shatter

Fig 7.5, 'Shatter' Type Expression, (13/04/2023)

Font: Univers LT Std [weight=250, Ultra Condensed/ Light Ultra Condensed]

Shatter was taken inspiration from Shatter #2 from the sketches.

This was a much harder process as each individual crack must be drawn with the Pen Tool. I had to then turn the text into a shape to cut them up and turn them into individual glass shards corresponding to their position.

C. Blur

Fig 7.6, 'Blur' Type Expression, (13/04/2023)

Font: ITC Garamond Std [Bold]

Blur was taken from Blur #3 from the sketches.

This was quite easy, all I had to do was to convert the text into a shape, lowering the blur for 'u' and 'r' and adding a transparent rectangle with a black border to indicate where it's blurred.

D. Kill

Fig 7.7, 'Kill' Type Expression, (13/04/2023)

Font: Bembo Std [Normal/ Regular]

Kill was taken inspiration from Kill #3 from the sketches.

This was the hardest process for me because I couldn't figure out why my lines wouldn't become a clip mask for the font I'm using. But I eventually got it to work by watching video tutorials and learning from those tutorials which can be seen by the blue lines and nodes present to show what I've learned.

Fig 7.8, 'Kill' Type Expression, (18/04/2023)

Mr Vinod said the Kill wasn't as prominent as Shatter, so I decided to add more lines to emphasize how dreary the expression is but decided against it as I would be using more design elements rather than letting the word express itself.

Final Type Expressions

Fig 8.1, Final Type Expression, (18/04/2023)

Fig 8.2, Final Type Expression PDF, (18/04/2023)

_______________

Animation

This is where we choose 1 of the words we liked the most from the digitisation stage, I chose Shatter as I thought it looked the coolest and would be challenging to animate.

I made a small storyboard to give myself an idea of how I needed to start and finish it, and I'll be figuring out the in-betweens as I go along.

Fig 9.1, 'Shatter 'Storyboard, (22/04/2023)

I've ended up with 11 frames but I have made 3 different shatters with delays and no delays, as the result can be impactful with different timings.

Fig 9.2, 'Shatter' Animation Frames, (23/04/2023)

I chose the one with the most delay as I thought it represents what I wanted, glass slowly vibrating till it shatters into different pieces.

Fig 9.3, 'Shatter' Delayed Animation, (23/04/2023)

Mr Vinod said that it was fine but what was unnecessary was the shaking before the cracks, so I went ahead and stabilised the shaking as much as I could. I've also added more delay to the parts where I'm trying to emphasize the slow increase of the shatter so a choppier animation would prove more effective than a smoother one.

Fig 9.3, 'Shatter' Delayed Animation Frames, (25/04/2023)

FINAL Animated Type Expression

Fig 10.1, 'Shatter' Final Animated Type Expression, (25/04/2023)

Fig 10.2, 'Shatter' Final Animated Type Expression PDF, (25/04/2023)

_______________

Exercise 2 - Formatting Text

Exercise 2 is an assignment where we have to complete incremental exercises that cover the various aspects of text formatting, such as type choice, size, and alignment. These exercises can be found within the videos, Text Part 1 - 2 and Typo_Ex Text Formatting 1:4 - 4:4A, as they will improve our familiarity with Adobe InDesign and develop knowledge of information hierarchy and spatial arrangement.

_______________

Kerning and Tracking

After watching the mentioned videos, I first practised kerning and tracking with the 10 fonts provided by Mr Vinod.

Fig 11.1, Kerning and Tracking Before, (30/04/2023)

Fig 11.2, Kerning and Tracking After, (30/04/2023)

Afterwards, I tried kerning and tracking with different typefaces of each font, as to further my understanding and knowledge of Adobe Indesign and my skills to figure out what does and doesn't make a pleasant composition of a text.

Fig 11.3, Kerning and Tracking with Different Typefaces, (30/04/2023)

_______________

Layout

For actual Exercise 2, I followed the videos, Typo_Ex Text Formatting 2:4 - 4:4A, for clearer and precise instructions on what to do. I started in Adobe Indesign, creating margins and columns for the text I'm supposed to be formatting. I've adjusted my text to my preferred size, 10 pt, and font, Janson Text LT Std; then following up with the leading at 12 pt, all of this gives an average line length of 58 - 60 which stays within the ideal line length of 55 - 65.

Fig 12.1, Adjustment towards Given Text, (01/05/2023)

Next by following the videos, I added a baseline grid to the document to adjust my cross-alignment of the paragraph. I also readjusted the positioning and composition of the text. Changing my text into Left Justify made it look much nicer, though I would have to increase the buffer thickness as it would have looked too close.

Fig 12.2, Checking Alignment (01/05/2023)

To explore more of the knowledge I've gained, I changed the base text and the positional composition of it to try out different layouts that I liked. Changing fonts or sizes and picture structure are all ok.

Fig 12.3, Exploration of Layouts, #1[Top left] to #6[Bottom Right] (01/05/2023)

Before submitting the final piece, I've chosen Layout #6 to be my final text formatting layout. I've placed the image to be central of the page, abbreviations will be lowered by 0.5pt so as to not stand out or be larger than the rest of the body text. I've also done some kerning towards a few words that felt too close or far away from each other, as well as changing the gutter space to 10 mm as the text felt like it was too close.

Fig 12.3, Adjustment towards Layout #6 (04/05/2023)

FINAL Text Formatting Layout

Fig 13.1, Final Text Formatting Layout[without baseline grid] (04/05/2023)

Head:

Font/s: Bembo Std [Bold]
Type Size/s: 36 pt
Leading: 44 pt
Paragraph Spacing: None
Alignment: Centered

Subheading:

Font/s: Bembo Std [Semibold]
Type Size/s: 9 pt
Leading: 11 pt
Paragraph Spacing: None
Alignment: Centered

Body:

Font/s: Janson Text LT Std [55 Roman]
Type Size/s: 9 pt/ 8.5pt [for abbreviations]
Leading: 11 pt
Paragraph Spacing: 11 pt
Alignment: Left Justified

Caption:

Font/s: Serifa Std [46 Light Italic]
Type Size/s: 9 pt
Leading: 11 pt
Paragraph Spacing: 11 pt
Alignment: Right Justified

Margins: Top, Bottom, Left and Right: 12.7 mm
Columns: 2
Gutter: 10 mm

Fig 13.2, Final Text Formatting Layout[without baseline grid] PDF (04/05/2023)

Fig 13.3, Final Text Formatting Layout[with baseline grid](04/05/2023)

Fig 13.4, Final Text Formatting Layout[with baseline grid] PDF (04/05/2023)

FEEDBACK

Week 1:

- General Feedback & Specific Feedback:

No feedback was given, mostly an introduction towards the module.

Week 2:

- General Feedback:

Good and sufficient word exploration on some of the words given. Some others are needed for more refining or improvement with the constructive criticism given, using the 4 questions rule.

- Specific Feedback:

Blur #3 had a unique contrast and Shatter #2 was another plus when it came to exploration. Distortion should be kept to a minimum when creating a certain look such as Melt #3.

Week 3:

- General Feedback:

Everything was alright but needed more graphical elements.

- Specific Feedback:

The Kill is within the bounds of distortion though I need to add more towards it to make it pop out more just like the shatter

Week 4:

- General Feedback:

Mr Vinod gave feedback towards the animated typography that was given as our last task. A higher frame rate gives a smoother result, though having a choppy animation is also fine if it’s part of the intended outcome.

- Specific Feedback:

“It’s fine” - Mr Vinod, the outcome is alright although it can be better if instead of having a shaking effect before the crack, the word would individually be moved by how the glass is cracked.

Week 5:

- General Feedback:

Mr Vinod checked out the text formatting layout exercises and final layouts that students posted. Kerning and leading may be harder than it seems as most works needed more refining with those, especially towards certain words or sentences.

- Specific Feedback:

I need to download it on 300 dpi for better quality. The leading needs to be slightly larger to make it more pleasant. Abbreviations or capital letters need to be lowered by 0.5pt so that they fit with the rest of the text seamlessly. Body text should not be too long as it makes the readers lose interest towards the text shown, it must also be connected as the body text is a singular whole paragraph, if it is split into different bodies with different proportions of line length may look like its a completely different body text than a singular whole paragraph.

REFLECTIONS

Experience

Exercises 1 and 2 were a hit or miss for me because I liked the design aspect of the work yet I hated the technicalities of Adobe products which are sometimes harder than it looks but still enjoyed it nonetheless. Having designed multiple designs for the typefaces, it was really fun since I was challenging myself to be creative but still being limited to the 10 fonts I was given. I had to tone down the distortion as that was against the rules which made me go back to square one for sketching. Digitising and animating my art was hard but I was able to finish it by the time I needed Mr Vinod to check it so it was all fine for those. Exercise 2 was surprisingly much easier as it was kerning and tracking towards texts and compositional placements that I had to master, it did take some time but I found my own ways to position my work and preserve my own style in those works. Therefore, I was able to gain new knowledge and understanding that can help me with my future assignments.

Observation

Mr Vinod would evaluate almost everyone's work and give important feedback that helps all of us grow. This gives us access towards different students' works as it's an amazing way to develop new ideas and techniques towards my own work. He also gave us lectures to watch and self-study to further our understanding towards typography and what it's all about.

Findings

Typography is an art form of arranging certain letters and texts in a way that makes them readable and visually appealing to the reader. With different lectures and knowledge at hand, I could see things more efficiently and effectively where before I couldn't; using exercise 2 as an example, a single page of different fonts and sizes with different compositions could result in different layouts that can make or break the page. Every adjustment can lead to different outcomes that I didn't know were possible until I tried it out, from the head to the body text, it was practically limitless! Now I know that typography isn't really just about the text, it's more of an art form that can show the meticulous yet extraordinary work of each designer who uses it.