Typography Task 01/ Exercises

'Kerning' refers to the automatic adjustment of space between letters which is often used for Headlines.
'letter spacing' which refers to adding space between letters is often used when writing with uppercase letters/

in a word where there is a combination of both kerning and letter spacing, it is referred to as 'Tracking' .There is 3 types of Tracking: Normal Tracking, Loose Tracking and Tight Tracking. Loose Tracking is where there is an increase amount of 'letterspacing' between each letter and 'tight tracking is when kerning is overly used. if either types are used for an entire paragraph, it can decrease the readability as it will become more difficult read.

Text/ Formatting Text

Figure 1.2

Formatting text 02/10/23

'Flush Left' formatting text is most closely refers to the asymmetrical experience of handwriting.
Starts at the same point but ends with wherever the last word line ends.
spaced between words are consistent for even grey value.
it will always have a Ragged right side .
'Centered' formatting text imposes symmetry upon text, assigning equal value and weight to both ends of the line.
it transforms paragraphs of text in to a shape therefore adding pictorial quality to a material that is originally non-pictorial by nature.
it is important to amend line breaks so it does not appear to be too messy.
it will always be ragged right and left.
'Flush Right' formatting text emphasizes the end of a line as opposed to its start.
useful in some situations (such as captions ) where relationship between text and image may be ambiguous without a strong orientation to the right.
can also be used in an 'axial layout'
it will always have a ragged left side.

Figure 1.3

Axial Layout design 02/10/23

'Justified' formatting text is like 'Centered Text' but instead imposes a symmetrical shape on the text.
achieved by expanding / reducing the spaces between words and sometimes, letters.
the result of openness of lines can occasionally produce 'rivers' of white space running vertically through the texts.
'Hyphenation' is required to amend these 'rivers' if possible. shown in Figure 1.8

Figure 1.4

Hyphenation 02/10/23

Text/ Texture

It is important to understand how different typefaces feel as text. Different typefaces suit different text / messages on hand.

Figure 1.5

X-height 02/10/23

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

Figure 1.6

Effect of different Typefaces with different X-heights and stroke width 02/10/23

the figure shows the different readability of each text with different typefaces.
the darker the text, the more readable it is.

Text/ Leading and Line length

3 main factors: Type size, Leading ,Line Length

Text/ Type Specimen Book

A 'Type Specimen Book' shows samples of typefaces in various different sizes
A 'Type Specimen Book / e-book' is to provide accurate for type, type size, type leading, type line length etc.

Week 3 (09/10/23): Lecture Video Typo_3_P2

Text/ Indicating Paragraphs

'Pilcrow' ¶ is one way of indicating paragraphs
'line space' *Leading* is the space between paragraphs.

Text/ Widow and Orphans

A 'widow' is a short line of type left alone at the end of a column or text. However, if the text is either 'Flush Left' or ' Flush right', it is somewhat forgivable.
An 'Orphan' is a short line of type left alone at the start of a new column.

Text/ Highlighting Text

Different kinds of emphasis require different kinds of Contrast.

Text/ Headline within Text

a clear break between topics within a section.

Text/ Cross Alignment

reinforces the architectural sense of the page (structure), while articulating the the complimentary vertical rhythms

Week 4 (16/10/23): Lecture Video Typo_2_Basic

Basic / Describing letterforms

Knowing a Letterforms component parts make it much easier to identify specific type faces.

Figure 1.7

basic Component Parts of the Letterforms 16/10/23

Baseline the imaginary line the middle base of the letterforms.
Median the imaginary line defining the x-height of letterforms.
X- Height the height in any typeface of the lower case 'x'
Stroke Any line that defines the basic letterform
Apex / Vertex the point created by joining two diagonal stems (Apex above / Vertex below)
Arm short strokes of the stem of the letterform, either horizontal (E,F,L) or inclined upward (K, Y).
Ascender the portion of the stem of a lowercase that projects above the median.
Barb the half serif finish on some curved stroke.
Beak the half serif finish on some horizontal arms.
Bowl the rounded form that describes a counter. the bowl may either be open of closed.
Bracket the transition between the serif and the stem.
Cross Bar the horizontal stroke in a letterform that joins 2 stems together
Cross Stroke the horizontal stroke in a letterform that joins 2 stems together.
Crotch the interior space where 2 strokes meet.
Ear the stroke extedning out from the main stem / body of the letterform.
Em/en originally referring to the width of an uppercase 'M', an em is now referring to the distance equal tot he size of the type face.
Finial the rounded no-serif terminal to a stroke.
Ligature the letter formed by the combination of 2 or more letterforms.
Link the stroke that connects the bow
serif the right angled or obliqued foot at the end of the stroke.
Spine the curve spem of 's'
Spur the extensions that articulate the junction of the curved and rectilinear stroke.
Stress the orientation of letterform , indicated by the thin stroke in round forms.
Swash the flourish that extends at the end of the stroke.
Terminal the self-contained finish of a stroke without serif.
Terminals may be flat/ flared / acute/ grave/ concave/ convex or rounded as a ball or a tear drop.

Basic/ the font

Uppercase Capital Letters and Lowercase Letters, including certain accented vowels, the c cedilla and n tilde, and the a/e and o/e in ligatures.
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.
Uppercase Numerals also known as lining figures, these numerals are the same height as uppercase letters and are all the same kerning width.
Lowercase Numerals also known as old style figures / text figures, these figures are set to x-height with ascenders and descenders.

Figure 1.8

Punctuation, miscellaneous characters 16/10/23

Punctuation, miscellaneous characters can change from typeface to typeface.

Figure 1.9

Ornaments 16/10/23

Week 5 (23/10/23): Typo_5_Understanding

Letters/ Understanding Letterforms

Figure 2.1

Understanding letterforms (Baskerville) 23/10/23

the the uppercase latter forms suggest symmetry but it is actually not symmetrical.
each bracket connecting the serif to the stem has a unique arc.
shows symmetrical but the width of the left stroke is thinner than the right stroke.
Both fonts show how meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive.

Figure 2.2

Helvetica 23/10/23

a comparison on how the stems of the letterforms finish and how the bowl meets the stems quickly reveals the palpable difference in character between the two.

Letters/ Maintaining X-height

curved strokes such as 's' might rise above the median or sink below the baseline in order to appear the same size as the vertical and horizontal strokes they adjoin.

Letters/ form/ counter form

important to developing a sensitivity to the counter form the space describes.
important when working on letter forms such as lowercase 'r' which have no counters.
the simple contrast produces numerous variations : Small and organic/ Large and machined, small and dark/ Large and light.....

Figure 2.3

examples 23/10/23

Back to the top

INSTRUCTIONS

Task 1 ex 1: Type expression

Research

Figure 2.4

Research 15/10/23

Sketches

Figure 2.5

Sketches 10/10/23

Digitization of ideas:

Figure 2.6

Digitalized Ideas 15/10/23

for the word 'dizzy' in the top left, the design was to show that when you feel dizzy you start to see multiples of something as well as the object would start to look distorted. as for the idea on the top right, it is s similar concept as the first 'dizzy' but more focused on the blurry effect that happens when your dizzy.
for the word 'electric' both ideas were about the shape of thunder.

Figure 2.7

Digitalized ideas 15/10/23

for the word 'Gun', the idea was to make the main word into a shape of a gun by making the first letter bigger and it shooting bullets which are in the word of the letter 'g'.
The idea for the word 'cry' was to create a wavy shape to copy the shape of crying in the crying emoji. As for the 2nd idea in the bottom right, it was to imitate the sound waves when you cry.

FINAL TYPE EXPRESSION DESIGN:

Jpeg:

Figure 2.8

Final digitalized Ideas 17/10/23

I've chosen these designs because of the simplicity as well as how they could express the meaning of the word immediately.

PDF:

Figure 2.9

Final digitalized Ideas 17/10/23

Animating ideas:

Create a animation based of the Expressions chosen in the first exercise.

Figure 3.1

First Attempt 19/10/23

idea description

make the word look like it was sliding down a hill.
as the word reaches the edge, i tried to make the word go faster as the slope becomes steeper.
too dependent on the line which isn't related to the word

Figure 3.2

Second Attempt 20/10/23

Idea description

make it look like lightning striking the ground and creating a small explosion.

FINAL ANIMATED GIF:

Figure 3.3

Final Animated GIF 21/10/23

Back to the top

Task 1 ex 2: Type Formatting

Figure 3.4

Name with Different fonts 23/10/23

Digitized Ideas:

Figure 3.5a

First Attempt 25/10/23

Figure 3.5b

Second Attempt 25/10/23

was told to not mix fonts as wells as change the image as there is too many text.
some sentences in the body text is too tightly packed

Edited version:

Figure 3.6a

Edited First Attempt 27/10/23

Figure 3.6b

Edited Second Attempt 27/10/23

changed the font to the same font as the body text (serif) as well as changed the image.
i looked through the body text and added kerning to some of the too tightly packed lines.

Figure 3.7c

Third Attempt with different design 27/10/23

FINAL TYPE FORMATTING DESIGN

HEAD
Fonts: Serifa STD 45 light
Type Sizes: 32pt and 10pt
Leading: 36pt and 12pt
Paragraph spacing: 0p11

BODY
Font/s: Serifa STD 45 light
Type Size/s: 10pt
Leading: 12pt
Paragraph spacing: 0p11
Characters per-line: 55
Alignment: Left allign

Margins:12.7 mm top, 12.7 mm left + 12.7 mm right + 97.8 mm bottom
Columns: 2
Gutter: 8.5 mm

With Grid

PDF:

Figure 3.8

final pdf with grid design 28/10/23

JPG :

Figure 3.9a

With Grid 28/10/23

Figure 3.9b

With Grid 28/10/23

Without Grid

PDF Version:

Figure 4.1

Final pdf without grid design 28/10/23

JPG Version:

Figure 4.2a

without Grid 28/10/23

Figure 4.2b

without Grid 28/10/23

Back to the top

FEEDBACK

Week 2 (02/10/23): absent

Specific Feedback:

General Feedback:

Week 3 (09/10/23):

Specific Feedback: the first idea for the word 'dizzy' although slightly distorted, it has been approved. for the idea on the right, it is too common. for the word 'electric' on the bottom left, focus more on the connection between words and consider connecting all the words together instead of just two. the idea on the right has been approved. the idea for the word 'gun' has been approved. Both ideas for the word 'cry' is unclear in how the design is connected to the word. for the word 'fire' on the bottom left can used a rounder word font but idea is good and for the idea on the top right, it would make more sense if all words were in uppercase instead on some being lower and some being upper case. and finally for the idea for the word 'slide', ideas is good but make the background 'slide' lighter because the main word is unclear.

General Feedback: understand mechanics of animation. don't at anything that doesn't relate to you expression.

Week 4 (16/10/23):

Specific Feedback: animation for the word 'slide' is too dependent on the line which is not related to the word so to resolve it, either replace it with the letter 'd' or something more relevant to the word.

General Feedback: make sure the animations express the word that your using in this exercise.

Week 5 (23/10/23):

Specific Feedback: some sentences need more leading , too tight. headline and body doesn't work. just use serif. choice of image can be better, use an image with not that many text. related and good image but too many words, not engaging.

General Feedback: grid system support your layout, never format using right align since its easier for others to read. when u create a layout do not use two fonts of two different serif for the headline and the body text. San serif for body and serif for headline and vice versa.

for task 2: -visual effects and well balanced to engage the reader - read the text to see if there's any text that can be separated from the entire body text -can use adobe illustrator for the headline - text can be any size 8-12pt - choose text font and size - two pages, like a magazine - check the amount of space u have left - sketch out possible ideas - only express one word in the headline, rest of the word can have some expression but have to be related to the same one expression - don't have different expressions for each word - make sure headline have good command of space.

Back to the top

REFLECTION

experience: for my first class, it was just introductions and briefing on the course, we did watch a video to set up an e-portfolio. for week 2, we had to watch a lecture video which was quite long and we had to note down the lecture summary in our e-portfolio. for the type expression ideas, it took a while to get ideas and sketches but overall rather than time consuming, it wasn't very difficult. we also had to do the digitalized version of our ideas which i find slightly difficult as i have never used adobe before. for week 3, we had to start creating an animation of the type expression we selected which i sometimes found slightly frustrating, i had to attempt a few times before understanding it. For week 4, we had to start on our task 1 exercise 2, by watching a few videos which weren't too long. the videos helped me understand how to use adobe for this assignment and understanding.

observations: for e-portfolio, i find that using a laptop was the best because i brought an ipad for the first class briefing on e-portfolio and it was difficult to understand the e-portfolio video intro because the functions look different. i find that the lecture videos for the first few weeks were quite long and it was difficult to stay focused from the start to the end so to solve this, i decided to watch half of the lecture video at one time and if i loose focus, i just take a short break before continuing. the type expressions digitalization was difficult to me because i didn't understand the functions well and didn't know how to digitalize my idea on paper to adobe illustrator so i consulted with my lecturer and got some ideas and new knowledge on how to execute my ideas. digital animation wasn't very smooth the first few times i tried but i kept attempting different methods before it finally went the way i wanted. for layout design, i was very confused about the kerning and letterspacing because it was difficult for me to see which line had too much and which line had too little. i was able to fix my kerning and letterspacings by looking closer but somehow, the lecturer always found some faults.

findings: i have learned how to use blogger for my e-portfolios. i have learned a lot on how to use adobe InDesign with the guilds/ layouts/ paragraph spacing, kerning, leading and many more. i've come to understand a lot of the different typefaces and letterforms. i find it interesting, having so many different types and so many different ways to identify and use them. i don't think i'll be able to have the ability to identify all the lines that have too much letterspacing / kerning and which ones don't have enough but i believe one day ill be able to see it easily.

Back to the top

Search This Blog

Isabel Tan Xen Wern (0355602)