Typography: Task 1 Exercises

29/08/2022 - Ending Date / Week 1- Week 5 

Hayato Saito / 0350466 /Bachelor Of Design In Creative Media 

Typography

Task

---

LECTURES

Lecture 1: Development

    Early letterform development: Phoenician to Roman

Fig. 1.1 Evolution from Phoenician Letter

・Writing at first involved using a sharpened stick to scratch wet clay or a chisel to carve stone.

・The type of writing that is produced is greatly influenced by the tool that we are using.

Fig. 1.2 Direction of Writing

・Writing was done from right to left by Phoenicians and other Semitic peoples but the Greeks created a form of writing known as "boustrophedon," in which the lines of text alternately read from right to left and from left to right, and as they change the direction of reading they also changed the orientation of the letterform.

・Before carving letters into marble, Etruscan (and later Roman) carvers painted the letterforms.

・Some characteristics of their strokes such as a shift from vertical to horizontal weight and expansion at the start and end-transferred into the carved letterforms

    Hand script from 3rd – 10th century C.E.

Fig. 1.3 4th or 5th century Square Capitals

・Square Capitals were the written version that can be found in Roman monuments.

・Serifs have been added to the ends of the major strokes of these letterforms. The reed pen was held at an angle of about 60° from perpendicular to provide the variation of stroke width.

Fig. 1.4 Late 3rd to mid 4th century Rustic capitals

・Rustic Capitals were compressed versions of square capitals

・Rustic capitals took much less time to write and could fit twice as many words on a piece of paper. The pen or brush was held at a 30-degree angle from perpendicular. Rustic capitals were quicker and easier to use, but since they were compressed, they were a little more difficult to read.

Fig. 1.5 4th century Roman cursive

・ Roman cursive is the beginning of the typeface we call lowercase.

・daily transactions were often written in cursive, and forms were made to be quick.

Fig. 1.6 4th to 5th century Uncials

・Uncials incorporated some aspects of the Roman cursive hand.

・the A, D, E, H, M, U, and Q shapes. Because the Latin word "uncia" means "a twelfth of something," some academics believe that uncials refer to letters that are one inch (one-twelfth of the foot) high.

Fig. 1.7 C. 500 Half uncials

・Half-uncials were created by adding ascenders and descenders to the lowercase letters, marking the official beginning of the cursive script 2000 years after the Phoenician script was created.

・All ecclesiastical texts were to be standard by 789, per an edict by Charlemagne. The sentences were rewritten by the monks using capitalization, punctuation, majuscule (uppercase), and minuscule, which set the standard for calligraphy for a century.

    Blackletter to Gutenberg’s type

・Blackletter often known as the texture, is a condensed, extremely vertical letterform that became popular in northern Europe. The term "rotunda" for a rounder, more open hand became popular in the south. Alcuin's minuscule is the foundation for the humanistic Italian script.

・Gutenberg's type mold required a different brass matrix, or negative impression, for each letterform.

・Engineering, metalsmithing, and chemistry were among of his specialties.

    Text type classifications

Lecture 2: Text

    Kerning and Letterspacing

Fig. 2.1 Kerning and letterspacing

・Kerning refers to the automatic adjustment of space between letters.

・Letterspacing means to add space between the letters.

・Tracking is the addition and removal of space in a word or sentence.

Fig. 2.2 Normal tracking, loose tracking, and tight tracking

       Formatting Text

・Flush left: This format losely 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.

 

・Centered: This format imposes symmetry upon the text, assigning equal value and weight to both ends of any line. It's important to amend line breaks so that the text does not appear too jagged because centered type creates such a strong shape on the page.

・Flush right: This format places emphasis on the end of a line as opposed to its start. It can be useful in situations (like captions) where the relationship between text and image might be ambiguous without a strong orientation to the right.

・Justified: 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. Careful attention to line breaks and hyphenation is required to amend this problem whenever possible.

    Texture

Fig. 2.3 Anatomy of a typeface

Fig. 2.4 Different typefaces, different gray values

    Leading and Line Length

・Type size: Text type should be large enough to be read easily at arm's length--imagine yourself holding a book in your lap.

・ Leading: Text that is set too tightly encourages vertical eye movement; a reader can easily loose his or her place. Type that is set too loosely creates striped patterns that distract the reader from the material at hand.

・ Line Length: Appropriate leading for text is as much a function of the line length as it is a question of type size and leading. Shorter lines require less leading; longer lines more. A good rule of thumb is to keep line length between 55-65 characters. Extremely long or short lines lengths impairs reading.

LECTURE 3: Indicating Paragraphs

    Indicating Paragraphs

・Pilcrow (¶): A holdover from medieval manuscripts seldom use today.

・Line space (leading*): If the line space is 12pt, then the paragraph space is 12pt. This ensures cross-alignment across columns of text.

Fig. 3.1 Line space vs leading

・Standard indentation: Indent is the same size of the line spacing or the same as the point size of the text.

・Extended paragraphs create unusually wide columns of text. Despite these problems, there can be strong compositional or functional reasons for choosing it.

    Widows and Orphans

Fig. 3.2 Widows and orphans

・Widow: Short line of type left alone at the end of a column of text. 

・Orphan: Short line of type left alone at the start of a new column.

    Highlighting Text

・when highlighting text by placing a field of colour at the back of the text, maintaining the left reading axis (right example) of the text ensures readability is at its best.

・Sometimes it is necessary to place certain typographic elements outside the left margin of a colomn of type (extending as opposed to indenting) to maintain a strong reading axis.

Fig. 3.3 Text Hierarchy

・Hierarchy = putting together a sequence of subheads = hierarchy.

・there is no single way to express hierarchy within text; in fact the possibilities are virtually limitless.

LECTURE 4: Describing Letterforms

    Describing letterforms

・Baseline: The imaginary line the 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'.

・Stroke: Any line that defines the basic letterform.

・Apex / Vertex: The point created by joining two diagonal stems (apex above and vertex below)

・Arm: Short strokes off the stem of the letterform, either horizontal (E, F, L) or inclined upward (K, Y).

・Ascender: The portion of the stem of a lowercase letterform that projects above the median.

・Barb: The half-serif finish on some curved stroke.

・Bowl: The rounded form that describes a counter. The bowl may be either open or closed.

・Bracket: The transition between the serif and the stem.

・Cross Stroke: The horizontal stroke in a letterform that joins two stems together.

・Crotch: The interior space where two strokes meet.

・Descender: The portion of the stem of a lo;wercase letterform that projects below the baseline.

・Ear: The stroke extending out from the main stem or body of the letterform.

・Em/en: Originally referring to the width of an uppercase M, and em is now the distance equal to the size of an em. Most often used to describe em/en spaces and em/en dashes.

・Finial: The rounded non-serif terminal to a stroke.

・Leg: Short stroke off the stem of the letterform, either at the bottom of the stroke (L) or inclined downward (K, R).

・Ligature: The character formed by the combination of two or more letterforms.

・Link: The stroke that connects the bowl and the loop of a lowercase.

・Loop: In some typefaces, the bowl created in the descender of the lowercase G.

・Serif: The right-angled or oblique foot at the end of the stroke.

・Shoulder: The curves stroke that is not part of a bowl.

・Spine: The curved stem of the S.

LECTURE 5: Understanding Letterforms

Fig. 5.1 Baskerville 'A'

The uppercase letter forms 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.2 Univers 'A'

The uppercase letter forms may appear symmetrical, but a close examination shows that the width of the left slope is thinner than the right stroke. Both Baskerville (previous) and Univers (Fig.5.2) demonstrate the meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive

Fig. 5.3 Helvetica vs Univers

The complexity of each individual letterform is neatly demonstrated by examining the lowercase ‘a’ of two seemingly similar sans-serif typefaces—Helvetica and Univers. 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.

    Maintaining x-height

Fig. 5.4 Median and baseline

the x-height generally describes the size of the lowercase letterforms. However, you should keep in mind that curved strokes, such as in'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.

LECTURE 6: Typography in Different Medium

    Print Type Vs Screen Type

Type for Print: A good typeface for printing—Casio, Garamond, and Baskerville are the most widely used types. owing to their traits, which make them sophisticated and cerebral but also quite readable when set in small font sizes.

Type for Screen: Typefaces intended for use on the web are optimized and often modified to enhance readability and performance onscreen in a variety of digital environments.

Another important adjustment - especially for typefaces intended for smaller sizes - is more open spacing. All of these factors serve to improve character recognition and overall readability in the non-print environment

Hyperactive Link/ 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.

Font Size for Screen: 16-pixel text on a screen is about the same size as text printed in a book or magazine; this is accounting for reading distance.

Font Size for Screen/ Web Safe Type: Each device comes with its own pre-installed font selection. Which is based largely on its operating system.

Motion Typography: Temporal media offer typographers opportunities to "dramatize" type. for letterforms to become "fluid" and "kinetic" (Woolman and Bellantoni, 1999). Motion graphics, particularly the brand identities of film and television production companies, increasingly contain animated types.

Physical Class

Week 1: In this week's lecture, Mr. Vinod explained about this module and Facebook and how to check the class materials after that we were asked to watch a YouTube video about how to set up the blogger. We set up the blogger which we will use to show our weekly progress as well as our e-portfolio. At the end of class, we introduced ourselves to Mr. Vinod and He introduced himself to us.

Week 2: In this week's lecture, Mr. Vinod looked at the progress of all students and gave feedback to each student. After that, he demonstrated how to digitalize our sketches and gave us time to try it.

Week 3: In this week's lecture, Mr. Vinod explained how to save the work from the illustrator in jpeg format. After that, he looked at all of our work and gave feedback one by one. After that, he asked us to watch the youtube video about how to make gifs with photoshop and illustrator and he also asked us to make a simple gif with our idea to get to know and practice how to make the gif.

Week 4: In this week's lecture, Mr. Vinod asked us to upload our work on Facebook and he checked and gave feedback one by one. After that, he explained how to use InDesign and taught us basic skills and knowledge of text formatting.

Week 5: In this week's lecture, Mr. Vinod asked us to upload our work on Facebook and he checked and gave feedback one by one as always. After that, he explained to us about task 2, and lastly, he made sure of the deadline for task 1.

INSTRUCTIONS

 

<iframe src="https://drive.google.com/file/d/1MT_qeixWHvV07Hscu75Cl7Hnhb_d0sej/preview" width="640" height="480" allow="autoplay"></iframe>

Task 1: Exercises - Type Expression (Week1 - Week 3)

We were told to pick 4 words out of 6 words such as; slam, sticky, tired, freeze, screech, and pain, and to create the typefaces that have the sense of the meaning of each word visually by using any of the 10 fonts that we were given. I chose slam, sticky, tired, and freeze.

1. Sketches

Fig .6.1 sketches for the words that I chose (4/9/2022)

"SLAM"

The first thing that came to my mind when I thought of the word "slam" was showing a big strong impact so I made the word thick and added shadows and added some background to make it looks dynamic to enhance the meaning of "slam" in terms of showing a big impact.

"STICKY"

The first thing that came to my mind when I thought of the word "sticky" was the slimy substances, so first, I added it on only the letters s and t to put emphasis on the point where it looks sticky and after that, I made one that has a slimy thing on all letters to explore the idea and show how it looks

"Tired"

The first thing that came to my mind when I thought of the word "sticky" was no energy so first, I made the typeface that looks like it has no energy in it by making it thin and flabby. The second idea was to use the letter i as a tired-looking human but I found the almost same idea on the internet after that so I gave up to use that idea. The third idea was to use the letter i a battery and tired emoji to show it has no energy. 

"FREEZE"

The first thing that came to my mind when I thought of the word "freeze" was the ice block-looking letter and the icicle so first, I made the latter look like frozen and added icicles to make it give a cold and freeze impression. After that, I got the snowflakes idea so I added on the last idea.

2. Digitisation

・TIRED

Fig.6.2 progress of making typeface for the word "Tired" (11/9/2022)

1. I put "T red" first because I was going to put the battery sign as the letter "i" and used (Univers LT Std 59 Ultra Condensed) for the font.

2. I used the letter I for the frame of the battery sign. I made the "I" color transparent and added a black stroke to make the frame. For the inside part, I used the rectangle tool and made a rectangle shape and I got rid of the corner to make the horizontal line slightly diagonal line by using the direct section tool and I put it inside the frame.

3. I typed the letter "I" and then I adjusted the size and angle and put it on the top of the battery sign for the bump part on the top of the battery sign. For the ball part of the letter "i" I used "." and used (Bembo Std　Bold) for the font.

・STICKY

Fig.6.3 progress of making typeface for the word "STICKY" (11/9/2022)

1. I put "sticky" and used (Univers LT Std 59 Ultra Condensed) for the font. I created outlines and ungrouped the letters.

2. Since I decided to go with idea 1 after I ungrouped the letters, I changed the position, size, and angle of the letter "S" and I changed the shape of it a bit with the direct section tool. I made the slimy things with the pen tool.

3. After I made the slimy things with the pen tool I duplicated them and put them between "S" and "T" and adjusted the sizes and angles to make them fit. 

・SLAM

Fig.6.4 progress of making typeface for the word "SLAM" (11/9/2022)

1. I typed SLAM and put it first. I used (Univers LT Std 85 Extra Black) for the font. After that, I created the outlines and ungrouped the letters.

2. After that, I arranged the letters like my 1st idea and went to object > Path > offset path and made it 1mm.

3. After that, I made the lines clear and neat with the shape builder tool.

4. Lastly, I deleted the frame parts to make them look overlapping.

・FREEZE

Fig.6.5 progress of making typeface for the word "FREEZE" (11/9/2022)

1. Firstly, I put the letters "FREEZE" and I used (Univers LT Std 59 Ultra Condensed) for the font. And then I created outlines and adjusted the size of the letters.

2. Secondly, I made an icicle with the pen tool.

3. After that, I duplicated an icicle and put them randomly on the letters.

Fig.6.6 The first  outcome for type expression (12/9/2022)

 ・DEVELOPMENT

  

     ・TIRED

Fig.6.7 Development Progress "Tired" (17/9/2022)

Based on the feedback that I got this week, I put the actual letter "i" to make the battery sign instead of using the shape that I created on my own. After that, I put the elements inside and outside that I created last time.

Fig.6.8 Development Progress "Tired" (17/9/2022)

Since this 'i's dot was square, I made a circle with a triangle tool and adjust the size of the circle, and made an outline with white to hide the i's dot.

      ・SLAM

Fig.6.9 Development Progress "SLAM" (11/9/2022)

I created the new layer above the layer of the word "slam" and made it the same size of square as the box and make it fit in the box. After that, I selected the letter and the square and right click it, and selected make clipping mask.

Final Type Expressions

Fig.6.10 Final Type Expression - JPEG (17/9/2022)

Fig.6.11 Final Type Expression - PDF (17/9/2022)

3. Type Expression Animation

Fig.6.12 Type animation demo (12/9/2022)

Mr. Vinod asked us to create simple gifs to practice the flow and get used to how to create.  So I decided to go with SLAM because I felt it's easy to practice with it since it doesn't have complicated moves and just comes closer.

Fig.6.13 Week 3 The first outcome for animation (17/9/2022)

    DEVELOPMENT

Fig.6.14 Development Progress (29/9/2022)

I made 37 frames to make the gif smooth and I reduced the opacity of the dots by one frame based on the feedback that I got.

Final Animated Type Expression

Fig.6.15 Final Animated Type Expression "Tired" - GIF (29/9/2022)

Task 1: Exercises 2 - Text Formatting (Week 4 - Week 5)

We were required to design a single final style for Exercise 2 that takes into account many aspects of text formatting, including kerning, leading, paragraph spacing, alignment, etc. For this assignment, Adobe InDesign is to be used.

Fig.6.16 Text formatting without kerning (25/9/2022)

Fig.6.17 Text formatting with kerning (25/9/2022)

Fig.6.18 Difference between With Kerning and Without Kerning (25/9/2022)

This was an exercise we had to do, introduced during the pre-recorded video to familiarize ourselves with kerning. I made an effort to look at it with my eyes half closed and find the imbalance in the letters.

Fig.6.19 Layout Exploration (25/9/2022)

I tried to make a few layouts to explore the ideas and I decided to go with 6 because I felt like It was the simplest and most balanced.

Fig.6.20 The first outcome without grids JPEG (25/09/2022)

Fig.6.21 The first outcome with grids JPEG (25/09/2022)

Development

Fig.6.22 Development for text formatting (25/09/2022)

I used force line break (shift + enter) to bring the word "type" down.

Fig.6.23 Development for text formatting (25/09/2022)

I made the image non-colored and added a description next to the image. At first, I made it aligned in the middle of the image but after I asked Mr. Vinod, he said I should make it aligned bottom or top of the image so I made it aligned at the bottom of the image. The reason why I chose the bottom was that I felt like I can create a good balance between the title and the description.

Final Task 1: Exercise 2 - Text Formatting

Fig.6.24 Final Text Formatting Without Grids JPEG (2/10/2022)

Fig.6.25 Final Text Formatting With Grids JPEG (2/10/2022)

Fig.6.26 Final Text Formatting PDF (2/10/2022)

BODY

Font/s: ITC New Baskerville Std

Type Size/s: 9pt

Leading: 12pt

Paragraph spacing: 12pt

Characters per-line: 45-55

Alignment: Left align

Margins: 20 mm(Top)  70 mm(Bottom)

Columns: 2

Gutter: 5mm

HEADING

Font/s: ITC New Baskerville Std

Type Size/s: 36pt and 15pt

Leading: 18pt

Paragraph spacing: 0pt

Alignment: Left align

Columns: 2

Gutter: 5mm

---

FEEDBACK

Week 2

Specific Feedback ...  for sketches of slam, Mr. Vinod liked my #1 sketch but he also said something is missing and it's not there yet. It feels like a "slam" but it's not enough. For #2, he said it has too many lines but that's the reason why it has an effect. He told me what I can do is reduce the number of lines.

He liked the use of only two words being sticky "S" and "T" in the #4 sketch.

For the sketches of freeze, he said it's too illustrated and I need to reduce the illustrations.

For the sketches of tired, he liked the idea of using the battery as a letter "i".

 

General Feedback ... The more we rely on external elements, the less it is typographical.

Week 3

Specific Feedback ... For tired, he said it's too many distortions and asked me to use the actual letter "i" and make the frame from the i. For the slam, he liked it but asked me to do masking to make it fit in the box frame. He liked sticky and freeze.

General Feedback ... Distortion is not the solution.

Week 4

Specific Feedback ... I got feedback for my gif work which is if I make the dot of the letter "i" fade as the battery goes low, it will be cooler.

General Feedback ... watch the pre-recorded lectures and put the notes on the e-portfolio

Week 5 

Specific Feedback ... I got feedback for my text formatting that I can't use colored photos and that I should add a description next to the picture and I was asked to fix the one word that was popping out from a sentence.

General Feedback ... We shouldn't use the same fonts for the body paragraph and heading to make the contrast.

---

REFLECTIONS

Experience

Although I had a positive experience working on this assignment, my journey had some setbacks that hindered my flow of work. One of the first problems that I encountered was the difficulty I had with understanding the given task and trying to find a healthy balance in the use of illustrations, however with the guidance of the lecturer I was able to find the right equilibrium. Next, we were very limited in terms of our creativity as all students had to from within the same ten typefaces and the use of illustration was prohibited. I found this to be something that really limited my creativity as I realized that we would have a lot of similar works within my peer group. Nonetheless, I was able to counter this by figuring out how to make my work stand out with a touch of creative ideas. Lastly, as I previously had no experience with using Illustrator and Photoshop software, I found it quite challenging when we had to create gifs for our typefaces. All that said, I had a very positive experience working on this assignment as the lecturer was extremely constructive and helpful with his feedback which motivated me and pointed me in a certain direction toward his expectations. 

Observations

As I worked on this assignment I realized that typography incorporated a lot of design principles and components. I observed how seemingly negligible things such as alignment can have a significant effect on the quality of my work. And the importance of attention to detail in regards to the composition of elements. 

Findings

I learned that typography is a delicate form of art that has a lot of statutes and rules to it. Simple things such as text alignment, justification, and positioning of a picture can have a consequential effect on the outcome of the work. These rules are seemingly so simple that sometimes I disregarded them accidentally, which in turn resulted in my work being imperfect. While working on this task, I learned the importance of paying attention to the most trivial of details, which is why constructive self-criticism was something that really helped me complete my work to the best of my abilities. 

---

FURTHER READING

The Vignelli Canon (2010) by Massimo Vignelli

Fig.7.1 The Vignelli Canon (2010)

Reference: Vignelli, M. (2010, November 1). The Vignelli Canon. Lars Müller.

I chose this book because I loved the cover of this book.

In this book, Massimo Vignelli, a well-known Italian designer, gives us a peek of his perspective of good design, including its principles and standards. He illustrates his points with several instances, ranging from product design to signaletics and graphic design to corporate design. By doing this, he provides new designers with a valuable guidebook that, in terms of subject content and visual clarity, is wholly dedicated to Vignelli's modern design.

Fig.7.2 White Space (page 92) 

The author discusses the importance of white space on this page.

I felt that many of the things discussed on this page had a lot in common with what I learned through this assignment. What I have learned through this assignment, especially Exercise 2, is that whitespace creates balance in a design, and that small changes in whitespace can have a big impact on a design, for better or for worse. On this page, the author says "For many artists white space is the essential element of the composition. It is the fundamental qualifier and protagonist of the image." In design, we can't create great designs without white space. White space is not unnecessary and not the extra element, white space is essential and the main component of the work.