Typography Task 1/Exercise

 4/7/2023-5/13/23 /Week 1 - Week 6

Tong Min Xuan / 0362744 

Bachelor of design (Honours) In Creative Media /

Typography

---

---

LECTURES

Week 1(a) : Briefing 

This week, lecturer introduced himself and briefing us :

-A phase in the e-portfolio process

-Google Docs for entering links and comments from our bloggers.

- The form text could only make use of the provided template

Project 1 (Word Expressions)

Surprise,Silence,Party,Split,Destroy,Surprise

-Google Docs must receive general feedback.

Week 1(b): Development & Timeline

Early letterform development : Phoenician to Roman

Fig1.1 development of letterform

- The uppercase letters have evovled from bits of circles and straight lines .

Phoenicians

Fig1.2 Direction of the Greeks

-Greek redirected writing in a new direction and created the "Boustrophedon"writing style.

-The letterform's movement is from right to left, then it reverses direction and moves from left to right.

Fig1.3 Phoenician to Roman of letter "A"

Hand Script

Fig1.4 Square capitals

Square capitals

- A straightforwardly designed, upright Roman capital letter used in Roman,Square capitals can be identified by their distinctly lighter upstrokes and somewhat heavier downstrokes. 

Fig1.5 Rustic capitals

Rustic capitals

-Compressed square caps took far less time to write and could fit twice as many words on a piece of parchment. Faster and simpler to carry out, but slightly more difficult to read due to compression.

Fig1.6 Roman Cursive

Roman Cursive 

- Forms were written for routine transactions and streamlined for speed. Beginning with Roman cursive, lowercase letterforms are created. 

Fig1.7 Uncials Fonts

Uncials font

-Roman cursive writing had several elements that the Uncials adopted. Small letters called uncials. Rustic capitals are less readable at tiny sizes than the broad shapes of uncials. 

Half uncials

-Mark the lowercase letterforms' format.

Fig1.8 Caroline Minuscule

-In order to standardise all ecclesiastical texts, Charlemagne, the first unifier of Europe since the Romans, issued an edict in 789. Alcuin of York, the abbot of St. Martin of Tours, received this assignment from him. The manuscripts were rewritten by the monks employing capitalization, punctuation, majuscules (uppercase), and minuscules, which set the standard for calligraphy for a century.

Fig1.9 Black Letter

Black Letter

-The "rotunda" or rounder, more open hand became popular. The humanistic script used in Italy is based on Alcuin's minuscule.

Week 2 : Basic

Describing letterforms

-baseline: The visual foundation for letterforms.

- Median - The line used to specify the letterforms' x-height.

-X-height :Lowercase "x" height

- Stroke - Line designating the fundamental letterform

-Apex

- A vertex, or joining point, is made by joining the two diagonal stems.

-Barb - Curved stroke with a half serif ending.

-Beak - Horizontal arms with a half serif finish.

- bow -rounded form

-Bracket - Intersection of the stem and serif.

- Cross bar

- Cross Stroke - A horizontal stroke that unites two stems in a letterform.

-Serif - The foot of the stroke that is right-angled or oblique.

- Stem -The significant vertical

The font

1.uppercase 

2. lowercase

Fig2.1 Small capitals

3.Small capitals -Uppercase letterforms are drawn to the typeface's x-height. Serif typefaces typically have small caps as a part of their so-called expert set. 

Fig2.2 uppercase numerals /lining figures

4.Uppercase numerals- Same height as uppercase letter

Fig2.3 lowercase numerals/lining figures

5.Lowercase numerals-Old style figure.

6.Italic & Roman

\

Fig2.4 Punctuation, miscellaneous characters

7.Punctuation, miscellaneous characters

-Miscellaneous characters can vary from one typeface to another. Before selecting the appropriate type, it's crucial to make sure that the typeface supports all the characters.

8.Ornaments

-used as flourishes on certificates or invites. They are typically offered as a font in a bigger typeface family. Only a small number of conventional or classical typefaces use ornamental fonts across the board.

Week 3 (a) :Text

Fig3.1 Kerning and Letterspacing

Kerning-Automatic repositioning of the letter spacing.

 

Tracking-The insertion of new spaces before and after words or sentences.

Letterspacing- to separate letters with space.

Fig 3.2 Tracking

-In order for the audience to understand a word in a sentence, there must be some white space between them.

-Because we memorise words based on their form and shape, the space between the words will also have an impact on how well we remember them.

-Keep the letterspacing constant for lowercase forms.

Week 3(b) : Formatting Text

Fig3.3 Flush left

Flush Left-closely resembles the asymmetrical handwriting sensation. Every line begins at the same location and ends where the previous word on the line leaves off. The text has consistent word spacing, which enables the type to produce an even grey value. 

Fig3.4 Centered

Centered-gives both ends of each line symmetry, equal value, and weight. It gives text fields a graphical appearance by transforming them into shapes. Since centred type produces such a strong shape on the page, it's crucial to adjust line breaks to prevent the text from looking too angular.

Fig3.5 Flush right

Flush right-emphasises the finish of a line rather than its beginning. It can be helpful when the relationship between text and image is unclear without a strong inclination to the right, such as in captions.

Fig 3.6 Justified

Justified- expands or contracts the spaces between words and, occasionally, between letters to give the text a symmetrical shape. Because of the lines' consequent openness, the text occasionally has vertical "rivers" of white space. To fix this issue, careful consideration of line breaks and hyphenation is necessary.

Week 3(c): Text /line length and leading

Type size-Text should be large enough to read comfortably from a distance.

Fig3.7 Leading and line length

Leading-Too-tightly spaced text increases vertical eye movement, making it simple for readers to become disoriented. Striped patterns are created by type that is set too loosely and are distracting.

Line length

-Longer lines need more leading, whereas shorter lines need less. Specify a line length of 55 to 65 characters.

-Reading is hampered by extremely lengthy or short line lengths.

Week 4: Text / Indicating Paragraphs

Pilcrow-a vestige of mediaeval manuscripts that is no longer often used.

Fig 4.1 Leading and line space

Leading and line space -Among the paragraphs.The paragraph space is 12pt if the line space is 12pt. This guarantees cross-alignment between text columns.

Fig 4.2 Widow and orphan

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.

Highlight text

Fig4.3 Highlighting

Week 5 :Letter /Understanding Letterforms

Fig 5.1 Baskerville 'A'

This uppercase letterform conveys symmetry without actually being symmetrical. It was simple to distinguish between the two distinct stroke weights.

Fig 5.2 Univers 'A'

The left slope has thinner strokes between each than the right slope does. This specific uppercase letter demonstrates the idea that letters do not have an equal amount of weight.

Letter /Maintaining X-height

Fig5.3 X-height

To appear the same size as the vertical and horizontal strokes they adjoin, curving letters like the's' and 'a' must rise above the median or descend below the baseline.

Week 6 :Screen type & Print type

Print type- built for extended print reading

               -ensuring that the writing is fluid, easy to read, and smooth

                -good typefaces: CasIon, Garamound, Baskerville 

Screen type -improve reading and screen performance in many digital contexts

                    -more open spacing

                    -may be taller in x-height

Font size for screen -With regard to reading distance, a font size of 16 pt on a screen is roughly equivalent to that of text printed in a book or magazine.

System Fonts for Screen/Web Safe Fonts-The font is already loaded and ready to use on the computer or other device when displaying text on the screen.

Example- Times New Roman, Arial, and Helvetica

Hyperactive Link/ Hyperlink-An element that can be clicked to open a new document or part on a website or in an electronic document.

Static & Motion

Static typography-Type that is intended to be perceived as a static, stationary element is referred to as static typography.

Motion typography

-Film credits gradually reveal typographic information, frequently animating it to make it more engaging.

 -frequently used into commercials and music videos, frequently moving in time with the music

INSTRUCTION

<iframe src="https://drive.google.com/file/d/1jTGOWXcW2Mt8o2NUzcIR9t5mejOkvIUV/preview" width="640" height="480" allow="autoplay"></iframe>

TASK 1 / EXERCISE 1 - TYPE EXPRESSION

SKETCHES

Fig5.1 sketches (4/12/23)

Fig5.2 sketches(4/12/23)

The word i have chosen are pause, destroy, split and love . These are the roughly sketches I made on procreate .In order to convey my message to the viewer in the sketch portion of the “pause”, I used pause graphics and clock elements that matched the wording. However，I attempted to use the font itself to convey the meaning of the graphic elements, but it turned out that I had actually leaned too heavily on them.

 I then sought to fit the meaning of the term "destroy" with it. Some cracks were used to convey the feeling of destruction as well as devastation.

On a website, I also looked at the font used by certain designers. The designs all appear to be crisp and distinct. Even though the tables may be placed differently, you can still tell what the designer was going for.

DIGITISATION

Fig5.3 type expression "split""love"(20/4/23)

For the "split" part of the word, I like the design in the middle. I divided the letters into three parts and made two letters with less transparency as the background open to make the letters look like they are split to express the literal meaning

 

For the word "love" my favourite is also the middle one, I made the whole font size match the grid to make the picture look richer, and then used some overlapping typography to create a special font typography

Fig 5.4 type expression "pause""destroy"(20/4/23)

In the middle of the "pause" design, I arranged the icon in the middle of pa and se to make it more attractive and vivid, to make the message I wanted to convey more obvious, and that icon in the middle became an important element for me to make the font pause.

In the design of “destroy”, for the middle one, I tried to let the typeface pass gradually, and when it comes to the part of o, there are some small o's falling down randomly to create a feeling of being destroyed

Fig5.5 final type expression(23/4/23)

                                                        Fig 5.6 Final type expression (PDF)



Type Expression Animation

Fig5.6 animation "pause"(4/27/23)

First of all, in the process of making the animation of pause, I made the pause font into a rich rhythm, from the upper left corner down, I let the font present a rhythmical feeling is to let the subsequent pause button appears, the font becomes a pause after the formation of a more distinctive contrast

Fig5.7 animation "pause" process(4/28/23)

For the “pause ”animation, I made a total of 25 frames to make the gif rendering smooth some, at first I only used about 19 frames, but the effect is not very satisfactory to me, there is a too fast end does not let people see what the font wants to express, so later I added to 25 frames to make the effect of the pause more obvious.

Fig5.8 animation "pause"process(4/28/23)

Fig5.9 Animation "destroy"process(4/28/23)

I also tried to make GIF for the “destroy”, but the rendering was not very good

Fig6.0 Final animated type expression ,(4/28/23)

Week 5 :Task 1 

Exercise 2 / Text formatting

Fig 6.1 Kerning and Tracking exercise with the 10 fonts provided （29/4/2023）

Even though it was such a small alteration, after kerning and tracking, I discovered it balances out the appearance of the words more than before.

Fig 6.2 Process of text formatting(3/5/23)

First, I followed the step-by-step tutorial videos posted by the lecturer , then entered and typeset the text。I choose the body text which is Univers LT Std 55 Roman and for the font size is 10.The characters of per line are about 45-60 in my text.

Fig 6.3 Process of text formatting(6/5/23)

Fig 6.4 Process of text formatting(6/5/23)

I make my font size at 10 pt and leading at 12 pt to make my text look tidy and easier to read by the reader.After that , I began to kern each line of sentences in my text so that it won't look wavy and messy.I adjust the kerning by pressing option and left right arrows on my pc .

I split the body text into two parts. The left part is longer than the right part because I wanted to put the headline at the top of the left side, so I made enough space for the headline so it could be better aligned.

I try to justified my text with last line aligned left ,but it would make the text have too much space between some sentences and words.So i decided to using the left alignment and adjust myself using option + left and right arrow to let the text look more tidy.

Fig 6.5 Another layout of text Formatting (6/5/23)

I also tried on another lay out ,but in the end I decided to place the image below.

Fig 6.6 Process of text formatting (7/5/23)

For the heading , i use the font which is ITC Garamond Std (bold ),font size is 39pt and the leading is 37pt.

Fig 6.7 Process of text formatting (7/5/23)

Fig6.8  Process of text formatting (7/5/23)

This is my final work for Task 1: exercise 2 Layout

Fig 6.9 Text formatting final with grid (JPEG)

Fig 7.0 Final Text Formatting JPEG (7/5/23)

                                                Fig 7.1 Final text formatting with gird(PDF)

    

                                                Fig 7.2 Final text formatting (PDF)

Head

Font: ITC Garamond Std bold

Type Size: 39pt

Leading: 37pt

Paragraph Spacing: 0

BODY'

Font: Univers LT Std 55 Roman

Type Size: 10pt

Leading: 12pt

Paragraph spacing: 4.233 mm

Characters per line: 45-60

Alignment: align left

Margins: 12.7 mm top+ 12.7 mm left + 12.7 mm right + 100mm bottom

Columns number : 4

Columns Gutter: 5 mm

Feedback

Week 2

General Feedback

I created 12 different designs for 3 different works, but I now realise that I relied too heavily on graphic elements in my fonts to convey the ideas. I then attempted to use the available fonts to express the thoughts.                                                                                                                  

Specific feedback

I received criticism for leaning too heavily on graphics to express, which negates the point of using typefaces themselves to do so. I could have done better by utilising straightforward typefaces and being more verbose. Additionally, a deeper exploration of the word's meaning would have enhanced the emotion it was attempting to communicate.      

Week 3

General feedback

Lecturer conduct an online class to give some feedback on type expression animation.

Week 4

General feedback

It is preferable to insert a pause if the loop is not smooth. Instead of just adding a motion, pay attention to what is being said and embody it. To make the animation more supple, suggest adding more frames .                             Specific Feedback

For fonts -  "PAUSE". When the font evolves into a paused symbol, the dwell time is too short and there are less pauses "   

Week 5

General feedback:

centre alignment should be avoided if there is too much content because it can make it hard to read. It is preferable to arrange text so that each line has roughly 50 characters. Second, it's crucial to refrain from using various font sizes for various portions of the text and to make sure that the spacing is not too packed so as to impair the reader's ability to read. For instance, avoid using a small font for "I am" and a huge font for "Helvetica." Body content shouldn't contain bold text; only headings should. Last but not least, cross-alignment is essential to a beautiful layout.It is feasible to construct a page that is properly formatted by remembering these rules.                              

Further reading

Why Fonts Matter: Exploring the Power of Typography," delves into the fascinating realm of fonts and their profound impact on design, communication, and culture.

In an era saturated with images and digital media, one might be tempted to overlook the importance of fonts. However, as you will soon discover, fonts are not mere visual elements; they possess a unique ability to shape emotions, evoke memories, and influence our interpretation of written content.

This book is a journey through the multifaceted aspects of typography, where we explore the fundamental reasons why fonts matter. We will unravel the intricacies of font selection, examining how various typefaces communicate distinct messages and establish visual identities. We will also delve into the historical and cultural significance of fonts, uncovering the legacy of different typographic styles and their enduring impact on design.

Reflection

Experience

-I discovered a lot of new information, and I also learnt to use caution while referring to the texts I encounter on a daily basis, such as magazine articles, advertising, and newspaper typography. I also discovered how many specifics there are regarding the space between words, so I made an effort to use words rather than relying so much on visuals to illustrate the ideas I wanted to get across.

Observation

-The spacing of the words, the distance between each line, etc. can determine whether your text looks neat and clean, so I think the typography also needs fine tuning and thinking to make a better plane.

Findings

-  I discovered that not everyone has the same preferences; some prefer a simple design, while others like to add additional details to the image to make it more interesting. However, I believe that because I'm not a very skilled type designer now and can develop more abilities later on to utilise more techniques to enhance my design work, I personally favour simpler designs. Even if this is a subjective issue, typography nonetheless has its own set of guidelines that we designers must abide by in order to provide our users with the greatest possible reading experience.