Typography / Task 1:Type Expression & Text Formatting

Mr Vinod asked us to join Typography module group on Facebook for us be able to get any future information and announcements clearly.
We are required to download all the 10 fonts for the usage of future exercises.
Mr Vinod introduce about the E_portfolio and required us to watch the briefing video in YouTube to create our own E-portfolio.
We are required to suggest and vote 7 words to choose 4 out among those words and sketches it out (Must express the word meaning) for task 1 exercise.

Typography 0: Introduction

Definition of Typography:

Typography is the act of creating letters, the creation of typefaces.
Typography is a fundamental skill aspect in any design (Exp: attention to details or composition).
Typography is widely use in all the industries such as animation, website designs, app designs, signage designs, labels, logos, poster and many.
Typography is work of typesetters, typograhers, graphic designers, art director and so on.
Typography has evolved more than 500 years, from calligraphy to lettering, lettering to typography. (Calligraphy means the writing styles, lettering means drawing out the letters.)

Figure 1.1:Calligraphy black letter

Terminology:

Front: Refers to the individual or weight within the typeface.(Exp: Georgia Regular)
Typeface: Refers to the entire family of fronts that share similar characteristic.(Exp: Times New Roman)

Figure 1.2: Example of Font

Typography 1:Development

Early Letterform Development: Phoenician to Roman

Initially writing meant scratching into wet clay with sharpened stick or carving into stone with a chisel.

Figure 1.3: Phoenicians votive stele Carthage

Figure 1.4: Evolution from Phoenician letter

Greeks changed the direction of writing and orientation of the letterforms

Figure 1.5: Boustrophedon style of writing

Etruscan carvers working in marble painted letterforms before inscribing them.
And then Roman:

Phoenician Greek Roman

(1000B.C.E). (900B.C.E). (100B.C.E)

Figure 1.6:Development of letterform

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

Square capitals: were the written version that can be found in Roman monuments.
Rustic Capitals: Compressed version of square capitals.
Cursive Writing Forms: Forms were simplified for speed; beginning of lowercase letterforms
Uncials (Small letters): Incorporate some aspects of Roman cursive hand
Half-uncials :formal beginning of lowercase letterforms
Charlemagne :The first unifier of Europe since the Romans, issued an edict in 789 to standardize all ecclesiastical texts.

Fig.1.7: 4th or 5th century square capitals. Fig.1.8:Late 3rd - mid 4th century rustic capitals

Fig.1.9: 4th century Roman cursive Fig.1.10: 5th century Uncials

Fig.1.11: C.500 half-uncials. Fig.1.12: C.925 Caroline miniscule

Blackletter to Gutenberg's Type

Textura: a condensed strongly vertical letterform (Northern Europe)
Rotunda: a rounder and more open-handed letterform (Southern Europe)
Gutenberg's style: Includes skills of engineering, metalsmithing, chemistry

Fig.1.13: C.1300 Blackletter Fig.1.14: Gutenberg's style

Text Type Classifications

1450 Blackletter: The earliest printing type – based on the hand-copying styles used in books in northern Europe at the time.
1475 Oldstyle: Based on the lowercase forms used by Italian humanist scholars for book copying and the uppercase letterforms found inscribed on roman ruins.
1500 Italic: Condensed and close-set (now not considered as a separate typeface).
1550 Script: An attempt to replicate engraved calligraphic forms.
1750 Transitional: A refinement of oldstyle forms – thick and thin relationships were exaggerated, and brackets were lightened.
1775 Modern: Serifs are unbracketed, and the contrast between thick and thin are extreme.
1825 Square Serif / Slab Serif: Unbracketed with little variation between thick and thin strokes.
1900 Sans Serif: Eliminated serifs.
1990 Serif / Sans Serif: Includes both serif and sans serif alphabets.

Week 2
Task1: Digitalisation

Mr Vinod introduce himself and show us the work he had done before.
After that, he went through some student's work and give many suggestions of our sketches.
We are required to digitalise 4 final word that has been sketched last week.

Typography 2:Basic

Describing Letterforms

Baseline: The imaginary line at the 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'

Fig:1.15

Stroke: Any line that defines the basic letterform

Fig:1.16

Apex / Vertex: The point created by joining two diagonal stems

Fig:1.17

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

Fig:1.18

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

Fig:1.19

Barb: The half-serif finish on some curved stroke

Fig:1.20

Beak: The half-serif finish on the same horizontal arms

Fig:1.21

Bowl: The rounded form that describes a counter

Fig:1.22

Bracket: The transition between the serif and the stem

Fig:1.23

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

Fig:1.24

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

Fig:1.25

Crotch: The interior space where two strokes meet

Fig:1.26

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

Fig:1.27

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

Fig:1.28

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 en is half the size of an em

Fig:1.29

Finial: The rounded non-serif terminal to a stroke

Fig:1.30

Leg: Short stroke off the stem of the letterform (at the bottom: L; inclined downward: K, R

Fig:1.31

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

Fig:1.32

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

Fig:1.33

Loop: The bowl created in the descender of the lowercase G (in some typefaces)

Fig:1.34

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

Fig:1.35

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

Fig:1.36

Spine: The curved stem of the S

Fig:1.37

Spur: The extension that articulated the junction of the curved and rectilinear stroke

Fig:1.38

Stem: The significant vertical or oblique stroke

Fig:1.39

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

Fig:1.40

Swash: The flourish that extends the stroke of the letterform

Fig:1.41

Tail: The curved diagonal stroke at the finish of certain letterforms

Fig:1.42

Terminal: The self-contained finish of a store without a serif, it may be flat, flared, acute, grave, concave, convex or rounded as a ball or a teardrop (see finial)

Fig:1.43

The font

Uppercase and Lowercase

Fig: 1.44: Uppercase and Lowercase

Small Capitals: Uppercase letters drawn to x-height of the typeface

Fig.1.45: Small capitals

Uppercase Numerals: Same height of as uppercase letters
Lowercase Numerals: Numerals set to x-height with ascenders and descenders

Fig.1.46: Uppercase and lowercase numerals

Italic: Refers back to fifteenth century Italian cursive handwriting

Fig.1.47: Italic

Fig.1.48: Italic vs Roman

Punctuation, Miscellaneous Characters：It is important to ensure that all the characters are available in a typeface before choosing the appropriate type

Fig.1.49: Punctuation, miscellaneous characters

Ornaments: Used as flourishes in invitations or certificates：usually provided as a font in a larger typeface family (Adobe Caslon Pro)

Fig.1.50: Ornaments

Describing Typefaces

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: Extended variation of a roman font.

Fig.1.51: Describing typefaces

As a beginning typographer, we should study these ten faces carefully. For almost any early projects in your design programme, these are we will need to develop your skills.

Fig.1.52: 9 typefaces use for future exercise

Comparing Typefaces

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.53: Comparing typefaces

Week 3

Task1: Animation

We are required to choose one and above of digitalise word to convert to animation by watching the basic teaching of animation on Youtube.
All the work we have done must screenshot the whole process for proving the authenticity.

Typography 3/Part 1:Text

Tracking - Kerning & Letterspacing

Kerning: Automatic adjustment between letters
Tracking: Addition and removal of space in a word or sentence
kerning for letter spacing: option+left arrow key (maximum 1-3)

Fig.1.54: With or Without Kerning

In this lecture, Mr Vinod teaches us how to use space between each letter

Fig.1.55: Kerning setting in Indesign

Letter spacing: Adding spaces between letters
Normal Tracking - Loose Tracking - Tight tracking

Fig.1.56: Differences of Tracking

Text Formatting

Flush Left :each line starts from same point but ends wherever the last word ends / ragged right

Fig.1.57 Flush left

Centered: Imposed symmetry upon the text

Fig.1.58 Centered

Flush Right: emphasise on the end of a line and opposed its start

Fig.1.59 Flush right

Justified :Imposes a symmetrical shape on the text (by expanding or reducing spaces between words)

Fig.1.60 Justified

Texture

Type with a relatively generous x-height or relatively heavy stroke width produces a darker mass on the page than type with a relatively smaller x-height or lighter stroke.
Sensitivity to these differences in colour is fundamental for creating successful layouts.

Fig.1.61 Anatomy of a typeface

Grey value: text on a white page

Fig.1.62 Different typefaces with different grey values

Leading and Line Length

Text Size: should be large enough to be read at arm's length
Leading: spaces between adjacent lines of the typeface, 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: Number of characters in a line, a good rule of thumb is to keep the line length between 55-65 characters

Fig.1.63 Tight leading and loose leading

Type Specimen Book

Type specimen book provides an accurate reference for type, type size, type leading, type line length etc.
It is often useful to enlarge type to 400% on the screen to get a clear sense of the relationship between descenders on one line and ascenders on the line below.

Fig.1.64: The differences on the top and bottom

Fig.1.65: Sample type specimen sheet

Week 4

Exercise 2: Text formatting

Mr Vinod also gives some feedbacks of our animation as he sport checked our blogs.
We were given some time to improve our works and make our final adjustments on the animation of the word.
He introduced us about the next task- Text formatting
We are required to watch the lecture video for processing this task.

Typography 4/Part 2:Text

Indicating Paragraphs
There are several options for indicating paragraphs

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

Fig.1.66: Sample of Pilcrow

2. Line Space

Leading is larger than the typeface(usually 2.5-3 points)
If the line spacing is 12 points, then the paragraph spacing value must be also 12 points.
Purpose: to ensure cross-alignment across columns of text

Fig.1.67: Sample of Line space

Fig.1.68: Differences between Line space and leading

3. Standard Indentation

The indent is the same size of line spacing or same as point size of text.
For saving space.
Should never have ragging on the right, indentation is best use then the text is justified.

Fig.1.69: Sample of Standard indentation

4. Extended paragraphs

Creates unusually wide column of text
Not generally in use but sometimes are used for academic writing.

Fig.1.70:Sample of Extended paragraphs

Widows and Orphans

Widows: a short line of type alone at the end of a column of text
Orphans: a short line of type alone at the start of new column
Those must be avoided by reducing the column with a little column height on one side and then introducing second line on the top

Fig.1.71 Sample of Widows and orphans

Highlighting Text

1. Italic/Bold/Colour (Same Typeface)

Fig.1.72: Sample of highlighting text(Italic/bold/colour)

2. Different Typeface

Might reduce the point size of the highlighted text by 0.5 size.

Fig1.73: Different typeface

3.Placing a field of colour

Fig.1.74:A field of colour

4.Quotation Marks/Bullets

Fig.1.75: Bullets

Single prime: feet
Double prime: inch
Some might take away quotation to reduce the number of keys

Fig.1.76: Quotation marks

Headline with Text

1. A Heads:

Indicates clear break between the topics within a section
Bold head from different type family but along with the reading axis
Bold head from different type family extended outside but in the line with the body text
Same type family in larger size
Same capital to indicate a headline

Fig.1.77: A heads

2. B Heads :

Indicates a new supporting arguments or example for the topic at hand
Should not interrupt the text as strongly as A heads do
Not using paragraph space but using a false line break

Fig.1.78: B heads

3. C Heads:

highlights specific facets of material within B head text
Don't interrupt the flow of reading
Used when have a large amount os complicated text
All shows in small capital
Must have two space /M space between the C head and the beginning of the X of the particular paragraph.

Fig.1.79 C heads

Cross Alignment

Cross aligning headlines and captions with text type reinforces the architectural sense of the page—the structure—while articulating the complimentary vertical rhythms.
Sub text on the left, body text on the right

Fig.1.80: Sample of Cross alignment

Fig.1.81: Sample Cross alignment( More better to express cross alignment)

Week 5

Task 2: Typographic Exploration & Communication

He gave some feedback for our text formatting work.
We are required to choose a deadline of submissions task 1 e-portfolio by ourselves.
Mr.Vinod introduced us Task 2, it is about a combination of task 1's exercise 1 &2.
He required us to watch a process demo lectures for proceed to this task

Typography 5/ Understanding
Letterforms

1. Uppercase "A"(Baskerville & Univers)

Baskerville: Two different stroke weights of the Baskerville stroke form; each bracket connecting the serif to the stem has a unique arc
Univers: The width of the left slope is thinner than the right stroke

Fig.1.82: Uppercase 'A' [Univers (left) &Baskerville (right)]

2. Lowercase 'a' (Helvetica vs 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.

Fig.1.83: Lowercase 'a' [Univers (left)&Helvetica (right)]

3. Maintaining x-height

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.

Fig.1.84: Median line & base Line

Form and Counterform

Counterform: 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.1.85: Form and counterform

We could examine the counterform of letters by enlarging each letter and analysing them. It could give us a glimpse into the process of letter-making.

Fig.1.86 Understanding form and counterform

Contrast

The simple contrasts produce numerous variations: small + organic; large + machined; small + dark; large + light; etc…

Fig.1.87: Sample of contrast(Important)

Week 6

Typography 6/ Screen & print

Typography in Different Medium
In comparison to the past, typography today exists not only on paper but on a multitude of screens. This affects our experience of typography as how the page is rendered changes its appearance.

1. Print Type
The most common typefaces used for print are print-Caslon, Garamond, Baskerville as they are highly readable when set at small font size.

Fig. 1.88: Print Type Example

2. Screen Type

Typefaces intended for use on the web are often modified to enhance readability, this can include a taller x-height, wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, as well as modified curves and angles for some designs. Another important adjustment – especially for typefaces intended for smaller sizes – is more open spacing.
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.
Web Safe Fonts – Verdana and Georgia.
Typefaces intended for use on the web are optimised and often modified to enhance readability and performance onscreen in a variety of digital environments.

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

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

Fig.1.89: Font size for screen (left) vs print (right)

5. System Fonts for Screen / Web Safe Fonts

Each device comes with its own pre-installed font selection which is largely based on its operating system
Web safe fonts appear across all operating systems. They are a small collection of fonts that overlap from Windows to Mac to Google
Web safe fonts: Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond

6.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.1.90: Pixels differential between devices

Static vs Motion

1.Static

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

Fig.1.91: Static typography

2. Motion Typography

Temporal media offer typographers opportunities to “dramatize” type, for letterforms to become “fluid” and “kinetic”. Motion graphics, particularly the brand identities of film and television production companies, increasingly contain animated type.

INSTRUCTION

Task 1: Exercises -Type Expression
Explanation: Compose and express the chosen 4 words using any of the 10 typefaces provided

1. Sketches
The words I selected are Rain,Water,Crush and Freedom. As instructed, I first began by digitally sketching out my ideas.

FREEDOM: On the first Sketch, I try to let all words to fit the characteristic of road to express the word freedom. For in second sketch, I draw each single word in different type face and front size. After that,I arrange it irregular in the box space. The third sketch is about a ballon shape and I have added graphical element (Ballon rope) on the word "o" .

Figure 2.1: "FREEDOM"Sketches (04.04.2023-Week 1)

CRUSH: I think the word "Crush" I not just express for press or compress with violence, also means the person you fall in love with. So I sketch it in different expression as you can see on the third expression.

Figure 2.2: "CRUSH"Sketches (04.04.2023-Week 1)

WATER: For the first sketches, I try to express the faucet come out with water drop by extend the word "T". The second sketches I am most probably use it as final because there are not distorting the word and I added a wave inside the word to express it.

Figure 2.3: "WATER"Sketches (04.04.2023-Week 1)

RAIN: For the first sketches, I try to express the faucet come out with water drop by extend the word "T". The second sketches I am most probably use it as final because there are not distorting the word and I added a wave inside the word to express it.

Figure 2.4: "RAIN"Sketches (04.04.2023-Week 1)

I would say my favourites are Freedom #1,Crush #1, Water #2, and Rain #2. After receiving feedback from Mr. Vinod, I moved on to the digitisation process.

2.Digitisation
I decided to first digitalise all 4 different versions of each word and later on choose what I liked best. To begin, I compared the words in different typefaces and chose what worked best.

Figure 3.1: Attempts on digitising"CRUSH" (11.04.2023-Week 2)

Figure 3.2: Attempts on digitising"WATER" (11.04.2023-Week 2)

Figure 3.3: Attempts on digitising"FREEDOM" (11.04.2023-Week 2)

Figure 3.4: Attempts on digitising"RAIN" (11.04.2023-Week 2)

After trial and attempt I came up with the following designs:

Figure 3.5: The First Version(11.04.2023-Week 2)

Figure 3.6: The Second Version(18.04.2023-Week 3)

FINAL Type Expressions

Figure 3.7: Final Type Expressions JPEG (18.04.2023-Week 3)

Figure 3.8: Final Type Expressions PDF(18.04.2023-Week 3)

3. Animation

After digitisation,Mr Vinod requested us to watch a tutorial video by him which he demonstrated on how to create an animation using Adobe Illustrator and Adobe Photoshop. We are required to choose 1 word out of the 4 and make it into a gif.

I chose the word 'Freedom' for the animation attempt part. I followed the steps shown in the You Tube video Mr Vinod has been uploaded.

FINAL Animation

Figure 4.1: Animation of " FREEDOM"(18.04.2023-Week 3)

Figure 4.2.: Art board of " FREEDOM"

Figure 4.3.: Animation Timeline of " FREEDOM"

Task 1/Exercises 2-Text formatting

1.Text formatting1/4: Kerning and Tracking practice

We are required to watch the lectures for this part of exercise. Before we start this exercise, we to have a do a pre-practice for us to learn kerning and tracking in Indesign. We can use our name for this practice.

Fig 5.1: Text formatting without kerning (30.04.2023- Week 4)

Fig 5.2: Text formatting with kerning(30.04.2023- Week 4)

2. Text formatting2/4: Leading and paragraph spacing practice

Fig 5.3: Leading, front size and paragraph spacing practice(30.04.2023- Week 4)

3. Text formatting3/4: Place image, alignment, text fields and ragging

Fig 5.4: Place image, alignment, text fields and ragging practice(30.04.2023- Week 4)

4. Text formatting4/4: Two step to maintain cross alignment

Fig 5.5: Show Baseline Grid(30.04.2023- Week 4)

Text formatting

After watching all the text formatting lectures, I have known the skill of using kerning, tracking, hyphenate, leading and cross alignment for helping me to proceed to this exercise. I come with three layout by using the skill that I have learned and place a font image on my layouts.

Fig 5.7: Processing for Layout(1) and Layout(2) (30.04.2023- Week 4)

Fig 5.8: Processing for Layout(3) and Layout(4) (30.04.2023- Week 4)

Layout (1)

Fig 5.9: First layout(30.04.2023- Week 4)

Layout (2)

Fig 5.10: Second layout(30.04.2023- Week 4)

Layout (3)

Fig 5.11: Third layout(30.04.2023- Week 4)

Fig 5.12: Fourth layout(30.04.2023- Week 4)

FINAL Text Formatting Layout
After receiving feedbacks from Mr.Vinod, I have done my modification and decided to use Layout(2).

HEAD

Fonts: ITC New Baskerville Std
Type Size: 94 pt
Leading: 112 pt
Paragraph spacing: 0 pt

BODY

Fonts: Bembo Std
Type Size: 11pt
Leading: 13pt
Paragraph spacing: 13pt
Alignment: Left Justified

OTHERS

Margins:12.7mm (Top+ Bottom+Inside+Outside)
Columns: 4

Fig5.13 :Final Text Formatting Layout(04.05.2023-Week 5)

Fig5.14 :Final Text Formatting Layout(PDF) (04.05.2023-Week 5)

Fig5.15 :Final Text Formatting Layout-Grids(04.05.2023-Week 5)

Fig5.16 :Final Text Formatting Layout-Grids(PDF) (04.05.2023-Week 5)

FEEDBACK

Week 1
General Feedback:Express the word by not using too graphical way or too digitalising, try to sketch it rely on explorations sufficient such as express the word in all different ideas instead of express different word in one idea.
Specific Feedback:The word "Fire" is not really express the word meaning, is more likely as a design on the word only. The word "Crush" is obey the font that had been given.

Week 2
General Feedback: Some of word need to be bigger and fit the box, try to minor distortion as much as you can, Some our work are not expressing the meaning.
Specific Feedback: The word "Freedom" I design is a good idea but need to figure out is it able to let others understand what word is it. The word "Rain" is to rely on graphical element. The word "Crush" between the space of debris are too even, bottom should space more.

SKETCHES Questions:

1. Are the explorations sufficient?
2. Does the expression match the meaning of the word?
3. On a scale of 1–5, how strong is the idea?
4. How can the work be improved?

Week 3
E-portfolio:The tittle of "Final Type expression" is not make sense because there are two image below that, the final must be only one of it.
General Feedback: Pause for more second at the end of artboard.
Specific Feedback: Pause for more second at the end of artboard,make it as a circulation to express more clearly of the word" Freedom".

TYPE EXPRESSION Questions:
1. Do the expressions match the meaning of the words?
2. Are the expression well crafted (crafting/lines/shapes)?
a. Do they sit well on the art-board
b. Are the composition engaging? Impactful?
3. Are there unnecessary non-objective elements present?
4. How can the work be improved?

Week 4

General Feedback: Pause for more second at the end of artboard.
Specific Feedback: Pause for more second at the end of artboard,make it as a circulation to express more clearly of the word" Freedom".

Week 5

General Feedback: The image we are choosen must relate to the text meaning.There are only allow maximun 65 words in a sentences line.No using italic font unless we need to specific or highlight some few words only. If there is a capital word among a paragraph h that will effect reader attention, we can make is as lowercase.
Specific Feedback: The word "I am" is too far from the word "Helvetica", it seems didn't connect. The word "Helvetica" has a too big of font size. The line length of left and right are not equal. Suggest to change the font of body text instead of using condensed font.

TEXT FORMATTING Questions:
1. Is kerning and tracking appropriately done?
2. Does the font size correspond to the line-length, leading & paragraph spacing
3. Is the alignment choice conducive to reading?
4. Has the ragging been controlled well?
5. Has cross-alignment been established using base-line grids?
6. Are widows and orphans present?

REFLECTIONS

Experience

After completing all the exercises in Task 1, I began to grasp the basics of typography and understand what needed to be accomplished in Task 2. Initially, I found type expression quite perplexing as it was my first assignment in the first semester. I failed to adhere to the instructions, which required expressing the word's meaning without distorting the original font. Through numerous attempts and errors, I eventually grasped the process and purpose of this task.

Upon receiving feedback from Mr. Vinod, I improved my sketch ideas and focused more on effectively conveying the word's meaning during the digitalization process. For the animation portion, I chose the word "freedom" to animate, as Mr. Vinod mentioned that the word wasn't clear enough in the digital stage. I wanted to create an animation to make it more apparent.

In Exercise 2, I thoroughly enjoyed designing layouts and experimenting with different font sizes. I acquired knowledge of various terminologies and skills such as kerning, cross-alignment, widows, rivers, tracking, justification, and hyphenation.Overall, delving into typography through lectures and exercises has been an invaluable experience for me.

Observations

I believe typography design can take various forms, depending on how one applies shapes, lines, creativity, and more to create meaningful and visually appealing letters. Every time Mr. Vinod asks us to share our work on Facebook and provides feedback, I always find myself noticing areas where I fall short after seeing others' work. I think this public sharing and learning together approach is fantastic, and the teacher's comments help me improve my own work. In this way, I understand that a good piece requires continuous modifications, listening to feedback, and ongoing revisions until it is completed. It gives me a better understanding of the experiences of professional designers.

Findings

I find the typography module to be fascinating because it allows us to convey the emotions and meanings of designers through words. It gives a sense of accomplishment when we successfully design a word that satisfies us. Additionally, I believe typography has many hidden techniques that we need to learn. Even seemingly simple words can encompass numerous design elements and offer various functionalities for us to explore and experiment with.

FURTHER READINGS

Based on the list of recommended readings in the module information booklet, I did some further reading with the book "Typographic design: Form and communication".

Fig. 6.1 Typographic design: Form and communication (2015)

Chapter 8:Typography on Screen

Selecting Typefaces

Fig. 6.2 Selecting typefaces

The Internet provides a challenging environment for good typography, especially with text sizes. Its problems are inherent in all on-screen font displays. When designing on a computer screen, screen fonts are bitmaps, which are digitised images made up of tiny dots. So, we must measure type on screen in several ways. Pixels, ems, rems, xx-small, and relative percentages of parent elements are all acceptable for specifying the sizeof on-screen type.

Web Design Technology

Fig. 6.3 Structuring web pages

Fig. 6.4 Structuring web pages

There are many ways in which websites can be built, and designers often rely upon specific methods and tools that work best for their needs. However, designing websites generally involves three layers of functionality: structure, presentation, and behavior. Designing grids for any application requires a thoughtful analysis of content, but designing grids for web applications presents additional challenges. Unlike the fixed media size in print, where type and other elements are scaled and positioned by the designer in relation to established proportions, designing for the web is challenged by the variable nature of OS platforms, screen size, and the actual devices used for viewing sites.

Chapter 9:Typography in Time and Motion

Using Type In Time-based Media

Fig. 6.5 Using Type In Time-based Media

Moving type offers unique communication opportunities because it has two properties: form and behavior. As with static typography, the designer chooses typeface characteristics (serif, sans serif, extended, italic, etc.), and how the type is set (lowercase, all caps, size, color, etc.) to add meaning to a message. With dynamic typography, he or she also determines how the type moves (pace, rhythm, with sound, etc.).An understanding of the principles of animation and film broadens the potential for designers to communicate and create rich messages with type in time and motion.

How type changes and moves

Fig. 6.6 Fixed position

Fig. 6.7 Legibility factors

In a motion sequence, type can change even if it does not move across the screen. The typography can remain the same while each frame shows a change in color or other formal quality. A letter or word can change in typeface, weight, width, slant, or size. It can change in color, value, or transparency. It can also change its shape through cropping, blurring, slicing, repeating, or adding dimension with shadow.

Search This Blog

Kong Cai Yi (0363862)

Typography / Task 1:Type Expression & Text Formatting

Comments

Post a Comment

Popular Posts

Application Design /Project 2: UI/UX Design Document

Application Design /Project 3: Lo-Fi App Design Prototype