Typography Task 1: Exercise 1 & 2

August 26, 2021

Typography Task 1: Exercise 1 & 2

27-08-21 - 24-09-21 (Week 1 - Week 5)

Darren Liga // 0351480

Typography // Bachelor of Design (Honours) in Creative Media
Task 1: Exercise 1 & 2

LECTURES

Week 1:

Live:

Intro to blogger.com, practice of creating our e-portfolio, heading template, organizing by subject per semester as well as embedding MiB for all blog posts. Briefing about the first exercise on play with type expressions.

Recorded:

History of Typography

Early letterform development: Phoenician to Roman

Initially writing meant scratching into wet clay with sharpened stick or carving into stone with a chisel. Uppercase letters were the only letterform for nearly 2000 years which was evolved from those tools and materials. Example of the 4th century B.C.E. typography:

Fig 1.1: Example 1 (30/8/21)

Early Letterform development: Phoenician to Roman

The greeks changed the direction of writing named 'boustrophedon' (how the ox ploughs). This is a form of writing that goes from left to right, then right to left. Not only they change the direction of reading, they also changed the orientation.

Fig 1.2: Boustrophedon (30/8/21)

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

Fig 1.3: Evolution of typography (30/8/21)

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.4: 4th or 5th century square capitals (30/8/21)

Rustic Capitals- A compressed version of square 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.5: 4th or 5th century rustic capitals (30/8/21)

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.6: 4th century roman cursive (30/8/21)

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.

Fig 1.7: 4th to 5th century uncials (30/8/21)

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

Fig 1.8: C.500 Half-uncials (30/8/21)

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

Fig 1.9: C.925 caroline minuscule (30/8/21)

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

Fig 1.10: c.1300 blackletter(textura) (30/8/21)

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

Fig 1.11: c.1455 42line bible (30/8/21)

Text type classification (Dates of Origin approximated to the nearest quarter century)

1450 Blackletter

The earliest printing type, its forms were based upon the hand-

copying styles that were then used for boxoks in northern Europe.

1475 Oldstyle

Based upon the lowercase forms used by Italian humanist scholars

for book copying (themselves based upon the ninth-century Caroline

minisule) 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

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.

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 Script • Mistral • Snell Roundhand forms.

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

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

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

1900 Sans Serif

As their name implies, these typefaces eliminated serifs altogether

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

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

Week 2:

Live Lecture:

Feedback session for sketches, explaining further for type expression such as ideation.

Recorded Lecture:

Lecture about basics of typography

Baseline: The imaginary line the visual base of the letterforms

Median: The imaginary line defining the x-height of letterforms

X-height: The height in any typeface of the lowercase "x"

Fig: 3.1: type anatomy (10/9/21)

Stroke: Any line that defines the basic letterform

Fig 3.2: stroke (10/9/21)

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

Fig 3.3: Apex Vertex (10/9/21)

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

Fig 3.4: Arm (10/9/21)

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

Fig 3.5: Ascender (10/9/21)

Barb: The half serifs finish on some curved stroke

Fig 3.6: Barb (10/9/21)

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

Fig 3.7: Bowl (10/9/21)

Bracket: The transition between the serif and the stem.

Fig 3.8: Bracket (10/9/21)

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

Fig 3.9: Cross Bar (10/9/21)

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

Fig 3.10: Cross stroke (10/9/21)

Crotch: The interior space where two stokes meet

Fig 3.11: Crotch (10/9/21)

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

Fig 3.12: Ear (10/9/21)

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 of an em, Most often used to describe em/en spaces and em/en dashes.

Fig 3.13: Em/en (10/9/21)

Ligature: the character formed by the combination of two or more letterform

Fig 3.14: Ligature (10/9/21)

Link: The stroke that connects the bowl and the loop of a lowercase "G".

Fig 3.15: link (10/9/21)

Spine: The curved stem of the S.

Fig 3.16: Stem (10/9/21)

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

Fig 3.17: Stress (10/9/21)

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

Fog 3.18: Swash (10/9/21)

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, or rounded as a ball or a teardrop.

Fig. 3.19: Terminals (10/9/21)

Uppercase: The capital letters of the alphabet are uppercase glyphs. Uppercase letters are normally used at the beginning of sentences and as the first letter of proper names.

The term uppercase is derived from the days of metal type where the lesser used capital letters were kept in the harder to reach upper case while the more frequently used letters were kept nearer at hand, in the lower case.

Uppercase letters are created on the standard keyboard by holding down the “shift” key while typing a letter or by pressing the “Caps” key then typing (to make all letters uppercase).

Fig 3.20: Uppercase (11/9/21)

Lowercase: The little letters or non-capital letters of the alphabet are lowercase glyphs. They make up the bulk of written text, with uppercase or capital letters used primarily only to start sentences or proper names.

The term lowercase is derived from the days of metal type where the more frequently used letters were kept near at hand in the lower case while the less frequently used capital letters were kept in the harder to reach upper case.

Fig 3.21: Lowercase (11/9/21)

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.

Fig 3.22: Small Capitals (11/9/21)

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.

Fig 3.23: Uppercase Numerals (11/9/21)

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.

Fig 3.24: Lowercase Numerals (11/9/21)

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 3.25: Italics (11/9/21)

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.

Fig 3.26: Punctuations (11/9/21)

Week 3:

Recorded Lecture:

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 4.1: Kerning (13/9/21)

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

Fig 4.2: letterspace1 (13/9/21)

Tracking: a term used to identify the way you decrease or increase the horizontal spacing between a range of letters or characters. Usually, this technique is a method designers leverage to adjust and fine-tune the letter spacing of a logo, or font on a website. It works alongside kerning and leading.

Fig 4.3: Normal Tracking vs loose (13/9/21)

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.

Fig 4.4: Flush Left example (13/9/21)

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.

Fig 4.5: Flush Right example (13/9/21)

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.

Fig 4.6: Justified example (13/9/21)

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

Week 4:

Recorded Lecture:

Typography: Text / Text Formatting

Pilcrow: The pilcrow, ¶, also called the paragraph mark, paragraph sign, paraph, or blind P, is a typographical character marking the start of a paragraph.

Fig 5.1: Pilcrow (19/9/21)

Line Space: In typography, leading is the space between adjacent lines of type; the exact definition varies. In hand typesetting, leading is the thin strips of lead that were inserted between lines of type in the composing stick to increase the vertical distance between them.

Fig 5.2: line space (19/9/21)

Leading vs Line Spacing:

Leading is like jelly betwixt the bread of a typographic sandwich. Line spacing is equal to one layer of jelly plus one slice of bread. If you have a 48 pt line of type with 12 pt leading, your line spacing is 60 pt.

Fig 5.3: line spacing vs leading

Indentation:

The purpose of an indent is to create a visual separation between paragraphs. The most commonly used indent is the first line indent. There's no hard-and-fast rule about how much to indent your first lines, but make sure the space is proportionate to the size and column width of your text.

Indentation was first used to reduce paragraph space in newspaper to cramp and save space. Best used when justified, if not there will be ragging on the left and right.

Fig 5.4: Indentation (19/9/21)

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.

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

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

Fig 5.5: widow & orphan example (19/9/21)

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.

The only solution to widows is to rebreak your line endings through out your paragraph so that the last line of any paragraph is not noticeably short.

Orphans, you might expect, require more care. Careful typographers make sure that no column of text starts with the last line of the preceding paragraph.

Typography: Text / Highlighting Text

The following are some simple examples of how to highlight text within a column of text. Different kinds of emphasis require different kinds of contrast.

Fig 5.6: italics to highlight text (19/9/21)

Fig 5.7: bold to highlight text (19/9/21)

In this example the sans serif font (Univers) has been reduced by .5 to match the x-height of the serif typeface. 8 ≠ 7.5

Fig 5.8: change type family to highlight text (19/9/21)

Fig 5.9: color to highlight text (19/9/21)

Another method for highlighting text by placing a field of colur at the back of the text, maintaining the left reading axis (right example) of the text ensures readability is at its best.

Fig 5.10: adding color behind text (19/9/21)

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

Fig 5.11: placing elements outside the reading axis (19/9/21)

Quotation marks, like bullets, can create a clear indent, breaking the left reading axis. Compare the indented quote at the top with the extended quote at the bottom.

Fig 5.12: quotation mark

A prime is not a quote. The prime is an abbreviation for inches and feet. Due to the limited number of keys on a typewriter, they were substituted. The were later known as ‘dumb quotes’. When used as quotes today in typesetting they aren't just dumb but criminal.

Example: inches, feet

Fig 5.13: Primes (19/9/21)

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.

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.

Fig 5.14: A-head (19/9/21)

The B head here 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.

Fig 5.15: B-head (19/9/21)

The C heads, although 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. Important to have 2 space bars between the c-head and the line before it.

Fig 5.16: C-head (19/9/21)

Putting together a sequence of subheads = hierarchy.

Obviously there is no single way to express hierarchy within text; in fact the possibilities are virtually limitless.

Fig 5.17: subheads = hierarchy (19/9/21)

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

Fig 5.18: cross alignment example 1 (19/9/21)

One line of headline type cross-aligns with two lines of text type, and (right; bottom left) four lines of headline type cross-align with five lines of text type.

Fig 5.19: cross alignment example 2 (19/9/21)

Typography: Letters / Understanding 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 6.1: symmetry of up A s (19/9/21)

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 (below) demonstrate the meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive.

Fig 6.2: symmetry of up A ss (19/9/21)

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 6.3: symmetry of low A (19/9/21)

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 6.4: x-height (19/9/21)

Typography: Letters / Forms / 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.

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 6.5: Counterform (19/9/21)

One of the most rewarding way to understand the form and counter of a letter is to examine them in close detail. The examinations also provide a good feel for how the balance between form and counter is achieved and a palpable sense of letterform’s unique characteristics. It also gives you a glimpse into the process of letter-making.

Its worth noting here that the sense of the ‘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 letterform.

Fig 6.6: Form & Counter (19/9/21)

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.

The simple contrasts produces numerous variations: small+organic/large+machined; small+dark/ large light …

Fig 6.7: important diagram -mr. vinod (19/9/21)

Week 5:

Typography in Different Mediums

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

Print Type Vs Screen Type

- Type for Print

Primarily, type was designed intended for reading from print long before we read from screen. It’s the designer’s job to ensure that the text is smooth, flowing, and pleasant to read.

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.

They are versatile, easy-to-digest classic typeface, which has a neutrality and versatility that makes typesetting with it a breeze.

Fig 7.1: Print Example (20/9/21)

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

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 the non-print environment, which can include the web, e-books, e-readers, and mobile devices.

Hyperactive Link/ hyperlink

A 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 page to another. Text hyperlinks are normally blue and underlined by default. When you move the cursor over a hyperlink, whether it is text or an image, the arrow should change to a small hand pointing at the link.

Font Size for screen

16-pixel text on a 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 at 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

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

Example: Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond

Fig 7.2: Screen vs Print (20/9/21)

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

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

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.

INSTRUCTIONS

EXERCISE TASK 1

I did several attempts on sketching for type expression.

Fig 2.1 Water Sketch Type Expression 01/09/21

Fig 2.2 Glitch Sketch Type Expression 01/09/21

Fig 2.3 Broken Sketch Type Expression 01/09/21

Fig 2.4 Echo Sketch Type Expression 01/09/21

Fig 2.5 Terror Sketch Type Expression 01/09/21

Digitalization phase 1

I started by putting my sketches in illustrator to get an idea of what to start digitally. I then tried typing 4 of my words using all 9 fonts to get a better visual meaning connecting the words with emotion/expression.

Fig 3.1: Digital step 1 (5/9/21)

Firstly, i started by recreating the text "terror". As the feedback i got mentioned that my sketches for terror does not depict the actual meaning of that word, i had to redesign the whole type expression. I tried typing the word terror using all the 9 fonts, i then went with the typeface Bembo Std as it is a serif type font which in my opinion matches the text terror accordingly due to its decorated nature. I initially had this idea:

Fig 3.2: Rough digital "sketch" for terror type expression (5/9/21)

I then went with this design which i emphasize more on the depth of the meaning.

Fig 3.3: revision of terror 1 (5/9/21)

I tried messing with the red color for this text type, after several glances at this flat design. i continued tweaking the type expression.

Fig 3.4: Final revision of terror 2 (5/9/21)

After im happy with the design for "terror" type expression i continued with my second choice of word, glitch. i also did the same process for the type expression "glitch" by trying all fonts. I then went with a simple sans serif font Futura Std as i need a minimalist text for the intense glitch effect to not be crowded and unpleasing. I started by layering the text with blue and red text to intensify the type-expression further like:

Fig 3.5: Glitch step 1 (5/9/21)

I then continued to make elongated rectangles using the shape tool for the "glitch" effect.

Fig 3.6: Glitch step 2 (5/9/21)

After drawing the shapes i then continued to intensify the text by distorting the selected shapes left and right unevenly until im satisfied with the final result.

Fig 3.7: Glitch type expression final (6/9/21)

I then continued with the word "echo". From the sketch i already had an exact idea of how i wanted to digitalize this text. I wanted to create some sort of huge depth on a tight space to emphasize that "echo". effect. I then wanted to play with the text to create some sort of 3 dimensional effect sort of like a shallow depth of field when using a high aperture camera. I messed with the blur effect tool in Adobe Illustrator to recreate that "bokeh" effect. But before all that, i started again with trying all 9 fonts for that text to see which fits best for my choice of word.

Fig 3.8: Echo trial 1 (6/9/21)

My choice of font for "echo" is a fat and bold sans serif, Univers Std in full uppercase. I went with this font because i need the word "echo" to have a full and dominant character as i wanted to create that depth of field from a "deep and narrow" surrounding which naturally gets you an echo in nature. For that "deep and narrow" background, i would like to keep my type expression minimal without the extensive use of graphical drawings. I went for a radial gradient to fill the background for my text with the color black being in the middle to give an impression of a deep, never-ending deep hole to work in conjunction with my text.

Fig 3.9: Echo step 1 (6/9/21)

To create that bokeh effect as if the word "echo" is actually echoing in that never-ending pit, i duplicated the word and use the radial and gaussian blur effects on layers.

Fig 3.10: Echo Step 2 (6/9/21)

I did this for several layers with different blur intensity to get that "bokeh" look i am after, until i am satisfied with the final outcome for that type expression.

Fig 3.11: Echo Final type expresion (6/9/21)

Lastly, the play for broken type expression. I continued with the regular, trying of all fonts to see which best depict the word "broken".

Fig. 3.12: broken type expression trial (6/9/21)

I chose the font Serifa Std to represent my "broken" text. In my opinion i would like to express the word not just 2 dimensionally, after analyzing i wanted to visually communicate with my intended audience that this text is submissive and passive. I went with a light, non-bold serif that does not scream authority, in lowercase. I then came up with this from my sketches.

Fig. 3.13: Broken final (6/9/21)

After digitalizing the text expression, for week 3 practical session we were instructed to create a gif from the 4 type expression we made. For this exercise, the gif would visually communicate its type expression further due to its moving picture. I chose my glitch expression for this gif.

Gif 1.1: Glitch type expression

Digitalization phase 2

After the first attempt for digitalization, my work was analyzed by Mr. Charles for its strength and weaknesses. I was told that my glitch and broken type expression worked well representing its expression. On the other hand, my terror and echo does not really portray a good representation of its meaning. Furthermore, i had to make my glitch and terror color-way black and white because of the color usage which was not allowed for this exercise. From the feedback given by Mr. Vinod and Mr. Charles, i then improved my work to the following:

Fig 4.1: Type expression revision 1 (10/9/21)

For this revision, i did not have screenshots of the progress, due to only little changes are made.

Fig 4.2: Echo revised (10/9/21)

For this echo revision type expression, i was advised that the radial blur behind the text was overwhelming. By removing it completely, i was able to create a better visual representation of the word itself using typography alone without illustration.

Fig 4.3: Terror revised (10/9/21)

I made slight changes for terror, mainly reducing its distortion as the brief stated that intense distortion is not allowed. From my progress of designing this terror type expression, Mr Vinod mentioned the part where the text "error" was not distorted played a better role on this expression. The red color was also removed and i changed it black and white. I moved its position from having everything center aligned, i only made the large "T" center. This is because i couldnt express the design using color, i then use another method for emphasis, I would like to emphasize the T to be "terrorizing" the following letters.

Final Text Expression

Fig 5.1: Final Text Expression (jpg) (17/9/21)

Final Type Expression Animation

Gif 1.1: Echo 1 (17/9/21)

Gif 1.1: Echo 2 (17/9/21)

Task 1: Exercise 2 - Text Formatting

For exercise 2, we were given a text to be designed into a proper typography text format. From the recorded lectures, our knowledge on kerning, leading and etc will be used for this part of the exercise using Adobe InDesign.

Recorded Tutorial 1

From this part of this tutorial, we played around with the given 10 fonts with our names written in all 10 fonts. From there, we experimented with kerning:

Fig 8.1: Kerning: on (21/9/21)

Fig 8.2: Kerning: off (21/9/21)

Fig 8.3: Kerning: compared (21/9/21)

Recorded Tutorial 2-4:

This part of the tutorial was all about the do's and don'ts in text formatting which are:

- Leading: +2pt / +2.5 / +3 from point size depending on type face

- Line Length: 55-65 characters (including space)

- Tracking for 1 line: not exceeding +3/-3 adjustments

- Hyphenation off, unless justified (minimal hyphens)

- Maintain Cross alignment

- Never use left or center align (for now)

- No forced line break, in the place of paragraph space

- No Rivers for justified

- No Widows

- No Orphans

Fig 9.1: Text formatting design 1 (21/9/21)

I started out using this layout while familiarizing Adobe InDesign as this is my first time using it. I followed the tutorial to not have any red flags in the format. Details are seen below:

Fig 9.1: Text Formatting 1 (details) (21/9/21)

For my first attempt, i took my time to fix the text format until no red flags are present. I started with the body text being ITC Baskerville at 9.5pt, all left aligned. Then proceeding to have hierarchy by increasing the Heading point size. I then changed the leading to 11, as per instruction while setting the baseline guide to the same leading for cross alignment. I then used kerning and tracking to reduce the jagged edges (ragging) of the body text while hyphenation stayed off. Finally, i turned on hidden characters to see whether a forced line break was present, and whether there are double spaces between words. Mr. Vinod really made my eyes pop due to the body text having a lot of traps with the double spaces.

After fixing all the traps set by Mr. Vinod, I use this first layout and copied it to plain text for my other layout designs.

Fig 9.3: Text formatting layout design 2 (21/9/21)

For my second layout, i used a different approach for the text formatting. Compared to the first layout design which was left aligned, this second layout i played around with left justification. I wanted to try out this method as from the lecture, the approach to format these 2 types of text are a bit different when adjusting to create a pleasing and readable typography. I started by switching the font family, sans serif for title, serifs for body. then i had to adjust the settings once again to align everything with the baseline guide. A lot of tracking had to be done because the hyphenations were just too much in the body text. For the title, i had to double to leading to maintain cross alignment, and that everything sits perfectly in the baseline guide. i made sure no orphans and widows were present. Finally, i highlighted the quotation using bold italics, as mentioned in the lecture. I also checked several times for the line length to be in the range of 55-65

I then continued to create 1 more layout, using the fixed text.

Fig 9.4: Compilation of layouts (21/9/21)

Fig 9.5: Text Formatting 1 (21/9/21)

Fig 9.6: Text Formatting 2 (21/9/21)

Fig 9.7: Text Formatting 3 (21/9/21)

Final Text formatting layout

Fig 9.8: Final Text Formatting layout (23/9/21)

FEEDBACK

Week 1:

General Feedback: Lecturer gave feedback on keeping the whole blog in default without any customization unless we are very sure of our decision, and to refrain from doing so until the middle of the semester.

Specific Feedback: Name of my blog should be under <my name> <class id> and not modified. The header for subject should include the type of assessment given although stated on the main description because Mr. Vinod is highly methodical and he got OCD.

Week 2:

General Feedback: Lecturer explained for the type expression exercise. He explained that the size for sketches does not have to be too big as it would be too time consuming (hand sketched). Lecture mentioned to never design anything with half-cuts, even though its fairly even, it looks disturbing.

Eportfolio should be consistently updated weekly. Date for blog should be written for every panel after lecture. Update feedback on the class's spreadsheet. Embed PDF file, not JPG/image file, upload directly.

Specific Feedback: Some of my sketches seem to simple, for terror, it does not really portray the word well. Change eportfolio theme because of the text size at the top of the blog. Updates for the blog should be done. My link for the blog on the class's spreadsheet should be updated directly to the typography label.

Week 3:

General Feedback: Color illustration for type expression cant be used because the use of color will be to overpowering and messy. Illustration cant be used, little distortion would work best.

Specific Feedback: My digitalized type expression was analyzed by Mr. Charles, he commented on my echo and terror text play which was colored. My problem with the echo type expression was it being to graphic due to the radial blur and less integrated with typological elements. Secondly, terror was a bit too distorted and the following letters "error" could be straightened and improved.

Week 4:

General Feedback: We were asked to understand the words to get better final results for the animation.

Specific Feedback: For the gif animation, the feedback from Mr. Vinod was positive for the first time. Theres no changes to be made.

Week 5:

General Feedback:

Specific Feedback:

REFLECTION

Experience

Although we were given limited fonts to play around for this exercise, i wasn't facing difficulties on the type expression play because i feel that just from those 10 typefaces, i was able to create my type expression properly. Even without using graphical elements or colors. My first challenging encounter was when we were asked to create a gif animation as i have never done animating before. Although after several trial and errors, i quickly learn how to create the animation using both adobe photoshop and illustrator. For the second part of the first exercise, text formatting, i really like this part of typography as it deals with rules which creates a nice and easy reading layout. Text formatting was a bit of a struggle for me, not for the formatting part, but the application Mr. Vinod asked us to use. I am not familiar, i have not even used that app before, so while i was watching the tutorial in Youtube, i was slowly learning to use InDesign properly which made it interesting for me. Hence, anything that needs to do with typography, i would quickly decide on opening InDesign. There are a lot of rules to follow, but due to my experience in typography, it was quite easy for me. I really appreciate and try to learn the first exercise because in my opinion, it would be the base for the upcoming assignments, and even for other subjects because, typography is all around us.

Observations

Throughout this exercise given, up to week 5, I started to see typography being used everyday. I started seeing texts in posters, billboards, and trying to comment on it. I observed the 'art' in typography as it is the basic build block of designing good artwork.

Findings

I have discovered that once i have understood the rules in typography, it isn't that hard to perfect our text formatting. I have a passion for this part of typography and quite particular as well with the rules and such, as i could consider myself being a perfectionist. This is because typography compared to other principles of art and design is the only module ive learned so far which has "rules" that needs to be perfected.

Search This Blog

Darren Liga (0351480)

Typography Task 1: Exercise 1 & 2

LECTURES

INSTRUCTIONS

EXERCISE TASK 1

FEEDBACK

REFLECTION

FURTHER READING

Comments

Post a Comment

Popular Posts

Major Project: Final Project

Advanced Typography: Task 1: Typographic Systems and Type Play