Exercise/Typography Task 1/YANG HANWEN 0364085

ID name YANG HANWEN

ID number 0364085

Program name  bachelor of design (honors) in creative media

Task 1

LIST

·LECTURES

·INSIRUCTIONS

·FEEDBACK

·REFLECTIONS

·FURTHER READING

LECTURES

Lecture 1 

Introduce

Typography is a fundamental aspect of any design study. This involves creating a set of fonts. The art and skill of arranging fonts so that the written word displayed is clear, readable, and attractive.

Printing has evolved over more than 500 years, from calligraphy to lettering to typography. Calligraphy refers to the method of writing, while lettering refers to the process of writing letters. Typography uses many terms, conventions, and unspoken rules (of your own judgment) based on stylistic trends and influences. Typography is how we express ourselves, convey our messages, and communicate effectively. Anyone can practice organizing words, letters, numbers, and symbols for publication, presentation, or distribution. Before the digital age, typography was a specialized field. The digital age has allowed more people to enter the field, leading to a decline in print quality.

The key terms are font and typeface. Typography refers to individual weights within a font, whereas typography refers to an entire family of fonts/weights that share the same characteristics/style.

Early alphabetic development (Phoenician to Roman)

The device used has a big impact on the type of text. They used these tools to scrape wet clay and chisel into stone. The shape of the capital letters is a simple combination of straight lines and circles.

 Later, the Greeks changed the writing, reading, and direction of the letters from left to right, and from right to left. You have to know how to read from left to right and vice versa.

Etruscan and Roman sculptors would paint letters on marble before carving, so they used paintbrushes to repaint the stone. This happened because stones were very expensive at the time and it was impossible to write directly on them. So, before making the stone, they painted it with a brush.

Manuscripts from the 3rd to the 10th century

           

The square letter is a font found on Roman monuments. This font adds a serif to the end of the base stroke. Change the width of the stroke by holding the pencil at an angle of about 60 degrees from the vertical.

                                             

National Alphabet is the abbreviation of Square Alphabet. It is easy to write but difficult to read. Capital letters are twice the size on paper. Printing also takes less time than printing on paper. Hold the pen or brush at a 30-degree angle from vertical. However, while the national alphabets are faster and easier to learn, they are compressed and therefore harder to read.

Square or capital letters are often used for documents that have certain desired characteristics. However, everyday actions are often skewed and simplified for speed. Here you can see the beginning of what is called a line format. Small letters are the result of writing capital letters quickly.

The Anthian letters have some aspects of Roman curves, specifically the forms of A, D, E, H, M, U, and Q. "Uncia" is a Latin word meaning one-twelfth of something. Therefore, scholars believe that the Uncial alphabet refers to letters one inch (1/12th of a foot) high. However, it is more accurate to think of it as a lowercase letter. Easier to read than large state letters.

The semi-uncial was a further formalization of cursive writing and marked the official beginning of lowercase character forms with many ascenders and descenders 2000 years after the creation of the Phoenician script.

From Charlemagne (the first unifier of Europe after the Romans), to the Carolingian trumpeters, St. Martin, abbot of Tours, to Alcuin York, monks used capital letters (capital letters) in their copying ) and a minus sign (lowercase letters) to unify all text. temple. The Bible's use of capital letters and punctuation set the standard for calligraphy for a century.

Black Letters in Gutenberg's Manual: The Decline of Charlemagne's Empire Regional differences also appear in Alcuin's text. The vertical fonts popular in Scandinavia are compressed. Fonts with strong verticality that are described as "textured" are called "black fonts" or "round fonts". Italian Romantic font based on Alcuin lowercase letters.

Text type classification

Week 3: 3.1 Typo_3_Text_P1

Text/Tracking: Kerning and Letter Spacing

Kerning: Automatically adjust the spacing between letters

Letter Spacing: Add spaces between letters

Tracking: Tighter or looser spacing between letters (Normal Tracking, Loose Tracking, Tight Tracking)

Format text

Left-aligned: This format most closely reflects the symmetrical experience of handwriting. Each line starts at the same point but ends where the last word in the line ends.

Center: Apply symmetry to text, arranging the same value and weight at both ends of any line.

Right-aligned: Emphasizes the end of a line rather than the beginning.

Alignment: Imposing a symmetrical shape on text by reducing or enlarging the space between text or letters.

Texture

Different fonts suit different messages. A font with a relatively large X-height or a relatively thick stroke width will produce a darker image on the page than a font with a relatively small X-height or a relatively thick stroke width. This sensitivity to chromatic aberration is the basis for successful composition.

Line spacing and line length

Set text type goals -> easy, long reading

Font size: Text should be large enough to be easily read at arm’s length.

Guidance: Text set too tightly encourages vertical eye movements.

Line Length: Proper spacing of text is as much a function of line length as it is a matter of font size and leading. A good rule of thumb is to keep line length between 56-65 characters.

type sample book

Composition Requirements: The text should create a field that can occupy the page or screen.

Week 4: Typos 04 Basics

Descriptive letter form

• dictionary = terminology

Wright Form Terminology

Baseline - the visual basis for dotted lines/letter forms

Median - A dashed line that defines the height of the letter's X

x-height - the height of any lowercase height font

Upper case - smaller than the ascending stroke, but with a wider, larger surface area at the top

Lowercase - Ascending letters with real estate touching the top part

Gives the impression of equal height = lowercase letters are slightly taller than uppercase letters → optical adjustment

1. stroke - any line that defines a basic letter form

strokes of letters

• Many parts and names of letter forms

2. Vertices/vertices - diagonal stems connected at top/bottom

apex/vertex in alphabetical form

• apex - top
• vertex - bottom

3. Arm - Stem → Horizontal (E, F, L) / short stroke up (K, Y)

letter form arm

4. ascenders - strokes that exceed the median line; lowercase letters

Ascenders of a letterform

5. barb - half-serif finish on curved strokes

 Barb of a letterform

6. beak - half-serif finish on horizontal arms

 Beak of a letterform

7. bowl - rounded forms that describes a counter; opened/closed bowl

 Bowl of a letterform

8. bracket - seen at the base; transition between serif and stem

 

 Bracket of a letterform

9. cross bar - horizontal stokes connecting 2 stems

 Cross bar of a letterform

 10. cross stroke - horizontal stokes connecting 2 stem

 Cross stroke of a letterform

11. crotch - interior space where 2 strokes meet

 Crotch of a letterform

12. descender - anything projected below baseline; lowercase letters

Descender of a letterform

13. ear - extended from main stem/body

 Ear of a letterform

14. em/en

 Em/En of a letterform

• em - a gap between 2 words; space bar = em space + indicator that shows an em space; also indicates an M dash/long dash = width of M
• en - space that is half the letter of M, ex. 1989 **-**1999

15. finial - rounded non serif terminal of a stroke (ex. f, a)
16. leg - short strokes off the stem → bottom (L) / inclined downward (K, R)
17. ligature - formed by combination of >2 letterforms ex. fl, fi → joined together

 Ligature of a letterform

18. link - connecting bowl and loop of lowercase “g”
19. serif - right-angled/oblique foot at the end of the stroke
20. shoulder - curved stroke, not part of a bowl (h, n - curves connecting to vertical line)
21. spine - curved stem of “s”
22. spur - extension that articulates the junction of curved and rectilinear stroke

Spur of a letterform

23. stem - vertical/oblique stroke
24. stress - orientation of letterform indicated by thin stroke in round form

Stress of a letterform

• vertical stress - transition typeface (transition from copying handwritten writing; developed by mimicking writing), departure due to baskerville’s invention - creating letters that does not need to be copied anymore

25. swash - flourish that extends from strokes; never used in capitals together to form name/etc ; found in cursives lettering
26. tail - curved diagonal stroke at the finish (Q)
27. terminal self-contained finish of stroke without a serif → flat (”T” above) / flared (”t” above) / grave / concave / rounded (ball) / teardrop (finial)

The Font

• full font - type family that has many typefaces
• type family - refers to family that has many different typefaces, ex. bold, regular, etc
• typeface - individual weight of that stroke

choosing a type family that has many typefaces/good range of typefaces to have more option of weights

1. uppercase - capital, accented vowels, c cedilla, n tilde, a/o & 0/e ligatures

 Uppercase letters

2. lowercase

Lowercase letters

• its name comes from lead being used to compose paragraphs; consist of letters that comes from the upper case or lower case
• historically - majuscule, miniscule

3. small capitals

 Small Capitals

Comparison between lowercase (left) and small capitals (right)

• found in serifs; expert set
• certain letters sticks out from the paragraph causing a disruption in the grayscale you want to achieve
• chosen only when you have acronyms & dealing with large amount of text
• thickness of strokes changes - thinner; thinner weight / do not force command onto letters that do not originally have small capitals

4. uppercase numerals

• also known as lining numerals, same height as uppercase + same kerning weight
• stronger impact from numbers > delicate & sensitive numbers

5. lowercase numerals

 Lowercase numerals

• also known as old-style figures/text figures
• originally the form that numbers used to take
• seen in serif typefaces more than sans serif, x-height set with ascenders and descenders
• avoid numbers sticking out in paragraphs, hence the use of lowercase numerals
• InDesign - type - gliphs - character map - lowercase numerals

6. italic

 Comparison between italics and roman letters

• small capitals are not in italic → only roman
• refers back to 15th century italian cursive handwriting

7. punctuation, miscellaneous characters

 Punctuations & Miscellaneous Characters

• miscellaneous characters changes from typeface to typeface

8. ornaments - flourishes in invitations and certificates

 Ornaments

Describing Typefaces

1. roman - derived from roman monuments inscriptions ; book - slightly lighter stroke
2. italics ; oblique

• italics - based on handwritings → 15th century italian cursive handwriting
• oblique - do not base from handwriting → roman

3. boldface - thicker stroke than roman; ex. semibold, medium, black, extra bold, super / bodoni - poster; boldest rendition of the typeface
4. light - lighter than roman ; thin - even lighter
5. condense - roman ; compressed - extremely condense
6. extended - extended roman

 Typefaces

Comparing Typefaces

• goal - easy readability & appropriate expression of contemporary aesthetics
• conveying message requires a type family that respects the message you are conveying/presenting
• understanding the 10 typefaces to develop your skills as a typographer

 10 Typefaces

• each letters may display a range of attitude (whimsical, stately, mechanical, calligraphic, harmonious, awkward)
• differs in variety, line weight, relative stroke widths, feeling

Week 5: Typo 05 Understanding

Letters

1. Uppercase

• not symmetrical, stroke weights can be easily seen in Baskerville form
• each brackets that are attached to the diagonal stems has its own unique arcs
• reasons underpinning their differences; optical reasons
• common mistake - giving a lot of character and changing a lot of details of the letter ; simplify your characteristics & replicable to other letters
  

Uppercase Letter

2. Maintaining x-height

• size of lowercase letterforms
• curve strokes (s) must rise above median line / or below baseline to appear same as horizontal and vertical strokes
• curve letters exceeds median line, same size will look optically smaller (o always look smaller because it has less real estate/are and baseline; optical adjustment to compensate it)

Size of lowercase letterforms

X-height of lowercase letterforms

3. Letters / Forms / Counter forms

• examine in close details
• important to examine existing typefaces before designing your own letterforms to understand the convention of the letterforms/different approaches to create that typeface

Details of Letterforms

Forms and Counter forms of letterforms

4. Letters / Contrast

• simple contrasts produces variation - small + organic/large + machined ; small + dark / large light
• dealing with different set of information, differentiating the content

Contrast between Letterforms

Week 6 : Typo 06 Screen & Print

Different medium

• present - largely based on screen platforms due to technologies
• use of paper to communicate reduced
• edited, typeset, printed ; good typography and readability = skilled typesetters and designers
• long reading form may be preferred in e-books in comparison to physical books (still in debate)
• causes developmental effect of not being able to use touch and feel to learn among children

For example, printing affects the screen. Movie titles, beginnings, and endings exist not only on paper, but on many screens, including operating systems, system fonts, device 7 screens, and windows.

Typing from a browser can cause various layouts in how the page is displayed. Typography expertise is limited to app/web design, and pushing the boundaries of typography requires a lot of coding.

1. Print type vs Screen type

Type for print

• common typefaces used;
• ensure smooth, flowing, pleasant to read
• versatile, easy to digest; neutrality and versatility for a breeze quotation

Type for screen

• common typeface that enhances readability and performance on screens; caslon, garamond, baskerville
  • elegant, intellectual + readability at small font size
  • used to lack of clarity that are delicate (bodoni), now - good resolution on screens, important what you see on screen
  • ex. taller x-height/reduced ascenders/descenders, wider letterforms, open counters, heavier thin strokes, serifs, reduce stroke contrast, modified curves & angles
  • small size typefaces - more open spacing; leading and spacing on screen varies on space given and no lumping together, improves character recognition & overall readability

2. Hyperactive link/Hyperlink

• an old method to navigate document online
• word, phrase, image that jumps to a new document/section within existing document when clicked
• default - blue, underlined; arrow changes to small hand pointing when cursor is over a hyperlink

3. Font size for Screen

• text printed in books/magazine - 16pt
• read closely - 10pt
• arm length - >12pt

4. System fonts for screen/Web safe fonts

ex. open sans, lato, arial, helvetica, times new roman, times, courier new, courier, verdana, georgia, palatino, garamond

System fonts for screens

• differs in every operating system/device

Web safe fonts

• appears across all operating system

System fonts for screen vs Web safe fonts

5. Pixel differential between devices

• pc, tablets, phones, tv - differ in size, pixels size
• ex. 100 pixels laptop vs. 100pixels big 60”HDTV

PPI on different physical size of screens

6. Print type vs Screen type

 Print type vs Screen type

7. Static vs. Motion

• more dynamic - motion /less dynamic - static
• dynamic subjects to designers

Static

• minimal & traditional characteristics
• informational, promotional, formal, aspirational - level of impression & impact left closely associated to emotional connection of viewers
• platforms - billboards to posters, magazines to fliers
• ex. bold, italics - only a fraction of expressive potential of dynamic properties

Motion

• dramatic; letterforms is fluid and kinetic
• found overlaid in music videos, advertisement - set in the motion following its rhythm of the soundtrack
• on screen typographers - expressive, establishing tone of associated content/expressing brand values
• title sequences - preparing audiences by evoking the mood for the film
• ex. film title credits, motion graphics, brand identities of film/television - consist animated types

 Static Typography vs Motion Typography

INSIRUCTIONS

https://drive.google.com/file/d/1ZplWvsfwfswPXeeIDNdeTWHYa7IABMAB/view?usp=sharing

Week l:

Week 2:

2023.10.02 

Oh, sorry, I understood it wrong before. Now this is after the correction↓

Week 3: 

2023.10.14

TASK1 Exercise 02 / Text Formatting

Week 4: 2023.10.21

Font: Univers LT Std

Font size: 10 pt (text), 13 pt (caption text), 37 pt (title)

Characters per line: average 61 spacing: 12 pt (text)

Paragraph spacing: 12 pt

Alignment: left

Column: 2

Margins: 12.7

- JPEG 300ppi, grayscale (grid visible and invisible)

- PDF (grid visible and invisible)

Week 5: 2023.10.29

• JPEG

• PDF

 

 

Details

HEAD
Font/s: Chanticleer Roman NF (Regular)
Type Size/s: 72 pt
Leading: 36 pt
Paragraph spacing: 0

BODY
Font/s: Chanticleer Roman NF (Regular)
Type Size/s:11pt (text) , 18pt (caption)
Leading: 11 pt (text) 
Paragraph spacing: 11 pt
Characters per-line: 45 -65characters / line
Alignment: left justified

Margins: mm top - 23mm ; mm left - 16mm ; mm right 16mm ; mm bottom 52mm
Columns: 2
Gutter: 5 mm

FEEDBACK

Week 5 (23/10/23)

General Feedback: Note that although this is the feedback from the 5th week, it is actually written by me in the 6th week because I found a problem that I don’t know what the situation is Vinod-GCD60104_TDS_202309 has been tampered with? Maybe it was the teacher or maybe other students corrected the mistake? I'm not sure, but I think since it has been changed, maybe this format is worth learning and using. If you want to know what my previous Feedback looked like, you can click on this link (Feedback before being tampered with) and view. Specific Feedback: [Poor layout] I think the only thing I need to adjust this time is the position of "ON" and the font color of the cover?

Week 4 (16/10/23) General Feedback: This week the teacher gave us a website(www.menti.com) that seemed to let us write feedback, and it was very funny. I used Chinese to translate the English through Google, then uploaded it to the text box and then submitted the result. The big screen really showed that I sent it. The text in the past.

Specific Feedback: [Animation] There is nothing to modify in the animation, so we back to the topic. This week is required to write a lecture summary for the lecture "Typo_2_Basic" and record it in the task 1 electronic portfolio and complete the task 1 Ex.2.

Week 3 (9/10/23) General Feedback: [E-Portfolio] This week I was late for an hour, and the teacher looked at my homework and told me that I need to use the original words to design, so I need to correct my original homework for the second week this time. [Digitalization] And then I learned about the fourth week through a local classmate. we needed to do animation, so I made it first this time. Specific Feedback: [E-Portfolio]After finding out last week that I had misunderstood the meaning and had done something wrong, I changed it to a 4-font design. [Digitalization] Fire:The font design inspiration of the first picture is that the flame tip at the top of the flame is kept together with the top of the letter. Electric:The first picture is after typing ELECTRIC and using the lightning icon to cut the text. Freeze: The picture is after I typed "FREEZE", I made the word three-dimensional and turned it into an "ice cube font". Gun:A person is you, simplified to "u", holding a gun, simplified to "G", shooting "n" bullets. [Animation] So the meaning of this animation is that you hold the gun in your hand and shoot the "n" bullet. Week 2 (2/10/23) General Feedback: [E-Portfolio] I made a mistake about the teacher who posted the tutorial, so my special feedback on Monday was included in the DPI (Digital Photography & Imaging) homework for the second day of class, because the teacher of this class also asked us to submit the blog link for the first week's homework. So I mistakenly thought that if I submitted it directly in my homework, he would see what went wrong with me. [Digitalization] I heard from my classmates that I needed to select four pictures as sketches and draw them. Then I thought it was a pattern of drawing four pictures. [Sketches] Then I drew this sketch directly in Adobe Illustrator with 4 designs. Specific Feedback: [Sketches]We uploaded our designs in the Facebook Typography (TDS) group, but unfortunately I didn’t join until after the course. Week 1 (25/9/23) General Feedback: [E-Portfolio] In the first class, Teacher Vinod taught us how to make an electronic portfolio and asked us to watch a video tutorial. He also taught us how to put files into the electronic portfolio，but it's a pity that I didn't understand it at the time.

Specific Feedback: [Sketches] I have a question , In this video, in this”4:33” step ,My page is different with ↓ this

My page is this ↓，I don’t know why, so Can you help me?

REFLECTIONS

Experience

I'm completely new to typography and Adobe Illustrator, so my first week of printing was both fun and challenging. The next week I learned how time works, which was a new experience for me. When I first started learning InDesign, I had a hard time learning how to use it and practice with it. I'm new to text formatting and know very little about it, so I can't organize it clearly and accurately. By week five, I was still struggling to understand the concept of text formatting, so I actively sought feedback on how to improve my work.

Observations

During the first two weeks of writing, I had the opportunity to learn about the different fonts and types used in writing, as well as the different ways letters are used to form and represent individual words. As far as I know, Animation Time allows you to create different types of animations according to your ideas. As for text formatting, I realize I don't know much about the content. I need to read and learn more. Formatting text is difficult for me, but I look to online websites and physical magazines for inspiration and understanding of writing concepts. It helped me understand typography.

Findings

During the first two weeks of this project, we learned the basics of writing and drawing. Important skills and knowledge you will need in the future Timed animation is a new field for me. I'm also interested in learning how to enhance my studies and create animations. When I first started using InDesign, I knew the basics of InDesign, but there was still a lot to learn. In the fifth week, under the guidance of the teacher, I was able to recognize the errors and deficiencies in my writing. He will recover and be able to perform again.

FURTHER READING

"A Type Primer" 2nd Edition by John Kane

 A Type Primer 2nd Edition (2003)

Reference :

Kane J. (2003), A type primer 2nd Edition, Pearson Education, Inc.

Based on the list of books given, I have chosen A type primer to begin my further reading.

Week 1  2023.09.30

Chapter 1 Basics - Describing Letterforms

This chapter begins with an introduction to typography concepts that are well known in designing typographic layouts (pages 2-7).

Week2   2023.10.03

Chapter 1 Basics - Describing Typefaces

This chapter explains the basics of fonts and the importance of identifying different styles. This works for Roman, Italic, Bold, Light, Abbreviated and Extended fonts.

The author recommends that beginners type the 10 fonts in the picture above to improve their understanding and evaluation of other fonts.

Chapter 2 Development

This chapter first follows the historical development chronology of literature from early development to the present. We cover the history, development, and expansion of each genre. It also describes the history of Baskerville's invention of the printing press and the technological improvements made to produce better prints that contributed to today's printing presses.

Chapter 2 Development - Text typeface classification

Scripts have been developed to match today's technology. Keeping business needs and requirements in mind, the author developed a system for identifying these characters based on a font designed by Alexander Lawson that covered important characters and ignored fancy sans-serif styles. (p. 59).

Week 3  2023.10.10

Chapter 3 Letters, Words, Sentences

This section focuses on font basics. For example, text weight, strokes, curves, or details you wouldn't normally see. It doesn't matter if it's a small number or a large number. For example, the letter "A" in Baskerville is different. This also includes stroke width and thickness (page 63).

Understanding handwriting and feedback is key to writing clearly in any font. This section also introduces different methods to compare the advantages and disadvantages of their use. Displays font lines with slight variations in position, length, height, size, weight, and weight.

This is covered in the next section of this chapter. Describes how to display long sentence text. And how to use it to illustrate key points in long texts. Specify colors to use on paper or text and compare colors. This is because it affects how the text appears to the reader. Remember, your main goal is to get your message across with as few distractions as possible.

Week 4  2023.10.16

Chapter 4 Text

Explaining and differentiating the meaning of kerning and letterspacing, going in depth on the do's and don'ts with kerning on letterforms. This chapter also explains the important of type formatting and textures applied to text differing from its x-height to its stroke width. The leading and line length of a text is crucial in text as it also affects the overall view of a text and its readability.

Week 5  2023.10.23

Chapter 4 Text

This chapter describes each section of the book in detail, such as double pages, table of contents, etc. Introduce new paragraphs, important information You will learn to highlight large amounts of text Explain the hierarchy of text headings divided into A and B Headings, and have headings.