TYPOGRAPHY / Task 1 : Exercises

August 26, 2021

TYPOGRAPHY / Task 1 : Exercises

27.8.2021 - 24.9.2021 (Week 1 - Week 5)
Esther Vanessa/0350751/Bachelors of Design (Hon.) in Creative Media
Typography
Task 1 / Exercise

Task 2

LECTURES

WEEK 1

Development/Timeline

Early letterform Development: Phoenician to Roman

Using sharpened stick to scratch wet clay or using a chisel to carve stones.
Tools or instrument is important
Latin alphabet can be derived from Phoenician alphabet

Figure 1.1.1 Left : Evolution from Pheonician Letter Right : Pheonician relations to other letterforms

To read phoenician from right to left, while greeks read texts interchangeably, the orientation of the letter is also changed

Figure 1.1.2 Reading orientation of greek text

Figure 1.1.3 Greek writings on a stone

Handscript

Square capitals – have serifs to the finish of the main strokes

Figure 1.1.4 Square Capitals

Rustic Capitals - they use reed pen that has a slant, so there’s thick and thins to the writings

Figure 1.1.5 Rustic Capitals

They’re harder to read because they’re more condensed

Writing uppercase letter forms quickly results in lowercase letters, this produced roman cursive

Figure 1.1.6 Roman Cursive

Uncials incorporated cursive hand – they don’t have capitals and lowercase; they incorporate it together

Figure 1.1.7 Uncials

Further formalization of the cursive hand results in half-uncials

Figure 1.1.8 Half Uncials

Charlemagne wants to standardize writing system. The monks rewrote texts with uppercase and lowercase, capitalization and punctuation. This is called Caloline miniscule.

Figure 1.1.9 Caloline miniscule

Blackletter to Gutenberg's type

Desolution of Charlemagne’s empire
In north EU – strong vertical letterform known as Blackletter
In south EU – a rounder more open hand writings known as Rotuna
Gutenberg build negative impressions for letterform, he made books and prints more than any scribe could. He printed a lot of bibles.

Figure 1.1.10 Bible printed by Gutenberg

Text type Classification by Alexander Lawson

1450 Blackletter

Forms based upon hand-copying styles - used for books in Norther EU

Figure 1.1.11 Blackletter

1475 Oldstyle

Lowercase forms used by Italians handwritings

Figure 1.1.12 Oldstyle

1500 Italic

First italics were condensed. Now they're to complement roman forms

Figure 1.1.13 Italic

1550 Script

Not appropriate in long text. Very decorative.

Figure 1.1.14 Script

1750 Transitional

Refinement of oldstyle - achieved because of the advances in technology

Figure 1.1.15 Transitional

1775 Modern

Further rationalization of oldstyle, Serifs were unbracketed, contrast between thick and thin strokes are extreme

Figure 1.1.16 Modern

1825 Square Serif/Slab Serif

Developed for advertising for heavy type in commercial printing. Doesn't have much contrast between thick and thin strokes

Figure 1.1.17 Square Serif

1900 Sans Serif

Eliminated serifs altogether. Introduced by Caslon in 1816
Referred to as grotesque (ugly) and gothic
Example: gill sans, optima, futura

1990 Serif/Sans Serif

Enlarges the notion of a family of serif and sans serif (often stages between the two)
Example: Rotis, Scala, Stone

WEEK 2

Basic in Typography - Describing Letterforms

Figure 2.1.1 the basics of letterforms

Baseline: imaginary line the visual base of the letterforms
Median: imaginary line defining the x-height of letterforms
X-height: the height of the typeface in the lowercase x
Capitals are lower than ascender height – they’re usually wider

Ascending stroke of the lowercase is usually above capital letter to give the impression that the lowercase is also as large as capital letter

Stroke: Any line that defines the basic letterform
Apex/Vertex: The point created by joining two diagonal stems

Figure 2.1.2 Apex shown in figure

Arm : short strokes off the stem of the letterform, either horizontal or inclined upward
Ascender: the portion of the stem of a lowercase letterform that projects above the median
Barb: the half-serif finish on some curved stroke

Figure 2.1.3 Barb shown in figure

Bowl : the rounded form that describes a counter. The bowl may be either open or closed
Bracket: base, transition of the serif and the stem
Cross bar: horizontal stroke that joins two stems together

Figure 2.1.4 Cross bar shown in figure

Cross Stroke : horizontal stroke that joins two stems together

Figure 2.1.5 Cross Stroke shown in figure

Crotch: the interior space where two strokes meet

Figure 2.1.6 Crotch shown in figure

Em/en: Originally refering to the width of an uppercase M, and em is now the distance equal to the size of of the typeface (the space between letters in computers). En is half the size of em. This is often used to describe em/en spaces and em/en dashes

Figure 2.1.7 Width of em/en shown in figure

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

Figure 2.1.8 Ligature shown in figure

Stress: orientation off the letterform by the thin stroke in round forms

Diagonal and vertical stress. Slanted because mimicked from handwritings. Vertical derived from the fact that we don’t have to copy handwritings anymore

Figure 2.1.9 Stress orientation shown in figure

Swash: flourish that extends the stroke of the letterform

Don't use this type of font with capital letters back-to-back

Figure 2.1.10 Swash shown in figure

The Font

Font of a typeface contains more than 26 letters, including numerals and punctuation

To work successfully with type, you should make sure that you are working with a full font and know how to use it

Uppercase: capital letters, including certain accented vowels
Lowercase: include the same characters as uppercase
Small Capitals: uppercase letterforms draw to the x-height of the typeface

Usually use in acronyms without making the typeface too messy

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

Figure 2.1.11 Italic on left, Roman on right

Punctuation, miscellaneous characters

Figure 2.1.12 Examples of punctuation

Ornaments

Usually only provided as a font in a larger typeface family

Figure 2.1.13 Examples of ornaments

Describing Typefaces

Roman: the letterform is so called because the uppercase forms are derived from inscriptions of Roman monuments

Figure 2.1.14 Roman figure

Italic: based on Italian handwriting
Oblique: conversely are based on roman form of typeface

Figure 2.1.15 Italics and Oblique Typeface

Boldface: thicker stroke than a roman form

Can be semibold, medium, black, extra bold
The boldest is referred to as poster

Figure 2.1.16 Bold typeface

Light: lighter stroke than roman form

Even lighter strokes are called thin

Figure 2.1.17 Light typeface

It is important that in every message you need to convey, you need the typeface to deliver the right message, the right emotion.

WEEK 3

Kerning

Automatic adjustment of space between letters. NOT letterspacing; letterspacing means to add space between letters. Tracking is a addition of removal of space in a word or sentence.

Figure 3.1.1 Without and With kerning

Tracking

Normal Tracking
Loose Tracking

Loose tracking in lowercase letters require counterform between letters to be created to maintain the line of reading

Tight Tracking

Figure 3.1.2 Different trackings

Figure 3.1.3 Looser tracking (right) is harder to read

Formatting Text

Flush Left: mirrors the asymmetrical experience of handwriting. Each line starts at the same point. Spaces are consistent between words. Has even gray value. Right ragged (jagged on right edges). Make the ragged smooth.
Centered: Imposes symmetry. Gives pictorial quality to texts. Is not suitable for longer texts. Ragged on left and right.
Flush right: Emphases on the end of the line. Useful in captions where relationship between text and image might be ambiguous. Ragged on the left. Is also not suitable for longer texts.
Justify: Imposes symmetry and order. However, spacing differs depends on each line, therefore is not really suitable for design. Can create a "river" between the words vertically. Use hyphen to amend this problem.
If you see the type before you see the words, change the type.

Figure 3.1.4 Text format in the same wedding letter

Texture

Type with relatively generous x-height or relatively heavier stroke width produces a darker mass on the page than smaller x-height or lighter stroke.
Thicker stroke increases readability (on prints)

Figure 3.1.5 Different textures in different font affecting readability

Leading and Line Length

Type size: text type should be large enough to be read easily art arms length - imagine yourself holding a book in your lap
Leading: Text that is set too tightly encourages vertical eye movement. A reader can loose his or her place easily. 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 = less reading

Good rule of thumb : keep line length between 55-65 characters.
Too long or too short lines lengths decreases readability

If your text is 10pt, leading would be 12-13pt to get comfortable reading.

Figure 3.1.6 Different Line Length (10/12 or 10/13 is the most comfortable for reading)

Type Specimen Book

Shows samples of typefaces. You can 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.

Figure 3.17 Different Line Length of the two same texts

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)

Figure 3.1.8 Difference in Leading

Week 4

Indicating Paragraph

Pilcrow, a holdover from medieval manuscripts

to show paragraph space

if the line space (leading) is 12pt, then the paragraph space is 12pt. This ensures cross-alignment across columns of text. DO NOT ENTER TWICE.
in inDesign you can set your paragraph space.
Leading space : space between two sentences.
Line spacing : takes descender from one sentence to another descender

Figure 4.1.1 Line space vs leading

Standard indentation. Typically here the indent is the same size of the line spacing or the same as the point size of your text.

Used to save space
Too short of a paragraph will cause more ragging
Don't use ragging on the right; always justify if you're using indentation

Figure 4.1.2 Indentation indicating paragraph

Widows and Orphans

Widow is a short line of type left alone at the end of a column of text

Break line endings through out paragraph so the last line of paragraph is not noticeably short

Orphan is a short line of type left alone at the start of a new column

Must be avoided, adjust the column height.

Figure 4.1.3 Widows and Orphan in text

in InDesign - edit - preferences - tracking/kerning 5

Highlighting Text

Making it bold, italic, change the typeface or has a different color (Cyan, Magenta, Black)
When changing the typeface, you need to adjust depends of the point size

Figure 4.1.4 Typeface with same point size may seem larger than the other

You can also align numbers with the Capital
You can also create box of text to highlight text

Figure 4.1.5 Field of text adjusting to the text below and after it

Sometimes it is necessary to place certain typographic elements outside the left margin of a column of type to maintain a strong reading axis

This includes Quotation, bullets - they can create indent and breaking left reading axis

Figure 4.1.6 Bullet points on the right ignored the left margin

Headline within Text

Make sure to signify the relative importance of these heads and their relationship to each other

Figure 4.1.7 Different type of Headlines

Figure 4.1.8 Subordinate to A heads, therefore should not interrupt text as strong as A

Figure 4.1.9 C heads to highlights specific facets of material within B text

There is no single way to express hierarchy within text but putting together a sequence of subheads = hierarchy

Cross Alignment

Cross aligning headlines and captions with text reinforces the structure while articulating the complimentary vertical rhythms

Figure 4.1.10 Cross Alignment in text

EXTRA NOTES (self notes)

Perfect point size has 55-65 characters in each line
Leading pt are usually 2 pts larger than pt size, Paragraph spacing follows the same pt as leading pt
Good 'color' has even white and filled space

INSTRUCTION

Task 1

We are to choose 3 words + "Terror" and sketch it so it represents the words' meanings.

Figure 1.2.1 Word choices (27/08/2021)

So I chose Terror, Water, Glitch and Broken. I attempted to explore for each word 3 ideas which result in 12 sketches in total.

Figure 1.2.2 Sketch of typographies representing the 4 words (02/09/2021)

My thought process while sketching Terror was based on eeriness and the creepy feeling of something more horror and scary. Hence the more fuzzy writing. I personally liked the first Terror the best. I also utilize the whole canvas to create a more intimidating look.

Figure 2.2.1 First look of the digitization of Terror (07/09/2021)

Figure 2.2.2 Masking for texture to the typography (07/09/2021)

For the word water, I based it on the reflection of an object on a body of water, especially the first one. From the feedback I get, I will turn the first sketch of the water to be more wavy and fade in the 'reflection'.

Figure 2.2.3 First tweaking of the word Water (07/09/2021)

Afterwards I tried to make the reflection of the word to be more wavy to simulate moving water-like reflection. I also added fade effect to the reflection to make it smoother. I then also changed the spacing between the word to be tighter.

Figure 2.2.4 Making the reflection more wavy (07/09/2021)

Figure 2.2.5 Added fade to the reflection (07/09/2021)

For Glitch, I choose to simulate what a glitch screen would look like. According to the feedback, the first and second one is too all over the place, making the word ineligible. Therefore, I will arrange the design in a more uniform and less messy.

Figure 2.2.6 First try of digitization of Glitch (07/09/2021)

To make it less messy and all over the place, I re-arranged the shadow colors and placed the darkest in the middle so for whoever's viewing the typography won't have to look too far to read the word.

Figure2.2.7 After rearranging (07/09/2021)

Lastly, for broken I choose to do the third one as that reflects the meaning of the word broken the most. I have gotten great feedbacks specifically for this design.

Figure 2.2.8 First try in digitizing the word Broken (07/09/2021)

I used slicing method in illustrator for the first time and it was very fun to try out. Finalizing, I decided to go to a more cracked look to the typography.

Figure 2.2.9 Finalized version of Broken (07/09/2021)

Figure 2.2.10 Result of all 4 words (07/09/2021)

Based on the feedback I have gotten from Sir Vinod, I changed up the font of the water to be normal not italics. With that, the 4 words type expression is ready for submission.

Final Submission Type Expression 4 Words

Figure 2.2.11 Final Submission for Type Expression JPEG (16/09/2021)

Figure 2.2.12 Final Submission for Type Expression PDF (16/09/2021)

Animating

During the last hour of Week 3 Class, we were asked to animate one of our Final results. I chose broken because I believe that it is the most dynamic out of the rest. Using the video tutorial Sir Vinod sent, I carefully followed and tried to make one in 20 mins.

Figure 3.1.1 First try of animating Broken (07/09/2021)

I got great feedbacks although Sir Vinod also mentioned that I should try to change the timing of the animation and make it seem more like glass cracking.

Figure 3.1.2 Timeline in Photoshop (07/09/2021)

I've made necessary changes to the work according to the feedback. Here is the final work.

Figure 3.1.3 Final draft animation of Broken (15/09/2021)

I believe that by making the pieces break off a little bit more at the end makes it more dynamic and less stoic. I also simulate cracking by making each frame longer.

After WEEK 4, I got another feedback that my animation needs to be smoother, therefore I added more frames to the animation. Afterwards, I also tried to simulate better cracking pattern.

Final Submission Animation

Here is the final submission for Type Expression - GIF

Figure 3.1.4 Final Submission Type Expression (18/09/2021)

Type Formatting

For type formatting, we were assigned to watch lecture and tutorial videos. From these videos I tried to experiment a bit. First thing I experimented with was with my name.

First off, I tried to type my name, pure without kerning.

Figure 4.1 Type Formatting without Kerning (21/09/2021)

Afterwards, I tried to experiment by using kerning to make the typography looks more interesting.

Figure 4.2 Type Formatting with Kerning (21/09/2021)

Imposing both with and without kerning shows how much kerning/tracking actually changes the look of the typeface.

Figure 4.3 Type Formatting with and without Kerning (21/09/2021)

Afterwards I started experimenting with making layouts using the words. First, I followed Sir Vinod's tutorial.

Figure 4.4 Layout Formatting following tutorial (21/09/2021)

Afterwards, I try to do multiple layouts by myself. I come up with 3 different results.

Figure 4.5 First attempt at layout formatting (22/09/2021)

Figure 4.6 Second attempt at layout formatting (22/09/2021)

Figure 4.7 Third attempt at layout formatting (22/09/2021)

I tried to experiment with the column and margins a lot more after being more comfortable with InDesign. In the third attempt, I tried to create a bit more margin to the left so it would create an interesting layout. I also kern and track some of the lines so my paragraphs won't have too much ragging since I am using flush left alignment. I also remember to cross align between left and right columns so they all have better readability.

Final Submission Type Formatting

Figure 4.8 Final Submission for Type Formatting (PDF) (23/09/2021)

Figure 4.9 Final Submission for Type Formatting (JPG) (23/09/2021)

FEEDBACK

Week 1

General Feedback: We were asked to set our blog to default theme and to not customize the website too much. Specific Feedback: Lecturers said my blog is already good and I have embedded the MI correctly. I have also been told to put horizontal rule above each section. Each section goes Lectures – Instruction –Feedback – Reflection – Further Reading. I also have to standardize each section’s heading in which I’ll be using all capitals on each section’s heading.

Week 2

General Feedback: Always good to emphasize more on the visual, for example, give a huge negative space for the word "space". Emphasis on the word, not the illustration.

Specific Feedback: There is already enough exploration. Overall was rated 4.8/5

For the first sketch of Terror: add texture to the typeface (look at the Facebook group for links), it already looks scary and creepy
For the first sketch of Water: add more waves to it or make it more wavy or blurry
For the third sketch of Broken: it is already good
All of the glitches are either too messy and not eligible

Week 3

General Feedback: Keep in mind if the typography is centered. Composition is important. Don't use too much distortion or illustration.

Specific Feedback: Remove the italics in water. Make the letters in terror closer. Glitch is ok but nothing too special. Broken is really good.

For the GIF, I need to tweak with the timing more so it simulates better visualization of a cracked glass.

Week 4

General Feedback: Look closely to the physics of how things fall/break to avoid animation being too weird

Specific Feedback: Need to put more frames so it'd look smoother. Create a better cracking pattern.

REFLECTION

Experience

In this first task, we were asked to express certain words using typography. I genuinely find this interesting as I try to figure out how to show visually what a word means and I think it's really fun to explore the ideas because sometimes one word can mean so many things. Using Adobe Illustrator for the first time is hard and not really user friendly for a beginner but I have tried using it several times, looking up videos on YouTube too and these tutorials really helped. In Type Formatting, we were taught about the basics of it including kerning and tracking, which I find very interesting. I have worked with my peers to create a magazine and while I'm working on Type Formatting, all I could think of is how InDesign, albeit a bit complicated, is a very powerful app and the magazine I did would be much better if I had known the basics of formatting and used InDesign.

Observations

I found out that there's so many things you can do with type and how layouts can affect readability.

Findings

I found that the basics of typography contains rules that should be followed otherwise it might express differently on readers or it might affect how much readability in the content we provide. There is a lot to keep in mind when working with typography in order for our message can be conveyed to the reader clearly.

Search This Blog

Esther Vanessa [0350751]