Typography-Task 1
30.8.2022-4.10.2022 / Week 1-Week 5
Kor Qian Qian / 0359496
Typography / Bachelors of Design (Hons) in Creative Media
Task 1: Exercise 1&2-Type Expression & Text Formatting
LECTURES
Week1
Recap of lesson: This is my first lesson in Taylor's university, I met Mr.Vinod in Typography lesson. Mr.Vinod briefed us about the module and the detail of Typography Facebook group. After that, we watched the pre-recorded video to learn to create our own blog using blogger and set up our e-portfolio.
Then, we were given an exercise from Mr.Vinod.
What is TYPOGRAPHY?
Typography can be thought of as the act of creating letters, such as shapes created using geometric shapes or the shapes of letters you see. The creation of typefaces or type families. Typography can be: animation, website design, app design, signage design, logo type and more.
Typography: Development / Timeline
Early letterform development: Phoenician to Roman
Figure 11.1- 4th century B.C.E. – Phoenicians votive stele Carthage, Tunisia. The stele bears a four-line inscription to Tanit and Baal Hammon. Left: Evolution from Phoenician letter.
Figure 11.2-Phonician to Roman
Uppercase forms are mainly composed of simple combinations of straight lines and circles, which were the materials and tools needed for initially writing.
Figure11.3-direction of boustrophedon
Figure 11.4-example of boustrophedon
'Boustrophedon': A writing style developed by the Greeks. Read alternately from right to left and from left to right. When they changed the reading direction, they also changed the direction of the font.
Hand script from 3rd-10th century C.E.
Figure 11.5-square capital
Square capitals: Serifs added to the finish of the main strokes.
Figure 11.6-rustic capital
Figure 11.7-Roman cursive
Figure 11.8-4th-5th century unicals
Unicals: Incorporated some aspects of the Roman cursive hand, especially in the shape of the A, D, E, H, M, U and Q. The broad forms of uncials are more readable at small sizes than rustic capitals.
Figure 11.9-C.500: half-unicals
Half-uncials: mark the formal beginning of lowercase letterforms, replete with ascenders and descenders, 2000 years after the origin of the Phoenician alphabet.
Figure 11.10-C.925: Calolone miniscule
Charlemagne: First unifier of Europe since the Romans, issued an edict in 789 to standardize all ecclesiastical texts. The monks rewrote the texts using both majuscules (uppercase), miniscule, capitalization and punctuation which set the standard for calligraphy for a century.
Figure11.12-c.1300: blackletter (textura)
Blackletter/Textura: With the dissolution of Charlemagne’s empire came regional variations upon Alcuin’s script. In northern Europe, a condense 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 miniscule.
Figure 11.13-c.1455: 42 line bible, Johann Gutenberg, Mainz
Text type classification
Figure 11.14-text type classification
Recap of lesson: We were asked to take turns presenting our design and get some feedback from Mr.Vinod. Too many illustration is not allowed in the typography and make sure the sketches is using those given 10 typefaces. After finished feedback to students, we started to transfer our design into digitalize sketches in AI. Mr. Vinod told us some function that we might need to use it for our design. We can also refer to lecture video in youtube playlist.
Week 3
Recap of lesson: First, we export our work into jpeg and post it into fb comment. After getting feedback, we were asked to decide to choose one of the works to make it into an animation. Before making the animation, we need to watch a pre-recorded video to learn the basic function of making the animation. When we were done, we can share screen to get some feedback from Mr. Vinod.
Typography: Text
Kerning: adjust the space between individual letterforms. It's not 'letterspacing'
Flush left: Most closely mirrors the asymmetrical experience of handwriting. Each line starts at the same point but ends wherever the last word on the line ends. Spaces between words are consistent throughout the text, allowing the type to create an even gray value.
Flush right: This format places emphasis on the end of a line as opposed to its start.
Texture
Examples of typefaces in a variety of sizes are displayed in a type specimen book. In order to accurately reference type, type size, type leading, type line length, etc., it serves as a reference.
Indicating Paragraphs
Widow: a short line of type left alone at the end of a column of text.
Orphan: a short line of type left alone at the start of new column.
Highlighting Text
Headline within Text
Kerning and Tracking
Figure 12.1-kerning
Letterspacing: add space between letters
Figure 12.2-tracking
Tracking: Additional and removal of space in a word or sentence/adjust spacing uniformly over a range of character
Text Formatting
Figure 12.3-flush left
Figure 12.4-centered
Centered: imposes symmetry upon the text assigning equal value and weight to both ends of any line.
Figure 12.5- Flush right
Figure 12.6-justified
Justified: It is achieved by expanding or reducing spaces between words and, sometimes, between letters.
Texture
Figure 12.7-anatomy of a typeface
Figure 12.8-different typefaces
Leading and Line Length
Figure 12.9-leading and line length
Figure 12.10-example of different leading and line length
Leading: Text that is set too tightly encourages vertical eye movement; a reader can easily loose his or her place. Type that is set too loosely creates striped patterns that distract the reader from the material at hand.
Line Length: Appropriate leading for text is as much a function of the line length as it is a question of type size and leading. Shorter lines require less leading; longer lines more. A good rule of thumb is to keep line length between 55-65 characters.
Type Specimen Book
Figure 12.11-specimen sheet
Indicating Paragraphs
Figure 12.12-the ‘pilcrow’
The ‘pilcrow’ (¶): for indicating paragraphs
Figure12.13-spacing between paragraphs Figure12.14 -line space and leading
'Line spacing' (leading): the line space and the paragraph space should be the same to ensures cross-alignment across columns of text.
Figure12.15-standard indentation Figure12.16-extended paragraphs indentation
Standard Indentation: ident is same size of line spacing or pt size of text
Extended Paragraphs Indentation: unusually wide column of text
Widows and Orphans
Figure 12.17-widows and orphans
Orphan: a short line of type left alone at the start of new column.
Highlighting Text
Figure 12.18-left:Italic middle:bold right:colour
Figure 12.19
Fig 12.20-place a field of colour
Fig 12.21-place certain typographic elements
Fig 12.22-use quotation marks
Fig 12.23-A head
Fig 12.24-B head
B Head: The B head here is subordinate to A heads. B heads indicate a new supporting argument or example for the topic at hand. As such they should not interrupt the text as strongly as A heads do. Here the B heads are shown in small caps, italic, bold serif, and bold san serif.
Fig 12.25-C head
C Head: not materially interrupt the flow of reading. C heads in this configuration are followed by at least an em space for visual separation.
Fig 12.26-hierarchy of subheads
Cross Alignment
Fig 12.27-cross alignment
Week 4
Recap of lesson: We got the feedback from sir on our digital animation at the beginning of our lesson. After receiving feedback we need to improve our animation and become better based on the feedback and record it into our E-portfolio. Then we were asked to watch 4 videos about text formatting.
We need to do 2 exercise for kerning and tracking. The first one is to do kerning on our own name in 10 different typefaces. The second exercise is kern and track a passage in a A4 size paper in the InDesign app. We can get the passage from Fb group and do kerning and tracking in the app.
(how to start a new doc in indesign: file-new-document-print-A4-rename-turn off facing pages-column gutter change to 5-create)
InDesign:
left side: toolbar
right side: windows
top side: control bar section
kerning steps: click text tool-select area that want to adjust-press alt key & < arrow key
(adjust the kerning space: edit-preferences-unit&increments-kerning/tracking change to 5)
add general tracking: highlight all the text-alt key & <> arrow key
- can use eyedropper tool select the font
Week 5
Sir gave feedback of our text formatting exercise at the starting of the lesson. After receiving feedback, we were given some time to progress the text formatting passage and update our E-portfolio.
INSTRUCTIONS
<iframe src="https://drive.google.com/file/d/1NW08LtKYa-6PzXhPhV_AQTwKaM8cAchj/preview" width="640" height="480" allow="autoplay"></iframe>
Task 1: Exercises 1-Type Expression
Sketches:
For exercise 1, we need to choose 4 words to sketch a type expression. I chose bite, distort, fragile and box. I sketched it with Ipad, and here are some of my ideas.
Figure 1-Sketches for BITE (30/8/2022)
Figure1.1 There is a bite on a piece of cookie
Figure1.2 There are a few bite scar on the word
Figure 2-Sketches for BOX (30/8/2022)
Figure2.1 Present the word 'box' on a box
Figure2.2 Replace the letter O with a box
Figure2.4 Present the word 'box' in the box
Figure 3-Sketches for DISTORT (30/8/2022)
Figure3.1 Distort it like a fisheye lens
Figure3.2 Using one point perspective, present the word from smaller to bigger
Figure3.3 Using two point perspective
Figure 4-Sketches for FRAGILE (30/8/2022)
Figure 4.1 It look's like a cracked glass
Figure4.2 A broken heart
Figure4.3 Tape
Digital Type Expression:
BITE: After week 2 feedback, I had decided to choose Fig 1.2 design for the word 'Bite' and change the font into Gill Sans Std Bold Extra Condensed. I considered reducing the bite marks to make it look more quality and change the bitten places to the letter B because the bitten shape is more closer to letter B's shape.
I use the shape builder tools to fill up the blank space of the letter B, also make a shape similar to the bite mark, and place it on the letter B.
.png)
Figure 5-digital type expression for BITE (6/9/2022)
BOX: For the word ‘Box’, all of my first attempts are not allowed because they contain illustrations. I had created a new design (Fig 6.1 is the draft). I used Futura Std Light font. The letter O is the top of the box shape and the letter B and X is the side of the box shape. Inside of the letter O, I added some illustrations to make it show more like a box (Fig 6.2 is where the idea comes from).
I am trying to make the letter O into a square shape to make it closer to a box shape but I couldn't find the way to distort it. Fig 6.3 is the idea.
.png)
digital type expression for BOX (6/9/2022)
DISTORT: For the word 'Distort', I had decided to choose Fig 3.1. I changed the font into Futura Std Heavy Oblique. I make it more solid for zooming in the middle letters (as the perspective like Fig 7.1)
The steps I combined the round shape and the word: draw a round with an ellipse tool - type the word under the round - select both - object - envelope distort - make with top object.
.png)
digital type expression for DISTORT (6/9/2022)
FRAGILE: For the word ‘Fragile’, I had decided to choose Fig 4.1, but make it more cracked like a glass. I used the Univers LT Std 75 Black font.
I used a knife tool to cut it into many pieces and drag away from the word, making it like the cracked pieces dropping down.
.png)
Figure 8-digital type expression for FRAGILE (6/9/2022)
Final digital type expression:
I made some improvements based on the feedback given by sir.
Distort: Switch the colour of the background and the word, and bigger the size of the word.
Bite: Remove the filling of the letter B blank space.
Box: Remove those illustrations in the letter O, it seems doesn’t make sense.
Figure 9-Final type expression (13/9/2022)
Final Text Expression PDF
Animation:
For the final design, I had decided to choose ‘FRAGILE’ to make the animation. For the first attempt (Gif 1), I made 5 slides for the animation. After listening to sir feedback, I added an unbroken type at the beginning, and made it more detailed in the middle part. There are 11 slides in total (Gif 2).
Gif 1-attempt 1 of digital animation (13/9/2022)
Gif 2-attempt 2 of digital animation (13/9/2022)
Final digital animation:
Gif 3-Final digital animation (20/9/2022)
I added 0.1 second at the every slides and 1 second for the last slide to make it pause more a while.
Task 1: Exercises 2-Text Formatting
Text formatting
In exercise 2, we are going to learn kerning and tracking, alignment, paragraph spacing and others. Before starting the exercise, there is a warm up exercise for us to practice the kerning and tracking using our name. We were asked to watch and follow the pre-recorded videos.
Figure 10.1-text formatting name without kerning
Figure 10.2-text formatting name with kerning
Figure 10.3-different between kerning and without kerning
Figure 10.4- attempt 1 of text formatting (20/9/2022)
For exercise 2, we were asked to do the kerning and tracking of the passage "I am Helvetica" by John Doe. We got the passage from Fb group.
Passage font point: 9pt
Passage font used: Universe Lt Std
Leading: 11pt
Paragraph spacing: 10.8pt
Headline font point: 21pt & 11pt
Headline font used: Universe Lt Std
leading: 14.4pt
Figure 10.5-attempt 2 of text formatting (27/9/2022)
Passage font point: 10pt
Passage font used: Universe Lt Std
Leading: 11pt
Paragraph spacing: 11pt
Headline font point: 21pt & 11pt
Headline font used: Universe Lt Std (bold)
leading: 14.4pt
Figure 10.6-attemp 3 of text formatting (27/9/2022)
I created 2 layouts.
Passage font point: 10pt
Passage font used: Universe Lt Std
Leading: 11pt
Paragraph spacing: 11pt
Headline font point: 21pt & 11pt
Headline font used: Universe Lt Std (bold)
leading: 14.4pt
Final Text Formatting:
Figure10.7-final text formatting without grid
Figure10.8-final text formatting with grid
Final Text Formatting with grid PDF
Final Text Formatting without grid PDF
Passage font point: 10pt
Passage font used: Universe Lt Std
Leading: 11pt
Paragraph spacing: 11pt
Headline font point: 21pt & 11pt
Headline font used: Universe Lt Std (bold)
leading: 14.4pt
Characters per-line: 45
Alignment: left
Margins: top:3p0, left: 3p0, right:3p0, bottom: 18p8
Columns: 4
Gutter: 5mm
FEEDBACK
Week 2
General feedback: It is too many illustration in my design.
Specific feedback:
For the word 'Bite', it is ok with the right one, but need to change the typeface that were given.
For the word 'Box' is all not allowed because contain illustration.
For the word 'Distort' is ok with the left one, but need to use the typefaces that provided by mr.
For the word 'Fragile', the left one is good, and the middle one idea is good but need to make sure that do not have illustration, and shows clearly without the background.
Week 3
General feedback: My type expression for fragile is ok, for the others do not add some illustration that doesn't make sense.
Specific feedback:
Animation (Fragile): I should make it more detail, like start it when it haven't cracked.
Week 4
General feedback: Should make it fluently.
Specific feedback: Pause longer at the last crack. Let it stop at the crack for a while then only back again to first slide.
Week 5
General feedback: Did not export the photo at 300dpi, the photo is very blur.
Specific feedback: The space on the top and bottom is too much.
REFLECTION
Experience
Before coming to uni, I never knew that there was a class in design that was devoted to typography, so I came to this class with great anticipation. At first, I felt overwhelmed, because I had no idea how should I start my design, and I just came to a completely English-speaking environment, I would be a little confused on what lec and peers are saying. During the class, the works of all the classmates are shared for everyone to see. When I see that the works of the classmates are very good, I will tell myself that I must work harder and not be too bad. Besides, we learned how to make gif with ps. It such a great experience, because people now are using gif a lot, I can try to make my own favourite gif after I learnt this. Text formatting seems to be very simple, but it tests our aesthetic ability and typesetting knowledge very much.Observation
I gradually got used to it and realized that learning design are not only depend on the knowledge passed on to me by the lecturer, but on my common sense, my feeling, my imagination.
Finding
We need to be familiar with all the operations of the design software, in order to better express our ideas, instead of being unable to perform perfectly due to inability to operate. Not all typefaces correspond to the content of the work. Use appropriate typeface where appropriate. In addition, there is too much knowledge about typography, which needs to be understood slowly and then used in actual works. Typography is a very careful part, which can improve our observation.
FURTHER READING
Figure 13-Typography Design: Form and Communication
I would like to talk more about Chapter 4: The Typographic Grid.
Background:
- columnar cuneiform tablets impressed by the Mesopotamians as early as 3000 BCE
- hieroglyphic writing on papyrus
- Gutenberg’s forty-two-line Bible was Europe’s first typographic book
Structure & Space:
- Space: common denominator for all typographic communication
- letterforms gain velocity as they move toward the edges of space.
- they suggest horizontal movement, unless of course they are positioned vertically or at an angle in space.
Proportion:
- Divided space is perceived as a system of proportional relationships.
- The ratio X:2X, indicates the basic grid ratio
- proportions designer always rely:
The Square:
- Square: A natural division of the golden section
- influenced the development of the modern grid perhaps more than any other system of proportion
Comments
Post a Comment