Typography -Task 1/ Exercises

2/4/2023 - 23/4/2023 / Week 1 - Week 4

LIM CHAEHWAN / 0363792

Typography / Bachelor of Design in Creative Media (hons) / Taylor's University

Task 1- Exercises1 & 2

LECTURES

Lecture 1: Typo_Introduction

Mr. Vinod introduced us to the fundamentals of typography, a practice that permeates our daily lives and has many practical applications. Typography, for instance, is utilized in animation, application design, web design, and signage, among other areas.

Calligraphy vs. lettering:

Calligraphy emphasizes writing style & lettering focuses on drawing the outlines of letters

The term "typography" refers to the practice of organizing text in a way that is visually appealing with optimal readability. This technique uses the visual qualities of a font to evoke feelings and communicate ideas. To sum up, good typography is what makes the content interesting to read.

After receiving guidance from Mr. Vinod, I've gained a better understanding of the terminology used in typography, When I designed the interface of the application, I could remind myself once again that typography is really important.

Fig. 1.0 Font

Fig. 1.1 Typeface

A font refers to a specific weight or style within a typeface family, such as Georgia Regular, Georgia Italic, or Georgia Bold. On the other hand, a typeface refers to a larger family of fonts that share similar characteristics, such as Georgia, Arial, Helvetica, Times New Roman, Futura, and many others.

A history link to typography given by Mr. Vinod

https://www.fonts.com/content/learning/fontology/level-1/type-history/first-alphabets

Fig. 1.2 Design progression of letterforms

Writing systems have constantly evolved and adapted to meet the changing needs of society in human communication. The influence of cultural and societal factors, such as trade and record-keeping, drove the development of writing systems. Handwriting played an important role in shaping the design of letterforms, as seen in the principles of thick and thin strokes in Roman capitals. The evolution of writing systems began with simple symbols and evolved into more complex alphabets that could represent the sounds of spoken language, and this evolution continues today with new technologies and digital communication.

Lecture 2: Typo_Development

In the early stages of writing, such as in Phoenician and early Greek scripts, uppercase letters were mainly used, and they were etched or carved into surfaces using primitive tools. Writing systems and scripts evolved over time as different cultures and regions developed their own styles of writing, such as the Roman script that included both uppercase and lowercase letters. The use of lowercase letters became more widespread during the medieval period as more cursive scripts emerged. With the development of new writing tools and techniques, letterforms became more refined and stylized. Today, there are countless different letterforms and writing systems used throughout the world, each with its own unique history and cultural significance.

Fig. 2.0 4th century B.C.E. – Phoenicians votive stele Carthage, Tunisia.

Fig. 2.1 Evolution from Phoenician letter

The Phoenicians and other Semitic groups wrote in a right-to-left direction, but the Greeks introduced a new style of writing known as "boustrophedon," which means "as the ox plows." This method involved alternating the direction of the lines of text between right-to-left and left-to-right.

Fig. 2.2 Greeks adopted a writing direction that went exclusively from left to right.

Lecture 3: Typo_Text Part 1

Kerning and Letterspacing

Kerning: The automatic adjustment of space between letters (=/= letterspacing).

Fig.3.0 Kerning

Letterspacing: Adding space between the letters.
Tracking: The addition and removal of space in a word or sentence.

normal tracking, loose tracking & tight tracking

Fig.3.1 Tracking

Uppercase letters are designed to stand alone, without the need for spacing between letters. On the other hand, lowercase letters are more complex and require spacing to maintain readability, often using serifs to accomplish this.

These design differences are rooted in the historical evolution of the alphabet. Uppercase letters were traditionally used for titles or at the beginning of sentences, while lowercase letters were used within sentences. As a result, uppercase and lowercase letters were designed to serve their respective purposes.

The design differences between uppercase and lowercase letters are essential for enhancing readability in documents. Uppercase letters are often used for emphasis or special purposes such as headers, while lowercase letters facilitate natural flow within sentences. Understanding the unique roles of uppercase and lowercase letters can help improve the effectiveness of written communication.

Formatting Text

Important – legibility is always the number one priority.

Flush left
Centered
Flush right
Justified

It is important to also take into account the varying textures of different typefaces. Typeface with a higher x-height or thicker stroke width appears darker on a page compared to typefaces with a lower x-height or lighter stroke. Being aware of these differences in color is essential for designing effective layouts.

Fig.3.2 Text/Texture

Leading and Line Length

The goal is to make reading easy and comfortable for a long period of time.

Type Size – Text type should be large enough to be easily read from an arm's length.
Leading – Leading, or the space between lines, should strike a balance; too little space can cause readers to lose their place, while too much can be distracting.
Line Length – The optimal line length for comfortable reading is between 55 to 65 characters.

Type Specimen Book

A type specimen book shows samples of typefaces in various different sizes. It's to provide an accurate reference for type, type size, type leading, type line length, etc.

Fig. 3.3 Sample Type Specimen Sheet

Lecture 4: Typo_Text Part 2

Indicating Paragraphs

Pilcrow (¶): A holdover from medieval manuscripts seldom use today.
Line space: Between the paragraphs. If the line space is 12pt, then the paragraph space is 12pt. This ensures cross-alignment across columns of text.

Fig. 4.0 Line space vs leading

Standard indentation: Indent is the same size as the line spacing or the same as the point size of the text.
Extended paragraphs create unusually wide columns of text. Despite these problems, there can be strong compositional or functional reasons for choosing it.

Fig. 4.1 Widows and orphans

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

Highlighting Text: 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. 4.2 Highlighting text with quotation marks

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. They were later known as ‘dumb quotes’.

Fig. 4.3 Prime and quote

Headline within Text

Fig. 4.4 A heads

Fig. 4.5 B heads

Fig. 4.6 C heads

The A head indicates a clear break between the topics within a section.

The B head here is subordinate to A heads. B 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.

The C heads highlight specific facets of material within B head text. They don't interrupt the flow of reading. C heads in this configuration are followed by at least an em space for visual separation.

Cross Alignment

Fig. 4.8 Cross Alignment

Cross-aligning headlines and captions with text type reinforce the architectural sense of the page—the structure—while articulating the complimentary vertical rhythms.

Typo_Basic

Describing Letterforms

Baseline	The visual base of letterforms.
Median	The x-height of letterforms.
X-height	The height in any typeface of the lowercase ‘x’.
Stroke	Any line that defines the basic letterform.
Apex/ Vertex	The point of connection between two diagonal stems.
Arm	Short horizontal or vertical strokes off the stem of the letterform.
Ascender	The portion of stem of a lowercase letterform 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.
Bracket	The transition between the serif and stem.
Crossbar	The horizontal stroke connecting two stems in a letterform
Crotch	The interior space where two strokes meet.
Descender	The portion of stem of a lowercase letterform that projects below the baseline.
Ear	The stroke extending out from the main stem or body of the letterform.
Em	The distance equal to the size of typeface.
Finial	Rounded non-serif terminal to a stroke.
Leg	Short stroke off the stem of letterform.
Ligature	The character formed by the combination of two or more letterforms.
Link	Stroke connecting the bowl and the loop of a lowercase G.
Loop	Bowl created in the descender of the lowercase G (in some typefaces).
Serif	The right-angled or oblique foot at the end of the stroke.
Shoulder	The curved stroke that is not part of a bowl.
Spine	Curved stem of the S.
Spur	Extension that articulates the junction of the curved.
Stem	The significant vertical or oblique stroke.
Stress	The orientation of the letterform, indicated by the thin stroke in round forms.
Swash	The flourish that extends the stroke of the letterform.
Tail	The curved diagonal stroke at the finish of certain letterforms.
Terminal	The self-contained finish of a stroke without a serif.

The font

UPPERCASE
lowercase
SMALL CAPITALS
Uppercase Numerals
Italics
Punctuation, Miscellaneous
Ornaments

Describing/Comparing Typefaces

Fig. 4.9 Typefaces

Lecture 5: Typo_Understanding

Understanding letterforms

Fig. 5.0 Baskerville 'A'

Fig. 5.1 Univers 'A'

Fig. 5.2 Helvetica vs Univers

It discusses the design elements and considerations involved in creating effective typography. The writer notes that while uppercase letterforms may seem symmetrical, a closer look reveals variations in stroke weight and the shape of the brackets connecting the serif to the stem. The writer also compares the lowercase 'a' in Helvetica and Univers, demonstrating how small differences in the way letterforms are designed can have a significant impact on their character.

Maintaining x-height

Fig. 5.3 Median and baseline

The x-height refers to the height of lowercase letters in typography. To ensure that curved strokes, such as the 's', appear to be the same size as more vertical and horizontal strokes, they need to rise above the median or sink below the baseline.

Form / Counterform

Fig. 5.4 Form / Counterform

Counterform (or counter)—the space describes, and is often contained, by the strokes of the form. When letters are joined to form words, the counterform includes the spaces between them. How well are the counters handled determines how well the words hang together—how easily we can read what’s been set.

Touches on the importance of maintaining x-height - the size of lowercase letterforms - and how curved strokes like those in the letter 's' must be carefully designed to appear the same size as the more vertical and horizontal strokes. Finally, the writer emphasizes the role of counterform - the space within and between letterforms - in ensuring readability and effective typography.

Contrast

Fig. 5.5 Contrast

Lecture 6: Typo_Screen&Print

1 Print Type

Designed which emphasizes the intention for reading from physical material.
Typeface examples:
Calson, Garamond, Baskerville.

2 Screen Type

Designed which emphasizes the intention for use on the web.
Typefaces are modified to improve readability in digital environments.

Increase x-height
Wider letterforms
Open counters

Utilization of hyperlink

Clickable word, phrase, or image to jump to a new document or new section.

Font Size: 16 pixels

Typeface examples:

Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond

Fig. 6.0 Font Size for screen and print

3 Static vs Motion

Static

Minimal characteristics in the expression of words.
Used for posters, billboards, magazines, etc.

Motion

The dramatization of letterforms to become “fluid” and “kinetic”.
Used for music videos and film productions.

INTRODUCTIONS

Task 1: Exercise - Type Expression

Task 1 is to draw a sketch of a text expression, and we need to choose four words out of six, including destroy, split, surprise, love, silence, party, and pause. These six words were selected through a vote and I chose 'destroy, love, party, silence, and pause'.

1. Sketches

Fig. 1.0 Sketches, week 1 (13/4/2023)

Fig. 1.1 Sketches (13/4/2023)

The picture above is my idea sketch of the five words I drew on paper and tablet. I chose 'destroy, love, party, silence, and pause' and since it's the first idea sketch for this, these sketches are based on the meaning and image of the basic word and are designed to convey the meaning of the word through typography.

2. Digitalization

Fig. 2.0 My first attempt at digitalization (18/4/2023)

The picture above shows my idea sketch using Adobe Illustrator. After Mr. Vinod installed the typeface, he tried to design the words by himself with only the typefaces. I focused on the meaning of each word and tried to design my own by referring to various Pinterest. As for "LOVE," we made a heart shape with only the alphabet, and "Silence" made the first design with only the contrast between the size and color of the letters, and the second made the shape of the e look like lips.

Fig. 2.1 My first attempt at digitalization (18/4/2023)

"Destroy" used 'D' and 'E' to create a hammer and destroy it, I used a thick typeface called Futura Condensed ExtraBold to express the heavy feeling of the hammer. And finally, to convey the meaning of "destroy" by expressing the letters as if they were cracked. Split used l to express the segmented situation and considered a more dynamic design, considering later animations. The first-party design gives a 3D rendering effect so that the font of the letter looks like a balloon, making it look like a balloon. The second one flipped the capital A to express the party hat that comes to mind when you think of a party and tried to express the atmosphere of the party.

However, through the professor's feedback, I found out that my first illustrator work had a lot of distortion in the letters, so I modified it. I set the final 4 letters as Destroy, Split, Party, and Love. And I focused more and more on making the work.

Final Type Expressions

Fig. 2.2 My final digitalization (18/4/2023)

Fig. 2.3 My final digitalization pdf (18/4/2023)

3. Type Expression Animation

Mr. Vinod taught us how to do some basic type animation by using Illustrator and Photoshop. I decided to try out the word "Destroy".

Fig. 3.0 animation process (18/4/2023)

Fig. 3.1 animation process (18/4/2023)

For this animation "Destroy," I made 24 frames. I've made a lot of frames to make the results a little more natural, but I realize that I use more and more frames for the results I want. The workpiece is fragmented by an axe made of 'D' and 'E' destroying the rest of the letter 'STROY'.

Final Result:

Fig. 3.2 Final Animated Type Expression (27/4/2023)

Although there are some regrets about the results, I learned from the design process that the importance of sophisticated design and proportions are really important in typography.

TASK 1: Exercise 2 – Text Formatting

Exercise 2 involves creating a layout that demonstrates various text formatting techniques, including kerning, leading, paragraph spacing, alignment, and more. This exercise aims to enhance our ability to organize information spatially and create effective hierarchies. Adobe InDesign is the software to be used for this exercise.

Kerning and Tracking

At first, I watched the tutorial video and practiced kerning and tracking my name with only 10 typefaces given.

Fig. 4.0 Text formatting without kerning (2/5/2023)

Fig. 4.1 Text formatting with kerning (2/5/2023)

Layouts

I followed the example and learned the skill by watching the video. I repeated the practice of putting pictures and arranging letters in the in-design.

Fig. 5.0 Practice process (5/5/2023)

After Mr. Vinod's feedback, a design using an image that matches the text content was selected among the four designs. Reflecting on the feedback, I chose a new typo and completed the final design by reducing the spacing of the paragraphs.

FINAL Text Formatting Layout

HEAD

Font/s: Bembo Std Regular
Type Size/s: 67pt
Leading: 36pt
Paragraph spacing: 0

BODY
Font/s: Bembo Std Regular
Type Size/s: 11 pt
Paragraph spacing: 13 pt
Characters per line: 60
Alignment: left justified

Margins: 17 mm top, 12.7mm left + right, 18mm bottom
Columns: 2
Gutter: 5mm

Fig.5.1 Final Text Formatting Layout (5/5/2023)

Fig .5.2 Final Text Formatting Layout (PDF) (5/5/2023)

Fig.5.3 Final Text Formatting Layout - Grids (5/5/2023)

Fig.5.4 Final Text Formatting Layout - Grids (PDF) (5/5/2023)

FEEDBACK

Week 2:

General Feedback: Avoid graphic shapes, and use fonts. Feel free to draw an idea sketch of everything that flows. A powerful design can convey a message without the use of color.

Specific Feedback: draw at least three letters per letter.

Questions:

1. Are the explorations sufficient?

: I tried to explore ideas using Pinterest and various references

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

: Yes, but the graphic design should not be used.

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

4. How can the work be improved?

: It seems that trying to judge the right or wrong of the idea was rather poisonous to me. First of all, I need to do a free idea sketch and improve it to a good design with only fonts without graphic pictures

Week 3 (Online class)

General Feedback: During the third week, there was a break for Hari Raya so there were no physical classes. However, Mr. Vinod conducted an online meeting at 8 am on that day to ensure that students could receive the necessary support and guidance. In that meeting, Mr. Vinod provided feedback and opinions to everyone who was present.

Week 4

General Feedback: When the animation is in a seamless loop, pausing the last frame for at least 0.2/0.3 seconds is important to ensure the final animation is fully visible.

Specific Feedback: He said he wondered why people use capital letters when expressing silence, use lowercase letters, and all the characters have different sizes. He said the word party had too much 3D rendering and recommended that you look for movements that could look a little more like balloons.

Week 5

General Feedback: Put in a picture that matches the text.

Specific Feedback: The distance between the paragraphs is too far and the font is not suitable for reading the text

Text Formatting Questions:

1. Is kerning and tracking appropriately done?

2. Does the font size correspond to the line-length, leading & paragraph spacing

3. Is the alignment choice conducive to reading?

4. Has the ragging been controlled well?

5. Has cross-alignment been established using base-line grids?

6. Are widows and orphans present?

REFLECTIONS

Experience:

During this practice, I gained a solid understanding of the fundamentals of typography. However, working within the constraints of only 10 fonts without any graphic elements or abstract typography made it challenging to come up with unique and original ideas during the sketching stage. I noticed that many of my ideas overlapped with those of my classmates since we were limited to using the same words. As we progressed to the digital phase, I realized the importance of considering various design elements such as proportion, spacing, and contrast, instead of just focusing on aesthetics. Using InDesign was new to me, and I struggled with formatting text, especially with the baseline grid. Despite the initial difficulties, this practice helped me learn how to work creatively within limitations and effectively arrange and format typography to appeal to the majority.

Observations:

This typography practice exposed me to many design elements such as alignment, visual weight, character shapes, motion, scale, contrast, and value. I learned that these design elements are crucial to creating successful typography and can significantly impact the overall visual impact of a design.

Findings:

Through research, I discovered that typography is a discipline with many rules, and understanding the history and components of typography is crucial to developing a solid foundation. I found it challenging to memorize all the terminology, but I realized that meticulously examining every detail during typography is necessary. I also learned that even the most basic fonts like Helvetica, Univers, and Baskerville undergo complex and in-depth design processes. There is much to consider when designing and arranging type, and I gained a deeper appreciation for the complexities involved in typography.

Search This Blog

LIM CHAEHWAN (0363792)