Typography TASK 1 (Type Expression & Type Formatting)

29/08/2022-26/09/2022 / Week 1-Week 5

Glen Owen / 0354952

Typography / Bachelor of Design (Honours) in Creative Media / Taylor's University

Task 1: Type Expression & Type Formatting

---

LECTURES

Week 5:

Mr. Vinod gave feedbacks about the Text Formatting task given at week 4. He also review some of the blog that students have made. We also got some briefing on our second task for this semester.

Week 4: 

Mr. Vinod gave feedbacks before lecture starts. In this week, we start our second exercise which is Type Formatting. In this lecture, Mr. Vinod gave us an introduction on Adobe InDesign because we have to make this assignment in InDesign.

Week 3:

As usual, Mr. Vinod gave feedbacks on the assignment before we start the lecture. Today's topic is about animating the typography we made. We have to animate it in Adobe Photoshop. This assignment's deadline is week 4.

Week 2: 

Mr. Vinod gave some feedbacks to all classmates typography sketches. Some are good feedback and some are like critics. In this week, we were told to digitalize our typography work using Adobe Illustrator and the deadline for this work is until week 3

Week 1: 

Lecture's in the Design Studio. Briefing on first task and how to do it. We need to choose 4 words from 6 words given then make a typography of it. The deadline is until week 4. We also need to join a Facebook group for easy communication

Pre-recorded Lectures

1. Typography: Development

• Early letterform development: Phoenician to Roman

Fig 1.1 Evolution of Typography

    The Greeks changed the direction of writing from right to left. They developed a style of writing called 'boustrophedon' which meant that the lines of text read alternately from right to left and left to right. As they change the direction of reading they also changed the orientation of the letterforms.

Fig 1.2 Boustrophedon writing style

• Hand script from 3rd - 10th century C.E.

Fig 1.3 Square capitals 

Square capitals were written version that can be found in Roman monuments. It have serifs added to the finish of the main strokes.

Fig 1.4 Rustic capitals 

Rustic capitals are compressed version of square capitals, it allowed for twice as many words on a sheet of parchment and took far less time to write. Faster and easier to do, but were slightly harder to read due to its compressed nature.

Fig 1.5 Roman cursive 

Roman cursive were written for everyday transaction, the forms were simplified for speed and its the beginning of lowercase letterforms.

Fig 1.6 Uncials 

Uncials are incorporated in some aspects of the Roman cursive hand. The broad forms of uncials are more readable at small sizes than rustic capitals.

Fig 1.7 Half-uncials 

Half-uncials mark the formal beginning of lowercase letterforms, it replete with ascenders and descenders.

Fig 1.8 Charlemagne 

Charlemagne, the first unifier of Europe since the Romans, issued an edict in 789 to standardize all ecclesiastical texts. He entrusted this task to Alcuin of York, Abbot of St. Martin of Tours. The monks rewrote the texts using both majucules, minuscule, capitalization and punctuation which set the standard for calligraphy for a century.

Fig 1.9 Blackletter (Textura)

With the dissolution of Charlemagne's empire, came regional variations upon Alcuin's script in northern Europe, a condensed strongly vertical letterform known as the Blackletter or Textura gained popularity. In the south, a rounder more open hand gained popularity called 'rotunda'. The humanistic script in Italy is based on Alcuin's minuscule.

Text type classification

Fig 1.10 Classification of text type

2. Typography: Text

• Kerning and Letterspacing

Fig 2.1 Kerning and Letterspacing

Kerning is an 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, loose, and tight tracking

• Formatting text

Fig 2.3 Flush left format

Flush left is a format that is most closely mirrors the asymmetrical experience of handwriting. The spaces between the words are consistent throughout the text, allowing the type to create an even gray value. 

Fig 2.4 Centered format

Centered is a format that imposes symmetry upon the text, assigning equal value and weight to both ends of any line. Since centered type creates such a strong shape on the page, its important to amend line breaks so that the text does not appear to jagged.

Fig 2.5 Flush right format

Flush right is a format that places emphasis on the end of the line as opposed to its start. It can be useful in situations like caption, where the relationship between text and image might be ambiguous without a strong orientation to the right.

Fig 2.6 Justified format

Justified is like centering, it imposes a symmetrical shape on the text. It is achieved by expanding or reducing spaces between words and, sometimes, between letters. Careful attention to line breaks and hyphenation is required to amend this problem whenever possible.

• Texture

Fig 2.7 Anatomy of a typeface

Fig 2.8 Different typefaces with different gray values

• Leading and Line Length

Text type should be large enough to be read easily at arms length.

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 function of the line length as it is a question of type size and leading. A good rule of thumb is to keep line length between 55-65 characters. Shorter lines require less leading while longer lines require more.

Fig 2.9 Different leading and different length line

• Type Specimen Book

Type specimen book shows samples of typefaces in various different sizes. Without printed pages showing samples of typefaces at different sizes, no one can make a reasonable choice of type. It provides an accurate reference for type, type size, type leading , type line length, etc.

Fig 2.10 Sample of Type Specimen Book

• Indicating Paragraphs

Fig 2.11 Standard indentation

Pilcrow (¶) is a holdover from medieval manuscripts (seldom use today)
Line space: If the line space is 12pt, then the paragraph space is also 12pt.

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

Fig 2.12 Extended paragraphs

Extended paragraph creates unusuallly wide columns of text.

• Widows and Orphans

Fig 2.13 Widow and Orphan

Widow is a short line of type left alone at the end of a column of text.

Orphan is a short line of type left alone at the start of new column.

• Highlighting text

Fig 2.14 Text highlighted with Italic and Bold

Fig 2.15 Text highlighted with color field at the back of the text

Fig 2.16 & Fig 2.17 Text Highlighted with quotation marks & Prime and quote

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.

• Headline within Text

Fig 2.18 A heads

A head indicates a clear break between the topic with a section. In the following examples 'A' heads are set larger than the text, in small caps and in bold. The fourth example shows an A head 'extended' to the left of the text.

Fig 2.19 B heads

B head here is the subordinate to A heads. B heads indicate a new supporting argument or example for the topic at hand. As such, they should not interrupt the text as strongly as A head does.

Fig 2.20 C heads

C head, although not common, highlights specific facets of material within B head text. They not materially interrupt the flow of reading. As with B heads, C heads are shown in small caps, italics, serif bold, and san serif bold.

Fig 2.21 Hierarchy (putting together a sequence of subheads)

• Cross Alignments

Fig 2.22 Cross alignment (Four lines of caption type [leaded 9pts] cross-align with three lines of text type [leaded to 13.5pts])

Cross aligning headlines and captions with text type reinforces the architectural sense of page-the structure-while articulating the complimentary vertical rhythms

Fig 2.23 Cross alignment (one line of headline type cross-aligns with two lines of text type, and [right; bottom left] four lines of headline type cross-align with five lines of text type)

3. Typography: Basic

• Describing letter

Fig 3.1 Describing letterforms PDF

• The Font

Fig 3.2 Uppercase letter

Fig 3.3 Lowercase letter

Fig 3.4 Small capitals

Small capitals are uppercase letterforms that is drawn to the x-height of the typeface. It's primarily found in serif fonts as part of what is often called expert set.

Fig 3.5 Uppercase Numerals and Lowercase Numerals description & example

Fig 3.6 Italic typeface

Italic typeface is a forms that refers to the back of fifteenth century Italian cursive handwriting handwriting. Oblique are typically based on the roman form of the typeface.

Fig 3.7 Difference between Italic and Roman

Fig 3.8 Punctuation and miscellaneous characters

Although all fonts contain standard punctuation marks, miscellaneous characters can change from typeface to typeface. It is important to be acquainted with all the characters available in a typeface before you choose the appropriate type for a particular job.

Fig 3.9 Ornaments

It used as flourishes in invitations or certificates. They usually are provided as a font in a larger typeface family. Only a few traditional or classical typefaces contain ornamental fonts as part of the entire typeface family (Adobe Caslon Pro).

• Describing typefaces

Fig 3.10 Describing typefaces

Roman: The uppercase forms are derived from inscription of Roman monuments. A slightly lighter stroke in roman is known as 'Book'.

Italic: Named for fifteenth century of Italian handwriting which the forms are based. Oblique conservely  are based on roman form of typeface.

Boldface: Characterized by a thicker stroke than the roman form. It can be called 'semibold', 'medium', 'black', 'extra bold', or 'super'.

Light: Lighter stroke than the roman form. Even lighter strokes are called 'thin'.

Condense: A version of roman form and extremely condense styles are often called 'compressed'.

Extended: An extended variation of a roman font.

• Comparing typefaces

Fig 3.11 Differences on all typefaces

Fig 3.12 Comparing typefaces

We can compare typefaces by examine at the differences in x-height, line weight, stroke widths, and in feeling. Feelings can connote specific use and expression. By examining typefaces we are allowed to know how we feel about certain types and also see the appropriateness in type choices.

4. Typography: Letters

• Understanding letterforms

Fig 4.1 Baskerville 'A'

The uppercase letterforms above suggest symmetry, but it's not symmetrical. Two different stroke weights of the Baskerville stroke form; more noteworthy is the fact that each bracket connecting the serif to the stem has a unique arc.

Fig 4.2 Univers 'A'

The uppercase letterform 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 (above) demonstrate the meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive. 

Fig 4.3 Difference between Helvetica and 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 4.4 Median and baseline of the word 'razors'

X-height: the size of the lowercase letterforms. 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.

• Form / Counterform

Fig 4.5 Form / Counterform

Counterform (counter) 一the space describes, and often contained, by the strokes of the form. When letters are joined to form words, the counterform includes the spaces between them. How well you handle the counters when you set type determines on how well words hang together一in other words, how easily we can read what's been set.

• Contrast

Fig 4.6 Different kind of contrast

5. Typography: Different Medium

Fig 5.1 Typography on different medium

• Print type vs Screen type

Type for print: type was designed for reading from print long before screen. It's the designer's job to ensure that the text is smooth, flowing, and pleasant to read. Good typefaces for print are: Caslon, Garamond, Baskerville. Because of their characteristics which are elegant and intellectual but also highly readable when set at small font size.

Fig 5.2 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. This can include a taller x-height, wider letterforms, more open counters,  heavier thin strokes and serifs, reduced stroke contrast, as well as modified curves ang angles for some designs.

Important adjustments especially for typefaces intended for smaller size一is more open spacing. All of these factors serve to improve character recognition and overall readability in the non-print environment, which can include the web, e-books e-readers, and mobile devices.

Hyperactive link / hyperlink: a word, phrase, or image that you can click on to jump to a new document or a new section within the current document. Found nearly in nearly all web pages. Text hyperlinks are normally blue and underlined by default.

Font size for screen: 16-pixel text on a screen is about the same size as texted printed in a book or magazine; this is accounting for reading distance. Since we read books pretty close一often only a few inches away一they are typically set at about  10 points. If you were to read them at arm's length , you'd want at least 12 points, which is about the same size as 16 pixels on most screens.

System fonts for screen / web safe fonts: Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Verdana, Georgia, Palatino, Garamond.

Fig 5.3 Pixel differences between devices

Pixel differential between devices: the screens 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 sized pixels.

• Static vs Motion

Fig 5.4 Billboard showing static typography

Static typography has minimal characteristics in ecpressing words. Traditional characteristics such as bold and italic offers only a fraction of the expressive potential of dynamic properties.

Motion typography: film title credits present typographic information over time, often bringing it to life through animation. Motion graphics, particularly the brand identities of film and television production companies, increasingly contain animated type.

---

INSTRUCTIONS

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

I) Task 1: Exercises - Type Expression

1. Sketch

In this task, I choose 4 word from 6 that is available. The word is: Freeze, Slam, Sticky, and Screech.

Here are the first sketches I made for those 4 words.

Fig 6.1 Sticky 1 (Week 1)

Fig 6.2 Screech 1 (Week 1)

Fig 6.3 Slam 1 (Week 1)

Fig 6.4 Freeze 1 (Week 1)

The second sketches kinda hard to think, so this is what I can do...

Fig 6.5 Slam 2 (Week 1)

Fig 6.6  Freeze 2 (Week 1)

Fig 6.7 Sticky 2 (Week 1)

Fig 6.8 Screech 2 (Week 1)

I guess it's a bit of no effort, but this idea what I can think off. Personally I don't like the Freeze 2 because it looks really basic with just a little blur because ice is a little translucent. Screech 2 personally I think it's the same like Screech 1 but with all of the letters in capital.

I tried to remake the second typography for each word. For Sticky 2 I guess it's the same like Mr. Vinod's one when he tell us we can make the Sticky typography like that.

2. Digitalizing

Time for the digitalization of the sketches in a vector app name Adobe Illustrator. Finally the best time to make the typography very expressive.

Fig 7.1 Digitalized Typography (Week 2)

This is my attempt on digitalizing my sketches. For the Screech 2 instead of the letter increasing to the right, I make it to the left instead. The Freeze 2 effect is like it was freezing and solid like an ice cube while the Freeze 1 is freezing until it has an icicle shape. For both Slam I make it like there will be an impact. Both sticky has the same concept, which is sticking under a platform. Mr. Vinod told me that I have to use the template that he gave and I personally forgot about it, to be honest I also didn't know that I have to use the fonts that Mr. Vinod gave. In the end I only use the default font that Adobe Illustrator gave and here is the typography work with Mr. Vinod's template. 

Fig 7.2 Final typography for 4 words (Week 2)

 

Fig 7.3 PDF for final typography (Week 2)

3. Animation

The task here is to animate one of the typography that I have made above. I choose Sticky for the animation because it seems simpler than the others. Here are some of my attempt on animating it.

Fig 8.1 Making the frames (Week 3)

Fig 8.2 Making more frames (Week 3)

Fig 8.3 Animating it in Photoshop (Week 3)

The result kinda rough, but personally I like it already. It's my first animation that I have made for my entire life so I work really hard on this animation.

Fig 8.4 GIF animation for Sticky (Week 3)

After Mr. Vinod gave some feedback about the GIF, I learnt that I need atleast 24 frames/second for smooth GIF animation. So I doubled the frame for my Sticky and here are the process and result.

Fig 8.5 Doubling the frames from 10 to 22 and making the text less distort than before (Week 4)

Fig 8.6 Animating it again (Week 4)

Fig 8.7 Final submission for typography animation (Week 4)

II) Task 1: Exercises - Type Formatting

1. Exercises: Tracking

In this exercise, we were asked to write our name with the 10 typefaces that Mr. Vinod given. We need to track our name to make it look good.

Fig 9.1 Result of tracking exercise

2. Formatting text

In this task, we were assigned to format a text given by Mr. Vinod. We can format this text to any layout we want but it should be appealing. It should be submitted in 2 JPEGS (one shows the gridline) and 2 PDFS (one shows the gridline). We can only choose 1 layout as the final submission.

Fig 10.1 Progress on Layout 1 (Week 4)

Fig 10.2 Progress on Layout 2 (Week 4)

After several hours of doing this task while watching the pre-recorded lectures, I have finally done formatting the text into this layout.

Fig 10.3 Text Layout 1 (Week 4)

Fig 10.4 Text Layout 2 (Week 4)

I choose Layout 2 as my final submissiom because Layout 1 is really simple and I think that it's not appealing enough. Although I'm still confused on how to show the baseline grids on JPEG, I tried to find ways to show it. I realized that Layout 2 got less characters per line so I tried to change the font size smaller and add an image from internet.

Fig 10.5 Layout 2 with fixed font size (Week 5)

Fig 10.6 Layout 2 showing gridlines (Week 5)

Font : Adobe Caslon Pro

Typeface: Adobe Caslon Pro Regular (body text), Adobe Caslon Pro Bold (heading)

Type size: 10 pt (body text), 24 pt (heading)

Leading: 10 pt (body text), 26 pt (heading)

Paragraph spacing: 12 pt

Average character per line: 55 characters

Alignment: Flush left

Margins: 50x12,7 mm (top x bottom), 12,7x12,7 mm (left x right)

Columns: 4

Gutter: 5 mm

    After receiving feedbacks from Mr. Vinod, he suggested me to change the body text to the right side while the headline to the left side. He also suggest me to leave 1-2 paragraphs at the left side.

Fig 10.7 Final of Layout 2 (Week 5)

Fig 10.8 Gridlines of final layout on Layout 2 (Week 5)

Fig 10.9 PDF version of final layout (Week 5)

---

FEEDBACK

Week 5 (26/09/2022)

The layout is decent, but it could be better. Mr Vinod suggested that I should move the body text to the right side while the headline to the left side. Leave 1-2 paragraphs on the left side so it could look appealing. When pasting images in blog, don't embed the powerpoints Mr. Vinod gave in the e-portfolio. We can use the screenshot of the lecture though. For publishing the process of the work, try to combine the image together so that it wouldn't take much of space. Resolution of images must be in 300dpi so that it can be clear when people sees it.

Week 4 (19/09/2022)

The Sticky animation got good execution for the animation, but it's a little bit laggy when I posted it in Facebook. Mr. Vinod said we need atleast 24 frames/second if we want a smooth animation for a GIF. He also said that for the e-portfolio, if we had multiple photos we need to group it into 1 if possible so that the blog wouldn't be long enough. Mr. Vinod also suggest me to use some blur effect on the animation if I wanted it with 10 frames, IF I am keen enough.

Week 3 (12/09/2022)

Mr. Vinod said that Screech 1 is acceptable, for both Freeze I need to look some other ideas I think if I listen correctly. For the Slams I need to reduce the number of lines if possible but Slam 2 is good. Sticky is kinda distorted, Mr. Vinod suggest that if possible don't distort the fonts. Overall, the only thing I know is that do not distort the fonts and do not resize the font. The rough animation of Sticky is really interesting, Mr. Vinod suggest that the first second the animation should be normal.

Week 2 (05/09/2022)

Picture for the sketch need to use sunlight. Sketches are too basic and need more exploration. Very rudimentary. Sticky 1 have some potential. Lesson learnt, don't put 2 ideas in 1 design.

---

REFLECTION

Experience

This assignment has taught me that typography is important in design. The design of a type will affect the overall design of a work. Thinking about the idea is quite hard because there is certain rule that we must apply such as no distortion. Think about the positive side, I can atleast know how to use Adobe Illustrator. I guess it is fun to do this task, especially at Task 2 where we are asked to format text because it's simpler than Task 1.

Observations

I have observed that doing this task need to use our creativity at its peak. Every aspect affects the work so I need to always hear feedbacks from Mr. Vinod to notice the mistake.

Findings

Typography.... unexpectedly have many rules that I do not know. At first I don't even care using different fonts because those are only to be seen by readers, but then I realized that's the probelm because if I use the wrong font the reader can possibly can't read the text. So I need to be careful when I choose the right fonts.

---

FURTHER READING

Fig 11.1 I.D.E.A.S by David Creamer

    I read this book that Mr. Vinod recommended in the Facebook group. I read it for further understanding about typography basics and learn some fun facts about typography. This book basically have the same information like the pre-recorded lecture videos I've watched but with in-depth information. 

    The fun fact that I learned in this book is that Serif fonts are the most common text. I found Display font and Script font quite interesting although if I were to use this in the real world, it's probably make the reader have some difficulty on reading. There's also dingbats font which consist only symbols, quite extraordinary I would say for a typeface. I learned that it is not necessary to apply all rule of typography at once since it's our decision for our own work.