Posted by JIE XUAN

Typography Task 1 Exercise

26/9/2023-20/10/2023 Week 1-Week 4

Jie Xuan/ 0356515

Typography/ Bachelor of Creative Media/Taylor's University

Task 1

TABLE OF CONTENTS

1. Lectures

2. Instructions

3. Feedbacks

4. Reflections

LECTURES

Week 1 (a) Introduction

In the First lecture class, Mr. Vinod and Ms. Low has introduce the concept of Typography. At the beginning of this lecture class, Mr. Vinod explained that Typography is actually an act of creating letters and it is the creation of typefaces or type families. It is visible and prevalent.

Typography has evolved 500 years, which is from calligraphy to lettering and finally evolved to Typography. The definition of Typography in Wikipedia is an art or techniques of arranging type to make written language legible, readable and appealing when displayed. But according to Oxford the definition of Typography is the style and appearance of printed matter.

Beside that, Typography is very important in our daily life. It is because Typography can be saw everywhere, which includes: Animations, websites designs, app designs, labels, book, poster, signage and more.

After that we come to the terminological reference between font and typeface.

Font: A font refers to the individual font or weight within the typeface.

I.e.: Georgia Regular, Georgia Italic and Georgia Bold.

Typeface: A typeface refers to the entire family of fonts/weights that share similar characteristics/styles.

I.e.: Georgia, Arial, Times New Roman and Didot.

Fig 1.1.1 Example of Georgia Fonts

Fig 1.1.2 Example of typefaces

Week 1 (b) Development

1. Early letterform development: Phoenician to Roman

The topic of the second lecture is about the development of typography over a period of time 500 years. First, we start with the early letter form development which is Phoenician to Roman. In the earliest stages, writing meant scratching into wet clay with sharpened stick or craving into stone with chisel. The figure below shows the evolution of Phoenician letters has taken place of Arabic to Modern Latins forms.

Fig 1.1.3 Phoenicians votive stele Carthage

Fig 1.1.4 Evolution from Phoenician letter

Besides that, there is also difference of the directions of writing between Phoenicians and Greeks.

Phoenicians words wrote from left to right.

The Greeks is the lines of text from right to left and left to right changed it alternatively, which is a style of writing called 'boustrophedon'. When change the directions of reading it will also changed the orientation of the letterforms.

The Greeks also did not use letter space or punctuations, same as Phoenicians.

Fig 1.1.5 Greeks Writing Style, 'Boustrophedon'

Fig 1.1.6 Greek Fragment, stone engraving (Date unknown)

Etruscan and Roman carvers initially painted letterforms before engraving them in stone, and this practice influenced the stroke qualities, resulting in a change in weight from vertical to horizontal carried over into the carved letterforms.

Fig 1.1.7 Evolution from Phoenician to Roman

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

Fig 1.1.8 4th/5th century: Square capitals

Square capitals

Square capitals were written version that can be found in Roman monuments and serifs are added to finish of main strokes. Different stroke widths can be achieved by holding the pen 60 degrees off the particular.

Fig. 1.1.9 Late 3rd – mid 4th century: Rustic capitals

Rustic Capitals

Rustic capitals was a compressed version of square capitals which allowed for twice as many words on a sheet of parchment and took lesser time to write. Rustic capitals were faster and easier to, but they were slightly harder to read due to their compressed nature. The pen was held at an angle of approximately 30° off the perpendicular.

Fig. 1.1.10 4th century: Roman Cursive

Cursive hands

Instead of using Rustic or Square capitals that were typically reserved for documents or some intended performance, everyday transactions were written in cursive hands which is simplified for speed. The beginning of cursive hand refer to the lowercase letterforms.

Fig. 1.1.11 4th-5th century: Uncials

Uncials

Uncials incorporated some aspects of Roman Cursive, especially in the hands of A,D,E,H,M,U and Q. Uncials are more accurate to think as lowercase letters and broad form of uncials are more readable in small sizes compared to Roman Cursive.

Fig. 1.1.12 c.500: Half-Uncials

Half-Uncials

Half-Uncials marks the formal beginning for lowercase letters with the use of ascenders and descenders and were a further formalization of the cursive hand, 2000 years after the origin of Phoenician alphabet.

Fig. 1.1.13 c.925: Caroline miniscule

Charlemagne

Charlemagne is the first unifier of Europe since the Romans. He appointed Alcuin of York, who served as Abbot of St. Martin of Tours, with a task to standardize all religious text. The monks rewrote the texts using both majuscules(uppercase), miniscule, capitalization and punctuation which sets the standard for calligraphies for a century.

3. Blackletter to Gutenberg's type

Fig. 1.1.14 c.1300: Blackletter(Textura)

The dissociation of Charlemagne's empire brought out regional variations upon Alcuin scripts.

In Northern Areas, a condensed strongly vertical letterform called 'Blackletter' or 'textura' had gained popularity.

However, a rounder, more open hand called 'rotunda' had gained popularity in the Southern Areas.

Fig. 1.1.15 c.1445: Rotunda

Gutenberg marshalled various skills including engineering, metalsmithing, and chemistry to build pages that accurately mimicked the work of the scribe's hand - Blackletter of Northern Europe.

3. Text Type Classification

Fig. 1.1.16 Text type classification

Week 2 Text_P1

1. Tracking: Kerning and Letterspacing

Fig 1.2.1 Difference with and without kerning

Kerning : Automatic adjustment of space between letters (often mistaken as Letterspacing)

Letterspacing : To add space between letters

Fig 1.2.2 Normal , Tight and Loose tracking of a word

Tracking : Addition and removal of space in a word or sentence.

Changes of letter spacing in the words or sentences will changes the readability of text.

Tight tracking and loose tracking will reduce the readability and recognizability of the text as the increase or decrease of counterform of text will affect the pattern of the words.

Fig 1.2.3 Effects of Normal tracking(Left) and Loose Tracking(Right) on lowercase

Fig 1.2.4 Tight Tracking

Uppercase letters are always being letterspace, while lowercase letters do not. It is because uppercase letters able to stand on their own while lowercase letters require the counterform created between the letters in order to maintain the readability of text.

The suitability to have letter spacing on uppercase letterform is higher than lowercase letterform as uppercase letterforms are are designed to be able to stand on their own. However, counterform were required between the letters to maintain the line of reading.

The counterform will be violated when letter spacing were added, which will reduce the readability of that particular word or sentences.

2. Formatting Text

Fig 1.2.5 Flush left, Ragged right

Flush Left: This format most closely mirrors the asymmetrical 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 grey value.

Fig 1.2.6 Centered, Ragged right and left

Centered: This format assign equal value and weight to both side at the line and imposes symmetry upon the text. It transform field of texts into shapes, therefore adding a pictorial quality to material that is non pictorial to nature. Line breaks is important to amend so that the text does not appear to jagged because centered type creates a strong shape on the page.

Fig 1.2.7 Flush Right, Ragged Left

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

Fig 1.2.8 Justified

Justified: This type shares attributes with centered where it imposes a symmetrical shape by expanding or reducing spaces between words or letters. However, the openness of lines will result in rivers which is white spaces running vertically through texts.

Designer will need to remember that when setting the field of type, it needs to be clear, and appropriately present the author's messages.

3. Textures

Fig 1.2.9 Anatomy of Typeface

Different typeface suits different messages. A good typographer has to choose which typeface suits the best. Fonts the higher the x-height and stroke width, the darker the mass will be produced on the page.

X-height: refers to the baseline and the line above the baseline (mean line)
To identify if it's a readable text, one will need to look whether the value x-height is larger than normal. The x-height in contrast with the ascender space and descender space decides the value of x-height.
Ascender: The space above the x-height
Descender: The space below the x-height
If descender is smaller compared to x-height, it is more readable. It means that the x-height is larger in proportion to the center.

Fig 1.2.10 Different Typefaces with different gray values

Different typefaces shows different gray value. Typeface with middle gray value is the ideal choice which is more legible and readable.

4. Leading and Line Length

Fig 1.2.11 Tight(Left) and Loose(Right) leading

The goal in setting text type is to allow for easy, prolonged reading. At the same time a field of type should occupy the page as much as photograph does.

Type size : Text type should be large enough to be read easily at arm length (imagine holding a book in lap)

Leading : Text that is set too tightly encourages vertical eye movement which will cause a reader to loose his or her place easily; Text that is set too loosely creates striped pattern which distracts the reader from the material at hand.

Line Length : Shorter line requires less leading, longer requires more; A good rule of thumb is to keep line length between 55-65 letters. inappropriate line length impairs reading.

5. Type Specimen Book

Fig 1.2.12 Sample Type Specimen Sheet

A type specimen book presents examples of typefaces in a range of sizes. Whether in print or as an ebook for screens, it serves as a reliable guide for referencing different aspects of typography, such as typefaces, font sizes, line spacing, and line lengths.

Week 3 Text_P2

1. Indicating Paragraph

Fig 1.3.1 Pilcrow

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

Fig 1.3.2 Line Space and leading

Line space (leading*): Space between the paragraphs. If the line space is 12pt thus the paragraph space will be 12pt.

Fig 1.3.3 Standard Indentation

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

Fig 1.3.4 Extended Indentation

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

2. Windows and Orphans

Fig 1.3.5 Widows and Orphans

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

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

In justified text both widows and orphans are considered serious gaffes. The only way to solve to widows is to rebreak your line endings through out your paragraph so that the last line of any paragraph is not noticeably short. Typographers need to ensure that there are no instances where a column of text begins with the final line of the previous paragraph to prevent orphans.

3. Highlighting Text

Fig 1.3.6 Italics text

Fig 1.3.7 Bold text

Fig 1.3.8 Colour text

There are a few ways to highlight within a column of text, such as italics, bold and colour.

Fig 1.3.9 Sans Serif Font

Using a different typeface is also a way to highlight the text. For example, the sans serif font (Univers) has been reduced by .5 to match the x-height of the serif typeface. 8 ≠ 7.5

Fig 1.3.10 Placing colour at the back of the 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 is also a way of highlighting text.

Fig 1.3.11 Placing bullets

Sometimes it is essential to position specific typographic elements beyond the left margin of a text column (extending rather than indenting) to preserve a clear and robust reading alignment.

Fig 1.3.12 Quotation Marks

Quotation marks, such as bullets, have the potential to generate a noticeable indentation, breaking the left reading alignment. Compare the quoted text indented at the top with the extended quote at the bottom.

4. Headline with Text

Fig 1.3.13 Examples of A head

A head - indicates a clear break between the topics within a section.

Fig 1.3.14 Examples of B head

B head - subordinate to A heads. B heads indicate a new supporting argument or example for the topic at hand.

Fig 1.3.15 Examples of C head

C head - although not common, highlights specific facets of material within B head text. They not materially interrupt the flow of reading.

Fig 1.3.16 Combination of A,B and C heads

Putting together a sequence of subheads = hierarchy.

5. Cross Alignment

Fig 1.3.17 Cross Alignment

Cross aligning headlines and captions with text type reinforces the architectural sense of the page.

Example above: one line of headline type cross-aligns with two lines of text type, and (right; bottom left) four lines of headline type cross-align with five lines of text type.

Week 4 Basic

1. Describing Letterforms

Technical terms are used to describe letterforms over 500 years, letterform's component parts are learnt to identify specific typefaces easily.

Fig 1.4.1 Line Terms

Baseline - The imaginary line the visual of the letterforms.

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

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

Fig 1.4.2 Stroke

Stroke - Any line that defines the basic letterform

Fig 1.4.3 Apex / Vertex

Apex / Vertex - The point created by joining two diagonal stems (apex above and vertex below)

Fig 1.4.4 Arm

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

Fig 1.4.5 Ascender

Ascender - The portion of the stem of a lowercase letterform that projects above the median.

Fig 1.4.6 Barb

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

Fig 1.4.7 Beak

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

Fig 1.4.8 Bowl

Bowl - The rounded form that describes a counter. The bowl may be either open or closed.

Fig 1.4.9 Bracket

Bracket - The transition between the serif and the stem.

Fig 1.4.10 Cross Bar

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

Fig 1.4.11 Cross Stroke

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

Fig 1.4.12 Crotch

Crotch - The interior space where two strokes meet.

Fig 1.4.13 Descender

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

Fig 1.4.14 Ear
Ear - The stroke extending out from the main stem or body of the letterform.

Fig 1.4.15 Em/en

Em/en - Originally referring to the width of an uppercase M, and em is now the distance equal to the size of the typeface (an em in 48 points, for example). An en is half the size of an em. Most often used to describe em/en spaces and em/en dashes.

Fig 1.4.16 Finial

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

Fig 1.4.17 Leg

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

Fig 1.4.18 Ligature

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

Fig 1.4.19 Link

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

Fig 1.4.20 Loop

Loop - In some typefaces, the bowl created in the descender of the lowercase G.

Fig 1.4.21 Serif

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

Fig 1.4.22 Shoulder

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

Fig 1.4.23 Spine

Spine - The curved stem of the S.

Fig 1.4.24 Spur

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

Fig 1.4.25 Stem

Stem - The significant vertical or oblique stroke.

Fig 1.4.26 Stress

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

Fig 1.4.27 Swash

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

Fig 1.4.28 Tail

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

Fig 1.4.29 Terminal

Terminal - The self-contained finish of a stroke without a serif. This is something of a catch-all term. Terminals may be flat (‘T’ above), flared, acute, (‘t’ above), grave, concave, convex, or rounded as a ball or a teardrop (see finial).

2. Describing Letterforms

The full font of a typeface contains much more than 26 letters, to numerals, and a few punctuation marks.

To work successfully with type, you should make sure that you are working with a full font and you should know how to use it.

Fig 1.4.30 Uppercase

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

Fig 1.4.31 Lowercase

Lowercase - Lowercase letters include the same characters as uppercase.

Fig 1.4.32 Small Capitals

Fig 1.4.33 Difference between lowercase and small capital

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.

Fig 1.4.34 Uppercase 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. They are most successfully used with tabular material or in any situation that calls for uppercase letters.

Fig 1.4.35 Lowercase Numerals

Lowercase Numerals - Also known as old style figures or text figures, these numerals are set to x-height with ascenders and descenders. They are best used whenever you would use upper and lowercase letterforms. Lowercase numerals are far less common in sans serif typefaces than in serif.

Fig 1.4.36 Italic

Fig 1.4.37 Italic vs. Roman

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.

Fig 1.4.38 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.

Fig 1.4.39 Ornaments

Ornaments - Used as flourishes in invitations or certificates. They usually are provided as a font in a larger typeface family. Only a few traditional or classical typefaces contain ornamental fonts as part of the entire typeface family (Adobe Caslon Pro).

3. Describing Typefaces

Fig 1.4.40 Roman

Roman - The letterform is so called because the uppercase forms are derived from inscriptions of Roman monuments. A slightly lighter stroke in roman is known as ‘Book’.

Fig 1.4.41 Italic

Italic - Named for fifteenth century Italian handwriting on which the forms are based. Oblique (not based on handwriting) conversely are based on roman form of typeface.

Fig 1.4.42 Boldface

Boldface - Characterized by a thicker stroke than a roman form. Depending upon the relative stroke widths within the typeface, it can also be called ‘semibold’, ‘medium’, ‘black’, ‘extra bold’, or super. In some typefaces (notably Bodoni), the boldest rendition of the typeface is referred to as ‘Poster’.

Fig 1.4.43 Light

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

Fig 1.4.44 Condense

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

Fig 1.4.45 Extended

Extended - An extended variation of a roman font.

Fig 1.4.46 Describing typefaces

4. Comparing Typefaces

The 9 typefaces mentioned in the following slide represent 500 years of type design. Easy readability and an appropriate expression of contemporary esthetics are the goals sought by men and women over the years.

Fig 1.4.47 Comparing typefaces

What is worth noting isn’t the similarities but rather the differences – the accumulation of choices that renders each unique.

Beyond the gross differences in x-height, the forms display a wealth of variety, in line weight, relative stroke widths and in feeling. For any typographer these feelings connote specific use and expression.

The Rs display a range of attitudes, some whimsical, some stately, some mechanical, others calligraphic some harmonious and some awkward.

Fig 1.4.48 Comparing typefaces

INSTRUCTIONS

Task 1 Exercise ( 20% ) - Individual Assignment

Exercise :

Type Expression

Text Formatting

Marking Criteria :

Each expression has been explored with a great variety of ideas. All the expressions are perfectly matched in meaning. The typographic solutions are extremely well composed and balanced. The expression is excellently crafted (technical), memorable and engaging. The textual information is extremely well formatted (font size, line-length, leading, alignment, cross alignment, reading rhythm, information hierarchy, sans widows and orphans).

Learning Goals :

To be able to compose and express using textual information.
To be able to format text for effective communication

Timeframe :

Week 1 – Week 5 (Deadline on Week 6)

Task 1: Exercises- Type Expression

RESEARCH

Chaos

Fig 1.1 Research of Creating Type Expression of 'Chaos'

Link: https://www.seankeane.co.uk/portfolio/jordan-b-peterson-order-chaos

Fig1.2 Research of Creating Type Expression of 'Chaos'

Link: https://www.vecteezy.com/vector-art/15208166-chaos-word-graffiti-style-letters-vector-hand-drawn-doodle-cartoon-logo-illustration-funny-cool-chaos-letters-fashion-graffiti-style-print-for-t-shirt-poster-concept

Fig 1.3 Research of Creating Type Expression of 'Chaos'

Link: https://www.alamy.com/stock-photo/nervous-word.html?imgt=8&page=2&sortBy=relevant

CRUSH

Fig 1.4 Research of Creating Type Expression of 'CRUSH'
Link: https://www.freepik.com/free-vector/crush-stone-text-effect-editable-quake-broken-text-style_17717419.htm

Fig 1.5 Research of Creating Type Expression of 'CRUSH'
Link: https://www.deviantart.com/paulus246/art/crush-Glass-typography-580979554

Fig 1.6 Research of Creating Type Expression of 'CRUSH'
Link: https://www.fontspace.com/crush-metal-font-f97395

Fig 1.7 Research of Creating Type Expression of 'CRUSH'
Link: https://stock.adobe.com/search?k=crush+logo

BOUNCE

Fig 1.8 Research of Creating Type Expression of 'Bounce'

Link: https://www.pinterest.com/pin/517280707177045521/

Fig 1.9 Research of Creating Type Expression of 'Bounce'
Link: https://www.pinterest.com/pin/517280707177045520/

Fig 1.10 Research of Creating Type Expression of 'Bounce'
Link: https://www.pinterest.com/pin/162622236528669003/

Fig 1.11 Research of Creating Type Expression of 'Bounce'
Link: https://design.tutsplus.com/articles/what-is-expressive-typography--cms-36080

FLOAT

Fig 1.12 Research of Creating Type Expression of 'Float'
Link: https://dribbble.com/shots/19626296-Float-Minimal-Typography

Fig 1.12 Research of Creating Type Expression of 'Float'
Link: https://99designs.com/profiles/komorebi/designs/38417

Fig 1.13 Research of Creating Type Expression of 'Float'
Link: https://www.vecteezy.com/vector-art/11669888-summer-party-vector-concept-design-pool-party-typography-creative-text-with-floating-beach-ball-and-inflatable-letters-in-front-view-underwater-vector-illustration

Fig 1.14 Research of Creating Type Expression of 'Float'
Link: https://stock.adobe.com/search/images?k=melting+font&asset_id=417822492

IDEATION

1.Sketches

Compose and express the given 4 words. To begin with. sketch out the ideas own creativity. During digitization, will be given a selection of ten typefaces to work with after the concepts have been chosen. Through iteration, compose the letters in a way that become visible — still and in motion.

Software: Adobe Illustrator and Adobe Photoshop.

In the beginning, we were given 11 words in the voting session to make type expression.

The words are:

1. Chaos

2. Spring

3. Dive

4. Bounce

5. Float

6. Crush

7. Slide

8. Kick

9. Spike

10. Crying

11. Pain

We need to vote through the poll and choose 6 highest voting words and choose 4 words among these 6 words to do the type expression. I have chosen Crush, Chaos, Bounce, Float to sketch the type expression.

Figure 2.1: Sketches, (Week 2 3Oct2023)

My Design Idea:

Crush:

1. Biscuits crush together will become shape like this.

2. Matches very easily to crush together

3. Climb up the moon and sleep

4. Everything crush together will broken.

Chaos:

1. When you are chaos than shout very load

2. Jumping chaos

3. Slowly becoming extremely chaos

4. Exploded chaos

Bounce:

1. Playing slide than bounce off the slide.

2. Bouncing many layer

3. Pogo let you bounce

4. Monster bouncing everywhere

Float:

1. Floating through the water

2. Lifebuoy related when

3. Chocolate fountain float the city

4. Water keep dropping than the city float

I sketches those words manually so that it is easier to visualize the idea that came up from my mind. My personal favourite words are Crush no.3, Chaos no.4, Bounce no.2 and Float no.2. After receiving the feedback from Miss Low Hsin Yin, she told us we should not use illustration in this task. Therefore, Miss Low Hsin Yin suggested me to choose Crush no.1, Chaos no.3, Bounce no.3 and Float no.1. So, I put more effort on digitization.

2.Digitilization

1. CHAOS

At first, I type Chaos then I resize the words. I press ctrl key and pull the text box too let the word get more closer.

2. BOUNCE

At first I type BOUNCE. After that, I place every alphabet to places that I want. After placing the alphabet I copy paste the O and make it looks like spring. Lastly, I recolor the O to gray.

3. CRUSH

At first I type CRUSH. Later I press ctrl key and pull the word bigger. After that, I use pen tool draw many triangle. I select all the triangle and go to upper left corner click "Object" and than click "Path" and click "Divide Object Below" button

4. FLOAT

In the beginning, I type FLOAT. After that, I use pen tool and draw a curvy line. I select the words and go to tool bar click "Window" and click "Pathfinder" than auto cut the words half. So, I select bottom half and change the color to gray. I drag down the bottom part let the word separate.

First Attempt

Figure 3.2: Digitization, (Week 310Oct2023)

3. Animation

Step 1:

I copy 24 drawing board.

Step 2:

I type and copy Float 24 times

Step 3:

After I place finish all the word I use pen tool draw a curvy line

Step 4:

I click "window" and click "pathfinder"

Step 5:

I change all bottom part to gray color

Step 6:

I save and export the whole file to Adobe photoshop and save as animation

Step 7:

This is the first edition Float Animation. Than Miss Low tell me to adjust the size with the ruler tool to make sure the words are same measurement.

Final animation

This is the final animation.

Task 1: Exercise 2 Formatting Text

In Exercise 2, I need to master the techniques of kerning, tracking, text formatting techniques like flushed left, centered, flushed right and justified alignment and determine leading, line length, type size and paragraph spacing, avoid orphans and widows and achieve cross alignment.

At first, I typed my name with the 10 typefaces provided to practice kerning and tracking.

Fig 4.1 Without Kerning and Tracking (Week 4 17Oct2023)

Fig 4.2 With Kerning and Tracking (Week 4 17Oct2023)

Text Formatting Practice

I start my text formatting task by creating a text layout and add a suitable picture with caption to it.

Fig 2.3 JPEG of my Text Formatting Task- Without Grids (Week 5 23Oct2023)

Fig 2.4 JPEG of my Text Formatting Task- With Grids (Week 5 23Oct2023)

Fig2.5 PDF of my Text Formatting Task-Without Grids(Week 5 23Oct2023)

Fig2.6 PDF of my Text Formatting Task-With Grids(Week 5 23Oct2023)

HEAD
Font/s: Adobe Caslon Pro Bold
Type Size/s: 10
Leading: 12
Paragraph spacing: 12 pt

BODY
Font/s: Adobe Caslon Pro
Type Size/s: 10
Leading: 12
Paragraph spacing: 12 pt
Characters per-line: 58

Alignment: Justify with last line align left

Margins: 12.7 mm top, 12.7 mm left + 12.7 mm right + 50 mm bottom
Columns: 4
Gutter: 5 mm

Task 2

FEEDBACK

Week 1

No Feedback

Week 2

Specific Feedback: Too much illustrator, just typography design will do need more words design not drawing illustration in text

General Feedback: Blog on track, need to add sketch research and start writing reflection

Week 3

Specific Feedback: Miss Low said my digitalization words overall very good can choose Crush and Float to do animation.

General Feedback: Blog almost on track but need to do Further Reading and update my sketches

Week 4

Specific Feedback: Miss Low said my Animation need to redo a bit because my word out of the position

General Feedback: Need to do more Further Reading and update task 1 Animation

Week 5

Specific Feedback: Miss Low said my text formatting too many photo and the visual very pack so she suggest me take of one photo just put one photo in the text.

General Feedback: Finalize task 1 Blog due date is coming.

REFLECTION

Experience

In my perspective, the initial weeks of the school term have proven to be quite fulfilling for me. We methodically tackled tasks each week to ensure our ongoing progress, and we received weekly feedback and recommendations from both Ms. Low and Mr. Vinod to refine and enhance our work. Additionally, we had the opportunity to evaluate our peers' work, which provided valuable insights and served as a source of inspiration. To solidify our grasp of typographic fundamentals, we also engaged with prerecorded lecture materials.

Observation

I noted that by gradually completing our assignments on a weekly basis, we were fortunate to receive comprehensive guidance and constructive feedback, which greatly expedited and enriched our learning experience.

Findings

Typography, encompassing letters and words, constitutes our primary mode of communication in our daily lives. The aesthetic quality of typography indeed requires meticulous effort and can significantly impact how viewers perceive content visually. It became apparent to me that I began to pay heightened attention to the typography in my immediate environment.

The Simple Things rebrand is a “Bristol family affair”

"The Simple Things" magazine unfolds as a heartwarming "Bristol family affair," infusing a distinct local flair into the publication's refreshed identity. While specific details about the rebrand are not provided, the characterization as a family affair implies a close-knit collaboration, possibly involving local talent and a shared connection to the vibrant Bristol community.

For an in-depth exploration of this charming rebrand, consider seeking out articles or press releases from design and media outlets. Look for insights into the creative process, the individuals or agencies behind the redesign, and the unique elements that reflect Bristol's influence on the magazine's new look.

Exploring design and branding platforms may yield case studies or analyses, offering a deeper understanding of the strategic decisions made during the rebrand and its potential impact on the magazine's visual appeal and market positioning.

Whether you're interested in the creative aspects, the familial collaboration, or the cultural resonance with Bristol, further reading can unveil the rich narrative behind "The Simple Things" rebrand and its significance within both the publishing and local creative communities.

Search This Blog

Jie Xuan 0356515

Typography Task 1 Exercise

The Simple Things rebrand is a “Bristol family affair”

Comments

Post a Comment