Typography / Task 1: Exercise 1& 2

27.8.2021 - 24.9.2021 / Week 1 - Week 5
Yong Li Qing Vernice / 0352288
Bachelor of Design (Hons) in Creative Media
Typography
Task 1 / Exercise 1 & 2


LECTURE

Week 1 - Introduction to Typography 

What is Typography?
  • it is the act of creating a letter
  • a creation of typefaces/type families
  • can be used in animation
  • it also visible and prevalent in website design
    • influence the design of a website
  • in page design 
    • interface
  • signage design
    • help to navigate to space
    • understanding the information to place
  • bottle label, book's covers
  • logo
    • strand mark or a mark is considered a letter
The fundamental aspect in any design discipline. The characteristics, skill sets beloved in typography apply to all different design areas.

History of Typography
  • having a history of 500 years
    • Calligraphy > Lettering > Typography
      • Calligraphy: refers to the writing styles 
      • Lettering: draw the letter out
  • start manually
  • after the computer was introduced
Calligraphy > Lettering > Typography (Reference Wikipedia)
  • Calligraphy is writing letters in one stroke or the deconstruction of several strokes, there is no erasing or re-adjusting.
  • Calligraphy is known as a more rigid process, that requires learning the formal shapes of letters and often combining thick downstrokes with thin upstrokes. 
  • Back in the 30s 20s penmanship is very important because it reviews a person's educational background and the state of that particular person.
  • Modern calligraphy ranges from functional inscriptions and designs to fine-art pieces where the letters may or may not be readable. Classical calligraphy differs from type design and non-classical hand-lettering, though a calligrapher may practice both. 

    • Further information: Handwriting and Script typeface Various examples of calligraphy in different languages and writing systems throughout history Calligraphy (from Greek: ฮบฮฑฮปฮปฮนฮณฯฮฑฯ†ฮฏฮฑ) is a visual art related to writing. It is the design and execution of lettering with a pen, ink brush, or another writing instrument. 
  • Examples:
    • Black letters
    • Round hand 
    • Unsealed 
    • Chancery
    • Foundational Hand
Use of Calligraphy
  • Calligraphy continues to flourish in the forms of wedding invitations and event invitations, font design and typography, original hand-lettered logo design, religious art, announcements, graphic design and commissioned calligraphic art, cut stone inscriptions, and memorial documents
  • It is also used for props and moving images for film and television, and also for testimonials, birth and death certificates, maps, and other written works.
Calligraphy > Lettering > Typography 
  • Lettering that was not created using digital tools is commonly referred to as hand-lettering
  • Lettering includes that used for purposes of blueprints and comic books and decorative letterings such as sign painting and custom graphics.
  • Calligraphy refers to the writing styles, but Lettering is more to the drawing category because they are meant to "draw" the letters out.
  • Lettering is drawing letters using the necessary number of revisions, modifications and is usually born out of several thumb sketch ideas.
Use of Lettering
  • Examples: on posters, for letterhead or business wordmark, lettering in stone, lettering for advertisements, tire lettering, fileteado, graffiti, or on chalkboards.
  • It may be drawn, incised, applied using stencils, or using a digital medium with a stylus, or a vector program.
Calligraphy > Lettering > Typography 
  • Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed.
  • The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking), and adjusting the space between pairs of letters (kerning). 
  • The term typography is also applied to the style, arrangement, and appearance of the letters, numbers, and symbols created by the process.
  • Typography also may be used as an ornamental and decorative device, unrelated to the communication of information.
Font? Typefaces?
Typeface - A typeface do not share a characteristic 
  • Arial, Georgia, Times New Roman
Font - The font is the weight within a typeface. A font style can be found between a typeface.
  • Font Examples: 
    • Georgia is a typeface but Georgia bold, Georgia Light, Georgia regular, Georgia italic are all fonts.
Development / Timeline
Early letterform development: Phoenician to Roman 
(for nearly 2000 years the only letterforms)
Initially writing meant scratching into wet clay with a sharpened stick or carving into stone with a chisel. The forms of uppercase letterforms can be seen to have evolved out of these tools and materials. At their core, uppercase forms are a simple combination of straight lines and pieces of circles, as the materials and tools of early writing required. 

Fig 2.2 - 4th-century B.C.E.  

The Greeks changed the direction of writing. Phoenicians, like other Semitic peoples, wrote from right to left. The Greeks developed a style of writing called ‘boustrophedon’ (how the ox plows), which meant that the lines of text read alternately from right to left and left to right. As they change the direction of reading they also changed the orientation of the letterforms:
Screen Shot 2017-04-12 at 11.00.50 AM.png
                                                                        
Etruscan (and then Roman) carvers working in marble painted letterforms before inscribing them. Certain qualities of their strokes—a change in weight from vertical to horizontal, a broadening of the stroke at start and finish—carried over into the carved letterforms.
Screen Shot 2017-04-12 at 11.22.53 AM.png

Hand script from 3rd – 10th-century C.E.
Square capitals were the written version that can be found in Roman monuments. These letterforms have serifs added to the finish of the main strokes. The variety of stroke width was achieved by the reed pen held at an angle of approximately 60° off the perpendicular.


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. Although rustic capitals were faster and easier to, they were slightly harder to read due to their compressed nature.


Both square and rustic capitals were typically reserved for documents of some intended performance. Everyday transactions, however, were typically written in cursive hand in which forms were simplified for speed. We can see here the beginning of what we refer to as lowercase letterforms.


Uncials incorporated some aspects of the Roman cursive hand, especially in the shape of the A, D, E, H, M, U, and Q. ‘Uncia’ is Latin for a twelfth of anything; as a result, some scholars think that uncials refer to letters that are one inch (one-twelfth of the foot) high. It might, however, be more accurate to think of uncials simply as small letters. The broad forms of uncials are more readable at small sizes than rustic capitals. 

A further formalization of the cursive hand, half-uncials mark the formal beginning of lowercase letterforms, replete with ascenders and descenders, 2000 years after the origin of the Phoenician alphabet.


Charlemagne, the first unifier of Europe since the Romans, issued an edict in 789 to standardize all ecclesiastical texts. He entrusted this task to Alcuin of York, Abbot of St Martin of Tours. The monks rewrote the texts using both majuscules (uppercase), minuscule, capitalization, and punctuation which set the standard for calligraphy for a century.
 
Blackletter to Gutenberg’s type
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 texture 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.

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

1450 Blackletter
The earliest printing type and forms were based upon the hand-copying styles used for books in northern Europe.
Examples: Bembo • Caslon • Dante • Garamond • Janson • Jenson • Palatino
FullSizeRender.jpg

1475 Oldstyle
Based upon the lowercase forms used by Italian humanist scholars for book copying (themselves based upon the ninth-century Caroline minuscule) and the uppercase letterforms found inscribed on Roman ruins, the forms evolved away from their calligraphic origins over 200 years, as they migrated across Europe, from Italy to England.
Examples: Bembo • Caslon • Dante • Garamond • Janson • Jenson • Palatino

FullSizeRender.jpg

1500 Italic
Echoing contemporary Italian handwriting, the first italics were condensed and close-set, allowing more words per page. Although originally considered their own class of type, italics were soon cast to complement roman forms. Since the sixteenth century, virtually all text typefaces have been designed with accompanying italic forms.
FullSizeRender.jpg

1550 Script
Originally an attempt to replicate engraved calligraphic forms, this class of type is not entirely appropriate in lengthy text settings. In shorter applications, however, it has always enjoyed wide acceptance. Forms now range from the formal and traditional to the casual and contemporary.
Examples: Kuenstler Script • Mistral • Snell Roundhand
FullSizeRender (1).jpg

1750 Transitional
A refinement of old-style forms was achieved in part because of advances in casting and printing. Thick to thin relationships were exaggerated, and brackets were lightened. 
Examples: Baskerville • Bulmer • Century • Time Roman
FullSizeRender (1).jpg

1775 Modern
This style represents a further rationalization of old-style letterforms. Serifs were unbracketed, and the contrast between thick and thin strokes was extreme. English versions (like Bell) are also known as Scotch Romans and more closely resemble transitional forms
Examples: Bell • Bodoni • Caledonia • Didot • Walbaum
FullSizeRender (1).jpg

1825 Square Serif / Slab Serif
Originally heavily bracketed serif, with little variation between thick and thin strokes, these faces responded to the newly developed needs of advertising for heavy type in commercial printing. As they evolved, the brackets were dropped.
Examples: Clarendon • Memphis • Rockwell • Serifa

FullSizeRender (2).jpg

1900 Sans Serif
As their name implies, these typefaces eliminated serifs together. Although the forms were first introduced by William Caslon IV in 1816, their use did not become widespread until the beginning of the twentieth century. Variation tended toward either humanist forms (Gill Sans) or rigidly geometric (Futura). Occasionally, strokes were flared to suggest the calligraphic origins of the form (Optima). Sans serif is also referred to as grotesque (from the German word Grotesk) and Gothic. 
Examples: Akzidenz Grotesk • Grotesk • Gill Sans • Franklin Gothic • Frutiger • Futura • Helvetica • Meta • News Gothic • Optima • Syntax • Trade Gothic • Univers

FullSizeRender (2).jpg

1990 Serif/Sans Serif
A recent development, this style enlarges the notion of a family of typefaces to include both serif and sans serif alphabets (and often stages between the two).
Examples: Rotis • Scala • Stone 
FullSizeRender (3).jpg


Week 2 - Basic
Knowing a letterform’s component parts make it much easier to identify specific typefaces.
Baseline The imaginary line that 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". 
Screen Shot 2017-04-05 at 6.24.12 PM.png

Stroke Any line that defines the basic letterform
Screen Shot 2017-04-05 at 6.24.30 PM.png

Apex / Vertex The point is 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).

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

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.
Screen Shot 2017-04-05 at 6.53.19 PM.png

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

Finial The rounded non-serif terminal to a stroke.


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


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

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


Loop In some typefaces, the bowl is 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 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.
Screen Shot 2017-04-09 at 7.54.06 AM.png

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


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


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

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


Lowercase letters include the same characters as uppercase.


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. Most type software includes a style command that generates a small cap based on uppercase forms. Lower case is not allowed.
Screen Shot 2017-04-09 at 8.32.45 AM.png

Screen Shot 2017-04-09 at 8.35.18 AM.png

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.

1 2 3 4 5 6 7 8 9 0


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 while using upper and lowercase letterforms. Lowercase numerals are far less common in sans serif type-faces than in serif. 

1 2 3 4 5 6 7 8 9 0


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



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 choosing the appropriate type for a particular job.
Screen Shot 2017-04-09 at 9.01.56 AM.png

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).
Screen Shot 2017-04-09 at 9.13.17 AM.png

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 is based on the roman form of a typeface


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


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


Condense A version of the roman forum, and extremely condense styles are often called ‘compressed’. 
 Screen Shot 2017-04-09 at 9.48.37 AM.png

Extended An extended variation of a roman font.
Screen Shot 2017-04-09 at 9.47.36 AM.png

Screen Shot 2017-04-09 at 10.02.05 AM.png

The 10 typefaces mentioned in the following slide represent 500 years of type design. The men and women who rendered them all sought to achieve two goals: easy readability and an appropriate expression of contemporary esthetics.
Screen Shot 2017-04-09 at 10.29.29 AM.png

Screen Shot 2017-04-09 at 10.39.51 AM.png

Week 3 - Text: Part 1

Flush left: This format most closely mirrors the asymmetrical experience of handwriting. It also basically most been used by designers because it is more comfortable for viewers to read.

Centred: This format imposes symmetry upon the text, assigning equal value and weight to both ends of any line. It usually used in the text is in a shape therefore, by using the centre can easily form the shapes. The reason is that it can show unregular sunken in the line.

Flush right: This format places emphasis on the end of a line as opposed to its start. It can be useful in situations (like captions) where the relationship between text and image might be ambiguous without a strong orientation to the right. But it has hard to read for the readers because humans are familiar with patterns, so it is not suitable to use for reading purposes.

Justified: Like centring, this format imposes an asymmetrical shape on the text. It is achieved by expanding or reducing spaces between words and, sometimes, between letters. Lots of designers do not like to use justify because they had found difficulties while they are kerning the text.


Type size: Text type should be large enough to be read easily at arm's length. Besides that, it must be the first to consider while doing text formatting because it will affect the leading.

Leading:  A type that is set too loosely will create striped patterns that distract the reader from the main focus in a book or material.

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


Compositional requirement: Text should create a field that can occupy a page or a screen. The text below shows that the left is darker than the right and it is easier to read (for myself๐Ÿ˜).
BGCD_Typo-07.jpg

For example, the text above is darker and the text below is lighter because they have used different leading although they are using the same typeface.



Week 4 - Text: Part 2

The ‘pilcrow’ (¶), is available in most of the typefaces. The use of it's for indicating paragraphs.
Screen Shot 2017-05-12 at 10.26.23 AM.png

The example here displays a ‘line space’ (leading*) between the paragraphs. Therefore the lecture video Mr Vinod said if the line space is 12pt, then the paragraph space will be in 12pt. 
Screen Shot 2017-05-12 at 10.23.14 AM.png

The differences between line space and leading. Line spacing is the baseline of one sentence to the descender of the other sentence. The calculation of line spacing starts with the descender of one sentence to the descender of the other sentence. While in typography it has usually called leading, it is mean that space between 2 sentences. 
Screen Shot 2017-05-12 at 10.47.23 AM.png

Mistakes that must be avoided. For example, the widow and the orphan

A widow is a short line of the type left alone at the end of a column of text.  The only solution to widows is to rebreak your line endings throughout your paragraph so that the last line of any paragraph is not noticeably short.

An orphan is a short line of the type left alone at the start of the new column. Orphans, you might expect, require more care. Careful typographers make sure that no column of text starts with the last line of the preceding paragraph.
Screen Shot 2017-05-12 at 11.15.38 AM.png

How to highlight text within a column of text? Different kinds of emphasis require different kinds of contrast. For example, using italic, changing the colour of the text but be aware that the colour used for the book to print out, adding on with increase the boldness in the same typefaces or change the typefaces of the text.
Screen Shot 2017-05-12 at 11.31.14 AM.png Screen Shot 2017-05-12 at 11.32.09 AM.png Screen Shot 2017-05-12 at 11.33.29 AM.png Screen Shot 2017-05-12 at 11.38.11 AM.png 

In this example, the sans serif font (Univers) has been reduced by .5 to match the x-height of the serif typeface. 8 ≠ 7.5

Screen Shot 2017-05-12 at 11.33.29 AM.png  Screen Shot 2017-05-12 at 11.49.43 AM.png


By reducing aligned figures (numbers) or All Capital acronyms embedded in text by .5 as well, to ensure visual cohesion of the text. 
Screen Shot 2017-05-12 at 11.53.16 AM.png

When highlighting text by placing a field of colour at the back of the text, maintaining the left reading axis (right example) of the text ensures readability is at its best. 
Screen Shot 2017-05-12 at 12.01.48 PM.png Screen Shot 2017-05-12 at 12.10.55 PM.png

Sometimes it is necessary to place certain typographic elements outside the left margin of a column of type (extending as opposed to indenting) to maintain a strong reading axis.
Screen Shot 2017-05-12 at 12.19.12 PM.png Screen Shot 2017-05-12 at 12.20.21 PM.png

Quotation marks, like bullets, can create a clear indent, breaking the left reading axis. Compare the indented quote at the top with the extended quote at the bottom. The prime is not a quote, it is an abbreviation for inches and feet.
Screen Shot 2017-05-12 at 12.25.46 PM.png Screen Shot 2017-05-12 at 12.32.10 PM.png

There are many kinds of subdivisions within the text of a chapter. In the following visuals, these have been labelled (A, B and C) according to the level of importance.

 "A" heads are set larger than the text, in small caps and in bold to show strong text information. The examples of headlines:
  

The "B" head here is subordinate to "A" heads as such they should not interrupt the text as strongly compare with the "A" heads. "B" heads are usually shown in small caps, italic, bold serif, and bold san serif.
 

The "C" heads, although not common, highlights specific facets of material within "B" head text. "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.
 

Cross aligning headlines and captions with text type reinforces the architectural sense of the page—the structure—while articulating the complimentary vertical rhythms. In this example, four lines of caption type (leaded 9 pts.) cross-align with three lines of text type (leaded to 13.5pts).


Week 5 - Understanding Letters

The uppercase letterforms below suggest symmetry, but in fact, it is not symmetrical. It is easy to see the two different stroke weights of the Baskerville stroke form (below); more noteworthy is the fact that each bracket connecting the serif to the stem has a unique arc.
Screen Shot 2017-04-24 at 9.02.00 AM.png
(15.9.2021)
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 (previous) and Univers (below) demonstrate the meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive.
Screen Shot 2017-04-24 at 9.02.17 AM.png

The complexity of each individual letterform is neatly demonstrated by examining the lowercase ‘a’ of two seemingly similar sans-serif typefaces—Helvetica and Univers. By comparing the bold to the stems.
Screen Shot 2017-04-24 at 9.33.45 AM.png  Screen Shot 2017-04-24 at 9.37.34 AM.png

As known, the x-height generally describes the size of the lowercase letterforms. However, curved strokes, such as in ‘s’, must rise above the median or sink below the baseline to appear to be the same size as the vertical and horizontal strokes they adjoin.
Screen Shot 2017-04-24 at 9.46.39 AM.png Screen Shot 2017-04-24 at 9.51.28 AM.png

Knowing the space outside the negative are equally important as recognizing specific letterforms is developing a sensitivity to the counter form (or counter). When letters are joined to form words, the counter form includes the spaces between them. If adding too much space will cause hard reading for the viewers to understand the word.
Screen Shot 2017-04-24 at 10.09.18 AM.png

It's worth noting here that the sense of the ‘S’ holds at each stage of enlargement, while the ‘G’ tends to lose its identity, as individual elements are examined without the context of the entire letterform.
Screen Shot 2017-04-24 at 10.31.17 AM.png

The basic principles of Graphic Design apply directly to typography. The following are some examples of contrast—the most powerful dynamic in design—as applied to the type, based on a format devised by Rudi Ruegg. The simple contrasts produces numerous variations: small+organic/large+machined; small+dark/ large light …
Screen Shot 2017-04-24 at 10.58.01 AM.png


INSTRUCTIONS

<iframe src="https://drive.google.com/file/d/1xV-ZrBdthvFNxTLmezVyDwF3gJe0J3cy/preview" width="640" height="480" allow="autoplay"></iframe>

Task 1: Exercises - Type Expression 

Procession


Sketch_ Glitch / Terror / Space / Water [3 / 9 / 2021]


Adobe Illusturation_Glitch / Terror / Space / Water [8 / 9 / 2021]

Final Submission - Exersice1: Type Expression 


Final Submission_Glitch / Terror / Space / Water  [11 / 9 / 2021]


Adobe Illusturation_Glitch / Terror / Space / Water (Final Submission) [12 / 9 / 2021]


Adobe Illusturation_ Process of Terror (Before GIF) [15 / 9 / 2021]


Process of Terror in Adobe Photoshop (GIF) [16 / 9 / 2021]
Adobe Photoshop_ Process of Terror (GIF) [16 / 9 / 2021]

Final Submission
Adobe Photoshop_ Final Submission (GIF) [24 / 9 / 2021]

Task 1: Exercise 2 - Text Formating

Progression


Practice Kerning & Tracking (24 / 9 / 2021)


Experiment in different fonts [ ITC Garamond Std (Book) // Gill Sans Std (Regular)] (22 / 9/ 2021)


Experiment in different fonts [ITC New Baskerville Std (Roman) // Bembo Std (Reagular)] (22 / 9/ 2021)


Experiment in different fonts [ Janson Text LT Std (55Roman) // Serifa Std (45 Light)] (22 / 9/ 2021)


Experiment in different fonts [ Adobe Caslon Pro (Regular) // Futura Std (Medium)] (22 / 9/ 2021)


Text with Gridline and Pilcrow Univers LT Std (21 / 9/ 2021)


Progression Univers LT Std (21 / 9/ 2021)

Layout 1_Text Formatting Univers LT Std (22 / 9 /2021)
Layout 2_Text Formatting Univers LT Std (25 / 9 /2021)
Layout 3_Text Formatting Univers LT Std (25 / 9 /2021)

Final Submission - Exercise 2: Text Formatting

Final Outcome_Text Formatting Univers LT Std (25 / 9 /2021)

Final Submission_Text Formatting Univers LT Std in PDF(25 / 9 /2021)

FontUnivers LT Std (55 Roman[body text], 45 Light Oblique[caption for image], 65 Bold[headline], 55 Oblique[sub headline])
Font size: 9pt
Leading: 11pt 
Left Alignment


FEEDBACK

Week 1- E-portfolio
Specific Feedback 
The lecture said my e-portfolio format is good enough.
General Feedback
We were asked not to change the theme of our e-portfolio and remember the sequence of the title is our e-portfolio.
Week 2- 
Type Expression
Specific Feedback 
(Water, Terror)Too many illustrations in the word cause distraction. The others are fine.
Always remember to put labels in my E-portfolio and update my feedback & future reading in the blog.
General Feedback 
The lectures had advised us not to put many illustrations in our design because it may cause distractions from our design. E-portfolio must be updated visible weekly before class started and photos must be taken clearly.

Week 3- 
Type Expression
Specific Feedback Water - Mr Vinod said is just fine. Terror - Mr Vinod had suggested finding another font for the letter "T" in terror Space - It is good but makes the background black instead of white. Glitch - The idea is quite good but doesn't put colour. General Feedback  In this exercise, we are not allowed to use colour and we are only allowed to use the 10 typefaces given by Mr Vinod to complete our task.
Week 4- Type Expression and Animation
Specific Feedback
Mr Vinod comment on the letter"T" in terror must be fix and solid, besides that end of the rope must be well connected with the "T" and the movement for the rope and "E" can be smoother. Hence, the idea of blood dripping down while the rope swings are good but it can be better if the blood drip after swings of the rope.
General Feedback
Having a larger shape to cover the artboard to fill up the frame.


REFLECTIONS

Experience
While doing this task I have a totally new image in Typography. During my sketching stage for exercise 1, I had found difficulties because the limit of the word given by the lectures and the meaning of the words are hard to express. Besides that, because of the limited of words given it is also a challenge to come out with amazing, unique design work for me to compare with the other classmates. Furthermore, the restriction of the 10 typefaces that only given by the lectures. In the digitizing stage, the challenge for me is the word while I am in the sketching stage is hard to show the idea and ability I have. After that in the animation stage while we need to make a gif out of our digitised words. The process is kind of fun and interesting for me although I have done it before once while I'm in high school (not very good at it๐Ÿ˜…). For exercise 2 I have spent more time exploring it because it is a totally new area that I have never touch before.

Observations
I have found out that there are lots of design elements we learn in other module have also been used in Typography. For example, movement use in animation and lettering in symbols and words.

Findings
Throughout the exercise, I have gained even more knowledge of typography. It basically has helps me in other modules too. Furthermore, it also has improved my sense of thinking while looking at the letters on the screen or in a book.


FURTHER READING

Book Name: Typography Referenced 

              

Typography principle  by Jason Tselents Pg207 - pg213

As in my understanding from these few pages, he had talked about the basics rules in typography. Besides that, he has shown typography have been cleverly used in our surrounding life and how designers create as well as adapted it in different ways. For example, the signs in the subway station, logos on the product, words that describe the weather on the shirts or sharing a piece of information for the society in poster design. Therefore, the format of typography for example is the US page size, the ISO format and the golden section. Besides that one of the parts of this book I had only recently learnt in class is text type and display type. It actually had helped me while I have difficulties in my exercise.



Comments