Typography (Week 1 - Week 5)

 27/08/2021 - 24/09/2021 (Week 1- Week 5)

Metta angelica/0349095

Bachelor of Design (Hons) in Creative Media

Typography: Task 1-Task 2

---

LECTURE

Week 1 1: Introduction & E-Portfolio

For the first week, we met with our teachers Mr. Vinod and Mr. Charles. The teachers inform us about the module and ask us to join the Facebook group where all announcement resources and task submission will be. Then, the teachers gave us a video link to youtube. The video consists of an explanation of the things we should know and put in our E-Portfolio, for example how to insert page breaks or how to embed a PDF file.

Typography Development/Timeline

1. Early Letterform Development: Phoenician to Roman

Initially writing meant scratching into wet clay with a sharpened stick or carving onto stone with a chisel. The forms of uppercase letterforms can be seen to have evolved out of these tools and materials. At their core, uppercase forms are a simple combination of straight lines and pieces of circles, as the materials and tools of early writing required.

Fig. 1.1 Right: 4th-century B.C.E - Phoenicians votive stele Carthage, Tunisia. The stele bears a four-line inscription to Tanit and Baal Hamon. Left: Evolution from Phoenician letter.

Boustrophedon

• 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

Fig. 1.3 Greek fragment, stone engraving.

Fig. 1.4 Late 1st century B.C.E., Augustan inscription in the Roman Forum, Rome.

Etruscan (and then Roman) carvers working in marble painted letterforms before inscribing them. Certain qualities of their strokes - a change in weight from vertical to horizontal, a broadening of the stroke at the start and finish-carried over into the carved letterforms.

Fig. 1.5 Letter 'A' development from Phoenician to Roman

2. Hand Script from 3rd - 10th-century C.E.

Square Capitals

Square Capitals were the written version that can be found in a Roman monument. These letterforms have serifs added to the finish of the main stokes. The variety of stroke width was achieved by the reed pen held at an angle of approximately 60 degrees off the perpendicular.

Fig. 1.6 4th or 5th century Square Capitals

Rustic Capitals

A compressed version of square capitals, rustic capitals allowed for twice as many words on a  sheet of parchment and took far less time to write. The pen or brush was held at an angle of 3- degrees off the perpendicular. Although rustic capital was faster and easier to, they were slightly harder to read due to their compressed nature.

Fig 1.7 Late 3rd - mid 4th century: Rustic Capitals

Roman Cursive

Both square and rustic capitals were typically reserved for documents of some intended performances. Everyday transactions, however, were typically written in cursive hand in which forms were simplified for speed.

Fig 1.7 4th century: Roman Cursive

Uncials

Uncials incorporated some aspects of the Roman cursive hand, especially in the shape of the A, D, E, H, M, U and Q. 'Uncia' is a Latin for a twelfth of anything; as a result, some scholars think that Uncials refer to letters that are one inch high. It would be more accurate to think of uncials simply as small letters. The broad forms of uncials are more readable at small sizes than rustic capitals.

Fig. 1.8  4th - 5th century: Uncials

Half Uncials

A further formalization of the cursive hand, half-uncials mark the beginning of lowercase letterforms, replace with ascenders and descenders, 2000 years after the origin of the Phoenician alphabet.

Fig. 1.9 C. 500 Half-uncials

Caloline Miniscule

Charlemagne, the first unifier of Europe since the Romans, issued an edict in 789 to standardize all ecclesiastical texts. The monks rewrote the text using both majuscules (uppercase), minuscule, capitalization, and punctuation which set the standard for calligraphy for a century.

3. Blackletter to Gutenberg's type

With the dissolution of Charlemagne's empire came regional variations upon Alcun's script. In northern Europe, a condensed strongly vertical letter form know as 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 Alcun's minuscule.

Fig. 1.10 C. 1300 Blackletter (Textura)

Gutenberg's skills included engineering, metalsmithing, and chemistry. He marshaled them all 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.11 C. 1455: 42 line bible, Johann Gutenberg Mainz

Fig. 1.12 Typography Development (Source: Lecture)

Fig. 1. 13 Typography Development (Source: Lecture)

4. Text type classification

Fig. 1.14 1475 Oldstyle  

Fig. 1.15 1450 Blackletter

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

Week 2: Basic/Describing letterforms

As with any craft that has evolved over 500 years, typography employs a number of technical terms. These mostly describe specific parts of the letterforms. It is a good idea to familiarize yourself with the lexicon. Knowing a letterforms component parts make it much easier to identify specific typefaces.

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.

Fig. 2.1 (Source: Lecture)

Stroke: Any line that defines the basic letterforms.

Fig. 2.2 (Source: Lecture)

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

Fig. 2.3 (Source: Lecture)

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

Fig. 2.4 (Source: Lecture)

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

Fig. 2.5 (Source: Lecture)

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

Fig. 2.6 (Source: Lecture)

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

Fig. 2.7 (Source: Lecture)

Bracket: The transition between the serif and the stem.

Fig. 2.8 (Source: Lecture)

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

Fig. 2.9 (Source: Lecture)

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

Fig. 2.10 (Source: Lecture)

Crotch: The interior space where two strokes meet.

Fig. 2.11 (Source: Lecture)

Descender: The portion of the stem of a lowercase letterform that projects below the baseline.

Fig. 2.12 (Source: Lecture)

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

Fig. 2.13 (Source: Lecture)

Em/en 

Fig. 2.14 (Source: Lecture)

Finial

Fig. 2.15 (Source: Lecture)

Leg

Fig. 2.16 (Source: Lecture)

Ligature

Fig. 2.17 (Source: Lecture)

Link

Fig. 2.18 (Source: Lecture)

Loop

Fig. 2.19 (Source: Lecture)

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

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

Spine: The curved stem of the S.

Stress: The orientation of the letterform, indicated by the thin stroke in round forms.

Swash: The flourish that extends the stroke of the letterform.

Terminal 

Fig. 2.19 (Source: Lecture)

Basic/The Font

Uppercase letters: Capital letters, including certain accented vowels, the c cedilla & the n tildge, and the a/e & o/e ligatures.

Lowercase letters: Lowercase letters include the same characters as uppercase.

Fig. 3.1 (Source: Lecture)

Small Capitals: Uppercase letterforms draw to the x-height of the typeface. Small caps are primarily found in the serif fonts as a part of what is called an expert set. Allows for non-disruptive bodies of text. 

Fig. 3.2 (Source: Lecture)

Uppercase Numerals: Also known as lining figures, these numerals are the same height as the uppercase letters & are set to the same kerning width. Successfully used with tabular materials or in any appropriate situation.

Fig. 3.3 (Source: Lecture)

Lowercase Numerals: Known as old-style figures/text figures, these numerals are set to x-height with ascenders and descenders. Best used when one would use upper and lowercase letterforms. Less common in sans serif type-faces than in serif. Originally the form that numbers used to take.

Fig. 3.4 (Source: Lecture)

Italic: Forms in Italic refer back to fifteenth-century Italian cursive handwriting.

Fig. 3.5 (Source: Lecture)

Punctuation, miscellaneous characters

Fig. 3.6 (Source: Lecture)

Ornaments

Fig. 3.7 (Source: Lecture)

Describing Typefaces

Once you can recognize the parts of a letterform, you can apply what you know to identify different typefaces. Keep in mind that some, all, or combinations of these styles may be found within one type family.

Fig. 4.1 (Source: Lecture)

Fig. 4.2 (Source: Lecture)

Fig. 4.3 (Source: Lecture)

Fig. 4.3 (Source: Lecture)

Comparing Typefaces

What is worth noting isn't the similarities but rather the differences - the accumulation of choices that renders each unique.

Beyond the gross difference in x-height, the forms display a wealth of variety, in line weight, relative stroke width, and in feeling. For any typographer, these feelings connote specific use and expression.

The Rs display a range of attitudes, some whimsical, some stately, some mechanical, others calligraphic some harmonious, and some awkward.

Fig. 4.4 (Source: Lecture)

Week 3: Text - Part 1

Kerning & Letterspacing

Kerning refers to the automatic adjustment of space between letters.

Fig. 5.1 Kerning

Letterspacing means adding space between the letters.

Tracking: addition and removal of space in a word or sentence. There is normal tracking, loose tracking, and tight tracking.

Fig. 5.2 Kerning

Designers always letterspace uppercase letters, but there has been strong resistance within the type community to letterspace lowercase letters within text. Uppercase letters are created to be able to stand on their own, whereas lowercase letters require the counter form created between letters to maintain the line of reading. 

Fig. 5.3 (Source: Lecture)

Formatting Text

Flush Left: This format most closely mirrors the asymmetrical experience of handwriting. Each line starts at the same point but ends whenever 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 transforms fields of text into shapes, thereby adding a pictorial quality to material that is non-pictorial by nature. Because centered type creates such a strong shape on the page, it's important to amend line breaks so that the text does not appear too jagged.

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: Like centering, this format imposes asymmetrical 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 the white space running vertically through the text. Careful attention to line breaks and hyphenation is requires to amend this problem whenever possible.

Designers tend to set one way or another depending upon several factors, personal preferences, prevailing culture and the need to express play important roles. However, when setting the field of type, keep in mind the typographer's first job-clear, appropriate presentation of the author's message.

Fig. 6 (Lecture)

Text/Texture

Beyond learning about the unique characteristics of each typeface and understanding its place in history, it is important to understand how different typefaces feel as text. Different typefaces suit different messages. A good typographer had to know which typeface best suits the message at hand.

Fig. 7 (Lecture)

Leading and Line Length

The goal in setting text is to allow for easy, prolonged reading. At the same time, a field of type should occupy the page as much as a photograph does.

Type size: text type should be large enough to be read easily at arm's 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 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.

Type Specimen Book

A 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. You only determine choice on screen when it's final version is to read on screen.

A type specimen book is to provide an accurate reference for type, type size, type leading, type line length, etc.

Fig. 8 (Lecture)

Compositional requirement: Text should create a field that can occupy a page or a screen. Think of your ideal text as having a middle gray value (on the left, in the diagram on the next slide), not a series of stripes (as seen of the one on the right).

Week 4

Text/Indicating Paragraphs

There are several options for indicating paragraphs. In the first example, we see the 'pilcrow' a holdover from medieval manuscripts seldom use today.

Fig. 9 (Lecture)

The example here displays a line spacing (leading) between the paragraphs. Hence if the line space is 12pt, then the paragraph space is 12pt. This ensures cross-alignment across columns of the text.

Fig. 10

Line space vs Leading

Fig. 11

The example below displays the standard indentation. Typically here the indent is the same size of the line spacing or the same as the point size of your text.

Fig. 12

Windows and Orphans

 In traditional typesetting (the kind that still endures among conscientious commercial publishers). there are two unpardonable gaffes-widows and orphans. Designers must take great care to avoid the occurrence of the above mentioned.

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

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

Highlighting Text

Fig. 13.1 (Lecture)

Fig. 13.2 (Lecture)

Fig. 14 (Lecture)

Fig. 15 (Lecture)

Also take note, 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.

Fig. 16 (Lecture)

Fig.17 (lecture)

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. 18

Week 5

Understanding letterforms

Uppercase letter form below suggests symmetry. However, it is not symmetrical. It is easy to see the two different stroke widths of the Baskerville stroke form; more noteworthy is the fact that each bracket connecting the serif to the steam has a unique arc. 

Fig. 19 (lecture)

Letters

The uppercase letter below may appear symmetrical, but a closer look tells that the width of the left slope is thinner than the right stroke. Both Baskerville (previous) & Univers (below) demonstrate the meticulous care a type designer took to create letterforms that are internally harmonious & individually expressive.

Fig. 20 (lecture)

The complexity of each individual letterform is demonstrated by examining the lowercase "a" of two similar sans-serif typefaces: Helvetica & Univers. The difference in character between the two can be seen by how the stems of the letterforms finish & how the bowls meet the stems showcase the palpable difference in character between the two.

Fig. 21 (lecture)

Maintaining x-height

X-Height generally describes the size of lowercase forms. However, curved strokes, such as "s", must rise above the median, or sink below the baseline, to appear to be the same size as the vertical & horizontal strokes they adjoin. 

Fig. 22 (lecture)

Form/Counterform

Just as important as recognizing specific letterforms is developing a sensitivity to counterform, and often contained, by the strokes of the form. When counterform joined to formwords, the counterform includes the spaces between them.

Fig. 23 (lecture)

Contrast

The basic principles of Graphic Design apply directly to typography. The following are some examples of contrast, based on a format devised by Rudi Ruegg.

Fig.24 (lecture)

Fig. 25 (lecture)

---

INSTRUCTION

Task 1: Exercises - Type Expression

For our first assignment, we were task to make 4 types of typography using the words given below.

• Terror
• Space
• Glitch
• Water
• Broken
• Abyss
• Bark
• Colossal

Terror is mandatory so we had to choose three more words, after the words are chosen, I then make a rough draft of how should the word would be before I finalize it. Below is the draft I made.

Fig. 1.1

We then need to turn our sketches into digital versions. Below is the result.

Fig. 2.1

After finishing our digital version of our type expression, we then have to animate our type expression.

For this task, I use the word Bark.

Fig. 3.1

Fig. 3.2

To make this work, we first need to copy many artboards by using the artboard tool (shift + O) the drag the artboard then click alt to create the new artboard. Since I plan on using the K as the dog, it will then bark out the other words. So I start by making the K then slowly make it reflect the other side, the spout out the B, a, r,!.

After finish making the artboards, To animate them we first need to export the artboards, then use photoshop to animate them.

After putting the artboards into photoshop, we need to see the timeline.

Fig. 3.3

Then I hide the other artboard in the layers to make the different artboards seen.

Fig. 3.4

Then we just need to click the play button and it will start to animate. Below is the result.

Fig. 3.5 (Final Design)

Task 1: Exercises - Formatting Text

For this exercise, we need to do kerning and layout.

Kerning & Letterspace

For this exercise, we need to use the 10 typefaces Mr. Vinod has provided in google drive. It would then be done like this.

Fig. 4. 1 Before Kerning and Letterspace

I then continue to watch the lecture, so after I watch a short time of the kerning and letter spacing. I first letter space my names.

Fig. 4. 2 Letter spacing

Then before I start Kerning, I adjust the Units.

Fig. 4.3

Below is the finished results.

Fig. 4.4 (Final Design)

Layout

For this exercise, I first went to the Facebook page to copy and paste the story.

Fig. 5.1

Then I start to make the layout of it.

Fig. 5.2

While making this, I also review the video on youtube on how to use Kerning, Letterspace, Baseline grig, Cross alignment, etc.

Fig. 5.3

When I did not achieve the cross alignment, I went to look at the other video Mr. Vinod has provided for those who did not achieve the cross alignment or have problems achieving it. But when I use it, there was a bit of a problem.

Fig. 5.4

This was really problematic but I then found a solution which is to make the letter smaller at most 11 pt but I turn it to 9 pt so the leading will be 11 pt.

Fig. 5.5

Then I check the hidden characters to see if there is still any hyphenation or double spacing in the body.

Fig. 5.6

After finish checking the body, I then start to make the layouts.

Fig. 6.1

Fig. 6.2

Fig. 6.3 (Final Design)

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

Font size: 9 pt

Text Leading: 11 pt

Ragging left alignment

Cross alignment

No windows and orphans

After making some of the layouts I have decided to make this the final design.

---

FEEDBACK

Week 1/...

Week 2/...

Week 3/...

Week 4/...

Week 5

Feedback: There should not be a horizontal rule above week 2 task 1.

Task 1 progression is too small and not legible. Bad documentation of progression. Submission is incomplete and not as instructed.

Task 2 body text and image captions are closing. Line length of the body text in the left column and right are not the same length, cross alignment has not been achieved. I have not understood the lectures and have not taken the necessary knowledge to execute the task.

---

REFLECTIONS

Experiences: After not being able to catch on lesson very well, not paying very good attention to class, or try to ask others for help. I realized that I had too many things going on, and had been procrastinating long enough, so next time I will try to do things early.

Observations

Findings

---

FURTHER READING

The Middle Ages – Handwritten and Well-Illustrated Manuscripts

The Middle Ages were all about hand-written and well-illustrated manuscripts. It led to the evolution of a wide range of writing styles. Unicals and half unicals were prominent features, with rounded, elaborate lettering. The art of Calligraphy along with page layout and lettering forged new ground. Calligraphy masters traveled across the known world to share their knowledge with the educated elite.

Fig. 1 (The Book of Kells, c. AD 800, is lettered in a script known as “insular majuscule,” a variety of uncial script that originated in Ireland. (Image source))

Gutenberg and Modern Typography

The development of moveable type and the printing press in the 15th century by Johannes Gutenberg was a turning point for the modern world—and, modern typography. During this time, both practical and decorative typefaces appeared en masse, along with a lighter, more ordered page layout with subtle illustrations.

Fig. 2 Gutenberg and Modern Typography