Typography Task 1- Type Expression and Text Formatting

 7.4.2023-5.5.2023(Week1- Week 5)

Low Li Vern/ 0362678

Typography/ Bachelor of Design (Honours) in Creative Media

Task 1: Exercise 1&2



LECTURES

Week 1:
In the first week of Typography lecture we were briefed about our module information and some simple knowledge about typography. And next we were guided by Mr Vinod to join the Typography (TDS) facebook group to get more information and announcement. We were required to download and install 10 fonts into computer as it will be used in the next 14 weeks. Next, Mr Vinod introduced some sample e-portfolio and teach us how to write reflection. We had 40 minutes to create our first blog following a video provided by Mr Vinod.

-Typography :Typography is the art and technique of arranging type in order to make written language legible, readable, and appealing when displayed. It involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing, and adjusting the space between pairs of letters. 

-Font : A font is a specific style or design of a typeface. In other words, a font is a set of characters with a specific style, such as bold, italic, or regular. For example, Arial is a typeface, but Arial Bold and Arial Italic are two different fonts of the Arial typeface.

-Typeface :  A typeface is a particular design of type, which includes a specific set of letterforms, numbers, punctuation, and other characters. A typeface is a collection of fonts that share the same basic design, but differ in weight, size, and style. 

Week 2:
Mr Vinod share his work of designs in typography and photography work in the past, he introduce his work to us and it inspired me. Mr Vinod than give us feedback on our type expression sketches to improve our ideas or details.

History and Development of Typography

1. Early letterform development: Phoenician to Roman

Fig. 1.1 Phoenician develop to Roman

Fig. 1.2 Evolution of Phoenician

It is interesting to know that the Phoenicians write from right to the left the Greeks developed a style writing 'Boustrophedon’ (how the ox ploughs), they read alternately from right to left and left to right. As the same with the Phoenicians, the Greeks did not use letter space or punctuations.

Fig. 1.3 Direction from the right to left and left to the right

Fig. 1.4 Greek Fragment, stone engraving (Date unknown)

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

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

Fig. 1.6 Square Capitals

Square Capitals: These letter forms have serifs added to the finish of the main strokes. The variety of stroke was achieved by the reed pen held at an angle of approximately 60 degrees of the perpendicular.

Fig. 1.7 Rustic Capitals

Rustic capitals:
A compressed version of square capitals, rustic capitals allowed for twice as many words on a sheet of parchment and took far less time to write. The pen or brush was held at an angle of approximately 30° off the perpendicular. Why even they are hard to read than square capitals but people keep develop it? The Reason is that it is maybe not enough space to fill in all the letters so using rustic capitals can solve the problem.

Fig. 1.8 Roman Cursive 

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

Fig. 1.9 Uncials

Uncials: They incorporated some aspects of the Roman cursive hand. Uncials have smaller letters. The broad forms of uncials are more readable at small sizes than rustic capitals. Uncials didn't have lowercase and uppercase letter forms.

Fig. 1.10 Half Uncials

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

Fig. 1.11 Caloline Minuscule

Charlemange, the first unifier of Europe since the Romans, issued an edict in 789 to standardize all ecclesiastical texts. The monks rewrote the texts using both majuscules (uppercase), miniscule, capitalization and punctuation which set the standard for calligraphy for a century.

Fig. 1.12 Blackletter (Textura)

Fig. 1.13 42 line bible, Johann Gutenberg, Mainz

With the dissolution of Charlemagne’s empire came regional variations upon Alcuin’s script. In northern Europe, a condensed strongly vertical letterform know as Blackletter or textura gained popularity. In the south, a rounder more open hand gained popularity, called ‘rotunda’. The humanistic script in Italy is based on Alcuin’s minuscule. There is no same writing of two person so this is how the development.

Gutenberg's skills included engineering, metalsmithing, and chemistry. He marshaled them all to build pages that accurately mimicked the work of the scribe's hand - Blackletter of northern Europe. His type mold required a different brass matrix, or negative impression, for each letterform.

Timeline of typography development
1.1450 Blackletter 
2.1475 Old style
3.1500 Italic
4.1550 Script
5.1750 Transitional
6.1775 Modern
7.1825 Square Serif / Slab Serif
8.1990 Serif/ Sans Serif 

Week 3:
For today class is an unofficial class online, Mr Vinod have in on zoom meetings to give us feedbacks of our digital type expression. We shared screen on zoom to get feedback of our ideas and Mr Vinod give us suggestion and new ideas.

Typography: Text


1. Kerning and Letterspacing


Fig. 2.1 Kerning word sample

Kerning: Adjustment of space between letters. Often mistakenly referred as letterspacing.
Letterspacing: Adding space between letters
Tracking: The addition and removal of space in a word or sentence.

Fig. 2.2 Normal tracking, loose tracking and tight tracking

We don't read text by the letters, we read through the shape of the letters. We recognize the patterns in our mind to read, so if we increase or decrease the spacing between the words it will decrease the recognizabality of the text. It is important to decide the kerning between the letters.

Fig. 2.3 Kerning and Letterspacing

If you add letterspacing it will break the counter form, than it will reduce the readability of the sentence.

2. Formatting Text

Fig. 2.4 Normal tracking and Loose tracking

Fig. 2.5 Flush left

Flush left👍: Flush left is the most natural way of formatting text. 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. 

Fig. 2.6 Centered

Centered🙅: Centered type text is not advisable because the starting point is irregular and it is hard to read. It is better to use in small amount of words. 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.

Fig. 2.7 flush right

Flush right🙅It is avoid to use flash right in text except if you have pictures and for pictures you need to show that caption. 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.

Fig. 2.8 Justified

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.

Fig. 2.9 Different text selection

The text on the left should never be use in capital letters. Using this particular typeface it is not designed for that purpose. It is important to understand how different typefaces is use and different typefaces suit messages.

3. Texture

Fig. 3.1 X-height

Fig. 3.2 Different typefaces, different gray values

This kind of typefaces is a lot more legible and readable because it is not too thick or not too light. The best choice is to choose the middle gray colour value.

4. Leading and Line Length

Type size: Text type should be large enough to be read easily at arm's length.

Leading: Text that is set too tightly encourages vertical eye movement; a reader can easily lose track. Type that is set too loosely creates striped patterns that cause distraction.

Line Length: Shorter lines require less leading; longer lines more. Make sure the line length is between 55-65 characters. Extremely long or short line lengths disturb the reading.

The first thing to do when designing a formatting text is to decide on the text size and secondly the leading is decided and the last is to decide the line length.

5. Type Specimen Book
A type specimen book shows some samples of the typefaces in various different sizes. It is to provide an accurate reference for type, type size, type leading, type line length.

Fig. 3.3 Sample Type Specimen Sheet


Word of the day: The devil is in the details. - Jane Jacob

6. Indicating Paragraphs
Pilcrow (¶): A holdover from medieval manuscripts. It is used to indicate paragraph space.
Line Spacing : Is a spacing between the paragraph. (jelly + bread)

Fig. 3.4 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. Best use when it is justified.

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

7. Widow and Orphan

Fig. 3.5 Examples of widow and orphan

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

We can avoid widow and orphan by reducing the column width and the column height in one side and than introducing it to the second line. Or doing kerning to the text, but maximum to plus or minus only three times.

8. Highlighting Text

Ways to highlight the text
1. Using Italics
2. Using Bold
3. Change the typeface and make it bold
4. Change the colour ( but rather not use yellow or light colour)
5. Create a box around the text
6. · Place certain typographic elements
7. Add “quotation marks”

9. Headline within Text

Fig. 3.6 A Head

A head indicates a clear break between the topics within a section. In the following examples 'A' heads are set larger than the text, in small caps and in bold. The fourth example shows an A head 'extended to the left of the text.
Fig. 3.7 B 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.

Fig. 3.8 C Head

The C heads, although not common, highlights specific facets of material within B head text. They not materially interrupt the flow of reading. As with B heads, these C heads are shown in small caps, italics, serif bold and san serif bold. C heads in this configuration are followed by at least an em space for visual separation.

10. Cross Alignment

Fig. 3.9 Cross Alignment

Week 4:
For the week 4 class we were require to upload our animated type expression in Facebook group. After that Mr Vinod give us feedback of our text expression gif. After the feedback, we rest for 10 minutes and Mr Vinod introduce the new task of week 5 and emphasize how to get marks from the new assignment. 

Typography: Basic
1. Describing letterforms

Fig. 4.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'.

Stroke: Any line that defines the basic letterform.
Apex / Vertex: The point created by joining two diagonal stems (apex above and vertex below).

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

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

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

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

Bracket: The transition between the serif and the stem.

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

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

Crotch: The interior space where two strokes meet.

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

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

Em/en: Originally refering 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.

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

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

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

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

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

Spine: The curved stem of the s.

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

Stem: The significant vertical or oblique stroke.

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

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

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. The Font

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

Lowercase: Lowercase letters include the same characters as uppercase.

Fig. 4.3 lowercase

Fig. 4.4 small capital

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. 4.5 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 when ever you would use upper and lowercase letterforms. Lowercase numerals are far less common in sans serif type-faces than in serif.

Fig. 4.6 Italic vs Roman

Fig. 4.7 Punctuation, miscellaneous characters

Fig. 4.8 Ornaments

3. Describing typefaces

Fig. 4.9 Describe Typefaces

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'.

Italic: Named for fifteenth century Italian handwriting on which the forms are based. Oblique conversely are base on 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

Fig.4.10 Comparing Typefaces


Week 5:
We uploaded our text layout for Mr Vinod to give us the feedback. Mr Vinod correct our problems and give suggestions on our work. After the feedback, Mr Vinod brief to us about the next task and show to us some sample of the next task.

1. Understanding letterforms

Fig. 5.1 Baskerville letter 'A'

The uppercase letterforms suggest symmetry, but it is not symmetrical. Two different stroke weights of the Baskerville stroke form; more noteworthy is the fact that each bracket connecting the serif to the stem has a unique arc.

Fig. 5.2 Univers letter 'A'

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

Fig. 5.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 (must keep in mind)

X-height: The size of the lowercase letterforms. Curved strokes, such as in ‘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

Fig. 5.4 Example of letterform

Counterform (or counter)—the space describes, and often contained, by the strokes of the form. When letters are joined to form words, the counterform includes the spaces between them. How well are the counters handled determines how well the words hang together—how easily we can read what’s been set.

Fig. 5.5 Examinations of letterforms

4. Know how to Contrast

Fig. 5.6 Contrast

Typography in Different Medium

1. Print Type Vs Screen Type

Fig. 6.1 Type for Print 

A good typeface for print- Casion, Garamond. Baskerville are the most common typefaces that is used for print. Because of their characteristic which are elegant and intellectual but aiso highly readable when set at small font size.

Fig. 6.2 Type for Screen

Typefaces intended for use on the web are optimized and often modified to enhance readability and performance onscreen in a variety of digital environments. This can include a taller › height (or reduced ascenders and descenders), wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, as well as modified curves and angles for some designs

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.

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

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.

Fig. 6.3 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 traction of the expressive potential of dynamic properties. From billboards to posters, magazines to fliers, we encounter all forms of static typography with wide ranging purposes. Whether they are informational, promotional, formal or aspirational pieces of designs, the level of impression and impact they leave on the audience is closely knitted to their emotional connection with the viewers.

Motion Typography Type is often overlaid onto music videos and advertisements, often set in motion following the rhythm of a soundtrack. On-screen typography has developed to become expressive, helping 10 establish the tone of associated content or express a set of brand values. In title sequences, typography must prepare the audience for the film by evoking a certain mood.


Fig. 6.4 "Se7en" - film by David Fincher, to show motion typography

Hence, we must read more to know more about Typography to help on having a better idea in our design. We can understand the concept of Typography when we learn more about it.


INSTRUCTIONS


TASK 1: Exercise 1 - Type Expression


For Exercise 1, we are given a set of words to create type expressions of. Those words are Destroy, Split, Surprise, Love, Silence, Party, Pause. We are limited to only 10 typefaces which are Adobe Caslon Pro, Bembo, Bodoni, Futura, Gill Sans, Garamond, New Baskerville, Janson, Serifa and Univers LT Std. We need to choose four words and sketch each of them in three forms.
 
💗Design Process💗

1. Sketches

I have chosen the words Love, Pause, Party, Split for the type expression sketches.


Fig. 7.1 Type expression sketches



Love: I changed the letter O into a love shape to express the effect of love in the word 1b and 1c.

Pause: I use the letter U as the pause sign in the word 2a and 2b. The word 2c I use black rectangular shapes as a pause sign in every alphabet.

Party: I tried to use some glowing materials design to express the glow to make the word party looks like it is glowing.

Split: In the design 4a I separated the s and plit and the s is bigger to express the difference between them. I use an idea by ESPRIT logo during the 4b design to make it looks like splitting the word.


Small suggestion: Mr Vinod gave me some suggestion on the design 2c as the black shape is too much and it is confusing, it will be better if just to add on one alphabet.

    

2. Digitisation


During the digitation process, I have change some of my ideas from the sketch. I tried several designs and I use the one I felt the most reference. Next, I worked more detail with the height and width of the word to make it refer to my design.



Fig. 7.2 Digital type expression


After that, Mr Vinod give me some suggestion and idea to improve the design. The word Pause looks great and can use light background. For the word Party is a good design but the word party does not look like it is popping out from the letter A, and also do not distort the letters. The word split is wrong choice of font.
 

Fig. 7.3 Digital type expression split mistake


Final Type Expressions

Fig. 7.4 Final Type Expression

After the suggestion of week 3, I changed some details of the words. For the word Love I changed the word back to the original size. Next I added two lines for the Party to make it more like a movement and also change the size of the letter A to original. As for the word Split I change the font to Gill Sans Std Italic.

3. Type Expression Animation

Fig. 7.5 First attempt at animating 'split'


Fig. 7.6 First attempt at animating 'split' steps (12 frames)

I found that the animation is not smooth and not enough detail, and I decide to add more frames on the animation. I tried to let the letter L to be squeezing through the word spit and form to the word split. After the letter L squeeze in, it breaks the word spit and it become more bigger to let the word be more split off.


Final Animated Type Expression
Fig. 7.7 Final Animated Type Expression (54 frames)

The idea of this animation is using the letter L to break the word spit, so I let the word spit to be closer and let it look like it is unbreakable. And next the letter L appears under the words, I wanted to make it to be like secretly appear. After it appears, the letter L squeeze through them and the word 'sp' and 'it' will be force to go aside. Next the letter L will be between the letters and suddenly become bigger and I make the letter 'spit' oblique just like they saw the letter L becoming huge.


Task 1: Exercise 2 - Text Formatting

In Exercise 2, we are required to create one final layout addressing different areas of text formatting. Kerning, leading, paragraph spacing, alignment is required. This exercise will help us practice and develop our skills of adjustment of the text layout. We are ask to use Adobe InDesign in this exercise.

Fig. 8.1 Text Formatting after kerning

Fig. 8.2 Text Formatting with font name

Fig. 8.3 Both with kerning and without kerning overlayed to show the difference

Using the 10 fonts as pratice to learn the difference with kerning and without kerning. Some of the letters has uncomfortable spacing, and what can we do is to make the letter spacing be in a better way by kerning the letters.


Fig. 8.4 Layout progress

Without kerning the text, it will be not even and it will left lots of orphan and it will be hard to read. After kerning it will be more comfortable to read and the layout will look better.

Small Tips: 
1. Make sure there is not more than one hyphenation in one paragraph.
2.Leading must be more 2 points of the font size.
3.Avoid widows and orphans.
4. Avoid the headings to be too separated.
5. Paragraph spacing avoid too be too much, better to be same with leading.
6. Photo must be related to the text.

Final Task 1 : Exercise 2 - Text Formatting

Fig. 8.5 Final Task 1: Exercise 2 - Text Formatting (1)
Fig. 8.6 Final Task 1: Exercise 2 - Text Formatting with lines

 Mr Vinod give a suggestion of the picture, he suggest me to crop the photo into equal size to make the quality and appearance of the photo to be less difference. After cropping the picture the layout look better and I decided to keep the change.

HEAD Font/s: ITC Garamond Std
Type Size/s: 51 pt
Leading: 35 pt
Paragraph spacing: 0
BODY Font/s: Univers LT Std
Type Size/s: 9 pt
Leading: 11 pt
Paragraph spacing: 11 pt
Characters per-line: 57
Alignment: left justified
Margins: 123 mm top, 26 mm left + right + bottom
Columns: 2
Gutter: 10 mm



Fig. 8.7 Final Task 1: Exercise 2 - Text Formatting (2)
Fig. 8.8 Final Task 1: Exercise 2 - Text Formatting with line

The Head Font of this text formatting (2) letter 'e' uses Italic font to increase the movement of the text.

HEAD Font/s: Janson Text LT Std
Type Size/s: 45 pt
Leading: 35 pt
Paragraph spacing: 0
BODY Font/s: Univers LT Std
Type Size/s: 9 pt
Leading: 11 pt
Paragraph spacing: 11 pt
Characters per-line: 57
Alignment: left justified
Margins: 123 mm top, 26 mm left + right + bottom
Columns: 2
Gutter: 10 mm






Fig. 8.9 Final Text Formatting


FEEDBACK

Week 2
Specific Feedback:
Lecturer commented my design on the word 2c pause as it is too many pauses design, it is too complicated and confusing for others to recognize, the work can be improved by choose one word to design rather than all. The typography 3b party does not express the meaning of the word, it can be improved by adding some other materials.

General Feedback:
Lecturer suggest us to make a sketch in paper but must document it nicely. Never untidy our sketch or else it is hard to express the information of the sketch. Remember the 10 typefaces which is provided. We are suggested to not add colours to our font, better to use black and white as it does not distract the design of the font or logo.

Week 3
Specific Feedback:
 The word Pause is fine and Mr Vinod suggest to put in a light background.The word LOVE must be more careful in the letter V, don't strecth the word. The word Part4y does not look like the word is coming out popping from the letter A. It is suggest to change the font of word Split.
General Feedback:
Do not destort the letters because it will destroy the spacing of the words. We are suggested not to use other things than the letters. 

Week 4
Specific Feedback:
Overall the idea is okay but need to make more frames to make the animation smoother. Mr Vinod suggest me to use simple animation first and make it more detail after the animation works well. 
General Feedback:
Avoid making the animation on a expression but to make it express the words by animation. The last frame can be pause for few seconds or more frames to make it looks like it is not stopped. 

Week 5
Specific Feedback: 
Overall is a nice layout the suggestion is to cut the photo to the same size.
General Feedback:
Make sure the eveness of the layout and good colour to the text. Besides, too much hyphenation is not good, one pharagraph have one hypenate is acceptable. The head font, ' I am Helvetica' is better to not separate or need to be same size or it will be look weird. Avoid the rythm of the text be broken. The solution if the rythm is broke is to use small capitals, follow the x height or change the size of the word which is not a best solution. Remember to check the leading of the layout.


REFLECTIONS


Experience :
At the first week I feel really confuse of  the task. In the first week exercise I did my work wrong as I did not use the 10 typefaces to sketch my type expression. In week 2, Mr Vinod give us the feedback and I found out what is the problem of my work. The most challenging part for me is the digitalizing part of the type expression as I need to have new ideas as my sketching stage is done wrongly. It is difficult to get the ideas done as we are not allowed to distort the letters or add any graphical design. We got our feedback from Mr Vinod in week 3 and I found that lots of ideas from my classmates are similar so I decided to have the different idea for the animation of the type expression. 

It is suprise that the animation stage for the text is easy than I expected. It is fun when I done the animating of the text, I get more experience on using Adobe Illustrator and Adobe Photoshop it is so cool when the work is done. But for the first attempt of my work on animating is to simple and Mr Vinod suggest me to make the animation smoother. I arranged the details and the idea of the animation and make a new work using 54 frames and I feel satisfied when I saw the difference and improvement on my work, maybe that is why I love this course. Therefore I think that this task helps a lot in improving our basics in typography. During this task I have known more about typography and I think it helps a lot in my future designs.


Observation :

After this few weeks, I observe that typography is not only about the font and typeface, but it is also include about the fundamental principles of design, such as balance, contrast, and rhythm of the word. Besides, I also learn that we must not just add out animation on a type expression but let the meaning of the word be express by animation.

Findings :
I have discovered some rules of typography which is really strict and hard to understand. I took some time to understand and I have some research using Chat gpt. And I  found that every words and letter have their golden ratio and we must always have lots of research to get the right ideas. Besides, I have lots of new experience during this task, such as I learnt why we must not distort the letters is that it will destroy the perfection of the space of the words. 




FURTHER READING


Fig. 9.1 What is Typography? - By David Jury

David Jury is Editor of TypoGraphic, the journal of the International Society of Typographic Designers (ISTD). He is also Head of Graphic Media at Colchester School of Art and Design, Colchester Institute. He holds awards of excellence for his typographic work from the New York Type Club, the ISTD, and ICOGRADA.

Typography has been traditionally associated with design and, in particular, with the printing industry. However, owing to the universal access to digital technology, the word "typography" is increasingly used to reter to the arrangement of any written material and is certainly no longer restricted to the work of a typographer.

After Reading this book, I have added some knowledge of typography. This is a book that help me to get more basic information in typography. For a typographer, every new message presents a unique problem. Choice of typeface, size, fit, and arrangement cannot be arbitrary. Type must be made fit for its purpose.
Fig. 9.2 Space between words

Through reading this book I learn that the reading experience will be impaired if the setting of the type cannot keep the reader's eye on the line, and tight spacing between words will greatly help. There should be a clear, perceptible division between the line of text and the interline spaces, allowing each to provide strength and support to the other.


Fig. 9.3 Typography Sketch Books - by Thames & Hudson

Fig. 9.4 Typography Sketch Books - book content

This book contains some sketches of typographer from whole worldwide. It helps on increasing ideas on out typography designs. Through reading, I realize there is so much fun on trying and playing on typography. It is a interesting book to read and understand.

Fig. 9.5 Sketch of Andreu Balius

Andreu Balius
Balius considers his sketchbook to be a "route-book within my professional career." From his sketches he reviews his process: "It's like a long journey throughout my professional life, likes, expectations, wishes - together with drawings and chaotic notes. When I teach, I encourage my students to begin a sketchbook where the design process is recorded. This is a helpful way to understand our own process of work. It's our working experience becoming visible through paper spreads." However, he admits: "I do not consider myself a good illustrator. I just sketch things."

Fig. 9.6 Sketch of  Celina Carvalho

Celina Carvalho
Brazilian designer Celina Carvalho has kept sketchbooks since the beginning of college. "There are two main purposes for doing sketches," she says. "The first one is when I want to register what see, when the images are very fresh in my mind. The second is to get started on the project. When haven't had ideas yet, sometimes find it harder to begin designing directly on the computer. With the sketchbook I can simply scribble with no concerns. draw whatever comes to mind, even if it has nothing to do with what I need to achieve.

Fig. 9.6 Sketch of  Katie Lombardo

Katie Lombardo
Katie Lombardo (aka Katie Daisy) calls herself "a wandering artist whose home is the prairie." She lives "between the Smoky Mountains and pure bliss," according to her website. Her sketches are as free and "blissful" as her voice. And her finishes are not much different from the sketches. The letterforms she prefers are soothing versions of nineteenth-century woodtypes, painted and watercolored with pastel tones and happy doodads. In fact, there are quite a few daisies integrated throughout her letters and words.

Through reading this book I have been really inspired by all the typographers. Their creativity and spirit is what I can really learn. The key to success is to have passion in all our design. And we must read and look more to increase the knowledge and experience on everything.

THE END

Comments

Popular Posts