Typography/Task 1: Exercise 1 & 2

4/4/2023 - 9/5/2023 : (Week 1- Week 5)

Ting Wen Yi / 0361799

Typography/Bachelor of Design (Hons) in Creative Media

Task 1 / Exercise 1 & 2

CONTENT / LINK

1. Lectures

2. Instructions

3. Task 1: Exercise 1 - Type Expression

4. Task 1: Exercise 2 - Text Formatting

5. Feedbacks

6. Reflections

7. Further Reading

LECTURES

Week 1: Introduction

In the first class, Mr. Vinod provided an overview of the module and guided us on how to create our e-Portfolios. We received detailed instructions on how to create and upload content to our blogs. Additionally, we participated in a group exercise where we voted on seven words and selected four of them to create an expressive composition. Furthermore, we were given ten typefaces to choose from during the digitization process. The lecture also emphasized the significance of typography in digital design, defining typography as "the art of arranging type to make written language legible, readable, and appealing." Font refers to a specific font or weight within a typeface, such as Georgia Regular, Georgia Italic, and Georgia Bold, whereas type family refers to a group of font families that share no design characteristics, such as Georgia, Arial, Times New Roman, Didot, and Futura.

Figure 1.1 Examples of Typeface

Figure 1.2 Example of Type Family

Week 2: The evolution of typograph

During the lecture, Mr. Vinod shared about himself and showcased the work he has done. He showed examples of the typefaces he has designed and discussed the importance of not just focusing on academic results, but also on learning.

1. Early letterform development: Phoenician to Roman

The early letterform development can be traced from the Phoenicians who used simple straight lines and pieces of circles when scratching into wet clay or carving into stone. They wrote from right to left.

Figure 2.1 Evolution from Phoenician letter

The Greeks later changed the direction of writing to 'boustrophedon' and evolved the letterforms accordingly. Greek and Phoenician writing initially did not use letter spacing or punctuations, but later transitioned to left-to-right writing.

Figure 2.2 Direction of writing for the Greeks, ‘boustrophedon’

Etruscan and Roman carvers painted letterforms before carving them in marble, resulting in stroke qualities that carried over into the carved letterforms. This evolution in letterforms can be seen in surviving examples of Greek and Etruscan inscriptions.

Figure 2.3 Phoenician to Roman

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

Square Capitals (4th or 5th century)
Rustic Capitals (Late 3rd – mid 4th century)
Roman Cursive (4th century)
Uncials (4th – 5th century)
Half-Uncials (c. 500)

Figure 2.4 Hand script from 3rd – 10th century C.E.

C. 789: Charlemagne's Edict

Charlemagne issued an edict in 789 to standardize all ecclesiastical texts, which led to the development of Caroline Minuscule.

C. 925: Caroline Minuscule

Caroline Minuscule, also known as Carolingian Minuscule, was developed by the monks under the guidance of Alcuin of York as a standardized script for ecclesiastical texts.

C. 1300: Blackletter (Textura)

Blackletter, also known as Textura, gained popularity in northern Europe as a condensed, strongly vertical letterform.

C. 1455: Gutenberg's Type

Johann Gutenberg, a German inventor, introduced movable type using a brass matrix for each letterform, and printed the first book, the 42-line bible, in Mainz, Germany. This marked the beginning of the mass production of printed materials using movable type.

3. Text type classification

Figure 2.5 Text Type Classification

1450 - Blackletter: The earliest printing type, based on hand-copying styles used for books in northern Europe.
1475 - Oldstyle: Based on lowercase forms used by Italian humanist scholars and uppercase letterforms found inscribed on Roman ruins. Evolved over 200 years as they migrated across Europe.
1500 - Italic: Echoing contemporary Italian handwriting, the first italics were condensed and close-set, allowing more words per page. Originally considered their own class of type, italics were soon cast to complement roman forms. Virtually all text typefaces since the 16th century have accompanying italic forms.
1550 - Script: Attempt to replicate engraved calligraphic forms, suitable for shorter applications but not lengthy text settings. Forms range from formal to casual. Examples include Kuenstler Script, Mistral, and Snell Roundhand.
1750 - Transitional: A refinement of oldstyle forms achieved in part due to advances in casting and printing. Thick-to-thin relationships exaggerated, and brackets lightened.
1775 - Modern: Represents a further rationalization of oldstyle letterforms. Serifs are unbracketed, and contrast between thick and thin strokes is extreme. English versions known as Scotch Romans and resemble transitional forms.
1825 - Square Serif/Slab Serif: Originally heavily bracketed serif with little variation between thick and thin strokes, developed to meet the needs of advertising for heavy type in commercial printing. Brackets were dropped as they evolved.
1900 - Sans Serif: Typefaces that eliminate serifs altogether. Forms were first introduced by William Caslon IV in 1816 but did not become widespread until the beginning of the 20th century. Variation tended toward humanist or geometric forms, occasionally with flared strokes to suggest calligraphic origins. Also referred to as grotesque or Gothic.
1990 - Serif/Sans Serif: A recent development that includes both serif and sans serif alphabets, often with stages between the two.

Week 3: Type Structure, Family and Anatomy

1. Tracking: Kerning and Letterspacing

Kerning refers to the automatic adjustment of space between letters. It is often mistakenly referred to as ‘letterspacing.

Letterspacing means to add space between the letters.

Tracking refers as removal of space in a word or sentence

Figure 3.1.1 Kerning and Without Kerning

Figure 3.1.2 Normal tracking, loose tracking and tight tracking

Figure 3.1.3 Normal Tracking, Loose Tracking, Tight Tracking

2. Formatting Text

Flush left: This format most closely mirrors the asymmetrical experience of handwriting. Each line starts at the same point but ends wherever the last word on the line ends. Spaces between words are consistent throughout the text, allowing the type to create an even gray value.

Centered: This format imposes symmetry upon the text, assigning equal value and weight to both ends of any line. It transforms fields of text into shapes, thereby adding a pictorial quality to material that is non-pictorial by nature. Because centered type creates such a strong shape on the page, its important to amend line breaks so that the text does not appear too jagged.

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

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

Figure 3.2 Formatting Text

3. Texture

Figure 3.3.1 Anatomy of a typeface

Figure 3.3.2 Different typefaces, different gray values

To fulfill the compositional requirement of having a middle gray value in the text, it is recommended to select a typeface that falls in the middle range of gray values as shown in Fig. 3.6. Different typefaces have varying levels of darkness and lightness, and choosing one that has a middle gray value would be the most suitable option.

4. Leading and Line Length

Type size: Text type should be large enough to be read easily at arms length—imagine yourself holding a book in your lap.

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 from the material at hand.

Line Length: Appropriate leading for text is as much a function of the line length as it is a question of type size and leading. Shorter lines require less leading; longer lines more. A good rule of thumb is to keep line length between 55-65 characters. Extremely long or short lines lengths impairs reading.

Figure 3.4. Leading and Line Length

5. Type Specimen Book
A type specimen book shows samples of typefaces in various different sizes. A type specimen book (or ebook for screen) is to provide an accurate reference for type, type size, type leading, type line length etc.

Figure 3.5 Sample Type Specimen Sheet

Week 4: Type Structure, Family and Anatomy

6. Indicating Paragraphs

Pilcrow (¶): a holdover from medieval manuscripts seldom use today.

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

Figure 3.6.1 Line space vs Leading

Standard indentation: Indent is the same size of the line spacing or the same as the point size of the text.

Figure 3.6.2 Standard Indentation

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

Figure 3.6.3 Extended Paragraphs

7. Widows and Orphans

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

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

Figure 3.7 Widows and Orphans

8. Highlighting Text

Below are some examples of how to highlight text within a column of text, different kinds of emphasis require different kinds of contrast.

Figure 3.8.1 Examples of Highlight Text within a Column of Text

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

Figure 3.8.2 Highlighting Text

Quotation marks, like bullets, can create a clear indent, breaking the left reading axis.

Figure 3.8.3 Prime and Quote

9. Headline within Text

A head indicates a clear break between the topics within a section. In Figure below, ‘A’ heads are set larger than the text, in small caps and in bold.

Figure 3.9.1 A Head

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

Figure 3.9.2 B Head

The C heads highlights specific facets of material within B head text. They not materially interrupt the flow of reading.

Figure 3.9.3 C Head

Putting together a sequence of subheads = hierarchy

Figure 3.9.4 Hierarchy in a Sequence of Subheads

10. Cross Alignment

Cross alignment is a design technique that involves aligning headlines and captions with the body text on a page in a way that reinforces the overall structure and visual hierarchy of the design. In Figure 3.10, cross alignment is achieved by aligning four lines of caption type, which are set in a smaller point size and tighter line spacing (9 pts. lead), with three lines of body text that are set in a larger point size and wider line spacing (13.5 pts. lead).

Figure 3.10 Cross Alignment

Week 5: Basic

1. Describing Letterforms

Figure 4.1.1 Describing Letterforms

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

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

X-height : The height in any typeface of the lowercase ‘x’.

Figure 4.1.2 Describing Letterforms - PDF

2. The Font

Figure 4.2.1 Uppercase and Lowercase

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

Lowercase : Lowercase letters include the same characters as uppercase.

Figure 4.2.2 Small Capitals

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

Figure 4.2.3 Uppercase & Lowercase Numerals

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

Lowercase Numerals : Also known as old style figures or text figures, these numerals are set to x-height with ascenders and descenders.

Figure 4.2.4 Italics

Italic : Most fonts today are produced with a matching italic. Small caps, however, are almost always only roman. The forms in a italic refer back to fifteenth century Italian cursive handwriting. Oblique are typically based on the roman form of the typeface.

Figure 4.2.5 Punctuation, Miscellaneous Characters

Punctuation, miscellaneous characters : Although all fonts contain standard punctuation marks, miscellaneous characters can change from typeface to typeface. It’s important to be acquainted with all the characters available in a typeface before you choose the appropriate type for a particular job.

Figure 4.2.6 Ornaments

Ornaments : Used as flourishes in invitations or certificates. They usually are provided as a font in a larger typeface family.

3. Describing Typefaces

Figure 4.3 Describing Typeface

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

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

Boldface : Characterized by a thicker stroke than a roman form. It can also be called ‘semibold’, ‘medium’, ‘black’, ‘extra bold’, or super.

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

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

Extended : An extended variation of a roman font.

4. Comparing Typefaces

Figure 4.4 Comparing Typefaces

Differences between typefaces make each one unique and convey a specific feeling or attitude. Specific choices in typography, such as line weight and stroke width, can be used for specific purposes. Understanding the nuances and capabilities of each typeface is crucial in making appropriate type choices. By examining typeface, we can gain insight into our own feelings about typography and approach to making type choices.

Week 6: Understanding Letters

1.Understanding Letterforms

Figure 5.1.1 Baskerville "A"

The uppercase letter forms below suggest symmetry, but in fact it is not symmetrical. It is easy to see the two different stroke weights of the Baskerville stroke form (above); more noteworthy is the fact that each bracket connecting the serif to the stem has a unique arc.

Figure 5.1.2 Univers "A"

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

Fig. 5.1.3 Helvetica vs Univers

The complexity of each individual letterform is neatly demonstrated by examining the lowercase ‘a’ of two seemingly similar sans-serif typefaces—Helvetica and Univers. A comparison of how the stems of the letterforms finish and how the bowls meet the stems quickly reveals the palpable difference in character between the two.

2. Maintaining X-height

Figure 5.2 X-height

X-height is a term used to describe the size of lowercase letterforms. Curved strokes, such as those in the letter ‘s’, must rise above the median or sink below the baseline in order to appear to be the same size as the vertical and horizontal strokes they adjoin.

3. Form / Counterform

Figure 5.3.1 Form / Counterform

Developing a sensitivity to the counterform, or the space described by the strokes of a letterform, is just as important as recognizing specific letterforms. The counterform includes the spaces between letters when they are joined to form words. The concept of counterform is particularly important when working with letterforms that have no counters, such as lowercase ‘r’. Handling the counters effectively when setting type is crucial for creating legible and readable words. Examining letterforms in close detail can provide a good understanding of the balance between form and counter and the unique characteristics of each letterform.

Figure 5.3.2 Form / Counterform

The sense of a letterform, such as the ‘S’, holds at each stage of enlargement, while individual elements of a letterform like the ‘g’ may lose their identity when examined out of context.

4. Contrast

Figure 5.4 Contrast

Contrast is the most powerful dynamic in design and can be applied to typography in various ways. Rudi Ruegg devised a format for applying contrast to type. Simple contrasts, such as small vs. large or organic vs. machined, can produce numerous variations in typography.

Week 7: Typography in Different Medium

1. Print Type Vs Screen Type

Figure 6.1.1 Print Type

Type for print refers to typefaces that are designed for printed material, such as books, magazines, and newspapers. Examples of typefaces commonly used for print are Caslon, Garamond, and Baskerville. These typefaces have elegant and intellectual characteristics, are highly readable when set at small font sizes, and have a neutrality and versatility that make typesetting with them a breeze.

Figure 6.1.2 Screen Type

Type for screen refers to typefaces that are optimized and modified for readability and performance on digital devices such as computers, tablets, and mobile phones. These typefaces often have a taller x-height, wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, and modified curves and angles for better character recognition and overall readability in the non-print environment.

Figure 6.1.3 Screen vs Print

2. Static Vs Motion

Figure 6.2.1 Static Typography on Billboard

Static typography has minimal characteristic in expressing words. Traditional characteristics such as bold and italic offer only a fraction of the expressive potential of dynamic properties.

Figure 6.2.2 Motion Typography - Se7en (1995)

Motion typography, also known as kinetic typography, is a type of animation that brings typographic elements to life by adding motion and movement. It is a type of temporal media that allows typographers to "dramatize" type and make letterforms appear "fluid" and "kinetic".

INSTRCTIONS

Task 1: Exercise 1 - Type Expression

In this exercise task, we were given seven words and asked to choose four to compose and express: rain, fire, crush, water, dissipate, freedom, and sick. We were limited to a set of 10 typefaces to work with in the digitization phase, which included Adobe Caslon Pro, Bembo, Bodoni, Futura, Gill Sans, ITC Garamond, ITC New Baskerville, Janson, Serifa, and Univers. Our task was to choose a typeface that complements our chosen idea and digitize our sketch, considering the size and placement of the text.

1. Sketches

Figure 7.1.1 Hand Sketch - Week 2 (12/4/2023)

Mr. Vinod suggested that we should create a hand-sketch before digitizing the picture. Therefore, I am providing this sketch.

Figure 7.1.2 Type Expression Sketch - Week 1 (6/4/2023)

I began by sketching out ideas for each word. The four words I have chosen to compose and express are sick, freedom, dissipate, and rain. I created rough sketches for each word using Procreate. Each sketch includes a small explanation of concept.

Figure 7.1.3 Crush Type Expression Sketch - Week 1 (6/4/2023)

After creating sketches for four different words, I decided to create one additional sketch just in case any of the previous sketches were rejected by the lecturer. I created four more sketches, similar to the previous ones. I ultimately chose the word 'crush' and wrote a brief description below the sketch.

2. Digitization

Freedom

Figure 7.2.1 "Freedom" Digitalization Progress, Week 2 (12/4/2023)

As I revise my work, I am also developing new and improved ideas. I have come up with an idea to use the letter "o" as a keyhole, symbolizing the idea of unlocking and opening up new possibilities, and implying the sense of freedom that comes with it. In the second design, the letter "m" is depicted as flying away like a bird, conveying the impression of freedom.

Crush

Figure 7.2.2 "Crush" Digitalization Progress, Week 2 (12/4/2023)

Instead of incorporating graphical elements, I enlarged the letter "C" in the design, causing the other letters to be pushed towards the corner, creating the impression of being "crushed.

Rain

Figure 7.2.3 "Rain" Digitalization Progress, Week 2 (12/4/2023)

I used multiple 'i's to represent raindrops. Each 'i' was carefully placed to mimic the random patterns of a rain shower. I chose to use this approach because it allowed me to create a sense of movement and fluidity in the design.

Sick

Figure 7.2.4 "Sick" Digitalization Progress, Week 2 (12/4/2023)

For the first design, the letter "i" is design as a thermometer, I inverted letter "i" and add different length of lines to look like calibration. In the second design, the letter "i" is shaped like a bed, emphasizing the meaning of being sick.

Dissipate

Figure 7.2.5 "Dissipate" Digitalization Progress, Week 2 (12/4/2023)

For the first design, the words gradually fade away, implying the meaning of dissipate. In the second design, the words are blurred out. Personally, I prefer the first design.

Figure 7.2.6 Digitalized Type Expressions, Week 2 (12/4/2023)

Figure 7.2.7 Digitalized Type Expressions, Week 2 (12/4/2023)

For this week, I did two attempts for some of the words so that I can seek advise from my lecturer which version is better and I want to avoid any similar designs with my classmates.

Figure 7.2.8 Revised Type Expressions, Week 3 (18/4/2023)

After receiving feedback from Mr. Vinod, I have revised my work. I enlarged the word "sick" and for "freedom, I made the width of the words the same length as the frame by enlarging the font size and leaving out a space for the letter "m". The letter "m" appears to be flying up into the sky like a bird. Mr. Vinod suggested that all the letters in "crush" should be in the same font to create a better impact. As such, I have changed the font for the word "rain" to make it more rounded and puffy, looking more like a cloud. For the raindrops, I have changed the typeface to Univers LT Std, which appears more condensed and thin like a raindrop. I didn't choose "dissipate" because a lot of classmates are sharing the same idea with me and I don't think it's bold and creative enough.

Final Type Expressions

Figure 7.2.9 Final Type Expressions JPEG, Week 3 (18/4/2023)

Figure 7.2.10 Final Type Expressions PDF, Week 3 (18/4/2023)

3. Type Expression Animation

Mr. Vinod taught us how to do some basic type animation by using Illustrator and Photoshop. I tried out two different words to see which one represent best through animation.

Figure 7.3.1 Rain Animated GIF, Week 3 (18/4/2023)

Figure 7.3.2 Rain Animation Timeline (8 frames), Week 3 (18/4/2021)

The word 'rain' is zoomed in and out to represent a cloud with storm and wind. Then, the letters 'i' are shown as raindrops. This animation is made up of 8 frames, as it is repetitive and easy. The last frame is used to connect with the first frame smoothly, so when the GIF keeps repeating, it appears seamless.

Figure 7.3.3 Crush Animated GIF, Week 3 (18/4/2023)

Figure 7.3.4 Crush Animation Timeline (12 frames), Week 3 (18/4/2021)

I used 12 frames for this animation because it required more movement than the animation for 'Rain'. In this animation, the letter 'C' rushes forward to crush the letters 'rush'. I think this gives a better impact than the animation for the word 'rain'.

Final Type Expressions Animation

Figure 7.3.5 Final Animated Type Expression "Crush" GIF, Week 4 (25/4/2023)

Task 1: Exercise 2 - Text Formatting

In this exercise, we are given incremental amounts of text that address different areas within text formatting, i.e., type choice, type size, leading, line-length, paragraph spacing, forced-line-break, alignment, kerning, widows and orphans, and cross-alignment. These minor exercises (Formatting Text 1:4 to 4:4A) will increase our familiarity and capability with the appropriate software and develop our knowledge of information hierarchy and spatial arrangement.

1. Text Formatting Exercise Based On Lecture

Figure 8.1 Text Formatting Exercise - Week 4 (28/4/2023)

Lecture Notes:

Use the same paragraph spacing as the leading.
Consistency in text width is crucial to avoid confusing the audience as it makes them think the text is a separate piece of information.
Prefer left alignment, but left justify may be used if it doesn't create rivers, which are large awkward spaces between words.
To minimize ragging or uneven line spacing, limit tracking adjustments to a range of +3/-3.
Increase heading leading by 2 points (2.5 or 3 for typeface).
For optimal readability, keep the line length between 55 to 65 characters for body text and 35 characters for subtext.
Body text should aim for equal negative and positive space to achieve a middle gray value.
Turn off hyphenation unless it's necessary. If it's turned on, ensure that there aren't too many hyphens or make tracking adjustments.
Double the point size and use the leading of the body text for headings.
Maintain cross alignment to ensure consistency throughout the text.
Avoid widows, which are a single word on a line by itself at the end of a paragraph, and orphans, which are a single word on a line by itself at the beginning of a paragraph.

2. Compositions & Layouts

Figure 8.2.1 Layout Composition Draft - Week 4 (28/4/2023)

I create drafts of compositions before attempting layouts. I use dark gray for images and light gray for text.

Figure 8.2.2 Layout #1 - Week 4 (28/4/2023)

Fonts: ITC New Baskerville Std, Bold (Heading), ITC New Baskerville Std, Roman (Subheading), Adobe Caslon Pro, Regular (Body)

Point size: 36 pt (Heading), 11 pt (Subheading, Body)

Leading: 13 pt (Body)

Tracking: -10

Line Length: 56

Paragraph spacing: 13 pt

Alignment: Left align justify

Figure 8.2.3 Layout #2 - Week 4 (28/4/2023)

Fonts: Futura Std, Bold (Heading), ITC New Baskerville Std, Roman (Subheading), ITC Garamond Std, Light Narrow (Body)

Point size: 30 pt (Heading), 11 pt (Subheading, Body)

Leading: 13 pt (Body)

Tracking: -10

Line Length: 65

Paragraph spacing: 13 pt

Alignment: Left align justify

Figure 8.2.4 Layout #3 - Week 4 (28/4/2023)

Fonts: Futura Std, Bold Condensed (Heading), Futura Std, Book (Subheading), Adobe Caslon Pro, Regular (Body)

Point size: 60 pt (Heading), 12 pt (Subheading), 10 pt (Body)

Leading: 12 pt (Body)

Tracking: -5

Line Length: 56

Paragraph spacing: 12 pt

Alignment: Left align justify

Figure 8.2.5 Layout #4 - Week 4 (28/4/2023)

Fonts: Futura Std, Bold (Heading), ITC New Baskerville Std, Roman (Subheading), Adobe Caslon Pro, Regular (Body)

Point size: 60 pt (Heading), 10 pt (Subheading), 8 pt (Body)

Leading: 51(Heading), 10 pt (Body)

Tracking: -10

Line Length: 55

Paragraph spacing: 10 pt

Alignment: Left align justify

Figure 8.2.6 Layout #5 - Week 4 (28/4/2023)

Fonts: Futura Std, Bold (Heading), ITC New Baskerville Std, Roman (Subheading), Adobe Caslon Pro, Regular (Body)
Point size: 104 pt, 47 pt (Heading), 14 pt (Subheading), 10 pt (Body)
Leading: 12 pt (Body)
Tracking: -10
Line Length: 60
Paragraph spacing: 12 pt
Alignment: Left align justify

Figure 8.2.7 Layout #6 - Week 4 (28/4/2023)

Fonts: Futura Std, Bold (Heading), ITC New Baskerville Std, Roman (Subheading), Adobe Caslon Pro, Regular (Body)
Point size: 60 pt (Heading), 11 pt (Subheading), 11 pt (Body)
Leading: 13 pt (Body)
Tracking: -10
Line Length: 60
Paragraph spacing: 13 pt
Alignment: Left align justify

I prefer using left justify throughout the layout because I like the clean and aligned appearance it provides.

Figure 8.2.8 Before & After Using Baseline Grid - Week 4 (29/8/2023)

After applying alignment to the baseline grid, the text creates a consistent and organized appearance, making it easier for readers to follow along and read. It also ensures there is a consistent amount of space between lines of text, which can enhance the readability and overall comfort of the text.

Figure 8.2.9 Before & After Resize Abbreviation - Week 5 (3/5/2023)

I reduce the font size by 1pt to avoid disrupting the reading rhythm caused by abbreviations.

Final Text Formatting Layout

Head

Font/s: Futura Std, Bold

Type Size/s: 60 pt

Leading: 48 pt

Paragraph spacing: 0

Subhead

Font/s: ITC New Baskerville Std, Roman

Type Size/s: 11 pt

Leading: 0

Paragraph spacing: 0

Body

Font/s: Adobe Caslon Pro, Regular

Type Size/s: 11 pt (10pt only for abbreviation)

Leading: 13 pt

Paragraph spacing: 13 pt

Characters per-line: 52

Tracking:-10

Alignment: left justified

Margins: 54 mm top, 18 mm bottom, 15 mm left & right

Columns: 2

Gutter: 10 mm

Figure 8.3.1 Final Text Formatting Layout JPG, Week 5 (3/5/2023)

Figure 8.3.2 Final Text Formatting Layout PDF, Week 5 (3/5/2023)

Figure 8.3.3 Final Text Formatting Layout (Grids) JPG, Week 5 (3/5/2023)

Figure 8.3.4 Final Text Formatting Layout (Grids) PDF, Week 5 (3/5/2023)

FEEDBACKS

Week 2:

General Feedback: Sketch before digitalize, don't use any typeface and avoid any distortions.
Specific Feedback: Go one step back and sketch first, but the digitalize version can put in portfolio.

Freedom: it's a good idea to make the letter 'm' look like a bird, but not exactly like a bird, and be careful not to distort the letter 'm'.
Dissipate: second and third idea is workable
Rain: third design of word "rain" is good
Sick: the letter 'I' can be designed like a thermometer, with added lines to resemble calibrations.
Crush: the letter 'C' can cover 'rush', and the letters 'rush' can be placed with hierarchy, going up and down.

Week 3:

1. Do the expressions match the meaning of the words?

2. Are the expression well crafted (crafting/lines/shapes)?

2a. Do they sit well on the art-board

2b. Are the composition engaging? Impactful?

3. Are there unnecessary non-objective elements present?

4. How can the work be improved?

General feedback: make use of the frame, fonts can be bigger

Specific Feedback:

Freedom: make the word large sits at the bottom of the frame, and letter "m" on top.
Dissipate: #1 is good.
Rain: make "rain" look more like a cloud. Use a different typeface, and use a narrow font for the letter "i."
Sick: make use of the space given, make the word larger. #2 is much more in placement.
Crush: use the same typeface and font for the letters "rush" as the letter "C" to create consistency.

Week 4:

General Feedback: When creating animation is better to pause at the end.

Specific Feedback:

Rain: The word rain don't contract and expand too much or don't move at all.

Crush: Pause/stop at the back-add two to three frame.

Portfolio feedback : Change the background to grey and the outer area to .

Week 5:

1. Is kerning and tracking appropriately done?

2. Does the font size correspond to the line-length, leading & paragraph spacing

3. Is the alignment choice conducive to reading?

4. Has the ragging been controlled well?

5. Has cross-alignment been established using base-line grids?

6. Are widows and orphans present?

General Feedback: Reduce the font size for abbreviation.

Specific Feedback:

Proceed with Layout 6. Left justify spacing minimum 7mm in the middle.
Choose a picture that is relevant to the title.
Picture too close - same spacing as paragraph spacing.

REFLECTIONS

Experience
Doing the first exercise is quite challenging because we can't use graphical elements and need to rely solely on words to express the meaning. During the sketching process, I found it challenging to come up with many ideas and be creative. However, this exercise helped me become more familiar with Adobe Illustrator and learn the basics of animation through Photoshop. For the second exercise, it was daunting although it looks like it's a simple task of arranging a layout, but it has many rules. But through the lecture video, it helped me to understand better. I am also grateful for the feedback session, as it exposed me to different ways of thinking and helped me learn how to improve my work thanks to Mr. Vinod.

Observation

I've observe that typography is a step by step process and it has helped me understand its importance in creating effective visual communication. It involves brainstorming ideas and sketching them out before digitizing them. This process not only helps me to refine my ideas and make them more concrete but also allows me to experiment with different typefaces and layouts before settling on the final design. By taking the time to work through this process, I can create more thoughtful and effective designs that communicate my message clearly and effectively.

Findings

I have learned how to use the appropriate typeface based on the given 10 typefaces (Adobe Caslon Pro, Bembo, Bodoni, Futura, Gill Sans, ITC Garamond, ITC New Baskerville, Janson, Serifa, and Univers).I also learned that good layout and formatting can make the user, or reader, easy to read. Typography is key to every detail and has many rules and much knowledge to learn. The exercise I did is only the tip of the iceberg.

Search This Blog

Ting Wen Yi (0361799)