Typography Task 1 / Exercises

March 28, 2022

Typography Task 1 / Exercises

29.3.2022 - 27.4.2022 (Week 1 - Week 5)

Takuto Hozumi / 0354047 / Bachelor Of Design (Hons) In Creative Media

Typography

Task 1 / Exercises

LECTURES

1. Typography: Development / Timeline

Fig.1-1: The Beginning of Typography

Initially writing meant scratching into wet clay with sharpened stick or carving into stone with a chisel about 2,000 years ago.

Fig.1-2: Boustrophedon

The Greeks changed the direction of writing. Phoenicians, like other Semitic peoples, wrote from right to left. The Greek developed a style of writing called "boustrophedon" (how the ox ploughs), 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-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 start and finish - carried over into the carved letterforms.

Fig.1-5: Phoenician letter deform to Roman

Over the years, the Phoenician letter changed to Roman, which is used today. The Fig.1-5 above shows the early letterform development in chronological order.

Fig.1-6: 4th or 5th century, Square Capitals

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

Fig.1-7: Late 3rd - mid 4th century, 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 approximately 30° off the perpendicular. Although rustic capitals were faster and easier to, they were slightly harder to read due to their compressed nature.

Fig.1-8: 4th century, Roman cursive

Both square and rustic capitals were typically reserved for documents of some intended performance. Everyday transactions, however were typically written in cursive hand in which forms were simplified for speed. We can see here the beginning of what we refer to as lowercase letterforms.

Fig.1-9: 4th - 5th century, Uncials

Uncials incorporated some aspects of the Roman cursive hand, especially in the shape of the A. DE H. M. U and Q. "Uncia" is Latin for a twelfth of anything; as a result, some scholars think that uncials refer to letters that are one inch (one twelfth of foot) high. It might, however, 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-10: C. 500, Half-Uncials

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

Fig.1-11: C. 925, Caloline minuscule

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 majuscules (uppercase), miniscule, capitalization and punctuation which set the standard for calligraphy for a century.

Fig.1-12: C. 1300, Blackletter (Textura)

With the dissolution of Charlemagne's empire came regional variations upon Alcuin's script. In northern Europe, a condense strongly vertical letterform 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 Alcuin's miniscule.

Fig.1-13: C. 1455, 42 line bible, Johann Gutenberg, Mainz

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-14: Bible written by the people of the time

That kind of books written by religious scripts were hand-written by Monk and others.

Type classification (Letter)

Fig.1-15: 1450 Blackletter

Fig.1-16: 1475 Oldstyle

Fig.1-17: 1500 Italic

Fig.1-18: 1550 Script

Fig.1-19: 1775 Modern

Fig.1-20: 1750 Transitional

Fig.1-21: 1825 Square Serif / Slab Serif

Fig.1-22: 1990 Serif / Sans Serif

2. Typography: Basic / Describing letterforms

Typography has technical terms. These describe specific parts of a letterform.

Fig.1-23: Baseline / Median / X-hight

Baseline - imaginary line the 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-24: Stroke

Stroke - any line that defines the basic letterform

Fig.1-25: Apex / Vertex

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

Fig.1-26: Arm

Arm - short strokes of the stem of a letterform, horizontal or inclined upward.

Fig.1-27: Ascender

Ascender - the portion of the stem of a lowercase letterform that projects above the median

Fig.1-28: Barb

Barb - the half-serif finish on some curved stroke

Fig.1-29: Bowl

Bowl - rounded form that describes a counter (opened or closed)

Fig.1-30: Bracket

Bracket - transition between serif and stem

Fig.1-31: Bracket

Cross Bar - horizontal stroke that connects two stems together

Fig.1-32: Cross Stroke

Cross Stroke - horizontal stroke that joins two stems together (f & t)

Fig.1-33: Crotch

Crotch - interior space where two strokes meet

Fig.1-34: Ear

Ear - the stroke extending out from the main stem or body of the letterform

Fig.1-35: Descender

Descender - portion of a stem that projects below the baseline

Fig.1-36: Em / en

Em / en - originally referring to the width of an uppercase M, and em is now the distance equal to the size of the typeface (an em in 48 points, for example). An en is half the size of an em (Most often used to describe em / en spaces, and en / em dashes)

Fig.1-37: Ligature

Ligature - character formed by combining two or more letterform

Fig.1-38: Ligature example

fonts.com

Fig.1-39: Link / Loop

Link - the stroke that connects the bowl and loop of a lowercase G

Loop - the bowl created in the descender of the lowercase G

Fig.1-40: Serif

Serif - the right-angled foot at the end of the stroke

Fig.1-41: Shoulder

Shoulder - curved stroke that is not part of a bowl

Fig.1-42: Spine

Spine - curved stem of the S

Fig.1-43: Spur

Spur - extension that articulates the junction of the curved stroke

Fig.1-44: Stem

Stem - significant vertical or oblique stroke

Fig.1-45: Stress

Stress - orientation of letterform indicated by the thin stroke in round forms

Fig.1-46: Swash

Swash - the flourish that extends the stroke of a letterform

Fig.1-47: Tail

Tail - curved diagonal stroke at the finish of certain letterforms

Fig.1-48: Terminal

Terminal - self-contained finish of a stroke without a serif

Basic / The font

Fig.1-49: Uppercase / Lowercase

Uppercase Capital letters - including certain accented vowels, the c cedilla and n tilde, and the a/e and o/e ligatures

Lowercase - includes the same characters as uppercase

Fig.1-50: Small Capitals

Small Capitals - Uppercase letterforms draw to the x-height of the typeface, Small Caps are primarily found in serif fonts as part of what is often called expert set

Most type software includes a style command that generates a small cap based on uppercase forms. Do not confuse rear small caps with those artificially generated.

Fig.1-51: Uppercase / Lowercase Numerals

Uppercase Numerals - called lining figures, these numerals are the same height as uppercase letters and are all set to the same kerning width

They are most successfully used with tabular material or in any situation that calls for uppercase letters.

Lowercase Numerals - known as old style figures or text figures, these numerals are set to x-height with ascenders and descenders

They are best used when ever you would use upper and lowercase letterforms. Lowercase numerals are far less common in sans serif type-faces than in serif.

Fig.1-52: Italic

Italic - most fonts today are produced with a matching italic, Small caps, however, are almost always only roman

The forms in a italic refer back to fifteenth century Italian cursive handwriting. Oblique are typically based on the roman form of the typeface.

Fig.1-53: Punctuation, miscellaneous characters

Punctuation, miscellaneous characters - all fonts contain standard punctuation marks, miscellaneous characters can change from typeface to typeface

It's important to be acquainted with all the characters available in a typeface before you choose the appropriate type for a particular job.

Fig.1-53: Ornaments

Ornaments - 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).

Type family

Fig.1-53: Type family

Roman - uppercase forms are derived from inscriptions of Roman monuments

Italic - named for 15th century Italian handwriting

Boldface - characterized by a thicker stroke than a roman form

Light - lighter stroke than roman

Condensed - compressed

Extended - extended variation of roman font

Typical Typefaces

The 10 typefaces mentioned in the following fig.1-54 represent 500 years of type design. The men and women who rendered them all sought to achieve two goals: easy readability and an appropriate expression of contemporary esthetics.

These typefaces (and there are others) have surpassed the latter goal. They have remained in use for decades - in some cases, centuries - after they were first designed, still considered successful expressions of how we think, how we read and write, and how we print.

Fig.1-54: Typefaces

As a beginning typographer, you should study these ten faces carefully. For almost any early projects in your design program, these are you will need to develop your skills. Once you understand how to use these faces appropriately and effectively, you'll be well prepared to understand and appreciate other typefaces as you encounter them.

3-1. Typography: Text / Tracking: Kerning and Letterspacing

The term 'kerning' refers to the automatic adjustment of space between letters. It is often mistakenly referred to as 'letterspacing. In fact, letterspacing means to add space between the letters. The addition and removal of space in a word or sentence is referred to as 'tracking'.

Fig.1-55: Tracking

Fig.1-55: Normal vs Loose Tracking

If text space is too loose or too tight, making it difficult to read. Adjust appropriate letter spacing.

3-2. Typography: Text / Formatting Text

Designers tend to set type one way or another depending upon several factors, personal preference, 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.

Type that calls attention to itself before the reader can get to the actual words is simply interference, and should be avoided. Quite simply if you see the type before you see the words, change the type.

Fig.1-56: Readable Typeface

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 has to know which typeface best suits the message at hand.

Consider too, the different textures of these typefaces. Type with a relatively generous x-height or relatively heavy stroke width produces a darker mass on the page than type with a relatively smaller x-height or lighter stroke. Sensitivity to these differences in color is fundamental for creating successful layouts.

Fig.1-57: X-height

The spaces above and below the X-height, called 'ascender' and 'descender' respectively. These spaces should be smaller than the X-height to improve visibility.

Fig.1-58: Readable Typeface

It is difficult to discern the legibility of these fonts from the monitor because they are not intended to be read on the screen. The appropriate size depends on the density of the font.

3-3. Typography: Text / Leading and Line Length

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

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

Leading: Text that is set too tightly encourages vertical eve 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 mare. A good rule of thumb is to keep line length between 55-65 characters. Extremely long or short lines lengths impairs reading.

4-1. Typography: Text / Indicating Paragraphs

There are several options for indicating paragraphs. In the first example, we see the pilcrow ¶ (Fig.1-59), a holdover from medieval manuscripts seldom use today.

Fig.1-59: Pilcrow

By opening the space between lines, paragraphs can be clearly separated as the example below (Fig.1-60).

Fig.1-60: Line Space 12pt

Fig.1-61: Line Space vs Leading

Widows and Orphans

Fig.1-62: Widow and Orphan

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 new column.

In such cases, the solution is to break lines at the end of entire paragraphs so that the last line of any paragraph is not shortened.

4-2. Typography: Text / Highlighting Text

I reduce aligned figures (numbers) or All Capital acronyms embedded in text by 0.5 as well, to ensure visual cohesion of the text.

Fig.1-63: Highlighting

Highlighting - When highlighting text by placing a field of color at the back of the text, maintaining the left reading axis of the text ensures readability is at its best.

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

4-3. Typography: Text / Headline within Text

There are many kinds of subdivision within text of a chapters. In the following visuals these have been labeled (A, B and C) according to the level of importance.

A typographers task is to make sure these heads clearly signify to the reader the relative importance within the text and to their relationship to each other.

Fig.1-64: Headline A

A head indicates clear break between the topics within a section.

Fig.1-64: Headline B

B head subordinates to A head. B heads indicate a new supporting argument or example for the topic at hand.

Fig.1-64: Headline C

C head does not interrupt the flow of reading and are shown in small caps, italics, serif bold and san serif bold. It is followed by at least an empty space for visual separation.

5-1. Typography: Letters / Understanding letterforms

Fig.1-65: Letterforms

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.1-66: Uppercase letterform

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

Fig.1-67: 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.

Fig.1-68: Helvetica vs Univers (Overlay)

5-2. Typography: Letters / Maintaining x-height

The x-height generally describe 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.

Fig.1-69: X-height

5-3. Typography: Letters / Form / Counterform

Just as important as recognizing specific letterforms is developing a sensitivity to the counterform (or 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.

Fig.1-70: The spaces between letters

The latter is particularly and important concept when working with letterforms like lowercase 'r' that have no counters per se. How well you handle the counters when you set type determines how well words hang together-in other words, how easily we can read what's been set.

Fig.1-71:The spaces 2

5-4.Typography: Letters / Contrast

The basic principles of Graphic Design apply directly to typography. The following are some examples of contrast - the most poweful dynamic in design - as applied to type, based on a format devised by Rudi Ruegg.

Fig.1-72: Contrast

The simple contrasts produces numerous variations;

small+organic / large+machined, small+dark / large light, etc.

6-1.Typography: Different Medium

Today, typography exists not only on paper but on a multitude of screens. It is subject to many unknown and fluctuating parameters, such as operating system, system fonts, the device and screen itself, the viewport and more. Our experience of typography today changes based on how the page is rendered, because typesetting happens in the browser.

Fig.1-73: Image of Typography as Print / Screen

6-2.Typography: Print Type Vs Screen Type

Type for Print

A good typeface for print-Caslon, Garamond, Baskerville are the most common typefaces that is used for print. Because of their characteristic which are elegant and intellectual but also highly readable when set at small font size.

Fig.1-75: Typography in Print Media

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 (or reduced ascenders and descenders), wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, as well as modified curves and angles for some designs.

Fig.1-74: Typography in WEBsite

Fig.1-76: Screen vs Print

6-3.Typography: System Fonts for Screen / Web Safe Fonts

Each device comes with its own pre-installed font selection. Which is based largely on its operating system. The problem is that each differs a little bit.

Windows-based devices might have one group. While MacOS ones pull from another. Then Google's own Android system uses their own as well.

Let's say the designer picked some obscure, paid font family for this site's design. If you don't have that font already installed and it's not pulling from a web-friendly place - more on that later - the font you see would default back to some basic variation like Times New Roman. You, as the visitor, wouldn't necessarily know that's what happened, though. To you, it would just look plain ugly,

'Web safe' ones, however, appear across all operating systems. They're the small collection of fonts that overlap from Windows to Mac to Google.

6-4.Typography: 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. 100 pixels on a laptop is very different from 100 pixels on a big 60″ HDTV.

Even within a single device class there will be a lot of variation.

6-5.Typography: Static vs Motion

Fig.1-77: Static and Motion Typography

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

From billboards to posters, magazines to fliers, we encounter all forms of static typography with wide ranging purposes. Whether they are informational, promotional, formal or aspirational pieces of designs, the level of impression and impact they leave on the audience is closely knitted to their emotional connection with the viewers.

In-Class Outline

Week 1

The content of this lectures was mainly an explanation of the details what we will learn in the module. For an overview of typography, developing or helping observer's understanding of an advertisement or other medium through the letters design is what typography is. It makes easy to read the text. In particular for practical, lecturer told to set up a blog called "e-Portfolio". This blog will be used to accumulate the learning process of all modules, and it will be utilized submit assignments including image data of my work, drawings, photos, designs etc.

Week 2

At the beginning, as an advice, the professor said that hand drawing sometimes benefits to help own creativity. Then, feedback on the first week's assignment (Sketches for the chosen 4 words) was given by each individual students. Details of the feedback to me are on the Feedback section below.

Week 3

Received mid-term advice on how to complete "Exercise 1 Type Expression" and learn animation techniques in class. Specific instructions for creating animations can be found in the Instruction section below.

Week 4

Week 4 was a completely online class and we received blog reports and feedback on our assignments. Specific advice is provided in the feedback section below.

Week 5

Fully online classes prior to assignment submission. The professor checked each person's project progress. Feedback on reports (E-portfolio) was given, followed by feedback on Text Formatting assignments. Specific advice is provided in the feedback section below.

INSTRUCTION

Task 1 / Exercise 1 Type Expression

Main purpose of the assignment

You will be given 4 words to compose and express. You will be given a set of typefaces to work with. Through iteration, use the appropriate typeface and compose the letters in a manner that allows meaning of the word to become visible.

Software: Adobe Illustrator

First exercise: Sketches for the chosen 4 words

Here is mine;

Fig.2-1: Sketches for "Pop", "Squeeze", "Explode", "Decay" (30/3/2022)

From feedback on the class, some of them tend to lean toward figurative illustrations. I am trying to re-design those simpler by only a shape.

Fig.2-2: New Sketches for "Pop", "Squeeze", "Explode", "Decay" (10/4/2022)

Fig.2-3: Digitized Ver. (12/4/2022)

In digitizing, I made some minor changes where were ambiguous on the sketches in the process of editing the path data in Illustrator.

Fig.2-4: Digitized Ver.2 (After feedback 12/4/2022)

"POP" and "EXPLODE" are okay. "SQUEEZE" should be changed because it's still too much graphics. "Decay" is okay, but better to use just thin line, no need to apply a rough effect.

Final Submission

Fig.2-5: Digitized Ver.3 Final Outcome (22/4/2022)

Type Expression Final Outcome PDF

Task 1 / Exercise 1 Type Expression - Animation

Fig.2-6: Making process of gif animation

After creating four typos, we moved on to the animation process. Creating gif animations by using the Photoshop / Illustrator. I created the middle frame in Illustrator, exported the image and imported it into Photoshop.

Fig.2-7: Animated "POP" (12/4/2022)

After the lecture, "EXPLODE" was created based on the feedback.

Final Submission

Fig.2-8: Animated "EXPLODE" Final Outcome (16/4/2022)

Task 1 / Exercise 2 Text Formatting

Main purpose of the assignment

You will be given incremental amounts of text that address different areas within text formatting i.e. type choice, type size, leading, line-length, paragraph spacing, forced-line-break, alignment, kerning, widows and orphans etc. These minor tasks will increase your familiarity and capability with the appropriate software and develop your knowledge of information hierarchy and spatial arrangement.

Software: Adobe InDesign

Firstly, using 10 pre-prepared fonts, kerning and text formatting own name.

Fig.2-9: Text formatting with kerning (23/4/2022)

We learned how to adjust the spacing between letters on the in-design and about font design, and will move on to the issue of written design next.

Fig.2-10: Pasted the Text on InDesign (24/4/2022)

Things to note when doing exercise 2;

Font size (8-12)
Line Length (55-65/50-60 characters)
Text Leading (2, 2.5, 3 points larger than font size)
Ragging (left alignment) / Rivers (Left Justification)
Cross Alignment
No Widows / Orphans

Fig.2-11: After modification (24/4/2022)

Fig.2-12: Baseline Grid (24/4/2022)

InDesign provides a feature called the Baseline Grid for aligning lines of text. This feature is used to align the lines of a plain text frame with the lines of a column or a left and right page spread.

Fig.2-13: Text Formatting in process - 1 (24/4/2022)

This is before adding images, only adjustments were made to the text.

Fig.2-14: Text Formatting in process - 2 (26/4/2022)

Received feedback that the letters were too tight. It should be adjusted with a little wider spacing between letters. And the image in the upper right corner placed as an image is not much relevant and should be removed. The image with the Swiss flag is okay. The title (I am Helvetica by John Doe) has too much space between the letters, it should be packed a little to make it easier to read.

The final version, with these corrections plus the addition of photo captions, is below.

Final Submission

Fig.2-14: Text Formatting Final Outcome (26/4/2022)

Text Formatting Final Outcome PDF (26/4/2022)