Typography /Task 1
Typography /Task 1
07.04.2023 - 05.05.2023 // Week 1 - Week 4
Ma Ruisheng 0347125
Typography /Bachelor of Design (Honours) in Creative Media
Task1/ Exercise
Lecture
week 1
Development and timeline
In this week, Mr. Vinod introduced what is typography for us, and his introduction made understanding of Typography. He also introduced us to 10 Typefaces that we will be use the fourteen weeks of the semester.
When I watched the first lecture, I learned that human characters were carved on stones and steel plates in the beginning. Since human tools were limited, such as hammers and stone chisels, people could only make straight lines and circles, so people's characters were basically composed of straight lines and circles at the beginning.These characters gradually evolved into Arabic and modern Latin.Later, the Greeks developed a style of writing from right to left, and then from left to right, which changed the way people read.This change in pattern reverses the direction of the letters.The picture below shows the evolution of the letter A in more detail.
Phoenician to Roman 4/4
Evolution from Phoenician Letter 4/4
The Greeks' direction of writing 4/4
Week 2
Basic
Stroke- any line that defines the basic letterform.
12/4
12/4
Apex / Vertex- the point created by joining two diagonal stems.
12/4
12/4
Arm- short strokes off the stem of the letterform, either horizontal.
12/4
12/4
Ascender- the portion of the stem of a lowercase letterform that projects above the median.
12/4
12/4
Barb- the half-serif finish on some curved stroke.
Beak- the half-serif finish on some horizontal arms.
Bowl- the rounded form that describes a counter. The bowl may be either open or closed.
Bracket- the transition between the serif and the stem.
Cross Bar- the horizontal stroke in a letterform that joins two stems together.
Stress- the orientation of the letterform, indicated by the thin stroke in round forms.
Week 3
Text(part 1.)
Kerning and LetterspacingKerning- automatic adjustment of space between lettersLetterspacing- add space between the letters
kerning applied on text 12/4Formating TextFlush Left: Each lines starts at the same point but ends whenever the last word on the line ends
Centered: Imposes symmetry upon the text, assigning equal value and weight to both ends of any line
Flush Right: Places emphasis on the end of a line as opposed to its start.
Justified: Like centered, this format imposes a symmetrical shape on the text. It's achieved by expanding or reducing spaces between words and letters.
Leading and Line LengthType size- Large enough to be read easily at arm's length.Leading- Text set too tightly causes vertical eye movement; Type set too loosely creates striped patterns; Both are bad and distract the reader from the material at hand.Line Length- Shorter lines need less leading; longer lines more. Keep line length between 55-65 characters.
Indicating ParagraphsPilcrow ¶ : A holdover medieval manuscripts
Line Space (Leading) : Line space between the paragraphs, line space size must equal paragraph size to ensure cross-alignment across columns of text
Standard Indentation: Indent is the same size with line spacing or the point size of text
Extended Paragraphs: Creates unusually wide columns of text
Widows and Orphans
Widows: Short line of type left at the end of a column of text
Orphans: Short line of type left at the start of a new column
Kerning and Letterspacing
Kerning- automatic adjustment of space between letters
Letterspacing- add space between the letters
kerning applied on text 12/4
Formating Text
Flush Left: Each lines starts at the same point but ends whenever the last word on the line ends
Centered: Imposes symmetry upon the text, assigning equal value and weight to both ends of any line
Flush Right: Places emphasis on the end of a line as opposed to its start.
Justified: Like centered, this format imposes a symmetrical shape on the text. It's achieved by expanding or reducing spaces between words and letters.
Centered: Imposes symmetry upon the text, assigning equal value and weight to both ends of any line
Flush Right: Places emphasis on the end of a line as opposed to its start.
Justified: Like centered, this format imposes a symmetrical shape on the text. It's achieved by expanding or reducing spaces between words and letters.
Leading and Line Length
Type size- Large enough to be read easily at arm's length.
Leading- Text set too tightly causes vertical eye movement; Type set too loosely creates striped patterns; Both are bad and distract the reader from the material at hand.
Line Length- Shorter lines need less leading; longer lines more. Keep line length between 55-65 characters.
Indicating Paragraphs
Pilcrow ¶ : A holdover medieval manuscripts
Line Space (Leading) : Line space between the paragraphs, line space size must equal paragraph size to ensure cross-alignment across columns of text
Standard Indentation: Indent is the same size with line spacing or the point size of text
Extended Paragraphs: Creates unusually wide columns of text
Line Space (Leading) : Line space between the paragraphs, line space size must equal paragraph size to ensure cross-alignment across columns of text
Standard Indentation: Indent is the same size with line spacing or the point size of text
Extended Paragraphs: Creates unusually wide columns of text
Widows and Orphans
Widows: Short line of type left at the end of a column of text
Orphans: Short line of type left at the start of a new column
Week 4Typography: Letters
17/4Understanding letterforms
The letter form below represents symmetry but on a cloer-look it is not symmetrical. The designer puts meticulous effort in maintaining a harmonious look but not losing its expresiveness.
Maintaining X-height
X-height describe the size of lowercase letterforms. Curved stroke such as 'S', must rise above the median in order to look as the same size as the vertical and horizontal strokes they adjoin.
Form / Counterform
Space describes and contained by the strokes of the form. When letters are joined to become words, the counter form will be included with space between them.
17/4
17/4
Understanding letterforms
The letter form below represents symmetry but on a cloer-look it is not symmetrical. The designer puts meticulous effort in maintaining a harmonious look but not losing its expresiveness.
Maintaining X-height
X-height describe the size of lowercase letterforms. Curved stroke such as 'S', must rise above the median in order to look as the same size as the vertical and horizontal strokes they adjoin.
Form / Counterform
Space describes and contained by the strokes of the form. When letters are joined to become words, the counter form will be included with space between them.
17/4
Week 5
Screen & Print
Print Type vs Screen Type
Type for Print: Caslon, Garamond and Baskerville (highly readable set in small font size)
Type for Screen: Taller x-height, wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast and modified curves and angles / Smaller size typefaces with more open spacing
Hyperlink: Word, phrase or image that links to a website (normally blue and underlined)
Font size for Screen: 16 pixel text on screen, if were to read at arms length at least 12pt
Print Type vs Screen Type
Type for Print: Caslon, Garamond and Baskerville (highly readable set in small font size)
Type for Screen: Taller x-height, wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast and modified curves and angles / Smaller size typefaces with more open spacing
Hyperlink: Word, phrase or image that links to a website (normally blue and underlined)
Font size for Screen: 16 pixel text on screen, if were to read at arms length at least 12pt
Type for Screen: Taller x-height, wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast and modified curves and angles / Smaller size typefaces with more open spacing
Hyperlink: Word, phrase or image that links to a website (normally blue and underlined)
Font size for Screen: 16 pixel text on screen, if were to read at arms length at least 12pt
Instruction
In task1, we will first select and sketch the seven words we voted for. I chose PARTY, PAUSE, LOVE and SPLIT. Below is my initial sketch.
sketches. 13/4/2023
sketches. 13/4/2023
sketches. 13/4/2023
After receiving MR. Viond's feedback, I made some other changes to love and party and made them digital.
visual. 18/4/2023
final outcome. pdf
Next, I will select a word to make the GIF, I select SPILT. I want to make the effect that the word splits in half in the middle, I first put the list into the Ai and make the process.I exported part of it and put it in Photoshop to make the action diagram.
progress. 20/4/2023
progress. 20/4/2023
After I've done that, I export my GIF.
first GIF. 20/4/2023
After receiving feedback from Mr. Viond, I changed the animation of the font.
progress. 27/4/2023
Then I import these images into Photoshop.
progress. 27/4/2023
second Gif. 27/4/2023
progress. 27/4/2023
final work. 27/4/2023
I practiced my name with ten of the fonts Mr. Vionds had given me, to find the difference.
without Kerning and Tracking. 29/4/2023
with Kerning and Tracking. 29/4/2023
Text Formatting A4 Layout
sketches 1.29/4/2023
sketches 2. 29/4/2023
sketches 3. 29/4/2023
With instructions from mr.Vionds, I had changed the layout.
final outcome
final.pdf.9/5/2023
final.jpeg.9/5/2023
Head
Font/s:Bodoni Std
Type size/s:39pt
Paragraph spacing:0
Body
Font/s:Bodoni Std
Type size/s:10pt
Leading：14
Paragraph spacing:0pt
Characters per-line:56
Alignment:left justified
inal outcome. pdf.9/5/2023
final outcome.pdf.9/5/2023
Feedback
week 2
Pause and split work but the other two do not work.
week 3
Non
week 4
Animation SPILT cannot move with spilt.
week 5
Delete the left picture，image are not related to the text. Cross alignment has not been achieved.Just use left the line and place the text here.
Experience
In fact, I could not understand what I needed to do in this course at the beginning, but after repeatedly watching the video and discussing and researching with my classmates, I could understand how to carry out what I had learned. By changing and ordering the letters at the beginning, I could understand the flexibility of the letters and design the corresponding deformation for them at the later stage. In the following typesetting, I tried to learn how to better integrate pictures and text to make them echo each other. In this process, I also became clearer about the use of Ai and Id.
Observations
In the process of practicing and learning Text 1, I can observe that the presentation of letters is completely different from the Chinese characters I have been exposed to since childhood. Chinese characters pay attention to neat and neat, we often say Chinese characters are square characters, but letters are completely opposite forms of expression, they are written in three lines and two grids, high and low, and they need to pay more attention to their expression forms in the design.
Findings
Furthing Reading
4/5/2023
Reference: Kane, J. (2003). A Type Primer: Second Edition. Pearson Education, Inc., Prentice Hall, 1 Lake St, Upper Saddle River, NJ 07458.
pg 80-88 (Type and colour, English is not Chinese)
In the chapter which I chose to read, type and colour are discussed, and that is one of the important parts in design. Besides that, this is also related to typography. The font type and font colour will always affect the reader. According to this book, each typeface is combined into regularly occurring lines, grouped into paragraphs and columns, or set a single or simple phrase to produce a unique tone on a page and become the centre point of the design. Besides that, there are some examples that are shown when black and white font colours meet different grey values of the background and which are presented more clearly. Overall, from this chapter, font type, typefaces, and colour will emphasis the word.
评论
发表评论