Typography / Task 1: Exercise
27.8.2020 - 23.9.2020 (Week 01 - Week 05)
Adeline Wong Chyn Nee / 0344017 / Mr.Vinod N
Typography
Task 1 / Exercise 1
LECTURES
Week 01- Lecture 1 (27/08/2021): Development
In our first week of lecture, Mr. Vinod guided us through the development of the letter from the very beginning of time, how and why it became the way it currently is. He states the importance and significance of understanding the history of the letterform, otherwise, we would be endlessly groping in the dark, not knowing that what we invented, had already been invented before.
Typography: Development/ Timeline:
Week 01- Lecture 1 (27/08/2021): Development
In our first week of lecture, Mr. Vinod guided us through the development of the letter from the very beginning of time, how and why it became the way it currently is. He states the importance and significance of understanding the history of the letterform, otherwise, we would be endlessly groping in the dark, not knowing that what we invented, had already been invented before.
Typography: Development/ Timeline:
1) Early letterform development: Phoenician to Roman
Fig. 1.1 Development of letterform from the Phoenician
Way of writing: Scratching into wet clay with sharpened stick OR carving into stones with chisels.
This led to the letterform being simple combinations of straight lines and pieces of circles.
Fig 1.2 Greek writing direction
The greek developed a style of writing called 'boustrophedon' which translates to 'how the ox plow. Not only does the direction of reading change alternately from right to left and vice versa but the orientation of letterform as well, which means the greeks not only read in different directions but also learned to read flipped letters.
Fig 1.3 Stone engraving (date unknown)
Way of writing: Carving on the stone with a chisel
Fig 1.4 Late 1st century B.C.E Augustun inscription in the Roman Forum
Etruscan carvers would draw their letter out before carving them out onto the stones as the stones were expensive and took a lot of work to complete a set of letters.
Fig. 1.5 Phoenician to Roman (1000 B.C.E to 100 B.C.E)
The greeks letter A is formed by flipping the Phoenician letter A, which was then flipped again to achieve the Roman letter A. This shows the evolution of the letter A through time.
Fig 1.6 4th or 5th century Square Capitals
Square capitals: Written versions that can be found in Roman monuments. A variety of strokes widths was achieved by the reed pen held at 60 degrees off perpendicular.
Developments: Thick and thin strokes, added serifs
Fig 1.7 Late 3rd - mid 4th century: Rustic capitals
Rustic Capitals: This development allowed for twice as many words on. sheet and took lesser time to write. However, they are slightly harder to read due to the compression.
Fig. 1.8 4th century: Roman cursive
Roman cursive: This was typically used for everyday transactions as it was simplified for speed.
Development: The Roman cursive is the start to lowercase as a result of writing very fast which caused uppercase letters to be written as lowercase.
Fig. 1.9 4th - 5th century: Uncials
Uncials: Uncials incorporated some aspects of the Roman cursive hand, especially in the shape of A, D, E, H, M, U, Q. Some scholars think that Uncials refers to letters that are 1 inch high. Both uppercase and lowercase letters are integrated despite them being the same height.
Fig. 1.10 C. 500 Half-uncials
Half-uncials: A further formalization of the cursive hand.
Development: This marked the formal beginning of lowercase letterform, replete with ascenders and descenders, which is 2000 years after the origin of Phoenician letters.
Fig 1.11 C. 925 Caloline Miniscule
Caloline Miniscule: Charlemagne, the first unifier of Europe since the Romans, issued an edict in 789 to standardize all ecclesiastical texts.
Development: The monks rewrote the texts using both majuscules (uppercase), minuscule, capitalization, and punctuation which set the standard for calligraphy for a century. This allows messages to be conveyed accurately and precisely.
Development: The monks rewrote the texts using both majuscules (uppercase), minuscule, capitalization, and punctuation which set the standard for calligraphy for a century. This allows messages to be conveyed accurately and precisely.
Fig. 1.12 C. 1300 Blackletter (Textura)
Blackletter: In northern Europe, a condensed strongly letterform known as Blackletter gained popularity. However, in the South, a rounder more open hand gained more popularity, called 'rotunda'.
Fig. 1.13 C. 1455: 42 line bible, Johann Gutenberg Mainz
Gutenberg's skills included engineering, metalsmithing, and chemistry and marshaled them to build pages that accurately mimicked the work of the scribe's hand.
Fig, 1.14 1455: 42 line bible, Johann Gutenberg Mainz
Development: Forms little metal matrixes which can print lines of letters on many pages much quicker.
3) Text Type Classification
Fig. 1.15 1475 Oldstyle Fig. 1.16 Italic Fig. 1.17 1550 Script
Fig. 1.18 1750 Transitional Fig. 1.19 1775 Modern Fig. 1.20 1825 Square Serif
Fig. 1.21 1990 Sans Serif Fig. 1.22 1450 Blackletter
Week 02 (03/09/2021): Basic
In week 2 of the lecture, we are introduced to the basics of typography, what they are called and why.
1) Describing letterform
Fig, 2.1 Describing letterform
2) The font
Fig. 2.2 Uppercase
Fig. 2.3 Lowercase
Fig, 2.4 Small capital
Uppercase: Capital letters, including certain accented vowels, the c cedilla, and n tilde, and the a/e and o/e ligatures.
Lowercase: Lowercase characters include the same letters as uppercase letters.
Small Capital: Uppercase letterform draw to the x-height of the typeface. Small capitals are primarily found in serif fonts
Fig. 2.5 Uppercase Numerals
Fig. 2.6 Lowercase Numerals
Uppercase Numerals: Have the same height as uppercase letters and are all set to the same kerning width
Lowercase Numerals: They are set to the x-height with ascenders and descenders, they are best used whenever there are uppercase and lowercase letterforms.
Fig. 2.7 Punctuations
Punctuations: Although all fonts contain standard punctuation marks, miscellaneous characters can change from typeface to typeface.
Fig. 2.8 Ornaments
Ornaments: Used as flourishes in invitations or certificates. They usually are provided as a font in a larger typeface family. (Example- Adobe Caslon Pro)
3) Describing typefaces
Fig. 2.9 Typefaces
- Roman: The uppercase forms are derived from inscriptions of Roman monuments.
- Italic: The forms are based on fifteenth-century Italian handwriting.
- Boldface: Characterised by thick stroke than a roman form.
- Light: A lighter stroke than the Roman typeface, an even lighter one is called 'Thin'.
- Condènse: A compressed version of the Roman from.
- Extended: An extended variation to the Roman form.
Fig. 2.10 Comparing Typefaces
In typefaces, the difference is rather worth noticing.
Comparing Typefaces: The forms display a wealth of variety in line weight, relative stroke widths, and feeling. Some whimsical, some stately, some mechanical, some harmonious, and some awkward.
Week 03 (10/09/2021): Text Pt 1
In week 3 of the lecture, we are introduced to the basics of text, kerning and
In week 3 of the lecture, we are introduced to the basics of text, kerning and
1) Text Kerning and letterspacing
Fig. 3.1 Text Kerning
Text kerning: The term 'text kerning' refers to the automatic adjustments of space between letters, not to be mistaken with 'letterspacing', which is just adding space in between letters.
Letter spacing: Adding space in between letters.
Next, we are introduced to Adobe Indesign, these are some of the shortcut keys I learned in that short segment.
Fig. 3.3 Normal tracking, Tight tracking and Lose tracking
Fig. 3.4 Normal and loose tracking in paragraph
2) Text Formatting
Fig. 3.5 Flush left
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 grey value.
Fig. 3.6 Centered
Centered: This format imposes symmetry upon the text, assigning equal value and weight to both ends of the line. It transforms the field of texts into shapes, thereby adding a pictorial quality to the material that is non-pictorial by nature.
Fig. 3.7 Flush right
Flush right: This format places emphasis on the end of the line as opposed to its start. It can be useful in situation where the relationship between text and images become ambiguous without a strong orientation on the right.
Fig. 3.8 Justified
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 white space running vertically through the text.
3) Text Texture
Fig. 3.9 Anatomy of a typeface
Fig. 3.10 Adobe Casion & Baskerville
Fig. 3.11 Bauer Bodono & Adobe Jenson Pro
fig. 3.12 Sans Serif typefaces
4) Leading & Line Length
Fig. 3.13 No leading (left), too much leading (right)
Text size: Text type should be large enough to be read easily at arm length
Leading: Text that is set too tightly encourages vertical eye movement; a reader can easily loose his or her or their place
Line Length: Appropriate leading for text is as much function of the line length as it is a question of type size and leading. Shorter lines require less leading; longer requires more.
5) Type Specimen Book
Fig. 3.14 Sample Type Specimen Sheet
Type Specimen Book: Where we decide where a particular font/ typeface is shown in different point sizes, in different leading, and many different combinations.
Week 04 (18/09/2021): Text Pt 2
In week 4 of the lecture, we are introduced to more text basics.
In week 4 of the lecture, we are introduced to more text basics.
1) Indicating Paragraph
Pilcrow (¶): a holdover from medieval manuscripts seldom use today.
Fig. 4.1 Indicating Paragraph
Leading: The space you see between 2 sentences.
Fig. 4.2 Line space vs Leading
2) Widows and Orphans
Widow: A short line of the type left alone at the end of a column of text
Orphans: A short line of the type left alone at the start of a column of text
Fig. 4.3 Widow and Orphans
3) Highlighting Text
Examples of how to highlight text within a column of text:
Fig. 4.4 Italic highlight
Fig. 4.5 Bold highlight
Fig. 4.6 Bold and typeface highlight
Fig. 4.7 Font color highlight
Fig. 4.8 Text box highlight
Quotation marks, like bullets, can create a clear indent, breaking the left reading axis. Compare the indented quote at the top with the extended quote at the bottom.
Fig. 4.9 Quotation
Fig. 4.10 prime and quote
4) Headline within Text
A head: Indicates a clear break between the topics within a section.
Examples of different headlines to indicate a new body of the text:
Fig. 4.11 Ahead
B head: A subordinate to Ahead and indicates new supporting arguments or examples for the topic at hand and the spacing follows the leading space.
Fig. 4.12 B head
C head: Not common but highlight specific facets of material within B head text. They don't materially interrupt the flow when reading as they are shown in small caps, italic, serif bold, and san serif bold
Fig. 4.13 C head
5) Cross Alignment
Cross Alignment: Cross aligning headlines and captions with text type reinforces the architectural sense of the page—the structure—while articulating the complimentary vertical rhythms.
Fig. 4.14 Cross Alignment
Week 05 (24/09/2021): Understanding
In week 5 of the lecture, we are introduced to understanding letter forms.
1) Letter
The uppercase letterforms below suggest symmetry, but in fact, it is not symmetrical. It is easy to see the two different stroke weights of the Baskerville stroke form (below) more noteworthy is the fact that each bracket connecting the serif to the stem has a unique arc.
 | |||||||||||||
Fig. 5.1 Baskerville "A' Looks symmetrical but is not! The uppercase letterforms may appear symmetrical but a close examination shows that the width of the left slope is thinner than the right/both Baskerville and Universe demonstrate the meticulous care a type designer takes to create letterforms that are both internally harmonious and individual expressive.
  Fig. 6.1 Digital Typography (Source: Pinterest)  Fig. 6.2 Website Typography (Source: Pinterest) Printed  Fig. 6.3 Printed Typography (Source: Google)  Fig. 6.4 Printed Typography (Source: Google) 2) Print Type VS Screen Type Type for printPrimarily, the type was designed intended for reading from print long before we read from a screen. It's the designer's job to ensure that the text is smooth, flowing, and pleasant to read. They are versatile, easy-to-digest, classic, typeface which has neutrality and versatility to make typesetting with it a breeze. Type for screenTypefaces intended to use on the web are optimized and often modified to enhance readability and performance on screen in a variety of digital environments. Modifications of typography enhance on-screen (such as taller X-height, reduced ascender and descenders, wider letterform, more open counter, and heavier or thinner strokes and serif). Another important adjustment of screen typography is that there is more open spacing, there's no lumping of text information. HyperlinkA hyperlink is a word, phrase, or image that you can click on to jump to a new document or a new section within the current document. Hyperlinks are found in nearly all web pages, allowing users to click the way from one page to another. When you move a cursor over a hyperlink, whether it is a text or an image, the arrow should change into a small hand pointing at the link. Font size for print16-pixel text on the screen is about the same size as text content in the book or magazine; this is accounting for reading distance because we read them very close, often only a few inches away there typically set at about 10 points. If we were to read them at arm's length, we would want at least 12 points which is about 16-pixels on most screens. System Fonts for ScreenSystem fonts are the fonts already installed on your computer. ... Many system fonts have been optimized for the screen, not print. This comes at the cost of design details, which have been sanded off because they don't reproduce well on screen.   Fig. 6.5 Apple and Android System Font (Source: Google) Web Safe FontsWeb-safe fonts are fonts that can adapt to any browser on any device. By using these types of fonts, web designers and developers ensure that the intended font will always be displayed properly on a web page, even if these fonts aren't installed on the user's computer. Pixel Differential Between DevicesThe screen used by our PCs, tablets, phones, and TVs are not only different sizes but the text you see on-screen differs in proportion too because they have different size pixels hundred pixels on the laptop is very different from 100 pixels on a big 60 inch HDTV. Even within a single divide, there is a lot of variation so it is difficult to navigate  Fig. 6.5 PPI for different devices (Source: lecture) Static VS MotionStatic typography has a minimal characteristic in expressing words traditional characteristics such as both in Italic offer only a fraction of the expressive potential of dynamic properties.   Fig. 6.6 Motion and Static screen typography (Source: Google) Motion TypographyType is often overlaid onto music videos and advertisements, often set in motion following the rhythm of a soundtrack. On-screen typography has developed to become expressive, helping to establish the tone of associated content or express a set of brand values. In title sequences, typography must prepare the audience for the film by evoking a certain mood. Fig. 6.7 "Seven" (1995) title credits - film by David Fincher, showing motion typography |
TASK 1- Exercise 1 (Type Expression)
Sketches
Fig. 7.1 Sketches of 4 chosen words (Week 2: 03/08/2021)
These are the sketches I did upon choosing my words (Terror, Space, Water and, Abyss). After sharing my
Digitalization
1) Terror
Fig. 7.2 First ideation (Week 2: 03/08/2021)
Mr.Vinod suggested fewer drip effects on the top of the word
Fig. 7.3 Development of 'Terror' (Week 3: 10/09/2021)
After reducing the amount of drip effect. I added a reflection to add dynamics.
2) Water
Fig. 7.4 Development of 'Water' (Week 3: 10/09/2021)
The water effect in the first attempt looks unnatural, so I changed the shapes by dragging it using direct select tool.
3) Space
Fig. 7.6 Development of 'Space' (Week 3: 10/09/2021)
The first attempt of 'space' is emphasized by different use of colors and more distance is created.
4) Abyss
Fig. 7.7 Development of 'Abyss' (Week 3: 10/09/2021)
The first attempt of 'abyss' is emphasized by increasing the letter space and switching the font to bold, taking up the entire bottom space of the box given.
FINAL SUBMISSION:
Fig. 7.8 Final Compilation of the exercise (Week 3: 10/09/2021)
Fig. 7.9 Final Type Expression - PDF (Week 3: 10/09/2021)
TASK 1- Exercise 2 (Type Animation)
Fig. 10.1 First attempt (Week 4: 17/09/2021)
Fig. 10.2 Frames created in Illustrator (Week 5: 13/09/2021)
After some adjustment, I finally finalize my GIF with a total of 24 frames, which is twice the frame of what I originally did. In order to create a loop, I added another set of 24 frames into my timeline.
Fig. 10.3 Screenshot of my timeline (frame 1- 18)
Fig. 10.4 Screenshot of my timeline (frame 18- 35)
Fig. 10.5 Screenshot of my timeline (frame 31- 47)
Fig. 10.6 Final Animated Type Expression "Space" - GIF, Week 4 (17/9/2021)
TASK 1- Exercise 2 (Text Formatting)
For exercise 2, we will be given incremental amounts of text that address different areas within text formatting i.e. type choice, type size, leading, line-length, paragraph spacing, forced-line-break, alignment, kerning, etc. These minor tasks will increase your familiarity and capability with the appropriate software and develop your knowledge of information hierarchy and spatial arrangement.
Lecture 1/4 of Text Formatting: Kerning and Tracking
Lecture 2 to 4 of Text Formatting
Fig. 11.1 Text formatting with kerning, Week 4 (18/09/2021)
Fig. 11.2 Text formatting without kerning, Week 4 (18/09/2021)
Fig. 11.3 Text formatting with and without kerning to show the difference, Week 4 (18/09/2021)
Fig. 11.4 Text formatting without and with kerning, Week 4 (18/09/2021)
Fig. 11.5 Text formatting with and without kerning, Week 4 (18/09/2021)
Requirements:
- Leading: +2 points of point size / +2.5 or +3 depending on the typeface. Typefaces have different x-height thus may extend over the baseline grid.
- Body text: Negative and positive space has to be equal (middle gray value).
- Line length: 55 - 65 (body text), 35 (subtext).
- Headings: Double point size and leading of body text.
- Paragraph spacing same as leading.
- Keep text width the same for the same text of information. If they differ it confuses the audience, making them think it's a separate piece of information.
- Do not exceed +3/-3 for tracking to reduce ragging (line).
- Turn off hyphenation. If turning on hyphenation, ensure there are not too many else tracking adjustments must be made.
- Either use left align or left justify. Though left alignment is preferred.
- If using justify, ensure there aren't many rivers (large awkward spaces between the words).
- Maintain cross alignment.
- Avoid widows and orphans.
Fig. 11.6 Compilation of 3 layouts, Week 4 (18/09/2021)
For these 3 layouts, I chose the 3rd layout.
Fonts: Univers LT Std (55 Roman)
Point size: 9 pt (body text), 9 pt (captions), 17 pt, 20 pt (heading)
Leading: 11 pt (body text), 24 pt (heading)
Paragraph spacing: 14.4 pt
Line length: 51 - 58 (layout #1, #2 and #3)
Alignment: Left align
Fig. 11.7 1st layout Week 4 (18/09/2021)
Fig. 11.8 2nd layout Week 4 (18/09/2021)
Fig. 11.9 3rd layout Week 4 (18/09/2021)
Fig. 11.10 Screenshots of hidden characters Week 4 (18/09/2021)
Fig. 11.11 Screenshots of hidden characters (Incorrect) Week 4 (18/09/2021)
Text that does not sit on the baseline should be fixed using Text frame Option.
Fig. 11.12 Screenshots of hidden characters (Corrected) Week 4 (18/09/2021)
Texts are now on top of the baseline, this change creates a neat-looking paragraph line.
Fig. 11.13 Before and after kerning, Week 4 (18/09/2021)
After deciding on which layout to go for, I kern chosen layout (3rd layout) to prevent any orphans and ragging. This will make the paragraph lines look neater which creates readable text that is visually pleasing.
Fig. 11.14 Final chosen layout, Week 4 (18/09/2021)
FINAL SUBMISSION:
Fig. 11.15 Final layout PDF, Week 5 (24/09/2021)
FEEDBACK
Week 2: Type Expression (03/08/2021)
- General Feedback:
- I was advised to have less illustration and to focus more on the overall typeface.
- Specific Feedback:
- I am advised to tone down on the melting effect on my 1st "Terror" design.
- As for the 2nd and 3rd "Terror" design, I am advised to focus on the typeface rather than the illustrations.
- All my "Space" designs are good.
- For my 2nd "Water "design, the words can be repeated in lines to replicate the shape of a glass.
- My 1st "Abyss" design is a good idea however it can be improved.
- For my 2nd "Abyss" design, the typeface can be smaller to accentuate the effect.
Week 3: Type Expression & Animation (10/09/2021)
- General Feedback:
- Watch out for the composition, make sure no colors are used.
- General Feedback:
- Since my chosen word is 'space', I am advised to create a sense of distance between the word. Right now, it does not look like a typeface of 'space'.
- I could also use colors to create a sense of space.
- Specific Feedback:
- I am advised to create a sense of distance between the 's', 'pa', and 'ce'.
- I need to make use of the ground and make the letter travel to the front, back, and vice versa.
- I could also use the colors to create a sense of space, colours can transition from dark grey to light grey for distant letters and dark grey to black for near letters.
Week 5: Type Expression & Animation (24/09/2021)
- General Feedback:
- Important to achieve cross alignment, and have to set the text so that it touches the baseline.
- Specific Feedback:
- Paragraph spacing (formating) on the 2nd column is not the same as the 1st column, so have to fix that.
REFLECTION
Experience
Going into this module, I thought it was going to be slow and easy but I was wrong as the first task came in and it was nothing I have ever done before, it is difficult as my typography ability is not the best. Following task 1, I learned that in fact, typography is more than we think it is. I have learned a lot and expand my skills from the first exercise as we were limited to using only the 10 typefaces given.
Although this module may be the hardest of the semester, I have learned the most in this one and I'd say that it's worth it, learning through recorded lectures was honestly not easy as the assignments piled and I sometimes forget about it, I'm glad that I finished them and written all the revision notes.
Mr. Vinod and Dr. Charles are highly passionate about what they teach and I think that affects the student greatly, and it also urges me to do even better after each task review. Overall, the tasks are straightforward and I feel that I got the learning outcome from the tasks.
Observations
Through the first task, I have observed the significance of the composition and layout of a text. The complexity of a typeface description is able to create layouts so different from each other, which was fascinating to learn as well.
Upon finishing task 1, I started to have a newfound respect for the typographers out there who dedicate their time to create the perfect typography text, format, layout, and many more. Understanding and learning about typography is one thing but learning how to execute it perfectly using our knowledge and skills is a whole other story.
Findings
I've discovered that in typography, understanding and knowing the structure of a typeface is very important, the reason being it can help typography or just design students like us to carry out intricate and at the same time, neat design.
I discovered that InDesign is a wonder to use, I have always wanted to learn InDesign upon watching the work of my aunt, she is always on InDesign, creating page after page for a magazine company, and when I personally learn to use it, I got super excited over how neat a bunch of text could become, especially after learning about kerning, letter spacing and cross alignment.
FURTHER READING
Fig. 5.1 'A type primer' book cover
For further reading, I will study and note down the contents of one of the given typography books 'A type primer'.
Reference:
Kane, J. (2021). A Type Primer by John Kane (2011–03-07). Laurence King.
Chapter 1: Basics
1) Describing letterform
Fig. 5.2 Apex, Acender, Arm and Barb
Baseline: The imaginary line defining the vidual base of the letterform.
Median: The imaginary line defining the X-height of the letterform.
X-height: The height in any typeface of the lowercase.
Fig. 5.3 Structure of a letterform
Fig. 5.4 Letter from description
2) The font
Fig. 5.5 Uppercase, lowercase, and small capital
From this part of the book, I learned that the full font of a typeface contains much more than 26 letters, 10 numerals, and a few punctuation marks. It is important to know how to use them by using all the full fonts.
Uppercase: Capital letters, including some accented vowels
Lowercase: Lowercase letters includes the same characters as uppercase
Small Capital: Uppercase letter form, drawn to the x-height of the typeface. Small caps are primarily found in serif fonts.
Comments
Post a Comment