Typography / Task 1 / Exercises

Typography is what brings the text to life. It plays a crucial role in the delivery of information. However, a poor use of it can result in misunderstandings of the intended message. Mr. Vinod provided a definition of typography in the first video presenting the subject, highlighting its extensive application in a range of media such as website design, app design, signage design, branding, animation and more. In addition, Mr. Vinod gave us a summary of the module and showed us how to build our e-Portfolio and add content to our blogs.

1. Typography: The art of arranging letters and text in a way that makes the content legible, clear and visually appealing. It involves font style, appearance, and structure which aims to elicit certain emotions and convey specific messages.

Figure 1.1 Examples of Typography

https://we.graphics/blog/5-big-rules-of-typography-and-examples-of-designers-breaking-them/

2. Font: The individual font or weight within the typeface - i.e. Georgia Regular, Georgia Italic, Georgia Bold or Frutiger Light, Roman, etc.

Figure 1.2 Examples of Fonts within a Typeface

Figure 1.3 Examples of Different Typefaces

Week 2 - Lecture 2

Typography: Development and Timeline

1. Early letterform development: Phoenician to Roman

The Phoenicians, who utilised basic straight lines and fragments of circles when scraping into wet clay or carving into stone, are responsible for the early invention of letterforms. It is written from right to left.

Figure 2.1 The Evolution of the Phoenician into Modern Latin and Arabic

Afterwards, the Greek developed a style of writing called 'boustrophedon' (how the ox ploughs). The text is read alternately from right to left and left to right. They also changed the orientation of the letterforms. They did not use letter space or punctuations.

Figure 2.2 The Greeks's Direction of Writing

Etruscan (then Romans) carvers paint their letterforms before they inscribe them to avoid any waste of marble. This led to the formation of Roman letterforms based on the characteristics of their strokes and the tools they utilised.

Figure 2.3 Late 1st century B.C.E. Augustan inscription in the Roman Forum, Rome

Figure 2.4 Phoenician to Roman

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

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

Rustic capitals: Compressed version of square capitals, allowed for twice as many words on a sheet of parchment and took far less time to write. It's faster and easier to do, but were slightly harder to read due to its compressed nature.

Roman cursive: Written for everyday transactions, forms were simplified for speed. Roman cursive is the beginning of lowercase letterforms.

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

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

Charlemagne: the first unifier of Europe since the Romans, issued an edict to standardise ecclesiastical texts, which Alcuin of York and St Martin of tours rewrote using majuscules (uppercase), minuscules, capitalisation and punctuation, setting the standard for calligraphy for a century.

Blackletter to Gutenberg's type: Charlemagne's dissolution led to regional variations on Alcuin's script , such as Blackletter or texture in Northern Europe, Rotunda in the south, and the humanistic script in Italy based on Alcuin's minuscule.

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

3. 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 rationalisation 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.

Figure 2.6 Text Type Classification

Week 3 - Lecture 3

Typography - Text

1. Tracking: Kerning and Letterspacing

Kerning: The automatic adjustment of space between letters, often mistakenly referred to as ‘letterspacing.

Letterspacing: Add space between the letters.

Tracking: Removal of space in a word or sentence.

Figure 3.1 Kerning and Without Kerning

Figure 3.2 Univers 55 in Normal Tracking, Loose Tracking and Tight Tracking

Figure 3.3 Normal Tracking, Loose Tracking, tight Tracking

2. Formatting Text

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

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

Justified: Imposes symmetrical shape on the text, 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.

Figure 3.4 Flush Left, Centered, Flush Right, Justified

3. Texture

It is advised to choose a typeface that falls within the middle range of gray values in order to satisfy the compositional requirement of having a middle gray value in the text. The best choice would be a typeface with a middle gray value because different typefaces have variable degrees of darkness and lightness.

Figure 3.5 Anatomy of a Typeface

Figure 3.6 Different Typefaces, Different Gray Values

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.7 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.8 Sample Type Specimen Sheet

Week 4 - Lecture 4

6. Indicating Paragraphs

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

Figure 3.10 Example of the usage of a Pilcrow

Line space (leading*): Displays 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.9 Line Space vs Leading

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

Figure 3.11 Standard Indentation

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

Figure 3.12 Extended Paragraphs

7. Widows and Orphans

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

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

Figure 3.13 Widows and Orphans

8. Highlighting Text

Figure 3.14 shows the examples of how to highlight text within column of text, different kinds of emphasis require different kinds of contrast.

Figure 3.14 Examples of Text that are Highlighted 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 (figure 3.15 right example) of the text ensures readability is at its best.

Figure 3.15 Examples of Highlighting Text

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

Figure 3.16 Example of Quotation Marks

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

Figure 3.17 Example of a Prime

9. Headline within a Text

The 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.18 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.20 B Head

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

Figure 3.21 C Head

Putting together a sequence of subheads = hierarchy

Figure 3.22 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.23, 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.23 Cross Alignment

Week 5: Lecture 5

Typography basic

1. Describing Letterforms

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

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

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

Figure 4.1 Describing Letterforms

Figure 4.2 Describing Letterforms PDF

2. The Font

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

Figure 4.3 Uppercase

Lowercase: Lowercase letters include the same characters as uppercase.

Figure 4.4 Lowercase

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

Figure 4.5 Small Capitals

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

Figure 4.6 Uppercase Numerals

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

Figure 4.7 Lowercase Numerals

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.8 Italics

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.9 Punctuation, Miscellaneous Characters

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

Figure 4.10 Ornaments

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.

Figure 4.11 Describing Typefaces

Each typeface is distinctive due to its differences, which also express a certain emotion or attitude. Line weight and stroke width are two particular typographic options that can be utilised for a variety of purposes.

Figure 4.12 Comparing Typefaces

We may learn about our feelings towards certain types and the appropriateness of type choices by examining typefaces. The R that is shown in figure 4.12 display a range of attitudes, some whimsical some mechanical, some harmonies and some awkward.

Figure 4.13 Comparing Typefaces of "a" and "R"

Week 6 - Lecture 6

Typography: Letters

1. Understanding letterforms

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 Baskerville "A"

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

Figure 5.2 Univers "A"

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

Figure 5.3 Helvetica vs Univers

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

Figure 5.4 X-height

3. Form / Counterform

The space that the form's strokes describe and frequently contain is known as the counterform (or counter). The gaps between letters are included in the word's counterform when they are combined to form letters. The way the counters are handled affects how smoothly the words flow together and how simple it is for us to understand what has been established.

Figure 5.5 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.

Figure 5.6 Form / Counterform

4. Contrast

Contrast is the most potent design element, and there are many ways to use it in typography. The method for imparting contrast to type was created by Rudi Ruegg. Numerous variations in typography can be created by using straightforward contrasts like small + large or organic + machined.

Figure 5.7 Contrast

Week 7 : Typography in different Medium

Typography in Different Medium

1. Print Type vs Screen Type

Type for print: Typefaces created specifically for printed materials like books, periodicals, and newspapers. Caslon, Garamond, and Baskerville are a few examples of fonts that are frequently used for print. These fonts are easy to typeset with because of their simplicity, neutrality, and adaptability.

Type for Screen: Typefaces that have been modified and optimised for reading on digital devices like computers, tablets, and mobile phones. For better character identification and overall readability in digital environments, these designs frequently include a taller x-height, broader letterforms, more open counters, stronger thin strokes and serifs, reduced stroke contrast, and modified curves and angles.

Hyperactive Link/ hyperlink: A word, phrase, or image that you can click on to jump to a new document or a new section within the current document. Found in nearly all Web pages. Text hyperlinks are normally blue and underlined by default.

Font Size for screen: 16-pixel text on a screen is about the same size as text printed in a book or magazine; this is accounting for reading distance. Because we read books pretty close — often only a few inches away — they are typically set at about 10 points. If you were to read them at arm’s length, you’d want at least 12 points, which is about the same size as 16 pixels on most screens.

System Fonts for Screen/Web Safe Fonts: Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond.

Figure 6.1 Screen vs Print

Pixel Differential Between Devices: The screens used by our PCs, tablets, phones and TVs are not only different sizes, but the text you see on-screen differs in proportion too because they have different sized pixels.

Figure 6.2 Pixel Differences Between Devices

2. Static vs Motion

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

Figure 6.3 Static Typography

Motion 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".

INSTRUCTIONS

Task 1: Exercise 1 - Type Expression

This exercise requires us to sketch at least three ideas for each of the four words we selected out of the seven that were provided which are Destroy, Split, Surprise, Love, Silence, Party, and Pause. We have to show the word's expression that could be seen in the typographic design, and then digitise them. These are my drawings for each word that I selected which are Split, Party, Love, and Destroy.

Mr Vinod suggested that we should create sketch out our designs before digitising it.

Figure 7.1 Type Expression Sketch - Week 2 (12/4/2023)

The word "Split" was the easiest one for me. In Design #1, I used the L to split the words in half so it expresses the word split. Design #2, I just use cut two types of fonts in half and match it together so it shows that they are different and expresses the word Split. Design #3, I distorted the letter "P" and "L" by elongating their tails.

Figure 7.2 Split Type Expression Sketch - Week 2 (12/4/2023)

Design#1 was inspired by the shape of a balloon but I used the wrong typeface. Design #2 was inspired by the design of stripes which reminds me of a disco party. Design #3 was inspired by the shape of the cake.

Figure 7.3 Party Type Expression Sketch - Week 2 (12/4/2023)

Design #1and #2 was inspired by the shape of cupid's arrow. I heavily distorted the words in Design #3 just to make it look like the shape of a love.

Figure 7.4 Love Type Expression Sketch - Week 2 (12/4/2023)

Design #1 was inspired by broken buildings I just make the words look like it's been destroyed. Design #2 was inspired by the shape and a tree that has been destroyed by lightning but it's obviously doesn't look like one. Design #3 was inspired by the image of earthquake, I wanted to make the words look like all the buildings have fallen down.

Figure 7.5 Destroy Type Expression Sketch - Week 2 (12/4/2023)

After receiving feedback from Mr. Vinod, I moved on to digitise my Sketches on Adobe Illustrator.

2. Digitisation

Split

For the first design which is on the top left corner, I used the pen tool to elongate the tail of the letter 'p' and 'l' so it looks like using your legs to make a split. However, the design is heavily distorted so I changed to the second design which is on the top right corner. I used knife tool to cut half of the two different fonts horizontally and match it together. However, mr.Vinod said vertical would look better so I used the same method match it together vertically so it express the word "Split".

Figure 7.6 "Split" Digitisation Progress - Week 3 (18/4/2023)

Party

I chose the font “Futura Std Extra Bold” for the word “Party” because it looks loud and fun. Then I reduce the opacity of each letters just to get the at transparent effect so it looks bouncy like a balloon. Then I use the pen tool to create the strings that are attached to “Party”. I used the type on path tool to type the words on the strings. I then shortened the string size because it feels like the strings took half of the space.

Figure 7.7 "Party" Digitisation Progress - Week 3 (18/4/2023)

Love

At first, I wanted to make the first design which is on the far left shaped like a heart to express the meaning of the word. However, it cannot be used because the letters are heavily distorted. So I went ahead with the second design which is on the far right, I used the ITC Garamond STD Ultra Condensed Italic so it makes the letters look more romantic and then I used the pen tool to create a heart shape and used the type on path tool. to write the word "LOVE' around the heart.

Figure 7.8 "Love" Digitisation Progress - Week 3 (18/4/2023)

Destroy

To make the word 'Destroy" look like all the buildings have fallen down after an earthquake, I messed up the letters and did some minimal distortions to each of the letter to express the meaning of the word.

Figure 7.9 "Destroy" Digitisation Progress - Week 3 (18/4/2023)

Final Type Expressions

Figure 7.10 Final Type Expressions JPEG - Week 3 (21/4/2023)

Figure 7.11 Final Type Expressions PDF - Week 3 (21/4/2023)

3. Type Expression Animation

Mr. Vinod taught us how to do some basic type animation by using Illustrator and Photoshop. I decided to try out the word "Destroy".

I followed the sketch and digital typeface of the word "Destroy" which is shown in figure 7.10. The first thing that came to my mind were the letters falling down on each other destroying the structure of the letters.

Figure 7.12 "Destroy" Adobe Illustrator Progress - Week 4 (23/4/2023)

Figure 7.13 First attempt at animating"Destroy" - Week 4 (25/4/2023)

This is the first outcome. After receiving feedback from Mr. Vinod, he asked me to remove the jump at the 12th frame which is shown in figure 7.14.

Figure 7.14 "Destroy" Animation Timeline (16 frames) - Week 4 (25/4/2023)

I successfully removed the jump at the 12th frame and decided to make some amendments in the T which is shown in figure 7.16.

Figure 7.15 Final "Destroy" Adobe Illustrator Progress - Week 4 (28/4/2023)

Figure 7.16 Final "Destroy" Animation Timeline (16 frames) - Week 4 (28/4/2023)

Final Animated Type Expression

Figure 7.15 Final Animated Type Expression "Destroy" GIF - Week 4 (28/4/2023)

Task 1: Exercise 2 - Text Formatting

We were 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 your familiarity and capability with the appropriate software and develop your knowledge of information hierarchy and spatial arrangement. The task ends with the submission of one layout in A4 size demonstrating what you have learned from the incremental exercises.

I was able to learn how to use kerning and tracking through this exercise which will help me on the next part of the task.

Some key points to remind myself while doing Exercise 2.

Use the same paragraph spacing as the leading.

To minimize ragging or uneven line spacing, limit tracking adjustments to a range of +3/-3.

Keep the line length between 55 to 65 characters for body text.

Avoid widows and orphans.

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.

Maintain cross alignment to ensure consistency throughout the text.

Figure 8.1 Text Formatting with Kerning - Week 5 (1/5/2023)

Figure 8.2 Text Formatting without Kerning - Week 5 (1/5/2023)

Compositions & Layouts

I decided to try different text compositions and layouts, and lastly I chose 2 of my favourite layouts to show Mr Vinod.

Figure 8.3 Text Formatting Layout Progress- Week 5 (2/5/2023)

Text Formatting Layout #1

Fonts: Bodoni Std, Book

Font Size: 38 pt (Heading), 11pt (Subheading), 9 pt (Body text)

Leading: 44 pt (Heading), 11pt (Body text)

Paragraph Spacing: 11pt

Line Length: 54

Alignment: Left align justify

Figure 8.4 Text Formatting Layout #1 - Week 5 (2/5/2023)

Text Formatting Layout #2

Fonts: ITC New Baskerville Std

Font Size: 38 pt (Heading), 11pt (Subheading), 9 pt (Body text)

Leading: 44 pt (Heading), 11pt (Body text)

Paragraph Spacing: 11pt

Line Length: 46

Alignment: Left align justify

Figure 8.5 Text Formatting Layout #2 - Week 5 (2/5/2023)

After receiving feedback from Mr.Vinod, I realised I wanted to do it all over again because I did not like my previous layouts and I found quite a number of mistakes such as using the wrong typeface, there are rivers in the body text, have too many hyphenations in one paragraph and there's no dynamism.

In this layout, I decided to use left aligned instead of left justify, I also used the kerning technique to avoid awkward looking gaps between my letters and improve legibility.

Figure 8.5 Text Formatting Layout #3 Before and After Kerning - Week 6 (9/5/2023)

I also activated the hidden characters to avoid creating force line breaks.

Figure 8.6 Hidden Characters - Week 6 (9/5/2023)

Final Text Formatting Layout

Head

Font: Bembo Std, Extra Bold Italic

Type Size: 50 pt

Leading: 50 pt

Paragraph Spacing: 0

Alignment: Left align

Subhead

Font: Futura Std, Heavy

Type Size: 10pt

Leading: 0

Paragraph Spacing: 0

Alignment: Left align

Body

Font: Univers Ltd Std, 55 Roman

Type Size:10 pt

Leading:12.5pt

Paragraph Spacing: 12.5pt

Characters per-line: 50

Alignment: Left align

Margins: 21.5mm top, 20mm bottom, 11mm left +right

Columns: 4

Gutter: 5mm

Figure 8.7 Final Text Formatting Layout JPEG - Week 6 (10/5/2023)

Figure 8.8 Final Text Formatting Layout PDF - Week 6 (10/5/2023)

Figure 8.9 Final Text Formatting Layout (Grids) JPEG - Week 6 (10/5/2023)

Figure 8.10 Final Text Formatting Layout(Grids) PDF - Week 6 (10/5/2023)

FEEDBACK

Week 1

In order to give us a clear knowledge of what we must do and what is anticipated in the future, Mr. Vinod spent the entirety of the first typography lesson going over the course information and module. We were instructed to watch his lecture playlist, which contained all the information and knowledge we needed to complete our assignments, join the Facebook group where we could find important links, announcements, files, and posts for our reference, build an e-portfolio and update it regularly with our progress, and be given our first assignment. Task 1 required us to pick four words from the seven he provided (Pause, Party, Surprise, Destroy, Split, Love, Silence) and design them in a way that typographically reflected their meaning. Each word needed at least three sketches.

Week 2

General Feedback:

Can't have too many graphic elements in a design
Not effectively expressing the meaning of the word in the design
Can't have too much distortions
Have to be more adventurous in our ideation.
He also emphasised how poorly the letters were positioned

Specific Feedback: "Split" Design 2 and Design 3 is workable it does express the meaning of the word clearly; "Party" Design 1 is workable because it kinda look like balloons but have to use the correct typeface, "Destroy" Design 2 is workable because it does express the impression of the word. However, for "Love" Design is best to come up with a new one because I used the wrong typeface and and too much graphic.

Week 3

Mr Vinod think its best to ask ourselves these questions while doing this exercise.

Do the expressions match the meaning of the words?
Are the expression well crafted (crafting/lines/shapes)?
Do they sit well on the art-board
Are the composition engaging? Impactful?
Are there unnecessary non-objective elements present?
How can the work be improved?

General Feedback: Make use of the frame, don't over-distort the words, update progress on Eportfolio.

Specific Feedback:

Party: Reduce the size of the string that's attached to the word, it looks like it took half of the space.
Split: Change the design to vertical.
Love: Approved.
Destroy: Approved.

Week 4

General Feedback: The duration of the ending should pause about 2 seconds, don't make it loop too fast. Create more frames to make the animation look more smoother.

Specific Feedback: The animation works but have to remove the jump at the ending of "Destroy".

Week 5

Mr Vinod thinks its best to ask ourselves these questions while doing Task 2.

Is kerning and tracking appropriately done?
Does the font size correspond to the line-length, leading & paragraph spacing
Is the alignment choice conducive to reading?
Has the ragging been controlled well?
Has cross-alignment been established using base-line grids?
Are widows and orphans present?

General Feedback: Two hyphenation in a paragraph is not good, have to have even spacing, must have cross alignment. Don't kern more than 3 times and only kern 3 lines. Reduce the font size for abbreviation If you failed to kern the paragraph you have no choice but to hyphenate it. Submit Task 1 by 14th May 2023, 11:59pm.

Specific Feedback: Don't use Bodoni as body text, because of the contrast in that letterform which is the thick and thin strokes of that font, at smaller point size the thin strokes will be very difficult to decipher, which makes it difficult to read, and there's too many hyphenation in one paragraph.

REFLECTION

Experience

This exercise was new and refreshing for me because I have never done this type of exercise before. Since there are no graphic elements allowed and we must only rely on words to convey the meaning, completing this exercise is quite difficult. It was difficult for me to think of many of ideas and to be creative when drawing, it is also very time consuming. But this exercise taught me the fundamentals of Photoshop animation and helped me become more accustomed to Adobe Illustrator. Exercise 2 was quite fun and challenging, I've learned how to modify the appearance of text in a document to make it more visually appealing and easier to read by using InDesign. Thanks to Mr. Vinod, the feedback session helped me understand how to better my work and exposed me to new ideas.

Observation

I've observed that typography is complex process that requires careful consideration of multiple factors to achieve an effective and aesthetically pleasing result. The fact that typography is a process that occurs step by step has made it easier for me to comprehend the significance of typography in producing impactful designs. Before digitising them, ideas must first be drafted in a sketchbook. This technique allows me to experiment with several typefaces and layouts before deciding on the final design, in addition to helping me to clarify and make my thoughts more distinct. In Exercise 2, I've observed that consistency is key in text formatting, using a consistent formatting style throughout a document helps maintain a professional appearance and ensures that the document is easy to read and understand.

Findings

I've discovered that typography is a dynamic and constantly evolving field that plays a critical role in visual communication. I've learned how to utilise the 10 different typefaces and also learned how to effectively convey the meaning/message of the words by not using graphical elements in the typeface. I've also discovered that effective text formatting helps improve the readability and clarity of a document, making it easier for the reader to understand and engage with the content. I've found that I have developed a deep understanding of typefaces, typography rules, and design principles, as well as an eye for detail. and a sense of aesthetics.

FURTHER READING

Figure 9.1 Typography, Referenced: A Comprehensive Visual Guide to the Language, History, and Practice of Typography (2012)

I found this e-book on Taylor's e-Library, I decided to do some further readings on Typography, Referenced: A Comprehensive Visual Guide to the Language, History, and Practice of Typography

Reference: Haley, A. et al. (2012) Typography, referenced: A comprehensive visual guide to the language, history, and practice of typography. Beverly, MA: Rockport Publ.

This book has thousands of illustrated examples of contemporary usage in design such as the historical developments from Greek lapidary letters to the movie Helvetica; landmark designs turning single letters into typefaces; the definitions of essential type-specific language, terms, ideas, principles, and processes; ways technology has influenced and advanced type; The future of type on the web, mobile devices, and tablets.

Chapter 1: Type History and Timeline

This chapter discusses the history of typography, which includes the invention of writing systems in ancient civilizations, the development of the alphabet and calligraphy in ancient Greece and Rome, the invention of movable type in China and Korea, and its subsequent development in Europe by Johannes Gutenberg in the 15th century. It also covers the impact of the Industrial Revolution on typography, including the standardization of typeface designs and the emergence of new printing technologies. It then moves on to the digital age, covering the development of digital typography and the use of computers and software in typeface design and production.

Figure 9.2 Type History and Timeline

Chapter 2: Type Design and Development

This chapter includes a section on type design and development, which covers the process of creating new typefaces. It begins with an overview of the anatomy of type, including the different parts of letters and how they are constructed. It then moves on to the process of designing a new typeface, which typically involves sketching, digitizing, refining, and testing the design. It covers the different types of typefaces, such as serif, sans-serif, script, and display, and the different styles within each type. It then moves on to the technical aspects of type design, such as the use of software such as FontLab and Glyphs, the use of OpenType and other font formats, and the importance of kerning, hinting, and other technical aspects of font design.

Figure 9.3 Type Design and Development

Chapter 3: Type Classification and Identification

The section "Typography, Referenced" provides an overview of the different type classification systems, including the Vox-ATypI and Thibaudeau classifications. It then moves on to a detailed examination of the different type categories, including serif, sans-serif, script, and display. It also covers the importance of identifying typefaces correctly, such as using tools such as WhatTheFont and Identifont, and the different factors that can affect the legibility and readability of typefaces, such as size, spacing, and color. The section also includes examples of typefaces from different categories, as well as practical advice on how to choose the right typeface for a particular design project.

Figure 9.4 Type Classification and Identification

Chapter 4: Typographic Principles

The chapter covers the importance of typography in design and the different typographic principles, such as hierarchy, contrast, alignment, proximity, balance, and white space. It also covers the different typographic elements, such as typeface, font size, line spacing, and line length, and how they can be used to create effective typography in design. The section includes examples of effective typographic design, as well as practical advice on how to apply the different typographic principles in design.

Figure 9.5 The Golden Section

Figure 9.6 Anatomy of a Grid

Chapter 5: Contemporary Usage: Designing with Type

This chapter covers the rise of digital fonts, web typography, and mobile typography, as well as the considerations that designers need to take into account when designing for digital media. It also covers the different design trends that are currently popular, such as bold typography, experimental typefaces, and minimalism. It also covers the different ways that typography is being used in different design contexts, such as branding, advertising, editorial design, and packaging design. The book provides examples of effective typography design, as well as practical advice on how to use typography effectively in each context.

Figure 9.7 Designing with Type

Search This Blog

Lim Jia Zhen (0349294)

Typography / Task 1 / Exercises

Comments

Post a Comment

Popular Posts

Design Principles - Task 1: Exploration

Design Principles - Task 3: Design