TYPOGRAPHY / TASK 1 : EXERCISES

25.09.2023 - 02.11.2023

Graciella Limpah / 0364517

Typography / Bachelor of Design (Honours) in Creative Media / Taylors University

Task 1

JUMP LINK

1. Lectures

2. Instructions

- Type Expression

- Text Formatting

3. Feedback

4. Reflection

5. Further Reading

LECTURES

Week 1:

1.1 Typo_0_Eportfolio Briefing

In the first class, Mr. Vinod teaches us how to make e-portfolio and we were asked to watch the video tutorial, he also teaches us how to put a file on our e-portfolio.

1.2 Typo_0_Introduction

Typography : Art of arranging letters and text to make it more interesting, clear, and pleasing to readers
Typeface : refers to various families that do not share characteristic {example : Georgia, Helvetica, Trebuchet, Comic Sans}
Font : refers to the individual font or weight within a typeface {example : Georgia Bold, Georgia Italic}

1.3 Typo_1_Development

Early Letterform Development (Phoenician to Roman)

Tools that are being used at this time bring a great influence to the type of writing. They use the tools to scratch into wet clay as well as craving into stone with a chisel. Uppercase forms are a simple combination between a straight line and circles.
Later on, the Greeks changed the direction of writing, reading, and orientation of the letterforms from left to right and right to left. By this, we have to know how to read from left to right and reverse.
Etruscan and Roman carvers working on marble painted letterforms before inscribing them, so they would have taken a repaint brush and draw on the stone. They did this because at that time, stone are expensive, they won't able to directly craft letter to the stone. So before crafting to the stone, they use a paintbrush to paint it.

figure 1.1 Letterform development

figure 1.2 Early letterform development

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

They starting to use reap ends with a broader edge using a tool with slant so as a result, there is a thick strokes and they added serifs to it. This type of letters are known as Square Capitals.
Square Capitals took a long time to write, as a result, they invented a compressed version of it which is called Rustic Capitals. It took less time to write, but eventually, it is harder to read.

Text Type Classification

1450 Blackletter : The earliest printing type
1475 Old style : Based upon the lowercase form used by Italian humanist scholars and uppercase form found inscribed on Roman ruins
1500 Italic : Originally considered as their own class of type, soon cast to complement roman font
1550 Script : This class of type is not entirely appropriate in lengthy text settings
1750 Transitional : A refinement of old styles font
1775 Modern : Unbracketed, contrast between thick and thin strokes extreme
1825 Square Serif / Slab Serif : Unbracketed, variations between thick and thin strokes
1990 Sans Serif : Eliminated serifs
1990 Serif / Sans Serif : typeface include both serif and sans serif

Week 2 :

2.1 Typo_3_Text_P1

Text / Tracking : Kerning and Letter spacing

Kerning : Automatic adjustment of space between letter
Letter spacing : Add space between letter
Tracking : Space between letter is tighter or looser (Normal tracking, Loose tracking, Tight tracking)

figure 2.1 Types of Tracking

Formatting Text

Flush left : The format most closely mirrors the symmetrical experience of handwriting. Each lines start at the same point but ends wherever the last word on the line ends.
Centered : Impose symmetry upon the text, arranging equal value and weight to both end of any line.
Flush right : Emphasis on the end of a line as opposed to its start.
Justified : Imposes a symmetrical shape on the text, by reducing or expanding spaces between text or letter.

Texture

Different typefaces suit different messages. Type with a relatively generous x-height or relatively heavy strokes width produces a darker mass on the page than type with a relatively smaller x-height or lighter stroke. Sensitively to this differences in color is fundamental for creating successful layout.

Leading and Line Length

Goal of setting text type -> easy, prolonged reading

Type size : Text should be large enough to be read easily at arms length
Leading : Text that is set too tightly encourages vertical eye movement
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. A good rule of thumb is to keep line length between 56-65 characters

Type Specimen Book

Compositional Requirement : Text should create a field that can occupy page or a screen

Week 3 :

3.1 Typo_4_Text_P2

Indicating Paragraph

Pilcrow : To indicate paragraph spacing.
Line Space : Line space size should be the same as leading to maintain cross alignment.

figure 3.1 Line Spacing and Leading
Standard Identation : Indent same size as the line spacing, usually used in newspaper.
Extended Paragraph : Creates unusually wide columns of text.

Text / Widows and Orphans

Widow : Short line of type left alone at the end of a column of a text
Orphan : Short line of type left alone at the start of new column

Highlighting Text

Using Italics / Bold Text : If using different font, the sans serif font (univers) need to be reduced by 0,5 point

figure 3.2 Difference of Font Size
Placing a field of color at the back of the text
Place certain typographic elements
Quotation marks / Bullets

Headline within text

A head indicates a clear break between the topics within a section
B head is subordinate to A head. B head indicate a new supporting arguments or examples for the topic at hand
C head highlight specific facets of material within B head text, not materially interrupt the flow of reading
Hierarchy : Putting together a sequence of subheads

Week 4 :

Typo_2_Basic

Basic / Describing Letterforms

Baseline : Imaginary line the visual base of the letterforms
Median : Imaginary line defining the x-height of letterforms
X-height : Height in any typeface of the lowercase 'x'
Stroke : Any line that defines the basic letterforms
Apex / Vertex : The point created by joining two diagonal stems (apex for above and vertex for below)
Arm : Short strokes off the stem of the letterform, either horizontal or upward
Ascender : Stroke that exceed the median line
Barb : Half finish on some horizontal arms
Beak : Half-serif finish on some horizontal arms
Bowl : Rounded form describes a counter, may be open or closed
Bracket : Base of the letterform
Cross Bar : Connect two stem stroke
Cross Stroke : Stroke that joins two stems together (found in lowercase letter f and t)
Crotch : Interior space where two strokes meet
Descender : Anything below baseline
Ear : Stroke extending out from the main stem
Em : Distance equal to the size of the typeface
En : Half of the em
Finial : Rounded non-serif terminal to a stroke
Leg : Short stroke off the stem of the letterform
Ligature : Character formed by the combination of two or more letterform
Link : Stroke that connects the bowl and loop of a lowercase letter 'g'
Loop : Bowl created in the descender lowercase letter 'g'
Serif : Right-angled foot at the end of the stroke
Shoulder : Curve stroke that is not part of a bowl
Spine : Curve stem of the letter 'S'
Spur : Extension the articulates the junction of the curved and rectilinear stroke
Stem : Significant vertical or oblique stroke
Stress : Orientation of the letterform, indicated by the thin stroke in round forms
Swash : Flourish that extends the stroke of the letterform
Tail : Curved diagonal stroke at the finish of certain letterform
Terminal : Self-contained finish of a stroke without a serif

figure 4.1 Letterforms

The Font

Uppercase capital letters
Lowercase letters
Small capitals
Uppercase numerals
Lowercase numerals
Italic and Roam
Punctuation, Miscellaneous character
Ornaments

Describing Typefaces

Roman
Italics Oblique
Boldface
Light
Condense
Extended

Week 5 :

Typo_5_Understanding

Uppercase letter is not symmetrical. It is easy to see the two different stroke weights of the Baskerville stroke form; more noteworthy is the fact that each bracket connecting the serif to the stem has a unique arc. Uppercase letter may be symmetrical but the width of the left slope is thinner than the right stroke. Both Baskerville and Univers demonstrates the meticulous care a type designer takes to create letterform that are both internally harmonius and individually expressive.

Letters

The complexity of each individual letterforms is neatly demonstrated by examining the lowercase 'a' of two seemingly similar sans-serif typefaces (Helvetica and Univers). Differences of how the stems of the letterform finish and how the bowls meet the stem quickly reveals the palpable difference character of the two.

figure 5.1 The letter 'a' different

Maintaining X-height

X-height describe the size of the lowercase letterforms. Curved strokes, must rise above median or sink below the baseline to be the same size as the vertical and horizontal strokes they adjoin.

Letters / Form / Counterform

Adjustment of space between the letterform increase the readability, the counter form plays an important rule in being able to recognize the form of the word.
If there is a lot of space between letters, it reduce readability, the space has to be just right.
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 balan

Contrast

figure 5.2 Contrast

Week 6 :

Typo_6_Screen&Print

Typography in Different Medium

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 change after that.

Today, typography exists not only on paper but on a multitude of screens. Today, it is very variability, we can see it at 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.

Good typefaces for print : Caslon, Garamond, Baskerville because they are elegant and intellectual and highly readable when small size.

figure 6.1 type for print

Type for Screen

Typefaces intended for use on the web are optimized and often modified to enchant readability and performance on screen in a variety of digital environments. This can include a taller x-height, wider letterforms, more open counters, heavier thin strokes and serif, reduced stroke contrast, and modified curves and angles for some designs. So there are some typefaces design for screen.
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.

Hyperactive Link / Hyperlink

This exists on many places, it is way to navigate documents online. Hyperlink is a word, phrase, or image that you can click on to jump to a different document. Normally, it is blue and underlined.

Font size for screen

16-pixels text on a screen is equal to text size on a printed book, accounting to reading distance. If we read only a few inches away, we need 10 points, if reading by arm length, we need 12 points, which is equal to 16 pixels.

Print type vc Screen type

figure 6.2 Screen type vs Print type

Pixel Differential between Devices

fig 6.3 Pixels

Static vs Motion

Static is minimal characteristic in expressing words. Bold and italic offer only a fraction of the expressive potential of dynamic properties.

Motion is "dramatize" type, for letterform to become "fluid" and "kinetic".

to the top

INSTRUCTIONS

Task 1: Exercises - Type Expression

Sketches

The words are being picked in the classroom and from the selected words, the words I picked are dizzy, fire, cry, and slide. As instructed, firstly, I begin to sketch it

figure 1.1 type expression sketches [27/09/2023]

From the sketches I drew, my personal favorite are the top left 'fire', top right slide, as well as the top left 'cry'

Digitalisation

Mr Vinod asked us to watch video tutorial on YouTube and after watching it, I try to digitalize my sketches.

figure 1.2 type expression digitalization [07/10/2023]

After receiving feedback from Mr Vinod, I finalize my digitalization

Final digitalization

figure 1.3 Final Digitalization [09/10/2023]

figure 1.4 Final Digitalization [09/10/2023]

Type Expression Animation

After digitalizing, we were asked to animate one of our work. Firstly, we were ask to try the basic animation with one of our digitalize work, so I try to animate the word 'slide'.

figure 1.5 Type Expression Animation [09/10/2023]

And here is the result

figure 1.6 'Slide' animation [09/10/2023]

After looking to this animation, I think it is too simple so I try to make another animation, I choose the word 'cry'.

figure 1.7 Type Expression animation 'cry' [09/10/2023]

figure 1.8 'Cry' animation [09/10/2023]

Not really satisfied with the result, then I animate the word 'freeze'

figure 1.9 'Freeze' Animation

figure 1.10 'Freeze' animation [11/10/2023]

Mr.Vinod suggest me to change the font of the text, so that's what I did.

figure 1.11 Freeze animation process [16/10/2023]

Final Animation

figure 1.12 Final Animation [16/10/2023]

Task 1 : Exercises - Text Formatting

Kerning and Tracking

After looking through the video tutorial, I tried kerning and tracking with my own name.

figure 2.1 Without kerning and tracking [16/10/2023]

figure 2.2 With kerning and tracking [16/10/2023]

Layouts

Following the tutorial, I started exploring indesign, and I come out with four different layouts.

figure 2.3 Layouts [17/10/2023]

After receiving feedback from Mr.Vinod, I finalized my layout.

Final Text Formatting

HEAD

Font/s : Futura, Adobe Caslon Pro, Gill Sans

Type Size/s : 26, 63, 9

Leading : 24 pt

Paragraph spacing : 24 pt

BODY

Font : Bembo Std

Type size : 11

Leading 12

Paragraph spacing : 12

Character per-line : 59

Alignment : Left justified

Margins : 12,7 mm top + 12,7 mm right + 12,7 mm left + 30 mm bottom

Columns : 4

Glutter : 5mm

figure 2.4 Final Layout jpg [23/10/2023]

figure 2.5 Final Layout [23/10/2023]

fig 2.6 Final Layout with grid [23/10/2023]

figure 2.7 Final Layout with grid [23/10/2023]

to the top

FEEDBACK

Week 2

General Feedback : Everyone have a different idea, but we must be careful with the distortion and effect that we put.

Specific Feedback : Nice idea

Week 3

General Feedback : We need to screenshot the process of digitalization

Specific Feedback : The word 'slide' and 'fire' need to be change, do not need to put a lot of elements, simple is better

Week 4

General Feedback : Some of our animation is good, some also need to improve

Specific Feedback : Change the font of the text

Week 5

General Feedback : We need to really see the leading and font size, do not make our sentence to tight, do not make the text formatting right align, don't use two different typeface in a layout, choice of image should be related to the text.

Specific Feedback : Caption for the picture need to have space with the picture, the heading can be done with another method.

to the top

REFLECTION

Experience

Since the beginning of typography class, I found it really interesting for me to learn it. After finished our first task, which is type expression, I know how to use adobe illustrator well. Moving on to the second task, which is text formatting, I feel really exciting to do it because we learn a new application, which was Indesign. Although at the beginning of the task Mr.Vinod say it was a little bit boring, but I didn't feel the task is boring.

Observations

Every week of typography class, Mr Vinod always asked us to submit our work through Facebook group comments, and by that, I could see a lot of different ideas coming from many people and I could learn from it too.

Findings

I find out that typography really have impact to what we usually read or see. I feel like before I learn typography, I didn't really pay attention to any text that I am looking through. I also find out that visualize a word is not easy and now I appreciate text more.

to the top

FURTHER READINGS

figure 3.1 Typographic design : Form and Communication

From the books Mr. Vinod already prepared, 'Typographic Design : Form and Communication' is the one he suggested for us to read as a beginner so I will read this book for my weekly reading and write explanation about the page I read.

figure 3.2 Historical Classification of typefaces (pg.38-39)

For the first week, I read about the different of the typefaces and the a little bit of the history about this several types of typefaces.

Old Style began with designs of the punch cutter Francesco Griffo, who worked for the famous Venetian scholar-printer Altus Manutius during the 1490s. His designs evolved from earlier Italian type designs.

Italic letterforms slant to the right. Today, we primarily use them for emphasis and differentiation. When the first italic appeared in the earliest "pocket book" printed by Aldus Manutius in 1501, it was used as an independent typestyle.

Transitional typestyle during the 1700s gradually evolved from Old Style to Modern. The contrast between thick and thin stokes is greater than in Old Style faces. Lowercase serifs are more horizontal, and the stress within the rounded forms shifts to a less diagonal axis.

Modern typefaces have extreme contrasts between thick and thin strokes. Thin strokes are reduced to hairlines. The weight stress of rounded characters is vertical.

Egyptian typestyle have heavy square or rectangular serifs that are usually unbracketed. The stress of curved strokes is often minimal. In some slab serif typefaces. all strokes are the same weight.

Grotesque is the earliest sans serif typestyle to be developed. Here, strokes have some varied contrast in width, curves have squareness with curling, close-set jaws.

Neo-grotesque typefaces are a further derivation of Grotesque. They have less contrast in stroke width than Grotesque typefaces and are simpler in form and proportion.

Humanist typefaces share the proportions and pronounced stroke width variation of handwritten Roman capitals and of lowercase Caroline minuscules. Letterform are more calligraphic than other sans serif typefaces and display some diagonal stress.

Geometric typefaces are composed of simple geometric shapes like circle and rectangle. Stroke width variation is minimal, and have many visual components and glyphs shared.

figure 3.3 Typefaces classification (pg.40-41)

For the second week, I read more about typefaces classification, as for the week 2 lecture is about describing letterform, so I decide to know furthermore about it.

Serifs : Serifs provide some of the most identifiable features of typefaces, and in some cases they reveal clues about their evolution.

Weight : This is a feature defined by the ratio between the relative width of the strokes of letterforms and their height.

Width : An expression of the ratio between the black vertical strokes of the letterforms and the intervals of white between them.

Posture : Roman letters that slant to the right but are structurally the same as upright roman letters are referred to as oblique. Italic letters, which are based on handwriting, are structurally different from roman letters of the same type family. Italic letters with connecting strokes are called scripts."

Thick/Thin Contrast : This visual feature refers to the relationship between the thinnest parts of the strokes in letters and the thickest parts.

Stress : The stress of letters, which is a prominent visual axis resulting from the relationships between thick and thin strokes, may be left- angled, vertical, or right-angled in appearance.

figure 3.4 Verbal/Visual equations (pg.114-115)

To help me with making animation, I read about verbal/visual equations.

Signs may exist at various levels of abstraction. A simple example will illustrate this point. For example a red dot. It is a sign only if it carries a particular meaning. It can represent any number of things : balloon, ball, or Japanese flag. Typographic signs are both verbal and visual. The association formed between the verbal and visual attributes are verbal/visual equivalencies, which are found in a variety of configurations. These reveal the associative nature of signs composing the typographic message and help us further understand its multifaceted attributes.

figure 3.5 Combining Typefaces and Contrast (pg.140)

To help me with text formatting exercise, I read and see the example of Combining Typefaces.

The most important consideration for selecting multiple typefaces is contrast, and variations in contrast are abundant : serif/sans serif, roman/script, bold/light, thick/thin, simple/complex, and functional/decorative. Effective contrasts can also be achieved when using different typefaces within the same family, or using all capital letters in relationship to capitals and lowercase.

to the top

QUICK LINK

Task 2 : Typographic Exploration and Communication

Task 3 : Type Design and Communication

Search This Blog

Graciella Limpah (0364517)