Typography / Task1: Exercise
30/03/2022 - 27/03/2022 Week 01 – Week 05
Riko Matsuyama (0351470)
Bachelor of design in creative media
Typography / Task1: Exercise 1&2
Lectures
Typo1: Development
The summary of this week. We meet with our lecture and classmate for the first time, and teacher explained about this module detail, how to write a blog, Facebook features, and explained about what is typography and why is important. I'm glad to start face to face class.
Typography… Act of creating letters / shapes
Typography used as animation, movie titles, books, posters, website designs and typography is not just text. It have characteristics and attributes. Good Typography is art. Bad Typography has a negative effect on learning. For example, textbook design that students use. Also, we must deal a history.
Font - a font refers to the individual not or weight within the typeface
 |
Fig1.1 Font |
Typeface - refers to the various families that do not share characteristics
 |
Fig1.2 Typeface1 |
 |
Fig1.3 Typeface2 |
Early letterform development: Phoenician to Roman.
Forms are simple as the materials and tools of early writing required.
 |
Fig1.4: The Evolution of the Phoenician Script into Modern Latin and Arabic |
 |
Fig1.5: Evolution from Phoenician letter |
 |
Fig1.6: Phoenician, Greek, and Roman |
Phoenician → wrote from right to left
The Greeks → developed a style of writing called "boustrophedon" which meant that the lines of text read alternately from right to left and left to right.
Greek like Phoenicians, did not use letter space or punctuations ↓
 |
Fig1.7: Orientation of letterforms |
 |
Fig1.8: Greek fragment, stone engraving |
＊ Hand script from 3rd - 10th century C.E. ＊
 |
Fig1.9: Late 3rd - mid 4th century: Rustic capitals |
 |
Fig1.10: 4th or 5th century: Square Capitals |
 |
Fig1.11: C. 925: Caroline miniscuel |
 |
Fig1.12: C. 1455: 42 line bible, Johann, Gutenberg, Mainz |
Text type classification ( Dates of origin approximated to the nearest quarter century. )
Type forms ave developed in response to prevailing technology, commercial needs, and esthetic trends.
 |
| Fig1.13, 1.14, ,1.15 |
Fig1.13 - 1450 Blackletter
Fig1.14 - 1475 Oldstyle
Fig1.15 - 1500 Italic
 |
| Fig1.16, 1.17, 1.18 |
Fig1.16 - 1450 Blackletter
Fig1.17 - 1475 Oldstyle
Fig1.18 - 1500 Italic
 |
| Fig1.19, 1.20, 1.21 |
Fig1.19 - 1825 Square Serif / Slab Serif
Fig1.20 - 1900 Sans Serif
Fig1.21 - Serif / Sans Serif
Typo2: Basic / the font
Baseline - The imaginary line visual base of the letterforms
Median - The imaginary line defining the x-height of letterforms
X-height - The height in any typeface of the lowercase 'x'
 |
Fig2.1: baseline, median, and x-height |
And letterform have name. Here are some examples;
Stroke - Any line that defines the basic letterforms
 |
Fig2.2: stroke |
Apex / Vertex - The point created by joining two diagonal stems (apex above and vertex below)
 |
Fig2.3: apex / vertex |
Crotch - The interior pace where two stokes meet
 |
Fig2.4: crotch |
Ligature - The character formed by the combination of two or more letterforms
 |
Fig2.5: ligature |
The full of a typeface contains much more than 26 letters. To work successfully with type, you should make sure that you are working with a full font and you should know how to use it.
Uppercase - Capital letters, including certain accented vowels, the c cedilla and n tilde, and the a/e and o/e ligatures.
Lowercase - lowercase letters include the same characters as uppercase.
 |
Fig2.6: uppercase |
 |
Fig2.7: lowercase |
Roman - The letterform is so called because the uppercase forms are derived from inscriptions of Roman monuments.
 |
Fig2.8: roman letterform |
 |
Fig2.9: italic letterform |
Punctuation, miscellaneous characters - although all fonts contain standard punctuation marks, miscellaneous characters can change from typeface to typeface.
 |
Fig2.10: punctuation, miscellaneous characters |
Ornaments - Used as flourishes in invitations or certificates. They usually are provided as a font in a larger typeface family.
 |
Fig2.11: ornaments |
3. Typo1 Text / Tracking: Kerning and letter-spacing
Kerning - it refers to the automatic adjustment of space between letters
 |
Fig3.1: kerning |
Normal tracking, loose tracking and tight tracking
 |
Fig3.2: normal tracking, loose tracking and tight tracking |
Designers always letterspace uppercase letters, but there has long been strong resistance within the type community to letterspace lowercase within text.
Flush left - This format most closely mirrors the symmetrical experience of handwriting
 |
Fig3.3: Flush left, ragged right |
Centered - This format imposes symmetry upon the text, assigning equal value and weight to both ends of any line.
 |
Fig3.4: Centered, ragged right and left |
Flush right - This format places emphasis on the end of a line s opposed to its start.
 |
Fig3.5: Flush right, ragged left |
Justified - Like centering, this format imposes a symmetrical shape n the text. It is achieved by expanding or reducing spaces between words and, sometimes, between letters
 |
Fig3.6: justified |
 |
Fig3.7: text / texture |
Leading - Text that is set too tightly encourages vertical eye movement; a reader can easily loose his or her place.
Line Length - Appropriate leading for text s as much a function of the line length as t is a question of type size and leading.
4. Typo2
There are several options for indicating paraphrases. In the first example, we see the "pilcrow"(¶), a holdover from medieval manuscripts seldom use today. (1) Next one displays a "line space"(leading*) between the paraphrase. This ensures cross-alignment across columns of text. (2)
 Fig4.1 indicating paragraphs option (1) |
 |
Fig4.2: cross-alignment across columns of text (2)
 |
| Fig4.3: Line space vs leading |
This example here displays the standard indentation. Typically here the indent is the same size of the line spacing or the same as the point size of your text. (3) The method of extended paragraphs below creates unusually wide columns of text. (4)
Fig4.3: same size of the line spacing and text point Fig4.4: the method of extended paragraph
In traditional typesetting, there are two unpardonable gaffes - widows and orphan
A widow is a short line of type left lone at the end of columns of text.
An orphan is a short line of type left alone at the start of new columns.
 |
Fig4.5: widow and orphan |
Highlighting Text
Fig4.6,7: highlighting text
In this example he sans serif font (universe) has been reduced y 5 to match the x-height of the serif typeface. 8 ≠ 7.5
 |
Fig4.8: serif typeface |
When highlighting text by placing a field of color at the back of the text, maintaining he left reading axis f the text ensures readability is at its best.
 |
Fig4.9: highlighting text |
Quotation mark, like bullets, can create a clear dent, breaking the left reading xis. Compare the indented quote at the top with the extended date at the bottom.
Fig4.10,11: quotation mark, like bullets
A head indicates a clear break between the topics within a section. In the following examples "A" heads are set larger than the text, in small caps and in bold. The forth example how an A had "extended" o the left of the text.
 |
Fig4.14: A heads |
 |
Fig4.15: B heads |
The C head, although not common, highlighting specific facts of material within B head text. They not materially interrupt the flow of reading. As with B heads, these C heads are shown in small caps, italics, serif bold and san serif bold.
 |
Fig4.16: C heads |
Instructions
Task1 Exercise 1 - Type expression
Our first task is to express four words typographically. Total 4, cough is mandatory so choose three more actually. I selected to create 'squeeze', 'pop', and 'wink'. After that, we need to draw idea sketch. And create type expression using by Adobe illustrator. We can use downloaded 10 typefaces.
selected words:
- cough (mandatory)
- squeeze
- pop
- explode
- grow
- wink
 |
Fig5.1 "cough"A, B, and C (04.04.2022) |
 |
Fig5.2 : "wink"A, B, and C (04.04.2022) |
 |
Fig5.3 : "squeeze"A, B, and C (04.04.2022) |
 |
Fig5.4 : "pop"A, B, and C (04.04.2022) |
| The teacher taught me how to use art brushes and other tools and put triangular thorns around the letters. It shows swelling of the throat due to coughing. "O" also looks like a virus.  |
Fig5.5 cough process (11.04.2022) |
Wink "k" has the image of ＞ ＜. A white semicircle was layered on top of a black semicircle to represent the shape of the mouth.
 |
Fig5.6: wink process (10.04.2022) |
 |
Fig5.7: wink process2 (10.04.2022) |
 |
Fig5.8: week2 feedback 04.04.2022) |
In this exercise, using graphic elements is not good. So replaced the graphic element hand with S.
"S" is squeezing "QUEEZE".
To make it clear that "S" is sandwiching "QUEEZE", I overlapped white shapes to distinguish between front and back.
 |
Fig5.9 squeeze process (10.04.2022) |
 |
Fig5.10 squeeze process2 (10.04.2022) |
The image of my POP is colorful and cute. And this exercise, only white or black can be used, so I used both colors in one word to express POP atmosphere.
 |
Fig5.11: pop precess (13.04.2022) |
 |
Fig5.12 pop process2 (13.04.2022) |
Corners, the atmosphere is softened and the cuteness is expressed.
 |
Fig5.13 pop process3 (13.04.2022) |
 |
Fig5.14 pop process4 (13.04.2022) |
Exercise 1 Type expression final outcome
Exercise 1 Type expression final outcome (13.04.2022)
Task1 Exercise1 - Type Expression, Animation
Next, create an animated gif. I have not used this app before, so I thought it would be difficult at first. However, when I worked while watching the lecture video, it was completed. I would like to learn some tools more in adobe illustrator while working.
 |
Fig5.15 gif process (16.04.2022) |
First, I showed Fig5.18 to the teacher and received feedback. The teacher said it would be good if the triangle around the letters could be made larger and smaller than to move the letters. The triangle is an important expression in this work, so make it stand out.
I received good feedback. Certainly, if it is 1, it is not clear what this wants to convey just because the letters are moving.
 |
Fig5.16: gif process2 (16.04.2022) |
I changed the size of the triangle around the letters. Make it bigger or smaller. The movement of the letters was also set like when a human cough.
 |
Fig5.17: gif Process3 (16.04.2022) |
 |
Fig5.18: gif animation first outcome (20.04.2022) |
Exercise 1 Type Expression animation final outcome
 |
Fig5.19: animation final outcome (20.04.2022) |
Task1 Exercise 2 - Text formatting
This is the task of actually doing the video of 'Text 1.2' that I saw at the beginning. Create using InDesign while watching the lecture video.
 |
Fig6.1: lecture |
 |
Fig6.2: process |
We use the downloaded 10 typefaces and use them to type in my name and do kerning.  |
Fug6.4: process, kerning |
 |
Fig6.5: text formatting without kerning (20.04.2022) |
 |
Fig6.6: text formatting with kerning (20.04.2022) |
 |
Fig6.7: lecture |
I watched 5 lecture videos and after that, I practiced text formatting and created the exercise layout.
First, I though 3 layout images.
 |
Fig6.8: process |
<Things to look out or when completing Exercise 2 of task 1>
Font size (8-12)
Line length (55-65/50-60 characters)
Text leading (2, 2.5, 3 points anger than font size)
Ragging (left alignment) / Rivers (Left justification)
Cross alignment
No windows / Orphans
It was a little bit difficult to make good use of visibility, beauty and white space.
 |
Fig6.9-11: layout ideas of text formatting |
Left - Futura Std book / Font size 9 / Text leading 11 / Line length 65
Middle - ITC NewBaskerville Std Roman / Font size 11 / Text leading 13 / Line length 65
Right - Bembo Std Regular / Font size 12 / Text leading 14 / Line length 65
I gave feedback, so after finishing the class, I tried to change the layout or kerning a little and changed an image that related to Helvetica.
 |
Fig6.12: process |
Font: Bembo Std
Typeface: Regular, Semibold (heading)
Font size: 37pt, 12pt, 10pt
Text leading: 40pt, 14pt, 12pt
Average characters per line: 50-56
Columns: 4
Margins: 12,7 mm (top, left, right) / Bottom: 80 mm / Gutter: 5 mm
Alignment: Left alignment
Paragraph space: 12
Task1 Exercise2 - Text Formatting Final Outcome
 |
Final submission jpeg (27.04.2022) |
Feedback
Week2
General Feedback: There are some good ideas. Avoid using graphic elements
Specific Feedback: cough C, wink C, and pop C is good. Squeeze A could work, and B might work.
Week3
General Feedback:
Specific Feedback: The cough thorns are too conspicuous, so make reduce them.Wink is good. Be careful as pop wasn't using the fonts provided. For gifs, this is also good, but it would be good if the triangle around the letters could be made larger and smaller than to move the letters. The triangle is an important expression in this work, so make it stand out.
Week5
For blogs, bring the final task text above. Be careful about the order of the programs and contents in the first column
General Feedback: This is good.
Specific Feedback: Cross alignment and line length. The problem is all the isolation, and the picture is not related to Helvetica.
Reflections
Experience
I learned a lot of things about typography during this module. These are very familiar to our lives as advertising poster, textbook, magazine, and book. This is important to make the words attractive. Also, thinking about typography makes things easier to read. Nicely designed ones are eye-catching. And I like the history of the world, so it was so interesting to know the evolution and process of typography.
During class time, I could see a lot of attractive ideas that my classmates. It became a good stimulation and experience. And personally, in Exercise 1, I think I was able to make a work that makes use of the feedback I received from the teacher.
Observations
When I thought about and drew an idea sketch, if I thought deeply one by one, I couldn't come up with a good idea. But when I thought about it lightly, good ideas came out. So, I learned that when thinking about an idea, it's best not to think deeply.
I used some apps in this module. But I have never used adobe illustrator and In design, I thought it was a little difficult, and I'm not used to it yet. So I need to use it more and remember the tool names. When I did write further reading, I realized that it is important and interesting to read various materials and deepen my knowledge.
Findings
Especially, It was interesting that many different expressions were born from one word. No one has the exact same idea, even if we think about the expression of the letters using the same letters. I thought that was the fun of design.
Also, there is more work to be done than in the previous semester, so it is important to plan well and manage time before taking action.
Further Reading
"Typo graphic de sign: form and communication"
(Rob Carter, Philip B. Meggs. Ben Day, Sandra Maxa, Mark Sanders)
 |
Fig7.1: Typo graphic de sign: form and communication |
I like history and am interested in it, so I chose the typography evolution topic.
These are broadly divided into four timelines. Here are a few examples of each.
The Evolution of Typography
1. 3150 BCE–1450 CE
 |
| Fig7.2: the earliest written documents |
The earliest written documents, impressed clay tablets from Sumer (c. 3150 BCE)
It predates typography. The impressions represent clay tokens, which were used for record keeping before the invention of writing.
 |
| Fig7.3: roman rustic writing |
Roman rustic writing (c. 100–600)
It conserved space by using condensed letters written with a flat pen held in an almost vertical position.
 |
Fig7.4: first page of a block book |
First page of a block book, the biblical book of Apocalypse.
Woodblock printing probably appeared in Europe before 1400.
2. 1450–1800 CE
 |
Fig7.5: |
William Caxton, typography from the first book printed in the English language. (c. 1475)
 |
Fig7.8: |
William Caslon, Caslon Old Style types, which from this date were used throughout the British Empire.
(c. 1720)
3. 1800 - 1899 CE
 |
Fig7.9: |
Davyand Berry, poster printed with wood type. (1836) Wood-type posters and broadsides flourish in America and Europe. (1830s - 80s)
I thought it was a very familiar poster. Various fonts are used, and the size is different, which is interesting.
 |
| Fig7.10: Advertisement for Estey Organ. Tolbert Lanston invents the Monotype machine. (1887) |
3. 1900 - 2000
 |
| Fig7.12: |
Warren Lehrer, page from French Fries. Apple Macintosh computer, first laser printer, and PageMaker page layout software are introduced. (1984)
4. 2000 CE
 |
| Fig7.13: |
Experimental Jetset, poster for the documentary filmHelvetica, by Gary Hustwit. (2007)
 |
| Fig7.15: |
Antonio Alcalá, art director, and Michael Dyer, designer, Waves of Color U.S. postage stamps. (2012)
The Anatomy of Typography
Spatial measurement
In addition to measuring type, the designer also measures and specifies the spatial intervals between typographic elements.
In traditional metal typography, interletter and interword spacing are achieved by inserting metal blocks called quads between the pieces of type. Because these are not as high as the type itself, they do not print.
 |
| Fig7.16: special measurement |
The Universe Family
A full range of typographic expression and visual contrast becomes possible when all the major characteristics—weight, proportion, and angle—are orchestrated into a unified family.
 |
| Fig7.17: the universe family |
A careful study of Figures 2-49 reveals that the first digit in each font’s number indicates the stroke weight, 3 being the lightest and 8 the heaviest. The second digit indicates expansion and contraction of the spaces within and between the letters, which results in expanded and condensed styles.
Roman fonts are designated with an odd number, and oblique fonts are designated with an even number.
Comments
Post a Comment