Typography // Task 01

August 24, 2021

Typography // Task 01

25.08.2021 - 22.09.2021 / Week 01 - 05
Rebecca Thoo Hui Ying / 0350359
Bachelor of Designs (Hons) in Creative Media
Typography Task 1: Exercise 01 & 02

LECTURES

Week 01: 25.08.2021

We were introduced to our lecturers, Mr Vinod & Dr Charles for the class. (both lecturers look super alike, a classmate even asked if they were related.) Mr Vinod guided us through the Facebook group, showed us what each column contains and where to find the files needed, further reading links as well as senior E-portfolio examples.

When I first started my classes at Taylor's University, I was curious about what exactly an E-portfolio is. My questions were answered when Mr Vinod went on to brief us on how do we create one ourselves and how to properly utilise it. The lecturers brought us to the youtube page where we were given time to watch the briefing video and come up with our own blogs. While waiting for the other students to complete their blogs, the lecturers choose a few student's blogs for a "spot-check". (My blog was chosen! Mr Vinod gave the approval on my blog layout, which showed me that I am indeed on the right foot.)

It was interesting for me that we can refer back to lessons on Youtube as sir has made a Typography playlist where lectures were pre-recorded. (It is something like a folder where all our lectures are at.)

After showing us past typography works of the seniors, Mr Vinod asked the class to provide words for our first Exercise: Type Expressions. (Making the meaning of the word visible through type fonts).

(Youtube) Tutorial Lecture: Typo_0_Introduction:

Typography - is a vital component in the Design industry.

Some of the examples of where typography is used given by Mr Vinond are in Animations, App Designs, Books, Posters, Signages Design and Website Designs. It is a creation of letters by using geometrical shapes and it is a tool that helps to communicate and convey the message.

It is a craft that has evolved over 500 years, from calligraphy (refers to the writing styles) to lettering (refers to drawing each letter out) to typography. Mr Vinod also mentioned a little background on calligraphy. It was a mark to determine an individual's status back in the day. If the individual has good handwriting, it reveals the educational background as well as the individual's class status. (Personally, I am very much fascinated with history, so this little bit of background information made me realised just how society view and judges a person base on their handwriting. However, unlike the evolution of typography, the distinction between good handwriting and bad one does not affect a person's standing in the modern world.)

Terminologies:

✧ Font: The individual font or weight within the typeface

Fig 1.1 Georgia as the example given by Mr Vinod for Font.

✧ Typeface: The entire font family that share similar characteristics

Fig 1.2 Frutiger as the example given by Mr Vinod for Typeface.

Week 02:

(Youtube) Tutorial Lecture: Typo_1_Development:

Early Letterform development: Phoenician to Roman

✧ The tools that the user holds had an important influence on the type of writing created, for example: carving stones with a chisel or using sharpened sticks and writing on wet clay.

Fig 2.1 Morden Latin & Arabic can be literatelise from the Phoenician letters

✧ The Greeks changed the direction of writing, called Boustrophedon. (reading alternates from right to left & left to right).

✧ They also changed the orientation of the letterforms while reading.

Fig 2.2 Boustrophedon (how the ox ploughs)

✧ Phoenicians and Greeks did not use letter space or punctuations while writing.

Fig 2.3 Greek fragment, stone engraving, time unknown

✧ Etruscan (Meaning sourced definitions from oxford Languages: relating to ancient Etruria, its people, or their language. The Etruscan civilization was at its height c. 500 BC and was an important influence on the Romans, who had subdued the Etruscans by the end of the 3rd century BC. ) would inscribe onto the writing material with a brush before chiseling it. Base on the skillsets, they will develop brush strokes and as a result, we have the letterfonts we see today.

Fig 2.4 Evolution of character, from Phoenician to Roman

Hand Script (from 3rd - 10th century C.E.)

✧ Square capitals can be found in Roman Monuments.

Fig 2.5 Reed pens (source: study.com)

✧ A variety of stoke width was achieved by the reed pen held at an angle of 60 degrees off the perpendicular. The slant of it was the result of thick & thin strokes that have developed as well as the Serifs.

Fig 2.6 Square Capitals 4th or 5th century

✧ Rustic Capitals: a compressed version of square capitals.

✧ It was made for pragmatic purposes but it's compressed letters made it harder to read.

Fig 2.7 Rustic Capital late 3rd - mid 4th century

✧ Square & Rustic Capitals were reserved for documents of some intended performance.

✧ The development of Lowercase letterforms was the result of writing Uppercase fonts quickly.

Fig 2.8 Roman Cursive 4th century

✧ The development of Lowercase letterforms was the result of writing Uppercase fonts quickly.

✧ Uncial (Meaning: the Latin for a twelfth of anything) incorporated some aspects of the Roman cursive hand. They have elements of capital and lowercase integrated into the writing.

Fig 2.9 Uncials 4th - 5th century

✧ 2000 years after the origin of the Phoenician alphabets, the half-uncials marks the formal beginning of the lowercase letterforms.

Fig 2.10 (500: Half-Uncials)

✧ Charlemagne, the first unifier of Europe since the Romans, issued an edict in 789 to standardise all texts.

✧ There were too many writing systems, they picked Alcuin of York, Tours, France to oversee the standardisation of all texts. Also to convey messages accurately and precisely.

Fig 2.11 C. 925: Caloline Miniscule

Blackletter to Gutenberg's type

Fig 2.12 c. 1300: Blackletter (Textura)

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

✧ Gutenberg was the man who invented the modern-day printing press. He marshaled them to build pages that accurately mimicked the work of the scribe's hand.

Fig 2.13 A 42 lined Bible Gutenberg created

Fig 2.14 Development of Typefaces in different areas and regions (1/2)

Fig 2.15 Development of Typefaces in different areas and regions (2/2)

Text Type Classification

✧ 1450 Blackletter, the earliest printing type, based upon hand-copying styles used for books in Northern Europe

Fig 2.16 Blackletter

✧ 1475 Oldstyle, based upon lowercase forms by Italian humanist scholars for book copying

Fig 2.17 Oldstyle

✧ 1500 Italic, The first italics were condensed, allowing more words per page.

Fig 2.18 Italics

✧ 1550 Script, decorative in nature, was originally an attempt to replicate engraved calligraphic forms. Not appropriate in length text settings

Fig 2.19 Script

✧ 1750 Transitional, example : Times New Roman

Fig 2.20 Transitional

✧ 1775 Modern, example: Bodoni

Fig 2.21 Modern

✧ 1825 Square/ Slab Serif, these faces responded to the newly developed needs of advertising.

Fig 2.22 Square/ Slab Serif

✧ 1900 San Serif, examples: Grotesk, Gill Sans, Futura, Helvetica

Fig 2.23 San Serif

✧ 1990 Serif/San Serif, this style enlarges the notion of a family of typefaces to include both serif & san serif alphabets. Examples: Rotis, Scala

Fig 2.24 Serif/ San Serif

(Youtube) Tutorial Lecture: Typo_2_Basic:

Basic/ Describing letterforms

Fig 3.1 Baseline, Median & X-height

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

✧ ascender stroke tends to be slightly above the capital letter, it is an optical adjustment.

Fig 3.2 Em/En

✧ Em space is a gap between words. Also indicates em dash (it is a long dash) is the width of the letter Em. En dash is half the width of Em.

Fig 3.3 Ligature

✧ Ligature: are the example on the right, where alphabets are joined together. important note: when designing fonts, take into consideration of these glifs.

Fig 3.4 Stress

✧ Stress: sometimes there are diagonal/ vertical stress - a transition typeface from copying handwriting

Font

✧ Type family, example: bold, regular, italics

✧ Typeface, individual weight of the stroke

Fig 3.5 Uppercase & Lowercase

Fig 3.6 Small Capitals

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

Fig 3.7 Numerals

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

Fig 3.8 Italics

✧ Italics: The forms in a italic refer back to fifteenth century Italian cursive handwriting. Oblique are typically based on the roman form of the typeface.

Fig 3.9 Punctuations

✧ Punctuations: Although all fonts contain standard punctuation marks, miscellaneous characters can change from typeface to typeface.

Fig 3.10 Ornaments

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

Describing Typefaces

Fig 3.11 Type family

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

✧ Italics: Named for fifteenth-century Italian Handwriting on which the forms are based.

✧ Italics Oblique: conversely are based on roman form of typeface (not based on handwriting)

✧ Boldface: Characterised by thick strokes

✧ Light: A lighter stroke than roman form

✧ Condense: A version of the roman form in an extremely condensed style

✧ Extended: An extended variation of a roman font

Fig 3.12 Nine typefaces we are to use for this module this semester.

Comparing typefaces

Fig 3.13 Comparing typefaces

✧ Every message we convey as a designer we have to choose an appropriate typefaces to respect the content and to present the typeface.

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

Week 03:

(Youtube) Tutorial Lecture: Typo_3_Text_P1:

Text/ Tracking: Kerning & Letterspacing

Fig 4.1 Kerning

✧ Kerning: refers to the automatic adjustment of space between letters.

Fig 4.2 Tracking

✧ Tracking: additional & removal of space in a word or sentence.

✧ Adobe Indesign (software): publishing software. When dealing with a large body of texts, example: brochures, books, posters.

✧ In typography we are not only looking at the letterforms, we are also looking at the courter form of the positive and negative spaces between strokes.

Fig 4.3 Counter forms (Black spaces in between the white)

Text/ Formating Text

Fig 4.4 Flush Left

✧ Flush Left: The format most closely mirrors the asymmetrical experiences 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.

✧ Gray Value: text on a white page. If the grayness on a page is too dark, that means there is not enough ragging or the given kerning has become dark.

✧ Leading: the space between each line of text.

✧ Ragging: the jagged endpoints of the left-aligned texts.

Fig 4.5 Centered

✧ Centered: The format imposes symmetry upon the text, assigning equal value & weight to both ends of any line. It transforms fields of text into shapes, thereby adding a pictorial quality to the material that is non-pictorial by nature.

✧ Important: Centered type creates a strong shape on the page, it's important to amend line breaks so that the text does not appear too jagged.

Fig 4.6 Flush Right

✧ 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 & image might be ambiguous without a strong orientation to the right.

✧ I have researched on my own what an Axial Layout looks like (my findings are in the Further Reading section).

Fig 4.7 Justified

✧ Justified: Like centering, this format imposes a symmetrical shape on the text. It is achieved by expanding or reducing spaces between words & between letters. The resulting openness of lines can occasionally produce 'rivers' of white space running vertically through the text.

✧ Rivers: are gaps in between text made when using Justified, sometimes will need to use hyphen to reduce it.

Texture

Fig 4.8 Anatomy of a typeface

✧ X-height: refers to the area in between the baseline & the line above the baseline (also known as mean/median line)

Text/ Leading & Line Length

✧ Type size: text type should be large enough to be read easily at arms length

✧ Leading: type that is set too loosely creates striped patterns that distract the reader from the material at hand.

✧ Line Lenght: appropriate leading for text is as much a function of the line length as it is a question of type size & leading.

✧ A good rule of thumb: keep line length between 55 - 65 characters (number of letters in one sentence).

✧ Ways to determine readability : Type size > leading > line length

Text/ Type Specimen Book

Fig 4.9 Sample Type Specimen Sheet

✧ Compositional requirement: text should create a field that can occupy a page/ screen.

(Youtube) Tutorial Lecture: Typo_4_Text_P2:

Text/ Indicating Paragraphs

Fig 4.10 Pilcrow

✧ Pilcrow: is a glif that most fonts have. A symbol to indicate paragraph spacing.

Fig 4.11 Leading example

✧ If the line spacing is 12pt, then the paragraph space is 12pt, this is to ensure cross-alignment across columns of text.

✧ Lecturer's example: Assuming text point size is 10pt, leading should be 12pt (2 pts larger), paragraph spacing should be 12pt. (purpose: maintain cross alignment)

Fig 4.12 Line spacing vs leading

✧ Leading is the space between two sentences, line spacing takes into consideration the baseline of one sentence to the defender of another.

Fig 4.13 Example of standard indentation

✧ The indent is the same size of the line spacing or the same as the point size of the text

✧ Indentation is best used with Justified Alignment.

Fig 4.14 Example of extended paragraphs

✧ Extended paragraphs creates unusually wide columns of text.

Text/ Widows & Orphans

Fig 4.15 Example of Widows & Orphan

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

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

✧ Solution to Widow: rebreak line endings throughout paragraph so that the last line of any paragraph is not noticeable short

✧ Solution to Orphans: make sure no column of text starts with the last line of the preceding paragraph

✧ Important: Kerning can only press 3 times

Text/ Highlighting Text

Fig 4.16 Examples of Highlighting text

✧ Highlighting certain sentences by: Italics or Bold or change font family and change colour of text (colours to choose from: black, cyan, magenta & readable yellow) or placing a field of colour at the back of the text or placing bullet points.

Fig 4.17 Example of sans serif font use to highlight text

✧ Will need to adjust font size as sans serif fonts tend to be larger. reduce by 0.5

Fig 4.18 Example of placement of bullet points on the reading axis and outside of the axis

Fig 4.19 Examples of quotation marks

Text/ Headline within Text

Fig 4.20 Examples of types of A Heads

✧ A head indicates a clear break between the topics within section

Fig 4.21 Example of types of B Heads

✧ B Head indicates a new supporting argument/ example for the topic

Fig 4.22 Examples of types of C Heads

✧ C Head highlights specific facets of material within B head text. They do not interrupt the flow of the reading

✧ Important: to have 2 space bars/ em space between the heading (C head) & the beginning text of a new paragraph

Fig 4.23 Example of Hierarchy

Text/ Cross Alignment

Fig 4.24 Example of Cross Alignment

✧ Cross aligning headlines & captions with text type reinforces the architectural sense of the page (the structure) while articulating the complimentary vertical rhythmns.

Week 04:

(Youtube) Tutorial Lecture: Typo_5_Understanding:

Letters/ Understanding letterforms

Fig 5.1 Uppercase Letterform (Baskerville)

✧ Uppercase letterforms: it suggests symmetry, but in fact, it is not symmetrical. It is easy to see the two different stroke weights of the font (Baskerville) stroke. More noteworthy, is the fact that each bracket connecting the serif to the stem has a unique arc.

Letters

Fig 5.2 Uppercase Letterform (Universe)

✧ Same as the previous (Baskerville) example, the letterform above (Univers) demonstrate meticulous care Type designers take to create letterforms that are both internally harmonious & individually expressive

✧ Font (Univers), the stroke on the right and left are not equal in weight, it will not be noticeable if someone did not point it out. Optical Sensitivity.

Fig 5.3 Comparision of letterforms (left: Helvetica & right: Univers)

✧ The complexity of each individual letterform is neatly demonstrated by examining the lowercase "a" of two similar sans-serif typefaces --Helvetica & Univers

✧ A comparison of how the stems of the letterforms finish & how the bowls meet the stems quickly reveal the palpable differences in character between the two

✧ Lecturer's note: when creating a type of our own, simplifying the character's characteristics & the strokes of the letters. Consistently in replicating the uniqueness of the feature we add into our letterforms is important. Do not overload the typeface.

Letters/ Maintaining x-height

Fig 5.4 X-height in lowercase letterforms

✧ X-height: the size of the lowercase letterforms

✧ Curved strokes for example, "s", must rise above the median line or sink below the baseline in order to appear to be the same size. as the vertical & horizontal strokes they adjoined with.

Letters/ Form/ Counterform

Fig 5.5 Example of counterform

✧ Just as important as recognising specific letterforms is developing a sensitivity to the counterform- the space describes & often contained by the strokes of the form. When letters are joined to form words, the counterform includes the spaces between them

✧ The adjustment of space between the letterforms increases or decreases readability. The counterform plays a crucial role in being able to recognise the form of either the word or the letterform itself

Fig 5.5 Example of examining in close detail

✧ Closely examining and understanding the form & counter of a letter provides a good feel of how the balance between form & counter is achieved & a palpable sense of letterform's unique characteristics

✧ Lecturer's note: whenever we are designing a letter, it is important to analyse existing typefaces that fall under the same category to see how the treatment of the letter "S" or "G" is the particular designer has designed it. We will then have a rough understanding the convention that forms the letter

Letters/ Contrast

Fig 5.6 Example of letters in contrast (1)

Fig 5.7 Example of letters in contrast (2)

✧ The basic principles of Graphic Design apply directly to typography

✧ Lecturer's note: when we are dealing with different sets of information and to differentiate the information we will need contrast so that it will have more variations and complexity

Week 05:

(Youtube) Tutorial Lecture: Typo_6_Screen&Print:

Typography in Different Medium

Fig 6.1 Screen Design for Website

✧ Example given: Website. Typography exists in this website, the type is Bold, it is dynamic, a good contrast as well as a balance in the overall layout of the website.

✧ Typography exists not only on paper but on a multitude of screens. Our experiences of typography today changes based on how the page is rendered because typesetting happens in the browser.

Print Type VS Screen Type

Type for Print

Fig 6.2 Example of a good print type (commonly used for novels)

✧Type was designed intended for reading from print long before we read from screen. its the designers job to ensure that the text is smooth, flowing & pleasant to read.

✧ A good typeface for print: Caslon, Garamond, Baskerville are the most common typefaces that is used for print, as the characteristics are elegant & intellectual but also highly readable when set at small font size (san serif fonts are good fonts to use too)

✧ They are versatile, easy-to-digest classic typeface, which has a neutrality & versatility that makes typesetting with it a breeze

Type for Screen

✧ Typefaces intended for use on the web are optimised & often modified to enhance readability & performance onscreen in a variety of digital environments.

✧ Typefaces use specifically for screen: Verdana or Georgia.

✧ Important adjustment especially for typefaces intended for smaller sizes - is more open spacing. All factors serve to improve character recognition & overall readability in the non-print environment, which can include the web, e-books, e-readers & mobile devices

✧ Leading use for the screen may vary in terms of the spacing given (more open spacing)

Hyperactive Link/Hypelink

✧ A hyperlink is a word, phrase, or image that you can click on to jump to a new document or a new section within the current document.

✧ Hyperlinks allow users to click their way from a page to another

✧ Text hyperlinks are normally blue & underlined by default

Font Size for screen

✧ 16 px text on screen is the same size as text printed in a book/magazine

System fonts for screen/web-safe fonts

✧ Web-safe fonts appear across all operating systems

✧ With the invention of Google fonts, we can use it in web work irrespective of the browser one is using

✧ Nowadays most are cross-platform Typefaces

✧ Font Examples: Open Sans, Lato, Arial, Helvetica, times new roman, times, courier new, courier, Verdana, Georgia, Palatino & Garamond

Fig 6.3 Comparision between Screen type & Print type

Pixel Differential Between Devices

Fig 6.4 Pixel differential between devices

✧ Screens use on electrical devices are not only different sizes, but the text on screen differed in proportion as they have different size pixels

Static VS Motion

✧ Static typography has minimal characteristics in expressing words.

✧ Traditional characters such as bold & italic offer only a fraction of the expressive potential of dynamic properties

✧ Be it informational, promotional, formal or aspiration pieces of design, the level of impression & impact they leave. on the audience is closely knitted to their emotional connection with the viewers

Fig 6.5 Comparision between static & motion

Motion typography

✧ Temporal media offer typographers opportunities to "dramatise" type for letterforms to become "fluid" & "kinetic"

✧ Flim title credits present typographic information over time, often bringing it to life through animation

✧ Motion graphics, particularly the brand identities of film & television production companies increasingly contain animated type

✧ Type os often overlaid onto music videos & advertisements, often set in motion following the rhythm of a soundtrack

✧ Type helps to establish the tone of associated content or express a set of brand values

Fig 6.6 Example of good motion typography (Se7en, 1995)

INSTRUCTIONS

EXERCISE

Task 01: Type Expressions

We are to choose 4 words to work on this exercise with the word Terror being the mandatory word the lecturers have fixed. The following words are the ones I will be working on:

1. Terror 2. Melt 3. Gone 4. Shiver

Fig 1.1 Drafts of all the chosen words (27.08.2021)

The above are my interpretations of the words I've chosen, they are done digitally in Illustrator.

My personal favourites for each word are:

Melt #1&4 ; Terror #3&5 ; Gone #1 ; Shiver #1

Digitalisation (01.09.2021)

I took the time to refine my drafts by basing them on the given fonts. The below are the refined versions of the 1st draft.

Fig 1.2 MELT, refined versions (01.09.2021)

The initial sketch shown in lighter colour was done without referencing the given fonts. To give the best effect of a candle melting, I decided to go with a solid and bold font. I utilised the pen tool, played with the line width to create the dramatic dripping effect. I also experimented with removing the spacing in "M" & "E" to give it more of a dramatic effect, shown on the top right draft. At last, I decided to go with the bottom left draft as it is a cleaner & clearer depiction of the word MELT.

Fig 1.3 TERROR, refined versions (01.09.2021)

I had the most fun with the word TERROR. The original idea was to create a knife with the word "T" as well as a cutout ear as the word "O". However my peers' comments were to only keep the "T" knife, as it itself helps to convey the given word. I made 3 versions of the same idea to see which one conveys the wording best. I also played with the brush definition on the top toolbar and found different line brushes. I used one of the brushes to create the shine on the kinfe.

The Skull draft was just a practice I made and I liked the end result and decided to put it in the final draft sheet! Ultimately i decided to go with top right's design as the "T" knife seems to be chasing the wording "ERROR", it gives off a kidnapper's vibe.

Fig 1.4 GONE, refined versions (01.09.2021)

"GONE" was a wording that i was encouraged to explore more on as I realsied my designs earlier on was not as impactful. In the end i came up with these 3 designs. I like the top right one best as the words are slowly fading into the void while the "O" remainds solid.

Fig 1.5 SHIVER, refined versions (01.09.2021)

Instead of using bold, bulky and solid fonts, for this wording I've chosen an italic San Serif font. Out of the 3 experiments, I liked the top right design the best as it is simple and easily conveys the message. For this design, i used the rotation tool on the text bar to rotate each words to mimic the shivering sensation.

First Stage of Digitalised Designs (05.09.2021)

Fig 1.6 First digitalized designs (05.09.2021)

Amendments after feedback (08.09.2021)

Fig 1.7 MELT, updated amended version on the right (08.09.2021)

Mr Vinod evaluated my first digitalized. I made a melting effect on the bottom of the box in MELT, He suggested making it look real with its dynamics in relation to the drips.

Fig 1.8 TERROR, updated amended version on the right (08.09.2021)

Sir did mentioned I got too into the TERROR wording, it has too much graphic element. Hence his suggestion is to make only the T into a sharp sword only by turning it into lowercase and sharpening one of the edges of the "t".

Fig 1.7 GONE, updated amended version on the right (08.09.2021)

Sir did have some confusion towards my GONE design. I associate the GONE in my design as the wording is slowly being sucked into a void, hence the solid "O" at the centre. Dr Charles helped me explained the message I was trying to convey through this design further. Mr Vinod suggested me to do a gradient effect on the "G" "N" "E" alphabets.

Final Digitalised Designs (08.09.2021)

Fig 1.8 Final Type Expression -JPEG Submission, Week 03 (08.09.2021)

Fig 1.9 Final Type Expression -PDF Submission, Week 03 (08.09.2021)

GIF Animation of Chosen Design (08.09.2021)

I decided to go with the MELT design and make it so that it is melting from the top to the bottom in dripplets. I tried incorporating the bottom melted parts into my animation but it does not sit well with me so in the end I took out the bottom part. I ended up with a cleaner version of the MELT design, which I think conveys the wording well.

Fig 1.10 MELT Ai artboard documentations (08.09.2021)

Fist thing I did was to separate the wordings into each individual artboard. This is so that i could make amendments as well as to implement the dripping effect.

Fig 1.11 MELT Ps artboard documentations (08.09.2021)

Mr Vinod informed us on how to create our own GIFS in the youtube video (Typo_Ex Type Experssion Animation -- Basic). We got to explore about the Timeline feature which allows us to tweak the timing of each frame. This is where i decided to remove the bottom part by erasing it within Ps.

Fig 1.12 Ps Image Size documentations (08.09.2021)

The class then posted our animations into the FB group chat. Mr Vinod adviced us to export it in the correct sizing just so it is available to see and is not stretched out inside the FB post where we put in our work.

First Animation (08.09.2021)

Fig 1.13 MELT, animated first version (08.09.2021)

GIF Animation Amendment (15.09.2021)

Mr Vinod 's comments for my animation is that it is not smooth enough. I went back into Illustrator to rework the frames of my animation. The below is the Final of my GIF animation.

Fig 1.13 MELT, final animated documentation (21.09.2021)

FInal GIF Animation (21.09.2021)

Fig 1.14 MELT, animated Final version (21.09.2021)

Task 02: Text Formating (15.09.2021)

Today we are to complete the 4 videos under the text formating to assist us in completing our task. I've opened up Adobe InDesign to work on the first part of the exercise.

Fig 2.1 Original Font without Kerning & Tracking

We are to use only the 10 fonts we are given for the exercise. Mr Vinod also mentioned presentation is vital in design, hence I have positioned my artboard as such that it is clear and instructive. The above are just fonts without any kerning.

Fig 2.2 Font that has been through Kerning & Tracking

I learnt to use the Option key to adjust each individual kerning of the wording as some alphabets are too close to each other. I also tried out the tracking by selecting the entire text box, pressing on Option key & the left and right key. It helps to achieve font looks like the Futura Std one I did. It also gives it a minimalistic look to the type. I've also aligned each wording into a straight line so that the presentation is cleaner.

Fig 2.3 Documentation of Paragraph spacing & Leading

Through this video lecture, we were introduced to how to insert columns via (Layout > Margin & Column) on the toolbar above. Sir mentioned a good page layout depends heavily on the margin space. An appealing document layout always has a margin space that is attractive, meaning it will not have the same exact spacing on all sides. It creates a dynamic by allowing the page to be interesting due to the white space it has.

✧ Important: when choosing point size, we will have to check the number of characters in that particular collum. Characters between 55 to 65 is Okay. This is where we can introduce Leading about 2 points larger, leading is used as the unit for paragraph spacing.

Fig 2.4 Documentation of an evenly spaced document

✧ Lectuere's tips: the way to determine if what is a good typeset document, is to see the white space (positive & negative space) between the text is evenly spaced out. (middle grey value)

When we are given content, the first thing we need to know is to understand it and its different hierarchy of information.

Fig 2.5 Example of a not good Text formation

✧ Lectuere's tips: we can't have different sizes for the text as it will indicate that they are of 2 separate text box/information.

✧ Lectuere's tips: In order for the ragging to be smoother, make sure InDesign preferences of kerning & tracking must be 5. The rule of thumb is to not exceed (3 times pressing on the option & left/right key)

✧ Alignment: Either use left align or left justify. Though left alignment is preferred.

✧ When using full justify, the spacing in column interval needs to be increased from 5mm to 7mm, otherwise, the column of text will be too close to each other.

✧ Flowing of text from one column to another by linking both text columns by clicking the plus red sign at the bottom right edge of the text box.

✧ When dealing with huge amount of text, right alignment & central alignment is not good. When using justify be careful of the reverse that forms in between the words, adjust by using tracking.

✧ The visual hierarchy, the balance of layout & the use of space has created a relatively nice visual.

✧ Once the margin is set, all the textual information (body text or headlines) will be within the margin.

Fig 2.6 Baseline grid

✧ Baseline grid: go to (view>grids & guides>show baseline grid) is to ensure each text sits on the grid by doing so, the column on the left and right will achieve cross alignment.

How to cross align:

[Preference>gird>Increment Entry (11pt, this is to match the existing leading we have inserted in the body text)>view threshold (50%) > OKAY > select both body text>right click>text frame option>baseline options>offset>leading>general>align>top>OKAY]

Text formation Explorations (17.09.2021)

I did a few experiments with the layout as attached down below.

Fig 2.7 Explorations

Fig 2.8 Cross Alignment check

Cross Alignment check with turning the Pilcrow on (Command + Option + I ). This way i could also check to see if there was any extra spacing in the text.

Final Layout (21.09.2021)

I decided to go with this layout as it is clean and has a sense of balance to the page. I've adjusted the pictures this way to better show each individual in portrait mode.

Fig 2.9 Final JPEG Layout

Fig 2.10 Final PDF Layout

FEEDBACK

Week 01: Task 02 (01.09.2021)

General Feedback:

It is encouraged by lecturers to not use much distortion on the typefaces. Graphic elements have to be less strong. Suggestion to use the existing font and changing a bit of it. Lecturers suggested also use heavier text weight (Black/ Bold) to convey the meaning of their word.

Specific Feedback: (Peer's feedback - Group 7)

1. Are the explorations sufficient?

Exploration was sufficient (personally I need to explore more on the word GONE)

2. Does the expression match the meaning of the word?

Yes

3. On a scale of 1-5, how strong is the idea?

(In my opinion, the GONE wording is weak, I will give it a 2/5)

4. How can the work be improved?

✧ MELT: #1 was a good idea, the rest has too much distortion.

✧ TERROR: #5 the usage of a "parang" knife was good. Suggestions to take out the "ear" as the O and use a normal O instead. #3 was a good idea but was too heavy on the graphics.

✧ GONE: Suggestions to rework it more to further explore the font as well as the meaning.

✧ SHIVER: #3 was good, the suggestion by peers to do it in a zigzag formation to show the shiver movement.

Lecturer Feedback:

E-Blog: Feedback 01 (01.09.2021)

Good job on the information (top part) as well as lecturers being recorded. Sketches are done nicely. Organised sketches and are very presentable in a professional matter. Mr Vinod informed the class to practice well in creating a presentable work. Remember to do labeling according to format, (Figure number > Description > Date). Feedback needs to be updating every week. Suggestion to read more.

Week 03: Final Digitalised Artwork (08.09.2021)

General Feedback:

The common mistakes the classmate did were when our expressions are not visibly present and not dominantly using the space that has been provided. Too much white spacing is not encouraging as the typeface is not commanding the space, in terms of attention. Art n design is all about grabbing one's attention. It is advised to have 70% dominants, 30% subservient for all our type fonts. Less Graphical elements are best as this is a typography exercise. Sir also suggested adding effects, for example the wording GONE, the brushes to help make the wording disappear.

Lecturer Feedback:

✧ MELT: Good. Suggestions to make the bottom section to look real with its dynamics in relation to the drips.

✧ TERROR: The word expression is too visually heavy. Suggestions to make only the T into a sharp sword only.

✧ GONE: The meaning is in my type expression is to make the words go into a "void", thank you to Dr Charles as he helped me explained the message i was trying to convey through this design further. Mr Vinod suggested me to do a gradient effect on the "G" "N" "E" alphabets. Whereas for the "O", he suggested for me to not distort the alphabet but rather change it into a new type face.

✧ SHIVER: expression is good, no changes.

Week 04: E-portfolio & GIF Animation (15.09.2021)

General Feedback:
Mr Vinod & Dr Charles reviewed our E-Portfolio and gave us feedbacks on the way to structure and name our titles, example: Task 01: Exercise 01 & 02.

✧ PDFs are reserved for every final submission, do not embed PDF files for processions. Final submission also includes attaching a JPEG file. Together, a JPEG & a PDF conclude the submission.
✧ E- portfolio should be updated every week
✧ We must also be responsive in class as this is how lectures will take attendance
✧ Dr Charles' feedback for the class: include feedback summaries, key-points mentioned when given verbal feedback, points mentioned during evaluation into portfolio. And when we are writing the feedback, we are essentially attempting to reflect on the important learning points of the process when writing.

Lecturer Feedback:
1. Mr Vinod & Dr Charles for my e-portfolio is: Attach static PDF & JPG files for final type expression submission as well as self reflection. I have also written back in the feeback google sheets the black colour to indicate that i have already amended the items.

2. Type expression GIF: Mr Vinod suggested me to add more frames to make the animations smoother. The general idea was good.

Week 05: E-portfolio & Text Exercise Layout (22.09.2021)

Lecturer Feedback:
T1, Ex 2: Well done. I preferred the last exploration with the middle axis. Thats said the final one is good too.

Sir accidentally deleted the original comments, I have reviewed back the recording and added back the comments:

Impressive layout explorations! I like the last option in fig 2.7 (just right align the headline). Your final selection is also good but I think aforementioned was in. Good work nevertheless.

REFLECTIONS

Experience

I came into this module with fresh eyes as I have not known there would be so many elements to typography. Personally, I have already known the basics and have familiarised myself with the Adobe Illustrator, Adobe Photoshop as well as Adobe InDesign interface prior to this class. Even with that, I am still learning more about the tools and functions that I have not known during my own explorations, tools like cross aligning, leaning, ragging (that are tools inside InDesign)

Observations

Even though we are studying through a screen, the lectures and students' interaction was good. Each week the lecturers gave us feedbacks that we could work on to improve ourselves more.

Findings

The documentation of an E-portfolio was an interesting idea to me. I like the documentation part, it also shows us how we progress from the beginning to the final submission design. It also serves as a place for me to look back on what I have learned in the future.

Search This Blog

Thoo Hui Ying ✧ Rebecca (0350359)

Typography // Task 01

Comments

Post a Comment

Popular Posts

Professional Development Week

ADVANCED INTERACTIVE DESIGN // FINAL TASK