Typography Task 1/Exercises

04.04.2023-02.05.2023 Week1-Week5

Yang Xu Guo /0362534

Typography/Bachelor of Design (Honours) in Creative Media

TASK1:(exercise1&2）

---

LECTURES

Week 1| Lecture 1

Lecture: Typo_0_Introduction & Briefing

（Typography）

-Typography is the method of creating letter shapes, fonts, and types

（Font）

-Font word comes from French word fount. A font refers to the individual font or weight within the typeface, i.e. Georgia Regular, Georgia Italic and Georgia Bold. 

Fig 1.1

（Typeface）

-A typeface refers to the entire family of fonts/weights that share similar characteristics /styles. i.e. Georgia, Arial, Times New Roman, Didot and Futura.

Week1:We learned how to create our digital portfolio on blogger. Our teacher Vinod introduced us to the importance of templates and electronic documents this semester. Teach us how to type expressions .

Lecture:Typo_1_ Typography Development/ Timeline

1.Early letterform development: Phoenician to Roman

fig 0.0 evolution of letterforms from Phoenician alphabet to modern Latin and early Arabic

-Initially writing into wet clay with sharpened stick or carving into stone with a chisel.

-The forms of uppercase letterforms for nearly 2000 years the only letterforms seen to have evolved out of these tools and materials.

- A writing style developed by Greek called ''boustrophedon'' that changed direction of the text read alternatively from right to left and left to right also they changed the orientation of the letterforms.

fig 0.0 Boustropdedon Greek fragment, stone engraving. (Date unknown)

-Etruscan and the roman carvers worked in marble painted letterforms before inscribing them.

fig 0.0 Late 1st century B.C.E., Augustan inscription in Roman Forum, Rome.

fig 0.0 Phoenician to Roman

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

-In Roman monuments Square capitals can be found found in written version. The 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 0.0 4th or 5th century Square 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.

-Both square and rustic capitals were reserved for documents of some intended performance. Cursive and simplified for speed.

-Uncia is Latin for a twelfth of anything, Uncials incorporated some aspects of the Roman cursive hand as in the shape of the A, D, E. H, M, U and O.

Fig 0.0 4th century Roman cursive

Fig 0.0 4th- 5th century: Uncials

-Other 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 Phoenician alphabet.

Fig 0.0 C.500 Half-uncials 

-Charlemagne was the first unifier of Europe since the Romans to standardize all ecclesiastical texts issued an edict in 789. The standard for calligraphy set by the monks for a century by rewrote the texts using both majuscules, miniscule, capitalization, and punctuation.

Fig 0.0 C, 925 Caloline miniscule

3.Blackletter to Gutenberg's type

-In Charlemagne's empire the regional variations upon Alcuin's script. Blackletter or texture gained popularity in a condense letterform in northern Europe and in the south ''rotunda'' a rounder more open hand gained popularity. In Italy the humanistic script is based on Alcuin's miniscule.

Fig 0.0 c.1 300: Blackletter (Textura)

-In Gutenberg's skills engineering, metalsmithing , and chemistry are included, and marshaled them all to build pages accurately mimicked the work of the scribe's hand, and his type mold required a different brass matrix , or negative impression, for each letterform.

Fig 0.0 c 1455: line bible, Johann Gutenberg, Mainz

Fig 0.0 c 1455: line bible, Johann Gutenberg, Mainz

Typography development timeline part 1

Typography development timeline part 2

4.Text type classification ( Dates of origin approximated to the nearest quarter century)

-Type forms have developed for in response to prevailing technology, commercial needs, and esthetic trends.

-1450 Blackletter, printing type-based on hand-copying styles used for books in northern Europe. Examples Cloister Black, Goudy Text.

-1475 Oldstyle , lowercase forms used by Italic humanist scholars for book copying and uppercase letterforms on Romans ruins, the forms evolved away from their calligraphic origins over 200 years, across Europe from Italy to England. Examples: Bembo, Caslon, Dante, Garamond, Janson, Jenson, Palatino.

-1500 Italic, Echoing contemporary Italian handwriting, the first italics were condensed and close-set. Since 16th century, virtually all typefaces designed with italic forms.

-1550 Script, Originally and attempt to replicate engraved calligraphic forms, not appropriate in lengthy text settings. In shorter applications, it has wide acceptance. Forms now range the formal and traditional to the casual and contemporary. Examples: Kuenstler Srcipt, Mistral, Sneil Roundhand.

-1750 Transitional, A refinement of oldstyle forms, this style achieved advances in casting and printing, thick to thin exaggerated and brackets were lightened. Example: Baskerville, Bulmer, Century, Time Roman.

-1775 Modern, This style represents a further rationalization of old style letterforms, serifs were unbracketed, contrast between thick and thin. Examples: Bali, Bodoni, Caledonia, Didot, Walbaum. 

-1825 Square Serif \ Stab Serif, Originally heavily bracketed serif with little  thick and thin strokes and then developed needs of advertising for heavy type in commercial printing. Example: Clarendon, Memphis, Rockwell, Serifa. 

-1900 Sans Serif, the forms were introduced by William Caslon IV in 1816, for example: Akzidenz Grotesk, Grotesk, Gill Sans, Franklin Gothic, Frutiger, Futura, Helvetica, Meta, News Gothic, Optima, Syntax, Trade Gothnic, Univers.

-1990 Serif/ Sans Serif, this style enlarges the notion of a family of typefaces to include both serif and sans serif alphabets often stages between the two. Example: Rotis, Scala, Stone. 

Week 2 | Lecture 2:

1.Typography: Text/Tracking :Kerning and Letterspacing 

-Kerning - Automatic adjustment of space between letters.

-Letterspacing- The addition of space between letters.

-Tracking- The addition and removal of space in a word or

sentence (Kerning + Letterspacing) 

Fig 0.0 Kerning and Letterspacing

2.Normal tracking, loose tracking and tight tracking

-It is important to track words appropriately to make sure   the readability of the word is good.

Fig 0.0 showing 'step' in font univers 55 normal tracking (top right),tight tracking (bottom left)and loose tracking (bottom right)

3.Formating Text:

fig0.0 Normal tracking vs Loose tracking

fig0.0 Tight tracking

Flush left: Each line starts at the same place but ends wherever the last word of the text ends. Spaces between texts are consistent allowing the type to create an even gray value.

gray value- text on a white page 

leading- space between each line of text.

fig 0.0 Flush left

Centered text: Imposes symmetry, assigning equal value and weight to both ends of any line.

fig 0.0 centered

Flush right: It emphasis on the end of a line as opposed to its start, used in situations like captions.

fig0.0 Flush right

Justified: Imposes a symmetrical shape on the text and achieved by expanding or reducing spaces between words and sometimes between letters resulting openness of lines can occasionally produce 'rivers' of whit space running vertically.

fig0.0 Justified

This type 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 words, change the type.)

3. Text / Texture

Different type face suit different messages. A good typographer has to know which typeface best suits the message at hand.

-Text with generous X height or relatively heavy stroke width produces a darker mass on the page (high gray value)

-Text with smaller X height or lighter stroke produces lighter mass on the page(low gray value)

This is Key to making successful layouts

fig0.0 Anatomy of a typeface

Grayscale:

Most suitable gray vale would be a middle gray value such as Baskerville shown below

fig0.0 different type faces and gray values

4. Text/ Leading and Line Length

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

-Type size: Should be large enough to read easily at arm length.

-Leading: Text that is set too tightly encourages vertical eye movement; a reader can easily lose track. Type that is set too loosely creates striped patterns that cause distraction.

-Line length:Shorter lines require less leading; longer lines more. Keep the line length between 55-65 characters. Extremely short or long line lengths impair reading.

fig 0.0 tight leading and short line length on right and loose leading and long line length on left

5. Text/ Type Specimen Book

A type specimen book shows samples of typefaces in various different sizes.

It is to provide an accurate reference for type, type size, type leading, type line length, etc. 

Fig 0.0 Sample type specimen sheet

-Compositional requirement: Text should create a field that can occupy a page or a screen.

fig0.0 middle gray value(left), not series of stripes(right)

-Often useful to enlarge type to 400% on the screen to get clear sense of relationship between descenders on one line and ascenders on the line below.

Week 2:Our teacher is humorous. He will not only lead us to learn AI, but also tell us about his own life and personality. The teacher reviewed each student's work. We shoould understand the meaning of each word and use the correct font, and try to reduce the use of graphics.I will try to do what the teacher asks.

Week 3 | Lecture 3

6. Text/ Indicating paragraphs

a. 'Pilcrow'- a holdover from medieval manuscripts seldom use today.

Fig 0.0 use of pilcrow

b. ''Line space'' (leading) between lines

12pt leading should have 12pt line spacing as it maintains a good reading rhythm and ensures cross alignment across columns of text.

  fig 0.0 line spacing of 12pts 

c. Line space vs leading 

Fig 0.0 Line spacing vs Leading

d. Standard indentation

Typically same size as of line spacing of text or same as point size of text

used to save space in newspapers, best used in justified text ( never use for left align otherwise there is ragging on both sides of text).

Fig 0.0 Standard indentation

6.Text/ Window and Orphans

This two are unpardonable gaffes -windows and orphans. 

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

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

Fig 0.0 Widows and Orphans

In justified text both and orphans are considered serious gaffes. Flush right and ragged left is some what more forgiving towards widows, but only a bit. Orphans remain unpardonable. Only solution to rebreak line endings through out paragraph so that last line of any paragraph is not noticeably short.

7. Text/ Highlighting Text

fig 0.0 Italic/Bold/Color

fig0.0 the sans serif font (univers)has been reduced by.5 to match the x-height of the serif typeface.

fig 0.0 a field of colour 

fig 0.0 Quotation marks/ bullets

8. Text/ Headline within Text 

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

fig 0.0 A heads

-B head indicates a new supporting arguments and a subordinate to A heads. 

fig 0.0 B heads

- C head highlight specific facets of material within B head text and don't interrupt the flow of reading.

fig 0.0 C heads

9.Text/ Cross Alignment

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

fig0.0 Cross alignment

Week 3: We will complete the final design, the teacher's comments enhance our design concept to make the work more perfect .

Week 4 | Lecture 4

Typography: Basic / Describing letterforms

Baseline - Imaginary line the visual base of letterforms 

Median - Imaginary line defining the x-height of letterforms

X-height - Height in any typeface of the lowercase 'x'

Stroke - Any line that defines the basic letterform

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

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

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

Barb - Half-serif finish on some curved stroke

Beak - Half-serif finish on some horizontal arms

Bowl - Rounded form that describes a counter (may be open or closed)

Bracket - Transition between serif and stem

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

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

Crotch - Interior space where two strokes meet

Descender - Portion of the stem of a lowercase letterform that projects below the baseline

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

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

Finial - Rounded non-serif terminal to a stroke

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

Ligature - Character formed by the combination of two or more letterforms

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

Loop - In some typefaces, the bowl created in the descender of the lowercase g 

Spine - Curved stem of S

Spur - Extension the articulates the junction of the curved and rectilinear stroke

Stem - Significant vertical or oblique stroke

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

Swash - Flourish that extends the stroke of the letterform 

NEVER USE SWASHES IN CAPITAL LETTERS TOGETHER

Tail - Curved diagonal stroke at the finish of certain letterforms

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

May be flat ('T' above), flared, acute, ('t' above), grave, concave, convex, or rounded

Typography: Basic/ The font 

The full font of a typeface contains much more than 26 letters, to numerals, and a few punctuations marks.

Type family - A family with many different typefaces 

Typeface- Individual weight of stroke (Bold, regular, extended, semi bold)

If the type family doesn't have small capitals, don't force it to become a small capital

Small Capitals Uppercase letterforms draw to the x-height of the typeface

Primarily found in serif fonts as part of expert set

Most type software includes a style command that generates small cap based on uppercase forms

Don't confuse real small caps with those artificially generated

Almost always Roman

Uppercase Numerals also called lining figures

Same height as uppercase letters and are all set to the same kerning width

Most successfully used with tabular material or in any situation that calls for uppercase letters

Lowercase Numerals also known as old style figures or text figures
Set to x-height with ascenders and descenders
Best used when you would use upper and lowercase letterforms

Far less common in sans serif type-faces than in serif

Italic - Most fonts today are produced with a matching italic

Small caps are almost always only roman

Forms in italic refer beck to fifteenth century Italian cursive handwriting 

Oblique are typically based on the roman form of the typeface

Italic vs Roman

Punctuation, miscellaneous characters 

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

Important to be acquainted with all the characters available in a typeface before choosing the appropriate type for a particular job

Ornaments - Used as flourishes in invitations or certificates

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)

Typography: Basic/ Describing typefaces

Roman - Letterform is so called as the uppercase forms are derived from inscriptions of Roman monuments

A slightly lighter stroke in roman is known as 'Book'

Italic - Named for fifteenth century Italian handwriting on which the forms are based

Oblique conversely are based on roman form of typeface

Boldface - Characterized by a thicker stroke than roman form

It can be called 'semibold', 'medium', 'black', 'extra bold', or super depending on the relative stroke widths within the typeface

In some typefaces (notable Bodoni), the boldest rendition of the typeface is referred to as 'Poster'

Light - A lighter stroke than the roman form. Even lighter strokes are called 'thin'

Condense - A version of the roman form, and extremely condense styles are often called 'compressed'

Extended - An extended variation of a roman font

Typography: Basic/ Comparing Typefaces

The 10 typefaces represent 500 years of type design. The two goals are easy readability and an appropriate expression of contemporary esthetics

Beyond the gross differences in x-height, the forms display a wealth of variety, in line weight, relative stroke widths and in feeling.

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

Week4：Mr.Vinod took us to comment on the students' works .The shortcomings and advantages of the students' works are expressed in detail .He tells us that animation should be coherent, smooth and natural with more creativity. 

Week 5 | Lecture 5

Typography: Letters/ Understanding Letterforms 

Fig 0.0 Baskerville 'A'

The uppercase letterforms suggest symmetry, but it is 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. 0.0 Univers 'A'

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

Fig. 0.0Helvetica 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.

Typography: Letters/ Maintaining x-height

Fig. 0.0 Median and baseline

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.

Typography: Letters/ Form/ Counterform

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. How well are the counters handled determines how well the words hang together—how easily we can read what’s been set.

Fig. 0.0 Form / Counterform

One of the most rewarding way to understand the form and counter of a letter is to examine them in close detail. the balance between form and counter is achieved and a palpable sense of letterforms's unique characteristics.

Fig 0.0 Helvetica Black, Baskerville

Typography: Letters/ Contrast

The simple contrasts produces numerous variations.

Fig. 0.0 Contrast

Week5 ：The importance of alignment, maybe a little bit of deviation is not as good as the alignment. Check the student's work to improve the student work .

---

INTRODUCTION:

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

---

Task 1: Type Expression-（exercise1）

The first draft painting 

We need to choose some of the seven words to design, seven words have speed，crush，melt，blur ，dance，throw and kill.

fig1.1:Draft for the words "kill"17.04.2023

                           

fig1.2   17.04.2023

fig1.3 17.04.2023

exercise2 : text formatting

We need ten different fonts to design our name by yourself.

10 type families used in A4 size indesign:

Bembo Std

ITC Garamond std

Janson Text Lt Std

Adobe Caslon Pro

Itc New Baskerville Std

Bodoni Std Italic

Serifa std

Futura Std

Gill Sans

Universe Lts std

fig 2.1  28.05.23

There were four words we could choose, and mine was freedom's GIF

fig3.1    28.04.2023

fig3.2  28.04.2023

fig3.3 Final GIF "freedom"

yangxuguo0362534

Figure 3.4：Final Text Formatting Layout -JPEG

（Week 5-03.05.2023）

Figure 3.5：Final Text Formatting Layout with grid-PDF

（Week 5-03.05.2023）

Figure 3.6：Final Text Formatting Layout-PDF

（Week 5-03.05.2023）

 Feedback

Week 1 - 

We learned how to create our digital portfolio on blogger. Our teacher Mr.Vinod introduced us to the importance of templates and electronic documents this semester. Teach us how to type expressions .

Week 2 -

Our teacher is humorous. He will not only lead us to learn AI, but also tell us about his own life and personality. The teacher reviewed each student's work. We shoould understand the meaning of each word and use the correct font, and try to reduce the use of graphics.I will try to do what the teacher asks.

Week 3 -

We will complete the final design, the teacher's comments enhance our design concept to make the work more perfect .

Week 4 -

Mr.Vinod took us to comment on the students' works .The shortcomings and advantages of the students' works are expressed in detail .He tells us that animation should be coherent, smooth and natural with more creativity. 

Week 5 -

The importance of alignment, maybe a little bit of deviation is not as good as the alignment. Check the student's work to improve the student work .

REFLECTIONS

Experience

In these days of learning, from a beginner who can't learn Illustrator or Indesign at all, I have learned a few tools without knowing it. But it's still a little difficult for me.Typesetting is still a little difficult. I am still learning to think about how to arrange the text, how to design, and how to do anything other than the requirements and how to master the drawing time.What bothers me most is that I cannot finish my homework in time, because every time before I finish my homework, I have to watch the lecture video of the teacher again and again. Otherwise, I have no idea where to start.

Observation

You have to digest what the teacher said over and over again or what are the unsatisfactory things that need to be corrected and that's a very troublesome thing, right.The teacher's lecture videos helped me a lot when I finished my homework.

Discover

Design arrangement can be seen everywhere in our life. From small mobile phone software to large billboards on the roadside, they all tell us that design arrangement has become indispensable in our life. Although I am not very good at using these software, I will still pay attention to these small details of usage, so as to better design and optimize my own works. In the future study, I need to study harder and make progress.

  FURTHER READING

The Vignelli Canon by Massimo Vignelli (2010)

Mr. Vinod recommended The Vignelli Canon by Massimo Vignelli .

In the article, he tells us that three aspects of design are very important: semantics, phrasology and pragmatics. Designers need time to consider, explore, and learn their complexity, their ambiguity. In this way, the limiting factors in the design process can be better developed.

Semantics is a foundation to really have the right start, which is an important part of being a designer. Design without semantics is meaningless and superficial, which in design means that the subject of design needs to be understood from multiple perspectives and aspects. Semantics also needs to transform specific subjects to reflect the most appropriate type, which is the most important and only way to enrich designers to the greatest extent.