Labels

Typography : Task 1 :Type Expression & Text Formatting


02/04/2021 - 30/04/2021 / Week 1 - Week 5
Typography GCD60104

NAME: Sea Hirayama

I.D: 0347596

COURSE: Bachelor of Design in Creative Media / Taylor's Design School




●Lectures(online class)

Week 1 : 
 After the first lecture, I was just excited to learn what we'll do in this module. There was a lot of things we have to understand to create own images. I selected to create "Slice" "Spin" "Scream" "Punch" with expressing emotion. Also we were introduced to the module, notified on the strict assignment deadlines. 

Week 2 : 
 We had discussion about the images each others in the group. Also we needed to show process of task to teacher. After we hear the feedback, Mr Shamsul teach us how to use adobe Illustrator for our task. 

Week 3 : 
 Before the lecture starts, Mr Vinod gave us some feedbacks of the task and time to ask some questions. And we discussed in the group such as how to improve the type expression, about distortion and so on. After the discussion, Mr Vinod gave us some advices. Mr Shamsul shows us how to make the animation using Photoshop.

Week 4 :
 Mr Vinod and Mr Shamsul checked our e-blog at first time. After the time to get some advices for e-blog and the animation, Mr Vinod guided us through Adobe InDesign to perform text formatting.

Week 5 ;
 I could learn the basic of inDesign again and correctly. Also Mr Vinod and Mr Shamsul said us watch pre-recorded lecture to make sure what we are doing and details of tasks, exercises. For inDesign task, there are a loy of point which we must understand and utilize to create the task.


●Lectures(Prerecorded lectures on YouTube)

Typo 0 Introduction :

 The teacher taught us how to make own e-portfolio for this module and the basic of typography.

Typography is the creation of typefaces and can be animated form. It is visible and prevalent in website and app design.

Calligraphy is to the writing styles, black latter and so on. 

Lettering is when you draw the letters out, it's different from calligraphy because in lettering you're drawing out the circumference of the letter.

Font comes from the fresh word found which refers to the term foundry which is a place that casts metal. Refers to the individual font or weight within the typefaces.
 Example: Regular, Italic, Bold



Figure1,1 Font Week 1(02/04/2021)

Typeface refers to the entire family of fonts and weights that share similar characteristics.


Figure1.2 Typeface Week 1(02/04/2021)
Typo 1 Development :

 I could learn the history of typography such as evolution of greek and so on. Early in 4th century BCE, uppercase forms are simple combination of straight lines and pieces of circles. They were writing by scratching with clay.

Figure2.1 Greeks typography Week 1(02/04/2021)

Figure2.2 Evolution Of Greek and Latin Alphabets Week 1(02/04/2021)
 The Greeks wrote from left to right without using letter space or punctuations. This is called "boustrophedon".


Figure2.3 The geeks Week 1(02/04/2021)
Typo 2 Basic :

  There is  talked basic of typography. Knowing a letterform's component parts make it much easier to identify specific typefaces. For this, I tried to take note directly because of meaning of it I should understand correctly.

Baseline - The imaginary line the visual base of the letterforms. 
Median/Meanline - The imaginary line defining the x-height of letterforms.
X-height - The height in any typeface of the lowercase.
Also the line above capline is ascender height. The bottom line is descender height.


Figure3.1 image of Baseline, Median, X-height Week 2(09/04/2021)


Stroke - Any line that defines the basic letterform.

Figure3.2 Stroke Week 2(09/04/2021)


Apex/Vertex - The point created by joining two diagonal stems (apex above and vertex below).
Figure3.3 Apex Week 2(09/04/2021)


Arm - Short strokes off the stem of the letterform, either horizontal (E, F, L) or inclined upward (K, Y).
Stem - The significant vertical or oblique stroke.
Terminal - The self-contained finish of a stroke without a serif. This is something of a catch-all tern. Terminal may be flat, flared, acute, grave, concave, convex, or rounded as a ball or a teardrop.

                                                     
Figure3.4 Arm, Stem and Terminal Week 2(09/04/2021)


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

Figure3.5 Ascender Week 2(09/04/2021)


Barb - The half-serif finish on some curved stroke.

Figure3.6 Barb Week 2(09/04/2021)


Bracket - The transition between the serif and the stem.
Figure3.7 Bracket Week 2(09/04/2021)


Cross Bar, Cross Stroke, Cross Bar - The horizontal stroke in a letterform that joints two stems together.
Figure3.8 and 3.9 Crossbar and Cross stroke Week 2(09/04/2021)


Crotch - The interior space where two strokes meet.
Figure3.10 Crotch Week 2(09/04/2021)


Descender - The portion of the stem of a lowercase letterform that projects below the baseline.
Figure3.11 Descender Week 2(09/04/2021)


Ear - The stroke extending out from the main stem or body of the letterform.
Figure3.12 Ear Week 2(09/04/2021)


Em/en - Originally refering yo the width of an uppercase M, and em is now the distance equal to the size of the typeface. An en is half the size of an em. Most often used to describe em/en spaces and em/en dashes.
Figure3.13 Em/en Week 2(09/04/2021)


Finial - The rounded non-serif terminal to a stroke.
Figure3.14 Finial Week 2(09/04/2021)


Leg - Short stroke off the stem of the letterform, either at the bottom of the stroke or inclined downward.
Figure3.15 Leg Week 2(09/04/2021)


Ligature - The character formed by the combination of two or more letterforms.
Figure3.16 Ligature Week 2(09/04/2021)


Link - The stroke that connects the bowl and the loop of a lowercase G.
Loop - In some typefaces, the bowl created in the descender of the lowercases G.

Figure3.17 Link and Loop Week 2(09/04/2021)


Serif - The right-angled or oblique foot at the end of the stroke. 
Spur - The extension the articulates the junction of the curved and rectilinear stroke.
Figure3.18 Serif and Spur Week 2(09/04/2021)


Shoulder - The curved stroke that is not part of bowl.

Figure3.19 Shoulder Week 2(09/04/2021)


Spine - The curved stem of the S.
Figure3.20 Spine Week 2(09/04/2021)


Stress - The orientation of the letterform, indicated by the thin stroke in round forms.
Figure3.21 Stress Week 2(09/04/2021)


Swash - The flourish that extends the stroke of the letterform.
Figure3.22 Swash Week 2(09/04/2021)


Tall - The curved diagonal stroke at the finish of certain letterforms.

Figure3.23 Tall Week 2(09/04/2021)


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

Uppercase - Capital letters, including certain accented vowels.
Lowercase - Lowercase letters includes the same characters as uppercase.
Small Capitals - Uppercase letterforms draw to the x-height of the typeface.

Italic - Most fonts today are produced with a matching italic. Small caps, however, are almost 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.
Roman - The letterform is so called because the uppercase forms are derived from inscriptions of Roman monuments.

Punctuation, miscellaneous characters - Although all fonts contain standard punctuation marks, miscellaneous characters can change from typeface to typeface.

The 10 typefaces mentioned in the following slide represent 500 years of type design. These typefaces have surpassed the letter goal. They have remained in use for decades.




Typo 3 Text Part 1 :
 
Mr Vinod taught us about kerning and letterspacing (tracking), with  go through inDesign.

Kerning - Refers to the automatic adjustment of space between letters. It is often mistakenly referred as letterspacing. In fact, lettrespacing means to add space between the letters.

command+shift+< - size the type up
command+shift+alt/option - size up faster
command+" - make margin and column disappear
option+left arrow - produce space between the letters

Flush left - This format most closely mirrors the asymmetrical experience of handwriting. Each line start 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.

Flash right - This format places emphasis on the end of a line as opposed to its start.

Centered - This format imposes symmetry upon the text, assigning equal value and weight to both ends of any line. It transforms fields of text into shapes, thereby adding a pictorial quality to material that is non-pictorial by nature. Because centered type creates such a strong shape on the page, it's important to amend line breaks so that the text does appear too jagged.

Justified - Like centering, this format imposes a symmetrical shape on the text. It is achieved by expanding or reducing spaces between words and, sometimes, between letters. The resulting openness of lines can occasionally produce rivers of while space running vertically through the text. Careful attention to line breaks and hyphenation is required to amend this problem whenever possible.

Type size - Text type should be large enough to be read easily at arms length-imagine yourself holding a book in your nap.

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


Typo 4 Text Part 2 :

 There are several options for indicating paragraphs. 
 Leading and paragraph space should be equal value to see easily.
ex) type size is 10, leading is 12, also paragraph space should be 12.


Figure4.1 image of example for relation between type size and leading Week 3(16/04/2021)
Widow - It is a short line of type left alone at the end of a column of text.
Orphan - It is a short line of type left alone at the start of new column.



Typo 5 Understanding letterforms  :

 Letterform is developing a sensitivity to the counterform (or counter)-the space describes, and often contained, by the strokes of the form. It is particularly important concept when working with letterforms like lowercase "r" that have no counters per se. How well you handle the counters when you set type determines how well words hang together-in other words, how easily we can read what's been set.
Figure5.1 letterforms Week 3(16/04/2021)

 The basic principles of Graphic Design apply directly to typography such as contrast-the most powerful dynamic in design-as applied to type, based on format devised by Rugi Ruegg.

Figure5.2 from the lecture contrast Week 4 (23/04/2021)


Typo 6 Screen and Print  :

 In the past, typography was viewed as living only when it reached paper. Once a publication was edited, typeset and printed, it was done.Nothing change after that. Good typography and readability were the result of skilled typesetters and designers. Today, typography exists not only paper but on multitude of screens. 

Hyperlink - It is a word, phrase, or image that you van click on to jump to a new document or a new section within the current document.

System Fonts for Screen/ Web Safe Fonts
- Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond.


Type Expression Words, Type Expression Words Part 2 and Type Expression Animation - Basic :

Mr Vinod taught us how to use Illustrator and inDesign to do our task. 
command+7 - make shape





●Instructions




●Task 1 Part 1 / Exercises - Type Expressions

 I am given 4 words to compose and express. I am given a set of typefaces to work with. Through iteration, use the appropriate typeface and compose the letters in a manner that allows meaning of the word to become visible.


>Idea sketches ("Spin" "Punch" "Scream" "Slice")
Figure 6.1 Sketch of Type Expressions Week 2 (09/04/2021)

 I tried to express that the meaning of these words. For "Spin", I drawn such as typhoon on the next by top left. The letter of spin is to be simple, but I suppose it is needed more movement that is why I tried to make it like this shape. And for "Punch", my favorite one is middle one because it is difficult to express, but I have never seen before and just like this idea even if I do say. I think it is hard to create the shape more better, but I would like to try. For "Scream", I imaged meaning of the letter is "scary" that is why the shape is to be unstable on the right on middle. I think it will improve to compose together with the bigger one on the next by the letter of punch. The last one, for "Slice", I just felt difficult to express. I took time on this one how to slice it. I thought that it will be interesting that slice the letter a lot like on the next by bottom right. So for this sketch, I just enjoyed. I would like to make these more better.



●Part 2 / Digitalisation of typography work

 The teacher said it's good to express the design but express it in a way it is easy to read too because we know the word is SCREAM, others may not know or understand the word. So I tried to think it again after I heard it. Use the type face I given.  So I just improved these sketches.




Figure 6.2 sketch in Illustrator Week 3 (16/04/2021)








●Part 3 / Exercises - Animating 

 I tried express these letter's meaning. Then finally, I created the gif. I created it in Photoshop. It was first time and difficult for me to do it.... but it was really fun. The first one is "SLICE". I imaged the sliced cheese.

Figure 7.1 screenshot of Photoshop for animation Week 4 (23/04/2021)








 The second one is "SCREAM". I express feeling scary such as screaming in the movie. 

Figure 7.2 screenshot of Photoshop for animation Week 4 (23/04/2021)







 The third one is "SPIN". it was most difficult image than the others. 

Figure 7.3 screenshot of Photoshop for animation Week 4 (23/04/2021)




 The last one is "PUNCH", I tried to show the paper which was written is punched.

Figure 7.4 screenshot of Photoshop for animation Week 4 (23/04/2021)


●Part 4 / Text formating

Before I start do task, I learned by the pre-recorded lecture.

Text Formating 1:4-4:4 : 

 There was the lecture that is shown how to use inDesign and some shortcut key. I tried it trough this lecture. 

Figure 8.1 screenshot of inDesign for exercises Week 5 (30/04/2021)



 Also, before I do the exercises, I practice to use inDesign.

Figure 8.2 screenshot of inDesign for exercises Week 5 (30/04/2021)






●Feedback

Week 2 on Part 1 :
Specific feedback
 There is a lot of distortion. I need to create it without elements only the type. Also I need understand about the type expression more and more and know the rule of this exercise. 

General feedback
 Mr Vinod and Mr Shamsul told me how to decrease the distortion of the letter. I need to create it with maintaining the shape of words.


Week 3 on Part 2 : 
Specific feedback
 The teacher said it's good to express the design but express it in a way it is easy to read too because we know the word is SCREAM, others may not know or understand the word. So I tried to think it again after I heard it. Use the type face I given. 

General feedback
 Mr Vinod said me recreate my e-portfolio by watching the pre-recorded lectures. I need know how to put the line between the sentences and MIB.


Week 4 on Part 3 :
Specific feedback
 Mr Vinod said it is created much better that e-portfolio before. It means I could express types without distortion enough I guess. 

General feedback
 Same the Week 3, I need to watch the lecture and recreate the task 2 within the rules. I should know relation between text size and leading.


Week 5 on Part 4 :
Specific feedback
 I need to pay attention to see MIB and understand it enough. For Helvetica task, I should to focus on points of text and leading and keep these detail.

General feedback
 Anyway I should follow the lecture and make sure what the teacher saying then do task with the rules. Mr Vinod said about e-portfolio should be nice with MIB rules. I need to compose it based on MIB.


Week 6 : 
Specific feedback
 I need to focus on lagging and alignment to compose sentences more clearly. Also, I need to pay attention to check the MIB and PDF format.  Almost all is good.


General feedback
 I just felt how speaking and listening English is difficult for me now because I tried hard but I usually had some mistake. Also I thought I should listen and look carefully more and more in this lecture and tasks. It is important for me to learn English for future, but it is really hard work. I wonder I give up al things for me without stress in sometimes, but these lecture makes me more positive to learn so I decided to try hard again. ps I would like to listen the lecture more slowly. 

●Reflections


>Experience
 Before I take this module and lecture, I don't like Typography because it is just difficult to think and create with expression the emotions or something. But I feel it is fun to show what I want to tell in type. Also I noticed that I still have a lot of improvement for using Illustrator and Photoshop such as the easily way to create than I thought the other way. Mr Vinod and Mr Shamsul's lecture has been really helpful throughout the last four classes. There was many things I could notice and learn.

>Observations
 For this time, I aware that it is significant for me to think about time schedule such as a submission I need to hand in as soon as possible. In this Typography module, I tried to create faster but it's difficult to maintain because of my skill of Illustrator and Photoshop. I need learn about it more and more.


>Findings
 I could know about html first time such as it can be lined with changing from <br/> to <hr/>. Also I could learn a lot of shortcut key to create some more smoothly.



>Further readings/references
 These are what I was inspired from.



 I saw this for example of type expression to create SLICE. It shows more impact and simple but clear to see I thought.






 Also, I saw this for example. There is a lot of interesting typography, I was just inspired from these artworks.

 
Figure The book for Lettering and Design I have Week 5 (30/04/2021)

 I used it to see typeface of English and Japanese. I got this book by my mother that means it is really old book and are a lots examples. 




>References
Figure2.1 : https://www.greeka.com/greece-culture/language/
Figure2.2 : http://webspace.ship.edu/cgboer/evolalpha.html
Figure2.3 : https://www.worldhistory.org/image/3475/ancient-greek-boustrophedon-inscription/
Figure3.1, 3.3-5, 3.15, 3.17-20, 3.23 : http://redhorsemyrtletree.com/132/?page_id=210
Labels:

Comments

Post a Comment