Typography / Task 1: Exercises

on


8.27.2021 - 9.24.2021 (Week 1 - Week 5)
Audrey Gracia Djohari / 0348120
Typography
Bachelor of Design (Hons) in Creative Media / Taylor’s University
Task 1: Exercises


POSTS LINKS
  • Task 1 : Exercises
  • Task 2 : Typographic Exploration & Communication
  • Task 3A : Type Design & Communication
  • Task 3B : Type Design & Communication

LECTURES


WEEK 1: 

In this first class of the semester, I met Mr. Vinod for the first time. He opened the class by explaining the Facebook Group which will be the source of all the information for his class. He also told us about the attendance & feedback link that we have to fill in every week, and the Module Information Booklet. 

Next, Mr. Vinod showed some example of the e-portfolios and he explained how to make a good & ideal one. I have watched the Typo_0_Introduction video before the class so it was pretty easy for me to understand what kind of e-portfolio that Mr. Vinod wanted. There was a session where Mr. Vinod gave feedback to some of the students' e-portfolio. At the end of the class, he gave us our first task which was Expression Exercise. We had to choose 3 words from the Facebook poll and we had one week to come up with the ideas and make the thumbnail sketches. 


- Typo_0_Introduction -

Introduction to Typography

Typography can be referred to many things in design. Typography is the act of creating letters and writing styles. Typography is also the creation of typefaces or type families. Typography can also be animation. We can find typography in real life and many design forms, such as website designs, app designs, signage design, labels and logos, books, posters etc.

Typography has evolved over 500 years. From calligraphy to letterings and now typography. And like any other craft that has been developed over time, it employs a number of terminologies (disciplines), conventions, and unwritten rules.

The difference between Calligraphy & Lettering:

  • Calligraphy: The letters are written
  • Lettering: The letters are drawn out

Figure 1.0: Informal Calligraphy

Back in the early 20th century, good writings or good penmanship used to reflect good education and high-class society. So writings were very important as it revealed one's identity, educational background and society class. Unlike today, schools used to spend a large amount of time teaching penmanship with great strictness. But in today's era, good writings are not relevant anymore in the way they were, but it's still important.

Typography Definition
  • Typography is "the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point size, line length, line-spacing (leading), letter-spacing (tracking), and adjusting the space within letters pairs (kerning). The term typography is also applied to the style, arrangement, and appearance of the letters, numbers and symbols created by the process. wikipedia.com

Type History

Website Link: 

Difference between Font & Typeface

  • Font: A font refers to the individual font ot weight within the typeface, l.e.: Georgia Regular, Georgia Italic and Georgia Bold
  • Typeface: a typeface refers to the entire family of fonts/weight that share similar characteristics/styles, l.e.: Georgia, Arial, Times New Roman, etc.

Figure 1.1: Fonts

Figure 1.2: Typefaces



WEEK 2: 

As a starter of this week's lecture, Mr. Vinod explained how to save our Adobe Illustrator work as a JPG. Then, we posted our type expressions sketch on Facebook group. Some of us were given feedback by Mr. Vinod & Dr. Charles so we could develop our work maximally. The objective of this type expressions exercise is not only to get us more familiar with typography, but also to expand our exploration of design by relying only on types. It's important because typography plays a huge role in design industry.

By next week, we are expected to submit our finished digitalization type expressions, we also need to upload the progress steps. Make sure to post the file as JPEG 300 DPI black & white for the final work, and to upload the embedded PDF file. We must use Adobe Illustrator for this exercise.


- Typo_1_Development -


"It is important to contribute to the larger body of knowledge out there from the perspective of wherever you come from. It is important for you as students--who are doing research and be doing research methodology and design dissertation-- to research on local content (a content that comes from your nation and civilization). The responsibility largely lies on you as student designers or student researchers of this particular discipline to give voice to that that doesn't have voice. Give voice to the voiceless" 

– Mr. Vinod

Early Letterform Development: Pheonician to Roman

Initially writing meant scratching 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) can be seen to have evolved out of these tools and materials. At their core, uppercase forms are simple combination of straight lines and pieces of circles, as the materials and tools of early writing required.

Figure 2.0: Right: 4th Century BCE – Pheonicians votive stele Carthage, Tunisia) and Left: Evolution from Pheonician Letter)

The tool that is used has a very important influence of the type of writing that is created. All the instruments and tools have the major role in crafting the types of scripts.

Writing Directions

  • Pheonicians : right to left
  • The Greeks : '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: Greek like the Phoenicians, did not use letter space or punctuations. Latter or the Greeks would move to a strictly left- to-right writing.

Figure 2.1: The Greeks' Writing Direction


Fig 2.2: Greek Fragment, stone engraving

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


Figure 2.3: The Letterform Development from Pheonician to Roman



Hand Script from 3rd–10th Century C.E.

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

Figure 2.4: 4th or 5th century: Square Capitals

2. Rustic Capitals

Rustic Capitals allowed for twice as many words on 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.

Figure 2.5: Late 3rd–mid 4th century: Rustic Capitals


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

Figure 2.6: 4th century: Roman Cursive

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

Figure 2.7: 4th–5th century: Uncials

5. Half-Unicals

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.

Figure 2.8: 500 C.E. Half-Uncials

6. Charlemagne Empire Type

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.

Figure 2.9: 925 C.E. Caloline Miniscule


Blackletter to Gutenberg's Type

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

Figure 2.10: 1300 C.E. Blackletter (Texture)

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.

Figure 2.11: 1455 C.E. 42 Line Bible, Johann Gutenberg, Mainz

Gutenberg developed a mechanism which allowed printing to be done easily and quickly. He developed little matrices that he could put together and form a word, and those words could be put together and formed a  sentence. These sentences became a paragraph and he could print several pages. By doing this mechanism, he was able to produce many Bibles in that era. And this became the tipping point in the Western civilization regarding the publishing large amounts of text.

Development / Timeline of Typography

Figure 2.12: Humanist Script to Roman Type Timeline

Figure 2.13: 1600 C.E. Dutch Printing Timeline


Text Type Classification

Typeforms have developed in response prevailing technology. commercial needs, and esthetic trends. Certain models have endured well past the cultures that spawned them. The following typeform classifications are based on one devised by Alexander Lawson only covers the main form of text type.

1. 1475 Oldstyle

Based upon the lowercase forms used by Italian humanist scholars for book copying (themselves based upon the ninth-century Caroline miniscule) and the uppercase letterforms found inscribed on Roman ruins, the forms evolved away from their calligraphic origins over 200 years, as they migrated across Europe, from Italy to England. 

Examples: 
  • Bembo 
  • Caslon 
  • Dante 
  • Garamond 
  • Janson 
  • Jenson 
  • Palatino
Figure 2.14: 1475 Oldstyle

2. 1500 Italic

Echoing contemporary Italian handwriting, the first italics were condensed and close-set, allowing more words per page. Although originally considered their own class of type, italics were soon cast to complement roman forms. Since the sixteenth century, virtually all text typefaces have been designed with accompanying italic forms.

Figure 2.15: 1500 Italic

3. 1550 Script

Originally and attempt to replicate engraved calligraphic forms, this class of type is not entirely appropriate in lengthy text settings. In shorter applications, however, it has always enjoyed wide acceptance. Forms now range from the formal and traditional to the casual and contemporary. 

Examples: 
  • Kuenstler Srcipt 
  • Mistral
  • Snell Roundhand

Figure 1.16: 1550 Script


4. 1750 Transitional

A refinement of oldstyle forms, this style was achieved in part because of advances in casting and printing. Thick to thin relationships were exaggerated, and brackets were lightened. 


Examples: 

  • Baskerville
  • Bulmer
  • Century
  • Time Roman

Figure 2.17: 1750 Transitional


5. 1775 Modern

This style represents a further rationalization of oldstyle letterforms. Serifs were unbracketed, and the contrast between thick and thin strokes extreme. English versions (like Bell) are also known as Scotch Romans and more closely resemble transitional forms 

Examples: 
  • Bell
  • Bodoni
  • Caledonia Didot
  • Walbaum
Figure 2.18: 1770 Modern

6. 1825 Square Serif / Slab Serif 

Originally heavily bracketed serif, with little variation between thick and thin strokes, these faces responded to the newly developed needs of advertising for heavy type in commercial printing. As hey evolved, the brackets were dropped. 


Examples: 
  • Clarendon
  • Memphis Rockwell
  • Serifa
Figure 2.19: 1825 Square Serif / Slab Serif


7. 1900 Sans Serif 

As their name implies, these typefaces eliminated serifs alltogether. Although the forms were first introduced by William Caslon IV in 1816, its use did not become wide-spread until the beginning of the the twentieth century. Variation tended toward either humanist forms (Gill Sans) or rigidly geometric (Futura). Occasionally, strokes were flared to suggest the calligraphic origins of the form (Optima). Sans serif is also referred to as grotesque (from the German word grotesk) and Gothic. 

Examples: 
  • Akzidenz Grotesk
  • Grotesk
  • Gill Sans Franklin Gothic 
  • Frutiger
  • Futura
  • Helvetica
  • Meta
  • News Gothic
  • Optima
  • Syntax
  • Trade Gothic Univers
Figure 2.20: 1900 Sans Serif


8. 1990 Serif / Sans Serif

A recent development, this style enlarges the notion of a family of typefaces to include both serif and sans serif alphabets (and often stages between the two). 



Examples: 
  • Rotis
  • Scala
  • Stone

Figure 2.21: 1990 Serif / Sans Serif

- Typo_2_Basic -

Lecture Link: https://youtu.be/KlMWFpJ-VQg

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 (terminology). Knowing a letterform's component parts make it much easier to identify specific typefaces.
  • Baseline : The imaginary line of visual base of the letterforms.
  • Median : The imaginary line defining the x-height of lettterforms.
  • X-Height : The height in any typeface of the lowercase 'x',

Figure 3.0: Diagram of Letterform

  • Stroke : Any line that defines the basic letterform
  • Apex / Vertex : The 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: The portion of the stem of a lowercase letterform that projects above the median.
  • Barb : The half-serif finish on some curved stroke.
  • Beak : The half-serif finish on some horizontal arms.
  • Bowl: The rounded form that describes a counter. The bowl may be either open or closed.
  • Bracket : The transition between the serif and the stem.
  • Cross Bar : The horizontal stroke in a letterform that joins two stems together.
  • Cross  Stroke : The horizontal stroke in a letterform that joins two stems together.
  • Crotch : The interior where two strokes meet.
  • Descender : The portion of the stem of a lowercase letterform that projects below the baseline. 
  • Ear: The stroke extending out from the main stem or body of the letterform.
  • 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 en is half the size of an em. Most often used to describe em/en spaces and em/en dashes.
  • Finial : The rounded non-serif terminal to a stroke.
  • Leg : Short stroke off the stem of the letterform, either at the bottom pf the stroke (L) or inclined downward (K, R).
  • Ligature : The character formed by the combination of two or more letterforms.
  • Link : The 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.
  • 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.
  • Spur : The extension of that articulates the junction of the curved and rectilinear stroke.
  • Stem : The significant vertical or oblique stroke.
  • Stress : The orientation of the letterform, indicated by the thin stroke in round stems.
  • Swash : The flourish that extends the stroke of the letterform.
  • Tail : The curved diagonal stroke at the finish of certain letterforms.
  • Terminal : Terminal The self-contained finish of a stroke without a serif. This is something of a catch-all term. Terminals may be flat (T above). flared, acute, ('t' above), grave, concave, convex, or rounded as a ball or a teardrop (see finial).

The Font (Type Family)
  • Uppercase : Capital Letters, including certain accented vowels, the c cedilla and n tilde, and the a/e and o/e ligatures
  • Lowercase : Lowercase letters include the same characters as uppercase

Figure 3.1: Uppercase

Figure 3.2: Lowercase
  • 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 real small caps with those artificially generated.
  • Uppercase Numerals : Also 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 : Also 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.
  • 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.

Figure 3.3: Uppercase Numerals

Figure 3.4: Lowercase Numerals

Figure 3.5: Italic
  • Punctuation, Miscellaneous Characters : Although 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.
  • 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).

Figure 3.6: Punctuation

Figure 3.7: Ornaments

    Describing Typefaces
    • Roman : The letterform is so called because 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 a roman form. Depending upon the relative stroke widths within the typeface, it can also be called 'semibold', 'medium', 'black', 'extra bold', or super. In some typefaces (notably 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.

    Figure 3.8: Typefaces


    Comparing Type Family

    What worth noting isn't the similarities but rather the differences - the accumulation of choices that renders each unique. Beyond the gross differences in x-height, the forms display a wealth of variety, in line weight, relative stroke widths and in feeling. For any typographer these feelings connote specific use and expression. 

    Figure 3.9: The 9 Type Families

    Many people who work seriously with type employ a limited palette of typefaces. Some, in fact, go through their entire careers using only one or two. 

    "You can't be a good typographer, if you aren't a good reader."
    – Stephen Cole

    WEEK 3: 

    - Typo_3_Text_P1 -

    Lecture Link: https://youtu.be/adjqGyk4v_c


    Adobe InDesign

    Adobe InDesign is a publishing software. This software allows us to deal with a large amount of text. For example: making templates, leaflets, brochures that require a lot of texts.

    Shortcuts:
    • T = Type
    • Command + A = Select All
    • Command + Shift + > = Increase Text Size
    • Command + Shift + < = Decrease Text Size
    • Command + ; = Make the Margin and Column Lines Disappear
    • Option + Left/Right Arrow = Kerning

    Tracking : Kerning and Letterspacing

    Definitions:
    • Kerning : The automatic adjustment of space between letters. It is often mistakenly referred to as 'letterspacing.
    • Letterspacing : To add space between the letters. 
    • Tracking : The addition and removal of space in a word or sentence.
    Designers always letterspace uppercase letters, but there has long been strong resistance within the type community to letterspace lowercase letters within text. 

    Uppercase letterforms are drawn to be able to stand on their own, whereas lowercase letterforms require the counterform created between letters to maintain the line of reading. (In other words: Do not letterspace lowercase letterforms)

    Figure 4.0: Kerning
    Formatting Text

    Definitions:
    • Flush Left : This format most closely mirrors the asymmetrical experience of handwriting. Each line starts at the same point but ends wherever the last word on the line ends. Spaces between words are consistent throughout the text, allowing the type to create an even gray value (text on a white page).
    • 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 a symmetrical 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 white space running vertically through the text. Careful attention to line breaks and hyphenation is required to amend this problem whenever possible.
    Figure 4.1: Flush Left & Ragged Right Text

    Figure 4.2: Centered Text

    Figure 4.3: Flush Right Text

    Figure 4.4: Justified Text


    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.

    Texture

    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.

    Figure 4.5: Parts of Letterform

    Figure 4.6: Left (Adobe Caslon) & Right (Baskerville)

    From the Figure above, we can see that:
    • Adobe Caslon : Has slightly smaller x-height, tends to be less readable.
    • Baskerville : Has slightly larger x-height, tends to be more readable.

    Figure 4.7: Left (Bembo) & Right (Adobe Garamond Pro)

    From the Figure above, we can see that:
    • Bembo : Has more contrast, which reduces the efficacy as a typeface.
    • Adobe Garamond Pro : Has larger ascender and descender, the strokes tends to be thicker and makes it more readable.

    Figure 4.8: Left (Bauer Bodoni) & Right (Adobe Jenson Pro)

    From the Figure above, we can see that:
    • Bauer Bodoni : has a high contrast letter so it reduces its readability and legibility.
    • Adobe Jenson Pro : has a thicker stroke width, so it's more readable.
    Figure 4.9: Sans Serif Typefaces

    Leading and Line Length

    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. 

    Definitions:
    • 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 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.

    Figure 4.10: Bad Leading

    Type Specimen Book

    A Type Specimen Book shows samples of typefaces in various different sizes. A type specimen book (or ebook for screen) is to provide an accurate reference for type, type size, type leading, type line length etc.

    Note:
    When you do text formatting, determine the choice of type according to its purpose. If the output is to be printed, you have to print it out to be judged. If it's going to be on the screen, judge the design it from screen. Check the gray value.


    Figure 4.11: Sample Type Specimen Sheet

    Compositional requirement: Text should create a field that can occupy a page or a screen. Ideal text should have a middle gray value, not a series of stripes.

    "The devil is in the details."
    – Jane Jacobs

    WEEK 4: 

    - Typo_4_Text_P2 - 


    Lecture Link: https://youtu.be/u5meWAB32wA
    Indicating Paragraphs

    • Pilcrow: A holdover from medieval manuscripts seldom use today. It is available in most typefaces. It is used in text to indicate paragraph spacing.


    Figure 5.0: Pilcrow

    • If the line space is 12pt, then the paragraph space is 12pt. This ensures cross-alignment across columns of text. 
    • Conclusion: By ensuring the Leading & Paragraph Spacing have equal value, you will ensure cross alignment.

    Figure 5.1: Cross Alignment

    • Line Spacing : The descender from 1 sentence to the descender of another sentence.
    • Leading : The space between 2 sentences


    Figure 5.2: Line Spacing Vs Leading
    • The Indent : is the same size of the line spacing or the same as the point size of your text. It is best used with Justified Alignment.
    • Extended Paragraphs : As seen in the figure below, extended paragraphs create unusually wide columns of text. Despite these problems, there can be strong compositional or functional reasons for choosing it.

    Figure 5.3: Standard Indentation

    Figure 5.4: Extended Paragraphs

    Widows & Orphans

    In traditional typesetting (the kind that still endures among conscientious commercial publishers), there are two unpardonable gaffes-widows and orphans. Designers (specifically those that deal with large amounts of text in websites or books on online magazines or printed magazines, news papers or online journals) must take great care to avoid the occurrence of the the above mentioned. 

    • Widow : a widow is a short line of type left alone at the end of a column of text. 
    • Orphan : an orphan is a short line of type left alone at the start of new column.
    In justified text both widows and orphans are considered serious gaffes. Flush right and ragged left text is some what more forgiving towards widows, but only a bit. Orphans remain unpardonable. 

    Note:
    • Shift + Enter = False Line Break
    • Solution to Widow: is to rebreak (using false line break) your line endings through out your paragraph so that the last line of any paragraph is not noticeably short. Or do some kerning (max. 3 points).
    • Solution to Orphan: Careful typographers make sure that no column of text starts with the last line of the preceding paragraph. Or reducing the length of the column.

    Figure 5.5: Example of Widow & Orphan


    Highlighting Text

    Ways to highlight sentences:

    • Use Italics
    • Use Bold
    • Change the Type Family
    • Change the Color of Text
    • Placing Bullet Fonts
    Note:

    • When highlighting text by changing the font family, reduce the point size of the highlighed sans serif font by 0.5 to match the x-height of the serif typeface.
    • When highlighting text using a field of color, maintaining the left reading axis of the text ensures readability. (recommended color: black, cyan, magenta, yellow)
    • When highlighting using bullet points, 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.

    Figure 5.6: Highlighting Text Using Different Type Family

    Figure 5.7: Highlighting Text Using Color

    Figure 5.8: Highlighting Text Using Bullet Points


    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.

    Types of Headline:
    • A Head : A Head Indicates a clear break between the topics within a section. In the following examples 'A' heads are set larger than the text, in small caps and in bold. The fourth example shows an A head 'extended' to the left of the text.
    • B Head : B Head is subordinate to A heads. B heads indicate a new supporting argument or example for the topic at hand. As such they should not interrupt the text as strongly as A heads do. Here the B heads are shown in small caps, italic, bold serif, and bold san serif.
    • C Head : Although C Head is not common, highlights specific facets of material within B head text. They not materially interrupt the flow of reading. As with B heads, these C heads are shown in small caps, italics, serif bold and san serif bold. C heads in this configuration are followed by at least an em space for visual separation.
    Figure 5.9: A Head Examples

    Figure 5.10: B Head Examples

    Figure 5.11: C Head Examples


    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. In this example, four lines of caption type (leaded 9 pts.) cross-align with three lines of text type (leaded to 13.5pts).

    Figure 5.12: Cross Alignment Example

    WEEK 5: 

    - Typo_5_Understanding -

    Lecture Link: https://youtu.be/k-Vbx50e-eA


    Understanding Letterforms

    The uppercase letterforms below suggest symmetry, however, it is not symmetrical. It's easy to see the two different stroke weights of the Baskerville stroke form (below). Also, each bracket connecting the serif to the stem has a unique arc. From this difference, it can be concluded that certain nuance are necessary for this particular strokes.

    Figure 6.0: Baskerville Letterforms

    The uppercase letterform below may appear symmetrical, but a close examination shows that the width of the left slope is thinner than the right stroke. Both letter forms (Baskerville & Univers) demonstrate the meticulous care of a type designer takes to create letterforms that are both internally harmonious and individually expressive. Also, making the stroke difference on both letter forms affects viewer's optical.

    Figure 6.1: Univers Letterforms

    The complex 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 letterforms finish and how the bowls meet the stems quickly reveals the palpable difference in character between the two.

    Figure 6.2: Helvetica and Univers Letterforms

    Maintaining X-Height

    The x-height generally describe the size of the lowercase letterforms. However, curved strokes, such as in 's', must rise above the median (or sink below the baseline) in order to be the same size as the vertical and horizontal strokes they adjoin. 

    Figure 6.3: X-Height

    Counterforms

    Just as important as recognizing specific letterforms is developing a sensitivity to the counterform (or counter)–the space describes, and often contained, by strokes of the form. The counterforms includes the space between them. How well the counters are handled determines how well the words hang together.

    Understand the form and counter of a letter to examine them in close detail. When designing new letters, It's imporant to analyze the existing typefaces that fall in the same category of the letter. 

    Figure 6.4: Counterforms

    As seen in the Figure below, the letter 'S' holds at each stage of enlargement, while the 'g' tends to loose its identity, as individual elements are examined without the context of the entire lettterform.

    Figure 6.5: Counterforms

    Contrast

    Contrast is the most powerful dynamic in design–as applied to type, based on a format devised by Rudi Ruegg–. The simple contrast produces numerous variations: small + organic/large + machined; small + dark/large light. 

    Figure 6.6: Contrast by Rudy Ruegg


    - Typo_6_Screen&Print -

    Lecture Link: https://youtu.be/h8lTwvffrZw


    Different Medium

    When the internet became phenomenal in the late 80s, everybody was predicting that paper would go out of fashion, when in fact papers were being used even more when Printers were invented. No matter how the screen-use and technology become big part in human life, Tactility and Tactile Feel will always be an important factor. Touching and Feeling are required as part of humans' learning process.

    Screens and prints are the example of design mediums. Print and Screen have a long history in may forms of art– graphic design, 3D animation, New Media, Environmental Entertainment Design, etc. And typography exists in all forms and shapes.

    Figure 7.0: Examples of Typographical Artwork for Prints


    In the past, typography was viewed as living only when it reached paper. Once a publication was edited, typeset and printed, it was done. Nothing changed after that. Good typography and readability were the result of skilled typesetters and designers.

    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 font, 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.

    Print Type Vs Screen Type

    1. Type for Print

    Primarily, type was designed intended for reading from print long before we read from the screen. It's the designer's job to ensure that the text is smooth, flowing, and pleasant to read. A good typeface for prints are:
    • Caslon
    • Garamond
    • Baskerville
    These are the most common typefaces used for print because of their characteristic which are elegant and intellectual but also highly readable when set at small font size. They are versatile, easy-to-digest classic typefaces, which has a neutrality and versatility that makes typesetting with it a breeze.

    Figure 7.1: Example of Typesetting for Print


    2. Type for Screen

    Typefaces intended for use on the web are optimized and often modified to enhance readability and performance onscreen in a variety of digital environments. Screen used to be limited, and it made typefaces very are dependent to the screen. This can affect the quality of the typeface and can include changes for some designs, such as: 
    • a taller x-height
    • reduced ascenders and descenders
    • wider letterforms
    • more open counters
    • heavier thin strokes and serifs
    • reduced stroke contrast
    • modified curves and angles
    Typefaces that are designed specifically and suitable for screen purposes:
    • Verdana
    • Georgia

    Another important adjustment–especially for typefaces intended for smaller sizes–is more open spacing. all of these factors serve to improve character recognition and overall readability in non-print environment, which can include web. e-books, e-readers, and mobile devices.

    3. Hyperactive Link / Hyperlink

    Hyperlink is a word, phrase, or image that you can click on to jump to a new document or a new section within the current document. Hyperlinks are found in nearly all Web Pages, allowing users to click their way from a page to another. Text hyperlinks are normally blue and underlined by default. When you move the cursor over a hyperlink, whether it is a text or an image, the arrow should change to a small hand pointing the link. Hyperlink exists in many different places. Hashtags are the form of hyperlink as well.

    4. Font Size for Screen

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

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

    Web Safe Fonts:
    • Open Sans
    • Lato
    • Arial
    • Helvetica
    • Times New Roman
    • Times
    • Courier New
    • Courier
    • Verdana
    • Georgia
    • Palatino
    • Garamond
    Figure 7.2: Comparison of Screen and Print

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

    Figure 7.3: Pixel Differential

    Static Vs Motion

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


    "Good Design is dynamic, irrespective of the platforms."

    – Mr. Vinod

    Figure 7.4: Static and Dinamic Design Examples

    1. Motion Typography

    Motion Typography Temporal media offer typographers opportunities to "dramatize" type, for letterforms to become "fluid" and "kinetic" (Woolman and Bellantoni, 1999). Film title credits present typographic information over time, often bringing it to life through animation. Motion graphics, particularly the brand identities of film and television production companies, increasingly contain animated type.

    Type is often overlaid onto music videos and advertisements, often set in motion following the rhythm of a soundtrack. On-screen typography has developed to become expressive, helping to establish the tone of associated content or express a set of brand values. In title sequences, typography must prepare the audience for the film by evoking a certain mood.

    2. Example of Good Motion Typography

    Se7en (1995) Intro Credits Link: https://youtu.be/FD7w2l88dl8

    This movie credits and titling is one of the good examples of Motion Typography. It is considered very good as in that time period, this particular type style is new and brilliant. The animations are also good and really portrays the movie's vibes.

    Figure 7.5: Motion Typography in "Se7en" (1995) Intro Credits – A film by David Fincher

    " A great designer knows how to work with text not just as content, he treats text as a user interface."
    – Oliver Reichenstein

    INSTRUCTIONS

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


    PRACTICAL

    - Exercise 1: Type Expressions -

    WEEK 1:

    Type Expressions Sketch

    For this week's exercise, we were assigned to do some type expressions sketches. Simply, the idea is to design a unique graphic form of a word that amplifies the meaning of the word itself, by only using the fonts given. We had to choose 3 words from the Facebook Poll and one mandatory word: "Terror".

    These are the words I chose to design:
    1. Terror
    2. Abyss
    3. Broken
    4. Colossal
    The figure below is the idea sketches that I made on paper using pen. I made 3 models for each word in hopes to get the best one. 


    Figure 3.1 is the digitalized version of the sketch. Unfortunately, I haven't downloaded the Adobe Illustrator App because of a certain problem so I tried to make it using Procreate App just to see the digital version more clearly.


    My favorite version of the word "Terror" is the left image (the scratched one). Because the design really expresses my fear of being terrorized by a predator. I could nearly hear the screeching sound while I was making this one.

    Whereas for the "Abyss" word, I like the left one most. The idea of the letter "y" falling down into the dark bottomless chasm really represents the meaning of "Abyss" itself. And I thought it would be even more appealing when I get to animate the fall.

    The third word is "Broken", and I had to say the right image is the best. It is simple, yet very expressive. I could imagine the letter "k" just hanging there and stay broken.

    And for the "Colossal" word, I definitely choose the left one (the one with the Shadow). I like how the shape of the word creates a perspective which put the viewer at the bottom of the letters, as if looking at a real giant word. Also, the shadow really helps forming a gigantic illusion 



    WEEK 2: 

    Digitization Using Adobe Illustrator

    This week, I had to make my design on Adobe Illustrator. I found Mr. Vinod's tutorial videos guided me very well. And I managed to create all 4 words quite smoothly. Here are some process that I documented:

    Figure 8.2: Process, 09.09.2021

    As the first step, I typed the words with the suitable fonts. For the word "Abyss" I used Futura std, and for "Broken" I used Futura.

    Figure 8.3: Distorting Type Using Free Transform Tool, 09.09.2021

    For the word "Colossal" in Figure 3.3, I had to distort it in order to create a gigantic illusion. First, I selected the text, and then I  went to 'Type' on the top bar and selected 'Create Outline' so that it was no longer recognized as text but rather a form. Next, I used 'Free Transformation Tool' > 'Perspective Distort' to adjust the form. After the first "Colossal" text was done, I created the shadow underneath. I duplicated the text and adjusted the form to create the right perspective, and I went to 'Effect' > 'Blur' > 'Gaussian Blur' to add a blurry effect. I also managed to create a mask so that the type fits the frame.

    Figure 8.4: Drawing with Paintbrush Tool, 09.09.2021

    The font that I used to create the word "Terror" was Garamond std. I stretched the text a bit so it looked taller. And for the scratches, I created them by using Paintbrush Tool on a different layer so that the original text was not distorted.


    Figure 8.5: First Version, 09.09.2021

    Figure 3.5 is the final outcome. I sticked with the first sketch for "Terror", because I felt the scratches could really express something scary and annoying. And I could already imagine the animated version so appealing. 

    And for the second word, "Abyss", I chose to make the one with the 'y' falling down to the unknown. I found it interesting to make the actual abyss in this type expression. 

    The third word, "Broken", I kept it simple by only rotating the 'k' letter. The idea is to make it look like a broken shop sign, so I just let the 'k' letter hanging there. 

    And last one, for "Colossal", I tried playing with the perspective to create a colossal figure.


    Type Expressions Final

    Here are the revised and final type expressions. I changed the squares' color for the word Abyss into grey like what Mr. Vinod suggested. I also changed its type so it looks more condenced and taller. For the word 'broken' I changed the 'b' into a lowercase because Mr. Vinod said it would be more balanced.

    Figure 8.6: Final Outcome (Revised) in JPEG, 09.16.2021

    Figure 8.7: Final Outcome (Revised) in PDF, 09.16.2021

    WEEK 3:

    Type Expression Animation

    For this week's assignment, I chose the word revised 'Broken' to be animated, because I could make the animation really convey the meaning of the word and I didn't have to use any graphical elements. The font I used was Futura Medium for this one. 

    Figure 9.0: Making Artboards in Adobe Illustrator, 09.16.2021

    The idea was to make the letter 'k' fall down and break when it crash to the ground. And to make it look more like a broken sign, I did not let the 'k' fall down immediately, but I made it swing a bit to the left before it fell. And I imagined the word was made of fragile glass, so it broke down into small pieces.

    Figure 9.1: Using Timeline in Adobe Illustrator, 09.16.2021

    I originally made 22 artboards in Illustrator but I deleted some frames in Photoshop to make the movement smoother and more natural. I ended up using 17 frames for the GIF. The figure below is the final outcome.

    Type Expression Animation Final
    Figure 9.2: Final Outcome, 09.16.2021



    - Exercise 2: Text Formatting -

    Exercise 1:4

    or this exercise, I used Adobe InDesign to do the text formatting. The task was pretty simple but I really had to pay attention to the details. These are the comparison images of my first type formatting exercise. Here, I wrote my names with 10 different typefaces. After that, I did some kernings to balance the space between the letters. I put the font name on the left and my name on the right and I adjusted their positions so they are cross-aligning.

    Figure 10.0: Text Formatting Without Kerning, 09.23.2021


    Figure 10.1: Text Formatting With Kerning, 09.23.2021


    Exercise 2:4 to 4:4

    For the these tutorial videos, Mr. Vinod gave us an article and some photos. Our job is to create the text formation in Adobe InDesign. 

    Things that I learned:
    • Adjust the Margin (Layout < Margins and Columns)
    • Font = 8 - 12 pt (General Size for A4 and A3 Text Formatting)
    • Line Length (in a sentence) = 55-65+ (General Size for A4 and A3 Text Formatting)
    • Leading = +2 from Font size (General Size for A4 and A3 Text Formatting)
    • Use kerning to balance the letters in paragraphs. Decrease the shragging
    • Adjust the Grids to have the perfect baseline. (InDesign < Preferences < Grids < Change the 'Increment Every'  to the same size as the leading and paragraph spacing)

    Figure 10.2: Before Doing Kerning, Leading and Aligning , 09.23.2021


    Figure 10.3: After Doing Kerning, Leading and Aligning, 09.23.2021


    I created 4 designs for this task to see how I can explore the layout:

    Figure 10.4: Text Formatting Idea Explorations, 09.23.2021


    Figure 10.5: Cross Alignment, 09.23.2021


    Lecture 2:4 to 4:4 Final Outcome

    I eventually choose the #4 Layout because I think it's neat and perfectly balanced. I also love how the pictures are placed on the right side of the layout. 

    Mr. Vinod said that the previous sub heading was a bit too far away from the headline, and I already fixed it. The figures below are the revised version.

    Figure 10.6: Final Cross Alignment 09.23.2021


    Figure 10.7: Final Layout Outcome (Revised) in JPEG, 09.23.2021



    Lecture 4:4 Final Outcome

    Figure 10.7: Final Layout Outcome (Revised) in PDF, 09.23.2021

    FEEDBACK


    WEEK 1: E-Portfolio

    General Feedback
    Mr. Vinod asked the students to watch the tutorial video first so we could make the ideal e-portfolio with proper orders. He also prefer a clear themed blog that was easy to see, so it was important to choose the right color & font of the blog. There were many errors in creating the horizontal rules, we had to use <hr in HTML view. Lastly, he wanted us to be more consistent in using capital letters.


    WEEK 2: Type Expressions

    General Feedback
    Less distortion is better. Keep the design focused on the types, try not to use too much illustration.

    Specific Feedback
    For the e-portfolio, use false line break for the Blog details (name, student ID, weeks), don't use paragraph spacing. And try not to embed the JPG files, just upload it. Only embed PDF files.

    Student Feedback
    1. Are the explorations sufficient (sufficient means enough)? The variations and exploration of ideas are enough.
    2. Does the expression match the meaning of the word? Yes
    3. On a scale of 1–5, how strong is the idea? 5, the ideas are unique and they convey the meaning of the words well.
    4. How can the work be improved? Use less distortion for the word 'Colossal'.


    WEEK 3: Type Expression

    General Feedback
    Use no color, and pay attention to how the four words are presented as a whole. Make the design convey the obvious meaning of the word.

    Specific Feedback
    The idea of using the scratches in 'Terror' is good, but the outline can go so the use of graphical element is less. For the word 'Abyss', the squares could be changed into grey so they don't look so imposing. And for the word 'Broken', it's better to use no capital letters at all to make it more balanced. Whereas for 'Colossal', better to use less distortion.


    WEEK 4: Type Expression Animation

    General Feedback
    The animations can be smoother if more frames are added to it. Make sure that the animations expresses the word well. Pay attention to how things move in real life, so that the animations look natural. 

    Specific Feedback
    1. Is the animation suitable? Yes, the letter 'k' has done a good job in being 'broken'. 
    2. Does the animation reflect or enhance the meaning of the word? Yes, it represents the meaning of the word 'broken'. 
    3. Does the animation reflect the form being expressed? Yes it does. 
    4. Does the animation create a smile in your mind? Yes, the idea of it look like a sign that breaks down is cute. 
    5. How can it be improved? The movement can be more smooth by adding more frames. And better to add one more swing so it's more expressive and natural.

    WEEK 5: Final Submission

    General Feedback
    Final Submission must have both JPG and PDF. Remember to submit everything in the proper format. The lectures need to be complete.

    Specific Feedback
    Text Formatting: For the Text Formatting Project, I came out with 4 design, I chose the fourth design as my final submission. Mr. Vinod said the cross alignment has been achieved. The layout is decent and pretty good. The subheadline is a bit too far away, but it is already a good work. (Update: I've fixed the subheading and updated them in blogs)
    E-Portfolio: Mr. Vinod said the way I have updated my e-portfolio and lectures are extremmely comprehensive. Good work on the progression documentation. However, the JPG for the Type expression final is not in the proper format. (Update: I've fixed the format and updated them in blogs)

    REFLECTION

    Experience
    Typography class is quite different from any other classes, I have to pay more attention to details, hierarchy and order in this module. I felt a bit overwhelmed at first as I never used Adobe Illustrator, Photoshop and InDesign. However, thankfully the lecture videos were very clear and helpful. This class has enabled me to open a lot of new skills in Adobe Software: designing in Illustrator, animating gifs using Photoshop, doing text formatting. Overall, typography is interesting and this module really opens my view to the vast world of Typography which I have never known before.

    Observations
    First, I observed that in Typography paying obsessive attention towards detail is crucial, and typography is indeed a discipline. Secondly, I noticed that lecture videos helped me a lot to absorb and process what Mr. Vinod explained in class. And I realized that feedbacks are needed in order to improve my design, it allows me to see the problems that I did not notice before.

    Findings
    I found that turns out Typography plays a huge world in design, and to be a good designer I have to learn typography. And in order to be a good typographer (hopefully) I must learn to be more detailed towards my work. I also found that using Adobe Software is not as hard as I thought when I really pay attention to the tutorial videos, but it's still challenging though.


    FURTHER READING

    A Type Primer (2002)

    Figure 11.0: A Type Primer (2002)

    Reference:
    Kane. J. 
    (2002) A Type Primer. 
    London: UK: Laurence King

    This book briefly goes through the history of typography, and it focuses more on the details of doing typography, it's like a manual book. It explains how letters can emphasize certain meanings of words, text format and grid layouts. 

    I could find most of the explanation on Mr. Vinod's lecture videos in this book, for example: typefaces definition, letterforms, text type classifications, headings, layouts, etc. Even the most detailed parts of typography like ligature is explained in this book. This book also includes a few exercises. 

    Figure 11.1: Pg. 4, A Type Primer (2002)


    Typographic Design: Form and Communication (2015)

    Figure 11.2: Typographic Design: Form and Communication (2015)

    Reference:
    Carter, R., Day, B., Meggs, P. B., Maxa, S., & Sanders, M.
    (2015). Typographic design: Form and communication.
    Hoboken, New Jersey: John Wiley & Sons, Inc.

    Chapter 10: Case Studies in Typographic Design:
    1. Words and images should become a unified composition. Don’t put the type on the image, but in the image. 
    2. A dynamic integration of word and image is achieved through unexpected and original compositional relationships between prictorial and Typography forms. 
    3. Helvetica is a good font for screen, its crisp, clean details and typographic texture that make it aesthetically pleasing and easy to read. Helvetica’s clearly defined hierarchy of sizes and weights with predictable results, large x-height with good line strength and consistent color. Also it has an outstanding printing characteristics. 
    4. Text type is often justified, and columbs are aligned top and bottom to create horizontal movement. Sometimes the last column will run short. One line space, rather than an indentation is used to seperate paragraphs. 
    5. Separate the images with the types. Don’t let them overlapping each other. 
    6. When it comes to movie titles, The synergitic relationship between type and image is fully developed as they move in time and space.
    Figure 11.3: Pg. 175, Typographic Design: Form and Communication (2015)



    Figure 11.4: Pg. 172, Typographic Design: Form and Communication (2015)

    Comments

    Post a Comment