Typography1-Task Exercise
October.1.2023
3/Oct/2023-31/Oct/2023-Week1-Week5
QIAN GUOYI 0369462
Typography / Bachelor's of Design Honors In Creative Media
Exercises : Task 1 - Exercise 1 & 2LECTURES
Week1:Introduction&Briefing
INSTRUCTIONS
LECTURES
Week1:Summary of my lecture here.
In this lesson, the teacher introduced the history of the development of fonts and the order of writing. Writing was originally invented to facilitate communication and record things.And students are encouraged to learn .With the development of civilization, people have also begun to pursue the aesthetics of fonts, so people make the text more beautiful on the basis of more convenience, and can conform to the public aesthetics. Initially, people used uppercase to write text, but due to paper size limitations and for easier writing, lowercase and cursive writing appeared. Phoenician alphabet began to standardize articles requiring uniform formatting and requiring case alternation, and the form of case alternation became popular and accepted. With people's pursuit of aesthetics, different fonts began to appear, eg. italics, black.
PROCESS WORK FOR TYPE EXPRESSION
1.Early letterform development:Phoenician to Roman
(1)In the beginning, sharp wood and awl were used to carve words on stone, because the tool materials were limited, and the fonts at that time were mainly straight lines.
Fig 1.1 Phoenicians votive stele Carthage
(2)The Greeks changed the direction of writing. Phoenicians, like other Semitic peoples, wrote from right to left. The Greek developed a style of writing,which meant that the lines of text read alternately from right to left and left to right.Like this way.
Fig 1.2 Boustrophedon
（3）At the same time, due to people's pursuit of aesthetics, fonts began to change.
2.Hand script from 3rd-10th century C.E.
(1)Roman monuments can found square capitals and these letterforms have serifs added to finish of the main strokes.Keep the pen and paper at an even angle of 60 degrees.
(2)Rustic capitals is a compressed version of square capitals, and it allowed for twice as many words on a sheet of parchment and took far less time to write.Keep the pen at an angle of 30 degrees to the paper.Although rustic capitals were faster and estier toothy were slightly harder to read due to their compressed nature.
Fig 1.4 3rd/4th century Rustic Capitals
(3)Both square and rustic capitals were typically reserved for documents of some intended performance .Because cursive writing is faster, cursive writing is used more in daily life.
(3)Uncials It blends with cursive writing, like the A,D,E,H,M,U and Uncials can be understood simply as lowercase letters, and lowercase uncials are larger and more readable than rural ones.
Fig 1.6 4th/5th century Uncials
(4)A further formalization of the cursive hand ,half-uncials mark the formal beginning of lowercase letterforms ,replete with ascenders and descenders,2000years after the origin of the Phoenician alphabet.
（5）Charlemagne decreed that it be uniformly written in uppercase alternating formatting.And it continues to be used today.
Fig 1.8 Caroline miniscule
3.Blackletter to Gutenberg's type
3.Blackletter to Gutenberg's type
(1)After I Charlemagne’s empire disintegrated.In the Nordic region, a compact and vertical typeface called "black body" or "text body" became popular. In the south, a more rounded and open handwritten font called "round body" became popular.
Fig 1.9 Textura Blackletter in 1400s
(2) Gutenberg applies engineering, metalworking to process typefaces. He marshaled them all to build pages that accurately mimicked the work of the scribe’s hand – Blackletter of northern Europe.
(2) Gutenberg applies engineering, metalworking to process typefaces. He marshaled them all to build pages that accurately mimicked the work of the scribe’s hand – Blackletter of northern Europe.
Fig 1.10 Blackletter
(1)1450 Blackletterpe
1450 Blackletterpe, its forms are based on a style of handwritten newspaper.
Examples: Cloister Black
Based upon the lowercase forms used by Italian humanist scholars for book copying (themselves based upon the ninth-century Caroline minisule) and the uppercase letterforms found inscribed on Roman ruins. New fonts were created, gradually moving away from the origins of writing.
Examples: Bembo • Caslon • Dante • Garamond • Janson • Jenson • PalatinoExamples: Bembo • Caslon • Dante • Garamond • Janson • Jenson • Palatino 
Fig.1.12 1475 Oldstyle
The italics are densely packed so that more of the readme can fit on each page. At first italics were considered a personal font, but later they were incorporated into the Roman fonts.
Fig.1.13 1500 Italic
(4)1550 Script
Originally, this type of font was calligraphic and not suitable for lengthy text settings. Although it has been in use for a short time, it has been widely used. The current form has shifted from formal and traditional to casual and modern.
Examples: Kuenstler Srcipt • Mistral • Snell Roundhand
Fig.1.14 1550 Script
（5）1750 Transitional
（5）1750 Transitional
This style was created after the old style was transformed, partly due to advances in casting and printing technology.Examples: Baskerville • Bulmer • Century • Time Roman 
Fig.1.15 1750 Transitional
This style is a rationalization of the old style. There is a big difference between thick and English versions (like Bell) are also known as Scotch Romans and more closely resemble transitional forms.
Examples: Bell • Bodoni • Caledonia • Didot • Walbaum 
Fig.1.16 1775 Modern
(7)1825 Square Serif / Slab Serif
Originally heavily bracketed serif, with little variation between thick and thin strokes, these faces responded to the newly developed needs of advertising for heavy type in commercial printing. As hey evolved, the brackets were dropped.
Examples: Clarendon • Memphis • Rockwell • Serifa 
Fig.1.17 1825 Square Serif / Slab Serif
(8)1900 Sans Serif
This font completely eliminates Sans 1900 Sans Serif
As their name implies, these typefaces eliminated serifs alltogether. Although the forms were first introduced by William Caslon IV in 1816, its use did not become wide-spread until the beginning of the twentieth century. became more humanistic.
Examples: Akzidenz Grotesk • Grotesk • Gill Sans • Franklin Gothic • Frutiger • Futura • Helvetica • Meta • News Gothic • Optima • Syntax • Trade Gothic • Univers 
Fig.1.18 1900 Sans Serif
（9）1990 Serif/Sans Serif
（9）1990 Serif/Sans Serif
A recent development, this style enlarges the notion of a family of typefaces to include both serif and sans serif alphabets (and often stages between the two).
Examples: Rotis • Scala • Stone
Fig.1.19 1990 Serif/Sans Serif
Week2
1.（1）The term ‘kerning’ means automatically adjusting the distance between letters, not “letter spacing”.In fact, letterspacing means to add space between the letters. The addition and removal of space in a word or sentence is referred to as ‘tracking’. 
（2）Normal tracking, loose tracking and tight tracking. 
Fig 2.3 Normal VS Loose Tracking
Fig 2.2 Normal,Tight & Loose Tracking
2.Designers like to use spaced capitals, but for a long time this form was not accepted. The reason for this is because the uppercase form is meant to stand up on its own, while the lowercase form is needed to maintain a reading line between letters.
3.（1）Flush left: This format 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.
（2）Centered: This format imposes symmetry upon the text, assigning equal value and weight to both ends of any line.
（3）Flush right: This format places emphasis on the end of a line as opposed to its start.
（4）Justified: Like centering, It does this by expanding or contracting the space between letters.
4.Designers set fonts based on factors such as personal preference, popular culture, and needs.However, when setting the field of type, keep in mind the typographer’s first job—clear, appropriate presentation of the author’s message.
Fig2.4 Designer's font
5.In addition to understanding what makes different fonts unique, understand their place in history, and more importantly understand how different fonts feel as text. 
Fig2.5 Different typefaces show different grey values
6.A type specimen book shows various fonts in different sizes. Because there are no printed samples showing different sizes of the font, no one can make a reasonable type choice. This type of standard book can accurately provide references of different types, sizes, and line spacings.
Fig.2.6 Sample type specimen book
7.Compositional requirement: Text should create a field that can occupy a page or a screen. 
Fig 2.7 Compositional requirement
8.It is often useful to enlarge type to 400% on the screen to get a clear sense of the relationship between descenders on one line and ascenders on the line below. In the next slide you can see a little difference
Fig2.9 Jane Jacobs
Fig2.8 The effect of 40% magnification of text
9.The devil is in the details.— Jane Jacobs
Week3:
1.There are several options for indicating paragraphs. In the first example, we see the ‘pilcrow’ (¶), a holdover from medieval manuscripts seldom use today. 
Fig3.1 The Pilcrow
2.The example here displays a ‘line space’ (leading*) between the paragraphs. This ensures cross-alignment across columns of text.
3.The reason may be that leading usually includes the space taken up by descenders; and because most characters do not have descenders, additional white space is created under the line. 
Fig3.4 Widows & Orphans
Fig3.3 Leading vs Line Space
4.The reason may be that leading usually includes the space taken up by descenders; and because most characters do not have descenders, additional white space is created under the line. 
5.Flush right and ragged left text is some what more forgiving towards widows, but only a bit. Orphans remain unpardonable. Careful typographers make sure that no column of text starts with the last line of the preceding paragraph.
In this example the sans serif font (Univers) has been reduced by .5 to match the x-height of the serif typeface. 8 ≠ 7.5
Fig3.5 Bold Sans Serif
to match the x-height of the serif typeface. 8 ≠ 7.5
to match the x-height of the serif typeface. 8 ≠ 7.5
7.Quotation marks, like bullets, can create a clear indent, breaking the left reading axis.
8.Putting together a sequence of subheads = hierarchy.
Obviously there is no single way to express hierarchy within text; in fact the possibilities are virtually limitless.
Fig 3.8 hierarchy
9.Interleaving headings and text types reinforces the sense of structure while clarifying vertical structure.
Fig3.9 Cross Alignments of Text
Week4:
1.Since the development of printing, a lot of proprietary technical language has been used to allow us to understand the form of letters and identify the fonts of letters.
Baseline The imaginary line is the visual basis of a letter form.
2.Use strokes to define any line of the basic glyph.
3.For the diagonals the vertices of the letters are produced.
4.We can see that some of the letters are closed and included in the lines.
Week5
1.It can be seen from the stroke thickness of the two fonts that they are asymmetrical, but the expression form of the uppercase letters is symmetrical.
2.The capital letters appear to be symmetrical, but if you look closely at the party, you will find that they are different.Both Baskerville (previous) and Univers (below)， It reflects the designer’s pursuit of perfection and individuality when creating.
Fig.5.2 Baskerville and Univers
3.A comparison of how the stems of the letterforms finish and how the bowls meet the stems quickly
reveals the palpable difference in character between the two.This allows the complexity of each letter to be fully showcased.
Fig5.3 Helvetica and Univers
4. The x-height generally describe the size of the lowercase letterforms.For example，‘s’, must rise above the median (or sink below the baseline) in order to appear to be the same size as the vertical and horizontal strokes they adjoin.
Fig5.4 font writing form5.Developing a sensitivity to contrasting forms is as important as recognizing specific letter forms.When letters are joined to form words, the counterform includes the spaces between them. 
Fig5.5 sensitivity to contrasting forms
Fig5.5 sensitivity to contrasting forms
6.Examination is one of the most valuable ways to learn about letters and counters.So that people can quickly understand the content of the letter.
Fig5.6 Check the font
7.The basic principles of Graphic Design apply directly to typography. the most poweful dynamic in design—as applied to type, based on a format devised by Rudi Ruegg.
Fig5.7as applied to type
··Week 1 -Task
Compose and express the chosen 4 words using any of the 10 typefaces provided.
Font design can express the creator’s ideas in the form of text and allow readers to feel the charm of the text.
Sketches:
I finally chose windy, dive, huge and shok.
Fig1.1wingy
"wings"It gives me the feeling of lightness and fluttering.
1.My idea for the first picture was that "W" is like a big mouth blowing air, and the strong wind blows up all the "i", "n", d", y"
2.In the second picture, the capital "W" acts like a shelter from the wind and rain, shielding the rest of the lowercase letters from the wind and rain.
3.In the third picture, I want to express the strength of the wind through letter-sized shapes.
Fig1.2dive
"Dive"It means to dive into the sea.
1.In the first picture, I designed it to look like each letter is diving to express the meaning of the word itself.
2.In the second picture, the upside-down capital "D" is designed like this to show how the letters dive into the sea one by one.
3.In the third picture, it feels like the letters are floating in the water, which also highlights the underwater meaning of the word.
"Huge"It feels like a warm embrace to me.
1.The reason I designed the first one is that the capital "H" feels like it can protect the other letters.
2.In the second picture, each letter is closely nestled together, which makes people feel very warm. It is also to highlight the meaning of the word more intuitively.
3.In the third picture, if you look closely, you can see that the "H" in the middle is curved. I did it to show the shivering of the "H", while the other letters hugged it tightly around it to highlight the meaning of the word.
Fig1.4 shok
"Shok"This word has the meaning of surprise. I hope this word can express these meanings.
1.In the first one, I wanted to express the meaning of the word "shock" through the different sizes of each letter. Among them, I also specially compressed the word "S" very flat.
2.In the second picture, the "K" is written backwards to emphasize the weirdness even more. It looks like a big mouth that opens in surprise at the other letters.
3.The third picture, this form is to show that the word is shocking and I want to exaggerate it.
··Week2:We need to use ai to complete the font design (watch the video given by the lecturer to operate)
For the design of Windy
1.The first one uses changes in letter size and tilt of letters to make font changes.
2.The second one, corresponding to my handwriting, has a capital "W" tilted 90 degrees clockwise to look like an open mouth.
3The third one, in size, makes the capital "N" the largest letter.
Fig2.2Dive
For the design of Dive
1.The first one takes into account the meaning of "Dive" itself. The tilt and size of each letter from right to left are different, as if the letters are arranged one by one into the water.
2.Compared with the first picture, the second picture is more like the feeling of slowly diving into the sea one by one under the water, while the first picture is like jumping into the sea from land.
3.The third picture looks like each letter is floating in the water.
For the design of Huge
1.Also referring to my hand-drawn manuscript, the capital "H" is enlarged and surrounded by other letters, highlighting the meaning of the word itself.
2.In the second picture, a simple size change was made, changing ""G" to "&"
3.In the third picture, the lowercase "h" is surrounded by other uppercase letters, reflecting the warm meaning of "hug".
For the design of Shok
1.I wanted to highlight the weirdness of the word itself
2.In the second picture, I think the "K" written backwards can highlight the meaning of the word "shock".
3.The third picture, with "O" as the center, allows other letters to surround "O" in different directions and sizes, which further highlights the weirdness of the word and makes people feel surprised.
To sum up, when I designed these fonts, one of the unified factors I considered was that I hope that the meaning of the word itself or the intuitive feeling of the word can be highlighted in the form of text size, tilt, upper and lower case, etc.
··Week 3-For this week's homework we need to make an animated GIF, (choose one of the previous 4 words to complete).
Fig 3.2 Windy GIF
Design idea:Referring to the meaning of "windy" itself, the other letters are like being blown up by the wind.I want to simulate the dynamics of the letters as if they are blown by the wind.
Fig 3.4 Dive GIF
Design idea:The word "Dive" means potentially underwater, so I wanted to design it to look like the letters are jumping into the water one by one.
··Week 4.We design typography by watching typography videos and operating indesign.
Poster content
Fig4.1 Poster
Fig4.2 Poster process
For posters, the combination of title and image and text is very important.The title needs to be noticed at first glance, so I made the title letters larger in size and used a different font.
Fig4.3 About the font design of my name
Fig4.4 About the font design of my name
This week,used ten different fonts to represent his name，and the picture above is my design.··Week5
This week, we need to edit a layout, and the teacher also gave some references. My design refers to some layouts designed by others, and then combines my own design ideas to design my own layout.
Fig 5.2 Text alignment
PDF：
FEEDBACK
Week1:
-In the first week of study, the teacher first let us watch the blogs of previous students to let us understand how to be a good blog. After that, the teacher asked us to watch a video, which explained how to make a good blog, and asked us to register a blog.
-The teacher let us watch the video and sent us ppt, so that we can understand the history of text changes and better understand the magical charm of text.
Week2:
-In the second week, I used the four words selected by voting to design my own font sketch. My design referred to other font designs and the meaning of the four words themselves to design the font I wanted.
-I use AI to design digital fonts based on hand-drawn sketches.
-After class, the teacher pointed out some mistakes and problems in my font design, and I later modified them.
Week3:
-In the third week, we need to watch the teacher’s video and create an animation in the form of a GIF to highlight the meaning of our design and font itself.
-At the beginning, I did not use the ten fonts given by the teacher for design. When I asked the teacher for guidance, the teacher pointed out this problem.
-At the beginning, I did not use the ten fonts given by the teacher for design. When I asked the teacher for guidance, the teacher pointed out this problem.The font of the text box is not aligned with the horizontal lines.Modify this in class according to the teacher's requirements.
Week4：
-In the third week, the teacher pointed out some problems with saving my blog, and I made modifications to them.
-This week I need to complete the poster production. The teacher pointed out the problem because I added different fonts. There are still some minor problems. I have modified them, hoping to make the work more wan shan.
Week5:
-In the fifth week, you need to design and edit the layout.The teacher pointed out some problems with my design font, and based on the layout and reference of some other students, I finally improved my own layout poster and corrected some problems.
FURTHER READING
I studied some articles on some websites recommended by teachers, and I started to understand and record some of them.
Fig1
I think this one describes the size ratio of the font in the corresponding grid.
Fig2
This one shows the different changes in font size
Square capitals are generally considered by typographic historians as attempts to approximate inscriptional letters.square capitals, although they were patterned after the capital letterforms, differed from the inscriptional form on monuments.
Square capitals were wide, taking up a lot of space on a page or scroll. 
Wenyu is a cultural symbol with strong cultural and artistic expression, which plays a key role as an information bridge in the progress of human civilization. In modern media information, text is also an important form. In graphic design, text has rich visual expression, so text layout has become an important part of graphic design. Good cultural layout can convey richer information. This article briefly analyzes the role of typography in graphic design.
In today's information age, Wenyu serves people's life information in many aspects, such as emails, advertising slogans, posters, newspapers, magazines, books and periodicals, etc. As a medium, text can deliver a large amount of practical information to people. The reason why text can mark a variety of information is due to the role of text layout.
In graphic design, the arrangement and integration of text are closely related to the effect of the overall design, allowing readers to accurately and deeply understand the designer's intention and obtain the information to be conveyed. Therefore, studying the application of Wenyu typesetting in graphic design will help improve the artistic expression of graphic design.
评论
发表评论