TYPOGRAPHY; TASK 1 - Exercises

27/8/2021 - 25/9/2021 (Week 1 - Week 5)
Diane Lim En Wei / 0345187 / B'Creative Media
Typography

Task 1 / Exercise 1 and 2

LECTURES

Week 1 (27/8/2021) - Development
Early letterform development: Phoenician to Roman
Initially, writing meant scratching into wet clay with sticks or carving into stone with a chisel. Uppercase letterforms were simple combinations of straight lines and pieces of circles, of which were evolved out of these tools and materials.

Fig 1.1.1 ; Right; Phoenicians | Left; Evolution from Phoenician Letter (27/8/2021)

It was the Greeks that changed the direction of writing. Phoenicians wrote from right to left. The Greeks developed a style of writing called 'boustrophedon,' which meant that the lines of text were read instead from left to right. With the change in direction of reading, came the change in the orientation of the letterforms.

Fig 1.1.2 ; Greek fragment, stone engraving (27/8/2021)

Etruscan carvers worked in marble painted letterforms before inscribing them. Certain qualities of their strokes and change in their weight observed in the marble painted letterforms, were then carried over into the carved/inscribed letterforms.

Fig 1.1.3 ; Augustan inscription (27/8/2021)

Fig 1.1.4 ; Letterform Development from Phoenician to Roman (27/8/2021)

Hand script from 3rd - 10th Century C.E.
Square capitals (written version) could be found in Roman monuments. These letterforms have serifs added to the finish of the main strokes.

Fig 1.1.5 ; 4th or 5th century; Square Capitals (27/8/2021)

A compressed version of square capitals, rustic capitals, allowed for twice as many words on a sheet of parchment. Although they were faster and easier to write, they were slightly harder to read.

Fig 1.1.6 ; Late 3rd - mid 4th century; Rustic Capitals (27/8/2021)

Rustic and Square capitals were typically reserved for documents of some intended performance. Everyday transactions, however, were typically written in cursive, forms of which were simplified for speed.

Fig 1.1.7 ; 4th century; Roman Cursive (27/8/2021)

Uncials incorporated some aspects of the Roman cursive hand. It is more accurate to think of uncials simply being small letters.

Fig 1.1.8 ; 4th - 5th century; Uncials (27/8/2021)

A further formalization of the cursive hand, half-uncials mark the formal beginning for lowercase letterforms, with appearance of ascenders and descenders.

Fig 1.1.9 ; Half-uncials (27/8/2021)

Monks rewrote the texts using both uppercase, miniscule, capitalization, and punctuation during the first unification of Europe since the Romans, brought upon by Charlemagne. This set the standard for calligraphy for a century.

Fig 1.1.10 ; Caloline miniscule (27/8/2021)

Blackletter to Gutenberg's type
With the dissolve of Charlemagne's empire, came regional variations upon Alcuin's script. A condense, strongly vertical letterform (Blackletter) gained popularity in northern Europe.
In the south, a rounder, more open hand gained popularity; rotunda.

Fig 1.1.11 ; Blackletter (27/8/2021)

Gutenberg's marshaled his skills of engineering, metalsmithing, and chemistry, to build pages that accurately mimicked the work of the scribe's hand - Blackletter of northern Europe. His Type mold required a different brass matrix or negative impression, for each letterform.

Fig 1.1.12 ; Gutenberg's Type (27/8/2021)

Text type classification
1450 Blackletter - Earliest printing type, its forms were based upon the hand-copying styles used for books in northern Europe
Cloister Black
Goudy Text
Fig 1.1.13 ; x-height of Black letter (27/8/2021)

1475 Oldstyle - Based on the lowercase forms used by Italian humanist scholars for book copying. Uppercase letterforms found inscribed on Roman ruins.
Bembo
Caslon
Dante
Garamond
Janson
Fig 1.1.14 ; x-height of Oldstyle (27/8/2021)

1500 Italic - Echoes contemporary Italian handwriting. The first italics were condense, and close-set, to allow for more words per page.

Fig 1.1.15 ; x-height of Italic (27/8/2021)

1550 Script - Originally an attempt to replicate engraved calligraphic forms. This class of type is not entirely appropriate in lengthy text settings.
Kuenstler Script
Mistral
Smell Roundhand
Fig 1.1.16 ; x-height of script (27/8/2021)

1750 Transitional - Refinement of oldstyle forms, this style was achieved in part of advances in casting and printing.
Baskerville
Bulmer
Century
Time Roman
Fig 1.1.17 ; x-height of Transitional (27/8/2021)

1775 Modern - This style represents further rationalization of oldstyle letterforms. Serifs were unbracketed, and the contrast between thick and thin strokes extreme.
Bell
Bodoni
Caledonia
Didot
Walbaum
Fig 1.1.18 ; x-height of Modern (27/8/2021)

1825 Square Serif / Slab serif - Originally heavily bracketed serif, little variation between thick and thin strokes, evolved to fit the newly developed needs of advertising for heavy Type in commercial Printing.
Clarendon
Memphis
Rockwell
Serifa
Fig 1.1.19 ; x-height of Square Serif (27/8/2021)

1900 Sans Serif - Elimination of Serifs on the typeface all together.
Gill Sans
Optima
Univers
Helvetica
Fig 1.1.20 ; x-height of Sans Serif (27/8/2021)

1990 Serif / Sans Serif - This style enlarges the notion of a family of typefaces to include both serif and sans serif alphabets.
Rotis
Scala
Stone
Fig 1.1.21 ; x-height of Serif / Sans Serif (27/8/2021)

Basic/Describing letterforms
Baseline - Visual base of the letterforms.
Median - Imaginary line defining the x-height of letterforms.
x-height - Height in any typeface of the lowercase 'x'

Fig 1.2.1 ; Baseline, Median, x-height (27/8/2021)

Stroke - Any line that defines the basic letterform

Fig 1.2.2 ; Stroke (27/8/2021)

Apex / Vertex - Point created by joining two diagonal stems (apex above, vertex below).

Fig 1.2.3 ; Apex/Vertex (27/8/2021)

Arm - Short strokes off the stem of the letterform, either horizontally or inclined upwards.

Fig 1.2.4 ; Arm (27/8/2021)

Ascender - The portion of the stem of a lowercase letterform that goes above the median.

Fig 1.2.5 ; Ascender (27/8/2021)

Bowl - Rounded form that describes a counter.

Fig 1.2.6 ; Bowl (27/8/2021)

Bracket - Transition between serif and stem.

Fig 1.2.7 ; Bracket (27/8/2021)

Cross bar - Horizontal stroke in a letterform that joins two stems together.

Fig 1.2.8 ; Cross Bar (27/8/2021)

Cross stroke - Horizontal stroke that joins two stems together

Fig 1.2.9 ; Cross stroke (27/8/2021)

Crotch - Interior space when two strokes meet.

Fig 1.2.10 ; Crotch (27/8/2021)

Learning to use Adobe Illustrator and Blogger
After watching the lectures, I had learned Type Expression on Adobe Illustrator. The lecture explained how to create depth, using Free Transform (Fig 1.1)

Fig 1.1 ; Creating depth using the Free transform tool (27/8/2021)

It was then shown how to use the Warp feature in illustrator to create an effect.
Fig 1.2 ; Text warping (27/8/2021)

The next lecture showed how to utilize kerning and editing the properties of the text to create effects, an example shown in Fig 1.3, each letter is rotated to give the effect of 'Jump.'
Fig 1.3 ; Properties tab on Illustrator (27/8/2021)
A - Panel Menu
B - Font
C - Font format such as Bold, Italic, etc.
D - Leading
E - Tracking
F - Horizontal scaling of the letters (How wide it is)
G - Character rotation, used to rotate letters
H - Anti-aliasing, used to either blur/sharpen edges of Characters
I - Font Size
J - Kerning, space between letters
K - Vertical Scale, changes height of letters
L - Baseline shift, can allow one letter to be higher than another.

Fig 1.4 ; Example of creative effects using the Properties tab on Illustrator (27/8/2021)

Using this information, I proceeded to draw up the first draft of Task 1, Fig 2.1. I also learned simple HTML formatting;

<hr /> - Horizontal Rule
<br /> - Line Break
Along with learning how to embed PDF files on Blogger.

Week 2 (3/8/2021) - No Lecture

Week 3 (10/9/2021) - Type Expression Animation - Basic
We were taught how to create multiple art boards on one Adobe Illustrator file, then saving it into stacks so each Artboard is a separate JPEG, then transferred over to Photoshop where we animated the type expression.

Week 5 (24/9/2021)
Kerning - The automatic adjustment of space between letters
Letterspacing - To add space between the letters.

When do you use kerning and letterspacing?
Generally if you are working on a headline, or a text that takes up a lot of space, pay attention to the kerning between those letters. Letterspacing is normally used when there is a capitalization, to give the capital letter breathing room between the capital letter and the lowercase.

Tracking
When dealing with upper-lower case words, normal tracking is when you give letter spacing and kerning. However, adding letterspacing to text reduces the readability of the text. Increasing/Decreasing letterspacing between letters reduces the recognizability of the patterns our eyes need to follow.

Designers always letterspace uppercase letters. Uppercase letterforms are made to be able to stand alone, however, lowercase letterforms require a counterform, created between letters to maintain line of reading. It is recommended not to letterspace lowercase letters within the text.

Fig 1.5; Counterform example (22/9/2021)

With the counterform being defined as the black space in between the letters.

Normal tracking Loose tracking

Fig 1.6; Counterform comparison (22/9/2021)

In Fig 1.2, the counterform on the right have been changed, reducing the readability of the text.

Fig 1.7 Tight tracking (22/9/2021)

Again, in Fig 1.3, the counterform has been changed, making it hard to decipher, visually.

Text formatting

Flush left - Closely mirrors the asymmetrical experience of handwriting. A line of text starts from the same place and ends wherever the last word of the line ends. Spaces between words are consistent, creates an even gray value.

When you flush left, there will always be a ragged right. Ragged is the jagged edges on the right side of the text where the ends the lines are.
Centered - Assigns equal value and weight to both ends of any line. Changes fields of text into shapes, creates a pictorial quality to material that is non-pictorial by nature. It is normally difficult to read, as the starting points of each line is irregular.
Flush right - Format places emphasis on the end of a line as opposed to the start. Is useful where the relationship between text and images are ambiguous, without a strong orientation to the right. Flush right leads to Ragged left.
Justified - Centered, format imposes a symmetrical shape on the text. Achieved by expanding or reducing spacing between words and sometimes letters. This can sometimes result in 'rivers' of white space running vertically through a body of text. However this is amended by careful attention to line breaks and hyphenation (to add hyphens) where required.

Designers tend to set type one way, or another, depending on several factors such as; personal preference, prevailing culture, and the need to express. However, our priority should be the appropriate presentation of the author's message. A type that calls attention to itself before the reader can get to the actual words should be avoided as it causes interference.

If you see the type before you see the words, change the type

Typefaces have different textures. Types with a generous x-height or relatively heavy stroke width produce darker mass on the page than those with a relatively smaller x-height or lighter stroke. Sensitivity to these differences is fundamental for creating successful layouts.

Fig 1.8; Anatomy of a typeface (22/9/2021)

Leading and line length
The goal in setting text type is to allow easy and prolonged reading, while also occupying the page as much as a photograph does.

Type size - Text type should be large enough so that it can be read easily at least by arms length.
Leading - Text that is too tight encourages vertical eye movement, leading to a reader losing their place. Type that is set too loosely causes striped patterns, leads to the reader being distracted from the material.
Line length - Shorter lines require less reading, and vice versa. Keep line lengths between 55-65 characters. Extremely long/short line lengths impairs reading.

Type Specimen Book - A book that shows samples of typefaces in various sizes. It is used to provide an accurate reference for line length, leading, type size, etc.

Compositional requirement: Text should create a field that occupies a page or screen. Think of your ideal text as having a middle gray value, rather than a series of stripes.

Fig 1.9; Gray value (top) vs series of stripes (bottom) (22/9/2021)

Nothing replaces looking closely at an actual printout of your work. The best screen is an electronic approximation of the printed page, unless you are designing for screen. At that point, judging type on screen is accurate. Zooming into your type by 400% allows for a clear sense of the relationship between descenders on one line and ascenders on the line below.

Text/Indicating Paragraphs
There are several options in indicating paragraphs.

Pilcrow - ¶ , a way to indicate paragraph spacing.

Let's assume the text point size is 10pt, the leading should be 12pt. If the leading is 12pt, the paragraph spacing should also be 12pt. This is so we can achieve cross-alignment. Cross-alignment in my shoddy way of explanation, is defined by the baseline of text in a column, being aligned with the baseline of text that's in a parallel column next to it. Fig 1.10, explains it better than words could.

Fig 1.10; Comparison and example of cross-alignment. (25/9/2021)

Fig 1.11; Baseline grid (25/9/2021)

Line space vs Leading. Each line of text is given leading so the descender of text does not touch the ascender of the text below it.

Fig 1.12; Line space vs Leading (25/9/2021)

Another way to indicate paragraph spacing is to create indentation. Typically the indent is the same size of the line spacing or the same as the point size of your text.

This is an indentation. Indentation is best used when the text is JUSTIFIED, as an indentation will create ragging on the right. If the indentation is too large, it will also create ragging on the right side of the paragraph.

The method of extended paragraphs below creates unusually wide columns of text. It is generally not used as it looks really ugly, however, there can be strong compositional or functional reasons for choosing it. E.g, in academic writing.

Text/Widows and Orphans

Widows and Orphans, designers with large amounts of text on a website or any reading material, must avoid the occurrence of both.

Widow - A short line of type, left alone at the end of a column of text.
Orphan - A short line of type, left alone at the start of a new column.

Fig 1.13; Difference between Widow and Orphan (25/9/2021)

In justified text, widows and orphans are a cardinal sin, however in Flush right and ragged left text, they are more forgiving towards widows. Orphans are an unforgivable sin punished by death. The only solution to widows is to rebreak your line endings through out your paragraph, so that the last line of the paragraph isn't noticeably short. Orphans, just need to be ensured that no column of text starts with the last line of the preceding paragraph.

Text/Highlighting Text

Different kinds of emphasis require different kinds of contrast. Could either bold or italic the text. Another way of doing it is changing the color of the text, however, we can only use Cyan, Black, or Magenta.

If change of font is needed for highlighting text, point size may need to be reduced so that the heights are the same as the preceding text.

Sometimes it is necessary to place certain elements outside the left margin of a column, to maintain a strong reading axis.

Fig 1.14; Bullet point outside the left margin (25/9/2021)

Quotation marks create a clear indent. This also breaks the left axis, like the bullet points displayed in Fig 1.14, it can be placed on the outside of the left margin of the column.

Fig 1.15; Compare the indented quote at the top and bottom (25/9/2021)

INSTRUCTIONS

TASK 1: EXERCISES

Exercise 1

Week 1 (27/8/2021)
We were tasked with creating type expressions using 3 out of 7 words, listed;

Space
Terror
Water
Glitch
Broken
Abyss
Bark

The 3 words I have chosen from this list are Broken, Glitch, Terror, and Bark. I then sketched out the type expressions.

Fig 2.1 ; Sketches of Task 1 (30/8/2021).

These are the sketches I had chosen.

Fig 2.2; Type expression for the word 'terror' (3/9/2021)

Fig 2.3; Type expression for the word 'glitch' (3/9/2021)

Fig 2.4; Type expression for the word 'bark' (3/9/2021)

Fig 2.5; Type expression for the word 'broken' (3/9/2021)

Week 2 (3/9/2021)
This was a class where students are given feedback and criticism from lecturers and peers, in order for us to further develop and grow our skill in typography. We were tasked with digitalizing the type expression sketches.
Fig 3.1; Digitalization of type expression (3/9/2021).
Week 3 (10/9/2021)
After receiving feedback on Fig 3.1, and adding the font names to the bottom of my type expressions, I created Fig 4.1.

Fig 4.1; Final Digitalization of type expression (10/9/2021)

Fig 4.2 ; Final PDF of Exercise 1 (24/9/2021)

We also attempted to animate our type expression. Fig 4.3 was my first attempt at tackling this task.

Fig 4.3; First attempts at animating type expression (10/9/2021)
Week 4 (17/9/2021)
This is another test in animating the type expression, where the droplets come from outside the camera and land in their respective positions.

Fig 5.1; Second attempt at animating the type expression (14/9/2021)

After receiving feedback from peers and lecturers, I had come up with Fig 4.2, my final animation of the type expression. I added smaller dots that are close in proximity to simulate a more 'splashy' effect.

Fig 5.2; Animation of type expression (18/9/2021)
Week 5 (24/9/2021)
After receiving more feedback, I created the Final Animation of the type expression

Exercise 2

Week 5 (24/9/2021)
The first step to this exercise was firstly understanding Letterheads and kerning. Fig 6.1 shows experimentation on that using all the given fonts, on my name.

Fig 6.1 ; Experimenting (24/9/2021)

Fig 6.2 shows my first attempt at tackling this exercise, and finding the layout I want to go with, and I am satisfied with the layout that I have chosen for the test. However I'm not sure how I feel about the fonts I have chosen.

Fig 6.2 ; First attempt at tackling this exercise (20/9/2021)

Further following the recorded tutorials, I crossed-aligned the text (Fig 6.3), and using the feedback given, I changed the leading text to have more boldness and made it italic so as to give it more strength. I also changed around the layout of the images so I could 'frame' the headline and leading text. I then made changes to the fonts.
Fig 6.3 ; Cross-aligning the text (24/9/2021)

Fig 6.4 ; Second attempt at Exercise 2 (24/9/2021)

After receiving feedback, I fixed the left column of text and reduced the ragged right. This is the final outcome.

Fig 6.5; Final outcome of Exercise 2 (25/9/2021)

Fig 6.5 ; Final PDF of Exercise 2 (25/9/2021)

FEEDBACK

Week 1 (27/8/2021)
General Feedback - Received feedback on the blog, was missing my full name and module on the main page.

Week 2 (3/9/2021)
General Feedback - The idea of the use of different weights in communicating the word, while also using graphics that are not too overwhelming. Do not cut the design diagonally, it reduces the dynamism for the design. Exaggeration is good.
Specific Feedback - Adjust hierarchy of headings in the E-Portfolio. and add dates to images. Missing names of Fonts.

Week 3 (10/9/2021)
General Feedback - No use of colors.
Specific Feedback - Once again, no color, increase the size of "Bark" Type expression, and move it to the right, slightly off-center. Glitch and Broken are good. Make terror a black color, maybe make the letter 'O' into the blood splatter instead. Increase the size of the 'terror' type expression.

Week 4 (17/9/2021)
General Feedback - Make the last frame of the animation last longer so it has time to sink in for the viewers.
Specific Feedback - I was suggested my my peers and lecturer that the droplets fell very flat. There was not enough splatter. I thought that was an incredible idea, and produced Fig 5.2. However, There was good sensitivity, as the droplets fell at different. I was also given the idea to have the droplets look more like it was falling from behind the camera lens, down to the word.

Week 5 (24/9/2021)
Specific Feedback - JPEGs of submissions in exercise 1 need to be clearer and in higher DPI. Leading text in Fig 6.2 is too weak, and Cross alignment wasn't achieved. The ragging in Fig 6.4, on the left column of text can be improved.

REFLECTION

These exercises helped a lot in understanding the tools and the run down of Adobe Illustrator. It also showed me (personally) that typography isn't all about creating new fonts, or having designs based around letters, but rather, the first exercise showed me that being able to give expression to the words is what it's about. The limited amount of fonts given to us also showed that. The animation task lends credence to that. In the second exercise, the lectures made sense of the inner workings of Typography and why certain things work and why others don't.

Search This Blog

Diane Lim En Wei 0345187