Rachel Yeo Rong Qing / 0368901
Typography
Task 1 Exercise
CONTENT
LECTURES
- Pre-recorded Lectures
Week 1 - Lecture 1
- Introduction
- Develop a sense for it and way of expressing.
- The act of creating letters, creation of typefaces or type families, animation (ex. movie title), website design, app design, signage design, bottle labels, book, poster.
- Good typography let us go to a different level of engagement, comprehension and effective communication.
* Calligraphy :
- Writing style (ex. uncial, rounded hand, chancery)
* Lettering :
- Draw out the letter
* Font :
- Comes from French word 'founte'
- Individual font or weight within typeface (ex. Georgia Regular, Georgia Italic and Georgia Bold)
* Typeface :
- Entire family of fonts / weights that share similar characteristics / styles (ex. Georgia, Arial, Times New Roman)
Links Given : History of First Alphabet, Type History
- Development / Timeline
* Initially writing :
- Scratching into wet clay with sharpened stick or carving into stone with a
chisel.
* Phoenicians :
* Greeks :
- Wrote from right to left and left to right alternately. (Boustrophedon)
* Etruscan (and then Roman) :
- Change in weight from vertical to horizontal, a broadening of the stroke at start and finish.
*Development of Typography :
⤷ Square capitals (3rd-10th C.E.) :
- Written version in Roman, added serifs to finish their main strokes, variety of strokes achieved by reed pen held at angle 60૦ off the perpendicular.
⤷ Rustic capitals (3rd-10th C.E.) :
- Compressed version of Square Capitals, allow twice as many words on a sheet of parchment, faster to write and harder to read. Angle of brush is approximately 30૦.
⤷ Half-Uncials :
- further formalization of cursive hand, formal beginning of lowercase letterforms, replete with ascenders and descenders.
⤷ Charlemagne :
- First unifier of Europe since Romans, edict in 789 to standardize all ecclesiastical texts entrusted to Alcuin of York, Abbot of St Martin of Tours.
-The monks rewrote texts using both majuscules (uppercase), miniscule (lowercase), capitalization and punctuation, this set the standard for calligraphy for a century.
⤷ Blackletter (Textura) :
- Popular in northern Europe, in south, a rounder more open hand is popular called 'rotunda', humanistic script in Italy based on Alcuin's miniscule.
⤷ Gutenberg :
-Gutenberg marshaled engineering, metalsmithing an chemistry to build pages that accurately mimicked the work of the scribe's hand (Blackletter or northern Europe).
-Required a different brass matrix or negative impression for each letterform.
- developed in response to prevailing technology, commercial needs and esthetic trends.
⤷ Blackletter :
- Earliest printing type, based on the hand-copying styles that used for books in northern Europe. (ex. Cloister Black / Goudy text)
⤷ Oldstyle :
- Based upon the lowercase forms used by Italian humanist and uppercase letterforms found inscribed on Roman ruins, Forms evolved from their calligraphic origins over 200 years. (ex. Bembo / Caslon / Dante / Palatino)
⤷ Italic :
- Echoing contemporary Italian handwriting, condensed, close-set, allowing more words per page. Soon cast to complement Roman fonts. All typefaces have been designed with accompanying italic forms.
⤷ Script :
- Originally and attempt to replicate engraved calligraphic forms, not entirely appropriate in lengthy text setting but wide acceptance. Range from formal and traditional o casual and contemporary. (ex. Kuenstler Script / Mistral)
⤷ Traditional :
- Refinement of oldstyle forms, advances in casting and printing. Thick to thin relationship were engraved and brackets were lightened. (ex. Century / Times New Roman / Bulmer / Baskerville)
⤷ Modern :
- Represent Further rationalization of oldstyle letterforms. Serifs unbracketed, contrast between thick and thin strokes extreme. Known as Scotch Romans and more closely resemble transitional forms. (ex. Bell / Bodoni / Caledonia)
⤷ Square serif :
- Originally heavily bracketed serif, little variation between thick and thin strokes, developed needs of advertising for heavy type commercial painting. (ex. Clarendon / Memphis / Rockwell / Serifa)
⤷ Sans Serif :
- eliminated serifs all together, first introduced by William Caslon IV in 1816 but become wide-spread until beginning of 20th century. (ex. Akzidenz / Grotesk / Gill Sans / Futura / Meta / Helvetica)
⤷ Serif :
- Recent development, enlarges the notion of a family of typefaces to include both serif and sans serif alphabets, often stages between two. (ex. Rotis / Scala / Stone)
Week 2 - Lecture 2
*Text / Tracking : Kerning and Letterspacing
Kerning :
- Automatic adjustment of space between letters.
Tracking :
- Addition and removal of space in a word or sentence.
Letterspacing :
- Add space between the letters.
- Loose tracking or tight tracking will increase or decrease the recognizability of the patterns of the word then the word cannot be read easily.
- Counterform of the space between the word is important in typography.
- Designer always letterspace uppercase but not lowercase because uppercase able stand on their own but lowercase require the counterform created between letters to maintain line of reading.
Flush left :
- Most closely format to the experience of handwriting.
Centered :
- Format imposes symmetry upon text, assigning equal value and weight to both ends of line.
Flush right :
- Places emphasis on the end of a line as opposed to its start, useful in situation. (Ex : Captions)
Justified :
- Like centering, imposes a symmetrical shape on the text, achieved by expanding or reducing spaces between words and letters.
*Text / Texture :
- Different texture of those typefaces suit different message.
Type size :
- Should be large enough to be read easily at arms length.
Leading :
- Text should be set suitable so that reader will not loose the, place or distract them when reading.
Line length :
- Good rule of thumb is keep line length between 55-65 characters.
Text / Type specimen book :
- shows samples typefaces in various different sizes, provide an accurate reference.
Text / Indicating paragraphs :
- Ensure cross-alignment across column of text.
Text / Widows and Orphans :
- Designer should take great care to avoid the occurrence of widows and orphan.
⤷ Widows:
- Short line of type left alone at the end of a column of text.
⤷ Orphan :
- Short line of type left alone at the start of new column.
Text / Highlighting Text :
- Maintain the left reading axis of the text can ensure readability is at its best.
- Sometimes place certain typographic elements outside the left margin of a column of type can maintain a strong reading axis.
- Quotation marks can break the left reading axisText / Headline within Text :
- Heads should be clearly signify to the reader and relative importance within the text and their relationship to each other
Text / Cross Alignment :- Cross aligning headlines and caption with text type reinforces the architectural sense of the page.
Text / End :
- "Typography is two-dimensional architecture, based on experience and imagination, and guided by rules and readability." by Herman Zapf
Week 4 - Lecture 4
Basic / Describing Letterform :
Describing letterform
Basic / The Font :
⤷ Uppercase:
- Capital letter.
⤷ Lowercase:
- Lowercase letter.
⤷ Small Capital:
- Uppercase letterform draw to x-height of the typeface.
- Primarily found in serif fonts as part of what is often called expert set.
\
⤷ Uppercase numerals / Lining figures:
- Same height and same kerning width with uppercase letter.
- Most used with tabular material and uppercase letter.
⤷ Lowercase numerals / Old style figure / Text figure:
- Set to x-height with ascenders and descenders.
- Most used with uppercase letter and lowercase letter.
⤷ Italic:
- Refer back to 15th century Italian cursive handwriting.
- Oblique are typically based on the roman form of the typeface.
⤷ Punctuation, miscellaneous characters:
- Change from typeface to typeface.
- Important to ensure all characters are available in a typeface before choosing appropriate type.
⤷ Ornaments :
- Used as flourishes in invitation or certificates.
- Provided as a font in a larger typeface family.
- Only a few traditional or classical typefaces contains ornamental fonts (Ex : Adobe Caslon pro)
Basic / Describing typefaces :
- Differences in x-height, line
⤷ Roman :
- Uppercase forms are derived from inscription of Roman monuments.
- Slightly lighter stroke in roman is known as 'Book'.
⤷ Italic :
- 15th century Italian handwriting.
- Oblique conversely based on the roman form of typeface.
⤷ Boldface :
- Characterized by a thicker stroke than Roman form.
- Can be called as 'semibold', 'medium', 'black', 'extra bold', or super.
⤷ Light :
- Lighter stroke than the Roman form.
- Even lighter strokes are called 'thin''.
⤷ Condensed :
- A version of Roman form, extremely condense style often called 'compressed'..
⤷ Extended :
- Extended variation of Roman form.
Basic / Comparing typefaces :
- Difference in x-height, line weight, forms, stroke widths and in feeling.
- Feelings connote specific use and expression.
Week 5 - Lecture 5
- Uppercase letterforms suggest symmetry but this is not symmetrical.
- Two different stroke weight of the Baskerville stroke form, each bracket connecting the serif to the stem has a unique arc.
- Uppercase letterforms may appear symmetrical, but a close examination shows that the width of the left slope is thinner than the right stroke.
- Both letterform demonstrate the meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive.
- Complexity of each individual letterform is neatly demonstrated by examining the lowercase 'a' of two seemingly similar sans-serif typefaces.
- Shows difference about how the stem of the letterforms finish and how the bowls meet the stems quickly reveals the palpable.
Letters / Maintaining x-height :
⤷ X- height:
- Size of the lowercase letterform.
- Curved stroke, such as 's' must rise above the median or sink below the baseline in order to appear the same size as the vertical and horizontal strokes they adjoin.
Letters / Form / Counterform:
- The space describes and often contained by the strokes of the form.
- Counterform includes the spaces between letters when letters joined the words.
- Counters handle determines how the words hang together.
Letters / Contrast:
- Most powerful dynamic in design.
Week 6 - Lecture 6Typography / Different medium:
⤷Print type vs Screen type:
- Designed for reading from print long before screen. Need to ensure text is smooth, flowing and pleasant to read.
- Example of good typefaces for print : Caslon, Garamond, Baskerville. (Highly readable in small font size).
- Typefaces intended for use on the web are optimized and often modified to enhance readability and performance on screen in a variety of digital environments.
- Can include a taller x-height (or reduced ascenders and descenders), wider letterforms, more open counters. heavier thin strokes and serifs, reduced stroke contrast, as well as modified curves, more open spacing (especially for typefaces intended for smaller size) and angles for some design.
⤷Hyperactive Link / hyperlink:
- A word, phrase or image that you can click on to jump to a new document or a new section with the current document.
- Normally blue and underlined by default.
⤷Font size for screen:
- 16pt on screen is about the same size as text printed in a book or magazine, this is accounting for reading distance.
- Read only a few inches away - 10pt, arm's length - 12pt, screen - 16pt is about same size.
⤷System Fonts for Screen / Web safe fonts:
- Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond.
⤷Pixel differences between devices:
- Size of the screen used by PCs, tablets, phone and TVs and the text we see on screen differs in proportion too because sized pixels are different
.png)
⤷Static vs Motion:
- Static typography has minimal characteristic in expressing words.
- Traditional characteristic such as bold and italic offer only a fraction of the expressive potential of dynamic properties.
- Present typographic information over time, often bringing it to life through animation or motion graphic.
- Often overlaid onto music videos and advertisements and set in motion following the rhythm of the music.
- Prepare the audience for the film by evoking a certain mood.
2. Class Summary
- Week 1 : Briefing about the modules, his system to organized the class and teaching us how to create an E-portfolio.
- Week 2 : Go through the E-portfolio one by one, check for our sketches and teaching us how to do digitization.
- Week 3 : Go through the E-portfolio one by one, giving comment to our digitization sketches and let us try to start doing animation on our sketches.
- Week 4 : Giving feedback to our animation and go through the E-portfolio one by one.
INSTRUCTIONS
Task 1: Exercise - Type Expression
Sketches
Because of all the sketches of dive is using to illustration and cannot be acceptable so i have make a new sketches of the word 'Dive'.
I choose the word 'Chaos' , 'Dive' , 'Bounce' and 'Float' from the words given and I google search those word to get some picture and get some idea on how to express those word. My personal favorite for each word is Chaos #1, Dive #1, Bounce #1 and Float #3. After the feedback from MS. Hsin, I choose Chaos #2, Dive #4, Bounce #3 and Float #3 to go further in task 1.
Digitalization
-01.jpg)
From the feedback given by MS. Hsin, I remove the underline of the word 'Float' because the word already be arrange in the movement that represent the words have been float on the water surface. Besides that, i try to use tools 'Type on path' on the 'Bounce' digitization to let it become more tidy and looks like a ball which are bouncing. For the word 'Chaos', I put the word inside a black background to make it looks like more indistinct to represent the chaos.
Animation
Animation timeline (10 Frames)
I choose word 'Dive' to animate because i want to make a animation which show the imagery of a people who have dive into the water. I have use 10 frames to create the animation of the word 'dive'.
I make the animation which looks like the word dive into the gif and breathing inside the water. I have make the bubbles come from the the word' i' and make the bubble become more invisible to represent the bubble in water.
Final animation timeline (12 frame)
I recreate the animation of the word 'dive' because the previous works is looks pixeled and its does not perform in good situation. In final works i add more 2 frame to make more bubbles and present how the bubbles goes up and become disappear in water to monitor the situation of dive.
Final Task 1 : Exercise 1 - Animated Type Expression
Task 1 : Exercise 2 - Text Formatting
Kerning and Tracking
Text formatting without kerning
Text formatting with kerning
Layout progress #1
Final Task 1 : Exercise 2 - Text Formatting
FEEDBACK
Week 2 :
General Feedback : Sketches should be label down the number, update personal information on the e-portfolio and do the future reading weekly. Sketches of typography should do not have any illustration.
General feedback : Overall all digitization is good, just need to do a little bit adjustment.
General feedback : Animation looks good but still need to adjust. Update further reading.
Specific feedback : Gif looks pixeled so need to recreate.
General feedback : Paragraph need to be linked, body size too big, more focus on cross-alignment and grid.
Specific feedback : Layouts #2 looks better.
REFLECTIONS
I have learn about the basics of typography during Task 1. At the first, I don't know the sketches cannot have any illustration so I have make a lot of mistake but after getting feedback that given by Ms. Hsin and Mr. Vinod I have get improve on it. During the digitalising section, i got a lot of challenge about it cause I don't have any knowledge about Adobe Illustrator. The text formatting also as a big challenge to me as I also never use InDesign before. I have took a long time to come up different layouts but luckily I make it at the end. Task 1 makes me know how to achieve work that cross the limit.
Through this task, I observed that i still need improve the skill of using adobe because i never use it before, I will try to watch more video on Youtube so that i can master this skill. Besides that, I also need to increase my typography knowledge so that I can have a good design in future because I have found that how much important that Typography was.
FURTHER READING
Based on the books that provided in Microsoft teams, I have did some further reading with the book "A Type Primer_2nd Ed_". This book is full of graphic and easy to understand.
I have learn the specific parts of letterform from this chapter, for examples like, stroke, stem, counter, serif and etc.
I have learned the difference between the fonts such as difference between uppercase numerals and lowercase numerals.
This chapter is talking about the differences between different letterform styles and different typefaces.
This chapter has teach me how to measure the type, for examples, the size of type with units is 'points', 1 inches is equals to 72pt and 25.4 mm and what is set width.
This section is talking about the history of Typography such as early letterform development : Phoenician to Roman, Han script from 100-1000c.e., Blackletter to Guternberg's Type, Humanist script to Roman type and etc.
Comments
Post a Comment