Typography - Task 1: Exercise 1 & 2

28.3.2022 - 25.4.2022 (Week 1 - Week 6)
Tan Yi-Tyng (0353327)
Bachelor of Design (Hons) in Creative Media
Typography
Task 1: Exercise 1 & 2

LECTURE

Typo 0 – Introduction

Typeface: refers to the entire family of fonts/weights that share similar characteristics/styles, I.e.: Georgia, Arial, Times New Roman, Didot and Futura.

Font: more specific way of defining the kind of text you’re using, it refers to the individual font or weight within the typeface, I.e.: Georgia Regular, Georgia Italic and Georgia Bold.

Fig 1.1 Font & Typeface

Typo 1 - Development

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

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

Greeks changed the direction of writing. Phoenicians wrote from the right to left, but the Greeks created a style of writing called 'boustrophedon' which means 'how the ox ploughs'. The style consisted of words being read from left to right and right to left with no use of letter space or punctuation.

Fig 1. 3 The Greeks' Writing Direction

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

Fig 1.5 The Letterform Development from Pheonician to Roman

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

Square capitals

- 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.6 4th/5th century: Square capitals

Rustic capitals

-Compressed version of square capitals

-Allowed for twice as many words on a sheet of parchment and took far less time to write. Although faster and easier to, but were slightly harder to read due to their compressed nature.

-The pen or brush was held at an angle of approximately 30° off the perpendicular.

Fig 1.7 Late 3rd – mid 4th century: Rustic capitals

Roman Cursive

-Both square and rustic capitals were typically reserved for documents of some intended performance

-Everyday transactions, however, were typically written in cursive hand in which forms were simplified for speed.

-The beginning of what we refer to as lowercase letterforms.

Fig 1.9 4th Century - Roman Cursive

Uncials

-incorporated some aspects of the Roman cursive hand, especially in the shape of the A, D, E, H, M, U and Q.

-simply as small letters

-the broad forms of uncials are more readable at small sizes than rustic capitals.

Fig 1.10 4th - 5th Century - Uncials

Half-Uncials

-mark the formal beginning of lowercase letterforms, replete with ascenders and descenders, 2000 years after the origin of the Phoenician alphabet.

Fig. 1.11 C. 500: Half-uncials

Charlemagne

-the first unifier of Europe since the Romans, issued an edict in 789 to standardize all ecclesiastical texts. He entrusted this task to Alcuin of York, Abbot of St Martin of Tours.

-The monks rewrote the texts using both majuscules (uppercase), miniscule, capitalization and punctuation which set the standard for calligraphy for a century.

Fig 1.12 C. 295 Caloline Miniscule

3. 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 know as Blackletter or textura gained popularity. In the south, a rounder more open hand gained popularity, called ‘rotunda’. The humanistic script in Italy is based on Alcuin’s miniscule.

Fig. 1.13 C. 1300: Blackletter (Textura)

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

Fig 1.14 C. 1455: 42 line bible, Johann Gutenberg, Mainz

Typo 2 Basics

1. Describing Letterforms

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

Knowing a letterform’s component parts make it much easier to identify specific typefaces.

-Baseline: The imaginary line the visual base of the letterforms.

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

-X-height: The height in any typeface of the lowercase ‘x’.

Fig 1.15 Baseline, Median and X-Height

Stroke: Any line that defines the basic letterform

Fig 1.16 Stroke

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

Fig 1.17 Apex / Vertex

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

Fig 1.18 Arm

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

Fig 1.19 Ascender

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

Fig 1.20 Barb

Beak: The half-serif finish on some horizontal arms

Fig 1.21 Beak

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

Fig 1.22 Bowl

Bracket: The transition between the serif and the stem

Fig 1.23 Bracket

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

Fig 1.24 Cross Bar

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

Fig 1.25 Cross Stroke

Crotch: The interior space where two strokes meet

Fig 1.26 Crotch

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

Fig 1.27 Descender

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

Fig 1.28 Ear

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

Fig 1.29 Em/en

Finial: The rounded non-serif terminal to a stroke.

Fig 1.30 Finial

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

Fig 1.31 Leg

Ligature: The character formed by the combination of two or more letterforms.

Fig 1.32 Ligature

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

Fig 1.33 Link

Loop: In some typefaces, the bowl created in the descender of the lowercase G.

Fig 1.34 Loop

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

Fig 1.35 Serif

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

Fig 1.36 Shoulder

Spine: The curved stem of the S.

Fig 1.37 Spine

Spur: The extension the articulates the junction of the curved and rectilinear stroke.

Fig 1.38 Spur

Stem: The significant vertical or oblique stroke.

Fig 1.39 Stem

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

Fig 1.40 Stress

Swash: The flourish that extends the stroke of the letterform. (Don't use this type of font with capital letters together to form a word)

Fig 1.41 Swash

Tail: The curved diagonal stroke at the finish of certain letterforms.

Fig 1.42 Tail

Terminal: -The self-contained finish of a stroke without a serif. This is something of a catch-all term.

-May be flat (‘T’ above), flared, acute, (‘t’ above), grave, concave, convex, or rounded as a ball or a teardrop.

Fig 1.43 Terminal

2. The font

Uppercase: capital letters—the bigger, taller versions of letters (like W)
Lowercase: smaller versions of uppercase (like w)
Small Capitals: uppercase letterforms draw to the x-height of the typeface
Uppercase Numerals: also called lining figures. Used with tabular material or in any situation that calls for uppercase letters
Lowercase numerals: Also known as old style figures/text figure. Far less common in san serifs than in serif
Italic: Most fonts today produced with a matching italic. Small caps are almost always only roman

Punctuation, miscellaneous characters

- It’s important to ensure that all the characters are available in a typeface before choosing the appropriate type.

Fig 1.44 Punctuation, miscellaneous characters

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)

Fig 1.45 Ornaments

3. Describing typefaces

Fig 1.46 Describing typefaces

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

4. Comparing Typefaces

Differences in x-height, line weight, forms, stroke widths and in feeling. Feelings connote specific use and expression. Examining typefaces allows us to know how we feel about certain types, and also see the appropriateness in type choices.

Fig 1.47 Comparing typefaces

Typo 3 - Text

Tracking: is the typographer's term for letter-spacing

Kerning: adjusts the space between individual letterforms to correct visually uneven spacing.

Letterspacing: refers to the overall spacing of a word or block of text affecting its overall density and texture.

Fig 1.48 Tracking: Kerning and Letterspacing

-When you add letterspacing to a body of texts or words, the readability of that text reduces.

Fig 1.49 (text) Normal tracking, loose tracking and tight tracking

Fig 1.50 (Paragraph) Normal tracking, loose tracking and tight tracking

InDesign Notes:

Facing pages = Typically for books

Ctrl+Shift+Bigger than or Ctrl+Shift+Alt = Increases the size of word

Ctrl+ = Turn off margin & columns

Alt+< / Edit>Preferences = Kerning

Alt+> = Increase spacing

2. Formatting Text

Fig 1.51 Formatting Text

Flush left: 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.

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.

Centered: 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, its important to amend line breaks so that the text does not appear too jagged. So centered text should be used sparingly for small amounts of texts.

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.

3. Texture

Fig 1.52 Anatomy of a typeface

-A type with a relatively generous x-height or relatively heavy stroke width produces a darker mass on the page than a type with a relatively smaller x-height or lighter stroke.

-Thicker stroke increases readability (on prints)

-Fig 1.53 shows how different typefaces have different gray values, some lighter, some darker. The best choice would be to choose the middle gray value.

Fig. 1.53 Different typefaces, different gray values

4. Leading and Line Length

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

Type size: Text type should be large enough to be read easily at arms length

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.

5. Type Specimen Book

-A type specimen book shows samples of typefaces in various different sizes. Without printed pages showing samples of typefaces at different sizes, no one can make a reasonable choice of type. You only determine choice on screen when its final version is to read on screen.

-A type specimen book (or eBook for screen) is to provide an accurate reference for type, type size, type leading, type line length.

Fig. 1.52 Sample Type Specimen Sheet

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

- The best screen is still an electronic approx. of the printed page (unless you are designing for screen)

Typo - 4 Text

1. Indicating Paragraphs

- Pilcrow (¶) a holdover from medieval manuscripts seldom use today.

- Leading: the distance between two baselines of lines of type.

*-Normally the text size is 10pt, the leading will be 12pt (larger than text size 2/2.5/3 point)

-In term, if the leading is 12pt, the paragraph spacing should be also 12pt, the purpose for this is we want to maintain cross alignment (is when you have two columns of text sitting next to each other where the text line is aligned to the next column as well)

InDesign:

How to create a paragraph space = select all text, control bar, pilcrow symbol, space after symbol, if leading is 13pt, then space after type 13pt

The different between line space and leading

Leading: is the space between two sentences,

Line Spacing: calculation start with one sentence's descender to the descender of the other sentence

Fig. 1.53 Line Space VS Leading

Fig. 1.54 Standard indentation

- When using indentation, you should never use left alignment (you should never have a ragging on the right). Indentation is the best use when the text is justified.

Fig 1.55 Extended paragraphs

- create unusually wide columns of text. Despite these problems, there can be strong compositional or functional reasons for choosing it.

2. Widows and Orphans

Fig 1.56 Windows and Orphans

- Widow: Short line of type left alone at the end of a column of text.

- Orphan: Short line of type left alone at the start of a new column.

* 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 Widows and Orphans.

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

InDesign (avoid widow):

-If want to bring down the word: SHIFT+ENTER (it will show force line break symbol)

-or ALT+ left ARROW (the letterspacing kerning) *no more than 3 times (the setting of tracking value have to be 5)

3. Highlighting Text

Fig 1.57 right: highlighting using italic
left: increase the boldness or the weight of text

Fig 1.58 right: change the typeface and making it bold
left: highlighting with colour

Fig 1.59 the font has been reduced by 0.5 to match the
x-height of the serif typefaces. 8 ≠ 7.5


Fig 1.60 reduce the size of number to ensure visual cohesion of the text

-when highlighting text by placing a field of colour at the back of the text, maintaining the left reading axis (right example) of the text ensures readability is at its best.

Fig 1.61 left: has an indentation whereby the reading axis is not broken
right: no indentation

- 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 1.62 typographic element outside or inside the left margin

- 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. 1.63 Highlighting text with quotation marks

Fig 1.64 Prime and quote

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

4. Headline within Text

- 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 1.65 A head

- B head here is subordinate to A 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 1.66 B head

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

- When you inset a C head in a larger body of text, it is important to have two spaces (spacebar) between the c head and the beginning of the text for the particular paragraph.

Fig 1.67 C head

- 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 1.68 example of putting together a sequence of subheads

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

- Below, 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 1.69 Cross alignment

InDesign (cross alignment)

Fig 1.70 arrange the leading value

Fig 1.71 arrange them in same line

Typo 5 - Understanding

1. 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 1.72 Baskerville 'A'

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

Fig 1.73 Univers 'A'

The complexity of each individual letterform is neatly demonstrated by examining the lowercase ‘a’ of two seemingly similar sans-serif typefaces—Helvetica and Univers. A comparison of how the stems of the letterforms finish and how the bowls meet the stems quickly reveals the palpable difference in character between the two.

Fig 1.74 Helvetica vs Univers

2. Maintaining x-height

-x-height generally describe the size of the lowercase letterforms.

-curved strokes, such as in ‘s’, must rise above the median (or sink below the baseline) in order to appear to be the same size as the vertical and horizontal strokes they adjoin.

Fig 1.75 Median and baseline

3. Form / Counterform

-Counterform (or counter)—the space describes, and often contained, by the strokes of the form. When letters are joined to form words, the counterform includes the spaces between them.

-How well you handle the counters when you set type determines how well words hang together—in other words, how easily we can read what’s been set.

Fig 1.76 Form / Counterform

4. Contrast

The basic principles of Graphic Design apply directly to typography. The following are some examples of contrast—the most poweful dynamic in design—as applied to type, based on a format devised by Rudi Ruegg. The simple contrasts produces numerous variations: small+organic/large+machined; small+dark/ large light etc.

Fig 1.77 Contrast

Typo 6 - Screen & Print

1. 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 are: -Caslon, Garamond, Baskerville

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

This can include:

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

3. Hyperactive Link/ hyperlink:

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

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

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. (example: 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

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.

“A great designer knows how to work with text not just as content,

he treats text as a user interface.”

– Oliver Reichenstein

INSTRUCTIONS

Exercise 1 - Type Expression

For exercise 1, we were assigned to use the word provided to create type expressions. During our first classes, Mr Vinor gave us the chance to suggest words, and he created a Facebook poll to let us vote for the selection of words to be used for our exercise.

Fig 2.1 The poll for voting on the selection of words, (28.3.2022)

The word for cough is mandatory and we need to choose the others 3 words from squeeze, explode, grow, pop and wink. We have to create some typography designs that express the word's meaning by using one of the ten typefaces provided.

1. Sketches

The four words that I choose:

Cough
Squeeze
Explode
Grow

Firstly, I tried to think about the things that can be related to the words and I also searched the definition of the word to get more inspiration. With all of that in mind, I came up with a few sketches to visualize my ideas clearly.

Fig 2.2 Sketches, (28.03.2022)

After getting feedback from Mr Vinod on my first sketches, I decided to recreate them as there were too many graphical elements. So, in the second attempt, I tried designing only using letters to express the meaning of words. I personally like the sketches cough#2, squeeze#1, grow, explode#1. Then I started moving to the next stage, which involved digitizing and detalization of the sketches.

Fig 2.3 second attempt sketches, (4.4.2022)

2. Digitization

Cough

At first, I struggled to decide which design I should choose, as the type design on the right has clearly expressed the meaning of the words. I also like the idea of using the letter P to create a spike effect which will look like a virus, and many of the letter O is also placed there to look like the bacteria spreading out. However, I feel like this placement of the type, and the idea is widespread to see that some of us was similar. Thus, I made a choice upon the type design on the left and Mr Vinod also agrees about it. The design of it can be perceived in two ways, first, we can notice that the letters O and U look like an eyes and the C is like a mouth coughing out the letters G and H. The other way that we can see is the letter C looks like a head and the x-height of the letter g is the month, then the descender of g and letter h is like something being coughed out. To create that, I’m using the typeface Futura Std – light for the word. I’m trying the enlarge the letter C to cover the O and U, and for the letters g and h, I’m using the perspective distort tool to adjust the letter to create an illusion of the letter moving toward to the viewer.

Fig 2.4 "cough" digitalization progress, (9.4.2022)

Fig 2.5 "cough" digitalized type expressions, (9.4.2022)

Explode

I’m using Gill Sans Std – Bold for the word “explode”. To think of the word related to explode, the first image that came to my mind was a bomb. With that idea, I created the circle on top of the word and used the envelope distort effect to make the word distort into a circular shape. Then, I used the warp tool to apply the letter i and placed it on top of the circular words to look like a bomb. I adjust the opacity value of the i to make it lighter to look, this will make the viewer pay more attention on the word “explode” first.

Fig 2.6 "explode" digitalization progress, (9.4.2022)

Fig 2.7 "explode" digitalized type expressions, (9.4.2022)

Squeeze

The word “squeeze” is used by Gill Sans Std – Regular. For this design, my intention is to be letting the letter S squeezing the “queeze” To create this, I adjust the anchor point of the s to make sure it can be covered the “queeze”, then I apply the effect of squeeze on the letter “queeze” with a value of 20%.

Fig 2.8 "squeeze" digitalization progress, (9.4.2022)

Fig 2.9 "squeeze" digitalized type expressions, (9.4.2022)

Grow

For the word “grow”, I used Futura Std – Book. I came up with the idea of incorporating the word “grow” with the arrow showing upward. Thus, the design of the type expresses the sign of increasing, rising or growing. To make the effect, I adjusted the anchor points of the letter W upward, and then for the arrow, I decided to use the letter V.

Fig 2.10 "grow" digitalization progress, (9.4.2022)

Fig 2.11 "grow" digitalized type expressions, (9.4.2022)

Final Outcome - Type Expressions

Fig 2.12 Final Outcome Type Expressions, JPEG, (10.4.2022)

Fig 2.13 Final Outcome Type Expressions, PDF, (15.4.2022)

3. Type Expression Animation

In the third part of the type expression exercise, we were asked to create an animation with a design that can perfectly convey the meaning of the words. I decided to choose the word “squeeze” to be animated.

Fig 2.14 process of creating GIF, (11.4.2022)

For the animation of the word “squeeze”, I came up with the idea of the S squeezing the letters “QUEEZE”. To make it more eye-catching to look, I wanted to make the Q is being squeezed out of the group, and it falls off smoothly following the way of the shape of S and drop on the bottom. And I adjusted the angle and distorted the letter Q when it dropped.

Fig 2.15 First attempt Gif, (11.4.2022)

After getting the feedback, I’m glad that Mr Vinor very like the idea, and he given some advice about the bounces drop on the bottom there should rest at the same spot.

Fig 2.16 Second attempt, Gif, (17.4.2022)

After the second attempt, I feel like the Q dropped too straight and it doesn’t look smooth enough. So I tried to recreate with adjusting the angle when it dropped.

Fig 2.17 Third attempt GIF, (17.4.2022)

For this third attempt, I still felt like the Q dropped didn’t smoothly. Maybe it is because I adjust too many angles in each frame and make the Q doesn’t feel like it will stop bouncing there. For the fourth attempt, I wanted to make the last four frames maintain the same angle.

Fig 2.17 Final Animated Timeline, 23 frames, (17.4.2022)

Final Outcome - Type Expressions Animation

Fig 2.17 Final Animated Type Expression "squeeze", (17.4.2022)

Exercise 2 - Type Formatting

Lecture 1:4 - Text Formatting: Kerning and Tracking

Before starting this exercise 2, we need to watch the video tutorial provided by Mr Vinod to learn how to create a layout addressing different areas of text formatting by applying kerning, leading, paragraph spacing, alignment, etc. For this exercise, we will be using Adobe InDesign to do the text formatting. For the first task, I wrote my name with 10 different typefaces, and I did some kerning & tracking to balance between the letters.

Fig 3.1 Text Formatting without Kerning (23/4/2022)

Fig 3.2 Text Formatting with Kerning (23/4/2022)

Fig 3.3 With and Without Kerning and Tracking Comparison (23/4/2022)

Lecture 2:4 to 4:4A - Text Formatting

Things to look out for when completing Exercise 2 of Task 1:

• Font size (8-12pt)

• Line Length (55-65 / 50-60 characters)

• Text Leading (2, 2.5, 3 points larger than font size)

• Ragging (left alignment) / Rivers (left justification)

• Cross Alignment

• No Widows / Orphans

• If turn on the hyphenation, make sure there aren’t too many – in one paragraph

• If using justify, ensure there aren't many rivers

Visual Research for the layout to get some inspiration:

Fig 3.3 I collect all the work and put in my inspiration board

Fig 3.4 Progress (24.4.2022)

Fig 3.5 wrong spacing

Fig 3.6 Adjustment of widow by using force line break

Fig 3.7 Tracking and Kerning to reduce ragging

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

Fig 3.8 Layout 1, (23.4.2022)

Fig 3.9 Layout 2, (23.4.2022)

Fig 3.10 Layout 3, (23.4.2022)

Fig 3.11 Layout 4, (23.4.2022)

Fig 3.12 Layout 5, (23.4.2022)

Fig 3.13 Layout 6, (23.4.2022)

Fig 3.14 Layout 7, (23.4.2022)

Fig 3.15 Layout 8, (23.4.2022)

Fig 3.16 Layout 9, (23.4.2022)

Fig 3.17 Layout 10, (23.4.2022)

Going through this 10 layout, I decided to choose the Layout 10 as my final submission. Besides, I have also make some changes to polishes the details.

Fig 3.18 arranged the baseline of the headline with the image (23.4.2022)

Fig 3.19 turn on the setting of H&J Violations, (23.4.2022)

Fig 3.20 it will highlight the area that detected the rivers, (23.4.2022)

Fig 3.21 kerning and tracking, right: before, left: after (23.4.2022)

Fig 3.22 cross alignment with baseline grid , (23.4.2022)

Final Outcome - Text Formatting

Fig 3.23 Final Outcome Text Formatting, JPG, (23.4.2022)

Fig 3.18 Final Outcome Text Formatting, PDF, (23.4.2022)

Fig 3.19 Cross alignment with baseline grid, PDF, (23.4.2022)

Font : ITC New Baskerville Std (heading & subheading), Univers LT Std (body text)

Typeface : Bold (heading), Bold italic (subheading), Roman (body text)

Font size : 31 pt, 10 pt, 9 pt

Leading: 11pt

Paragraph Spacing: 11pt

Average characters per line : 50 ~ 56

Alignment: Justify with last line aligned left

Margins : 12.7mm (top, left, right), 65mm (bottom)

Columns : 2

Gutter (for columns) : 5mm

FEEDBACK

Week 2: Task – Exercise 1 (sketches)

Here are some questions to help to create the feedback

1. Are the explorations sufficient?

2. Does the expression match the meaning of the word?

3. On a scale of 1–5, how strong is the idea?

4. How can the work be improved?

General Feedback:

Mr. Vinod commented that my sketches showed well sufficient exploration.
I need to try to use the least amount of the graphical element as less as possible. (we aim to communicate and design only through the word/letter)
Update the lecture note every week consistently and also the further reading.

Specific Feedback:

Grow - Among four of the sketches for the words Grow, Mr Vinod likes the 1st sketches that designing the letter W incorporate with an arrow that showed a well expression matching the meaning of the word.
Explode – For the 9th and 10th sketches, Mr Vinod said that the illustration of the boom and the firecracker are using too many graphical elements and it shouldn’t be allowed to use it, he suggested that I can try to explore more with the letter O. Besides, the design for the sketches 11 is good. However, it used too many graphical elements that would take away the attention of the word.
Cough - Decorating the O with the virus looking thing is a very great idea but try not to make the line and dot too thick, keep it smaller. Also, you can use some letters to create that, maybe like the letter (I) to create it spike. For the 13th and 14th sketches is a good idea but remember to keep the design focused on the types, try not to use too much illustration.
Squeeze – The 6th sketches look nice, you can use it.

Week 3: Task – Exercise 1 ( digitization & animation )

General Feedback:

make sure the image size for the animation GIF is set as 1024px x 1024px and 72dpi

Specific Feedback:

The design for the word explode, you can use an ‘I’ instead of ‘O’ so that it can look like a fuel leak
For the word squeeze on the right side, there is too much distortion.
The design for ‘cough’ on the right side is good.
The animation of the text is good, especially the Q dropped down there is a good idea. But when the Q drops and bounces, it must rest in the same spot.

Week 4: Inspection of e-portfolio

General Feedback:

For the exercise 1, try to add some references or show where you get your inspiration and put them inside your blog.
Encourage to adjust your final submission jpg in large image.
Change your blog post background colour to off white

Week 5: Task 1 – Exercise 2 ( text formatting & e-portfolio )

General feedback:

need to add the detail info and a photo of text formatting with the baseline guide.
the text formatting work needs to be jpg 300dpi grayscale.

Specific feedback:

very good choice of colour for your e-portfolio
be careful of the word ‘final outcome’, don’t let it be bigger than the word ‘instruction’. The instruction is the headline.
remember to keep the photo in black and white
the work kerning and tracking of your name don’t need to be put inside the final outcome, it’s just the process of the learning video tutorial you are going through
For your text formatting, there’s some problem with the letterspacing and kerning in paragraph five and six, be careful of that.

Week 5: Submission

Good work on Exercise 2
Good Job! Well Formatted E-Portfolio

REFLECTION

Experience

Throughout the past five weeks, the typography module has been my favourite class. I like how the lectures' teaching style, such as providing a recorded lecture with a very clear explanation and the learning material, is very organized and helpful. This made the typography class more interesting and motivated me to do better. Also, I felt very enjoyed every time in the feedback section. At that moment, I could learn a lot from my classmates' excellent work. Sometimes, I could also know my mistake when listening to Mr Vinod giving suggestions to them. Nevertheless, it is very challenging when it comes to the design exploration process. When I received some compliments on my work from Mr Vinod, this made me feel more confident on my own work and worth the time and effort, which motivated me to become better.

Observation

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 Indesign. Besides, I observe that typography is interesting and this module really opens a wider perspective of my view to the vast world of Typography which I have never known before. I also observed that in Typography, paying obsessive attention towards detail is crucial, and typography is indeed a discipline.

Findings

When working on digitalizing the sketch, I found that I needed to learn more skills and get familiarized with all the tools in adobe illustrator as, at that time, I was unable to fully create the design that I wanted as this was the first time I'm exploring the software, it's hard for me to find a suitable tool to help me create that effect. Besides, I found that I need to improve my writing skill by reading more design articles and books in order to fully express my idea and though in the blog. Last but not least, I realized that typography is not as simple as I thought, there are many rules that must be followed and must be observed very disciplined.

FUTHER READING

1. Reading Book

Fig 4.1 Thinking With Type

Reference:

Thinking with Type: A Critical Guide for Designers, Writers, Editors & Students

by Ellen Lupton (2004)

Thinking with Type is interesting to read through the first time, it’s also useful for me to keep on hand for future reference. It didn’t just talk about typography but went deeper into grids, spacing, hierarchy, and design systems. It is packed with information and examples that allow me to visualize various styles, theories, and methods discussed. Despite what might seem like a dense topic, the author makes the content easy to digest so readers can breeze through it. The book is organized into three primary sections: Letter, Text, and Grid. Each section begins with a well-researched essay that provides greater context for the material and is followed by a variety of illustrations with a how-to section and exercises.

Fig 4.2 Anatomy of typefaces
(Section 1: Anatomy, page 36)

Fig 4.3 Baselines and x-height determine the real edges of text
(Section 1: Anatomy, page 37)

Fig 4.4 advices for designers
(Appendix, page 218)

Enlarge capitals / versals

-in the beginning of a text, the reader needs an invitation to come inside.

-commonly mark the entrace to a chapter in a book or an article in a magazine.

Fig 4.5 enlarged capital sits on the same baseline as the text
(Section 2: Enlarged Capitals, page 124)

Fig 4.6 Dropped capital / drop cap
(Section 2: Enlarged Capitals, page 124)

Fig 4.7 The text appears to flow around the intruding right prow of the W
(Section 2: Enlarged Capitals, page 124)

Fig 4.8 An illustration or icon can appear in place of a letterform
(Section 2: Enlarged Capitals, page 124)

2. Reading Article

Reference:

10 Typography Rules by Blind (2018)

Two types of typography

expressive typography (type is visual, carries the meaning of the word and sometimes appears as physical shapes)
functional typography (type that is meant to be read)

When starting out, it is best to learn the fundamentals of good design:

hierarchy (primary, secondary and tertiary reads)
flow (how a person “reads” the layout by following the movement of their attention)
legibility (in Western culture, type is read top to bottom, left to right so it’s important to arrange type accordingly)
grouping (organizing blocks of type in intelligent and logical groups)
contrast (scale, texture, color, density, negative space)

Rule 01

When in doubt, always justify type left, sometimes right (appropriate for aligning currency figures), but never force justify (popular in newspaper columns but creates “rivers” of oddly spaced blocks of text).
The reason why you should justify type left is because it is easier to read. The hard left edges make the beginning of paragraphs easier to find.

Rule 02

Use one font. Until you have mastered the principles of typography, recommend not using more than one font.
Reduce the number of options and it will allow you to focus on making a great layout.

Rule 03

Go from light to bold, or from medium to extra bold when changing font weights. The key to great design is contrast.
Slight changes in weight change make it harder for the audience to notice the difference. Try mixing bold for the headline and light for the body copy for great contrast.

Rule 04

A good rule of thumb when changing point sizes, is to double or half the point size you are using.
For example, if you are using 30pt type for the headline, use 15pt type for the body copy. For other uses try 3x or 4x the point size for something more dramatic.

Rule 05

Build your type along one primary axis and align elements to this grid line.
For a vertical axis, align the left edge of your type. This will work regardless of font type or size.
For horizontal axis, align on strongest horizontal element. Sometimes this is the cap height while others it's the baseline.

Rule 06

Use any font you like as long as it's one of the following: Akzidenz Grotesque, Avenir, Avant Garde, Bell Gothic, Bodoni, Bembo, Caslon, Clarendon, Courier, Din Mittelschrift, Franklin Gothic, Frutiger, Futura, Garamond, Gill Sans, Gotham, Helvetica, Letter Gothic, Memphis, Meta, OCRB, Rockwell, Sabon, Trade Gothic, Trajan and Univers.

Rule 07

Use rules/lines to group related blocks of information. This will also make dissimilar objects appear more orderly.

Rule 08

Don't place elements along the edge or corners of a page unless to deliberately cut elements off. Negative space is a good thing, so let your design breathe.

Rule 09

Typography is all about spacing. Never use forced justified type because of the inherent rivers that will run through your copy. Avoid having a single word on the last line of a paragraph, otherwise known as a widow.
Don't allow a new page or column to begin with the final word or line from a previous paragraph, thus separating it from the rest of its paragraph-an orphan.
Use a single space after punctuation in a sentence. Pay attention to the shape that the rag creates to avoid undesired shapes/angles.
Spacing matters. The closer things are together, the more the reader will assume a relationship exists between separate blocks of information.

Rule 10

Be bold or italic never regular

Search This Blog

TAN YI-TYNG (0353327)