Labels

Typography - Task 1: Exercises

23/09/24 - 21/10/24 / Week 1-Week 5
Brendan Fedya / 0376283
Typography / Bachelor of Design (Hons) in Creative Media / Taylor's University
Task 1: Exercises

TABLE OF CONTENTS

 I. Lectures

II. Instructions

III. Feedbacks

IV. Reflections  

V. Further Readings 

I. LECTURES

➼    Week 1

        ‣     Lecture 0 - Introduction

Typography is a very important aspect in every design module, basically when one masters the fundamentals of typography, the skillsets acquired will be crucial towards the specializations in the upcoming semesters. Hence, having a good sense of typography will severely effect on how a creation of a design is executed.

Few major influences of typography, including:

•      Intuitive apps
•      Signage & Navigations
•      Posters, labels, packagings, etc.

Notes:

•     Calligraphy is the art of letter writing, while Lettering is the art of drawing the letters.

•     Fonts are w specific style or weight within a typeface, such as Georgia Regular, Georgia Bold, etc. While typefaces are the full family of similar fonts, such as Georgia, Arial, Courier, etc.

"any discipline would benefit from the understanding of typography, because it has a bearing on the way you present yourself , present your information, and how you communicate effectively."
- Mr. Vinod Nair

        ‣     Lecture 1 - Development

In history, letterforms have developed for a long time until what it is now:

•     Phoenicians (1000 B.C.E.) wrote from right to left. 

•     Greeks (900 B.C.E.) wrote from left to right - right to left - repeat. This is called boustrophedon.

•     Romans (100 B.C.E.) painted the letterforms first, then carved it. Because of this, the stroke results are affected.

Figure 1.1 The development of letterforms, Week 1 (25/9/24).

Below are the handscripts from 3rd - 10th century C.E:

•     Square capitals are found on Roman monuments, also with little serifs at the stroke ends.
•     Rustic capitals are quicker to write but a bit harder to read.
•     Roman cursive is a simpler form used for everyday transactions, then eventually evolved into lowercase letters.
•     Unicals incorporated some aspects from Roman Cursive but is more readable at smaller sizes.
•     Half Uncials is the beginning of lowercase letterforms also replete with ascenders and descenders.
•     Caloline Miniscule has set the calligraphy standard for a century.
•     Blackletter is a condensed strongly vertical letterform in Northern Europe.
•     Gutenberg's Type printing method is far efficient compared to the previous handwritten manuscripts.

Figure 1.2 Handscript evolution, Week 1 (25/9/24).

Figure 1.3 The classification of text types, Week 1 (25/9/24).

Few typefaces related to the text type classifications are as follows:

•     Blackletter, e.g. Cloister Black, Goudy Text.
•     Oldstyle, e.g. Bembo, Casion, Dante, Garamond.
•     Italic, e.g. Since the 1600s, all typefaces have featured an italic variant.
•     Script, e.g. Kuenstler Script, Mistral, Snell Roundhand.
•     Traditional, e.g. Baskerville, Times New Roman, Century.
•     Modern, e.g. Bell, Bodoni, Caledonia, Didot Walbaum.
•     Square/Slab Serif, e.g. Clarendon, Memphis, Rockwell, Serifa.
•     Sans Serif, e.g. Gill Sans, Futura, Helvetica, Univers.
•     Serif/Sans Serif, e.g. Rotis, Scala, Stone.

➼    Week 2

        ‣     Lecture 3 - Text: Part I

The lectures given was about text spacing and formatting, and below are few important notes:
•     Kerning is the automatic adjustment of space between letters, mainly used in titles that have fewer words in it.
•     Letterspacing is to add a space between the letters.
•     Tracking is the adjustment of spacing on a word or sentence.
Figure 1.4 Text formatting, Week 2 (30/9/24).
source (letterspacing): Google

There are 4 text formatting styles until now; Flush left (Left aligned text but ragged right edge), Centered (Symmetrical, but can have uneven breaks), Flush right (Opposite of flush left, usually for creating captions or emphasis), Justified (Symmetrical on both sides, but will create rivers between words.)

‣    Rivers are abnormal spacings between words, so that the text could be truly justified.

Figure 1.5 Text formatting styles, Week 2 (30/9/24).

Counterspace and grey value are important elements in text composition when you are considering to use any typefaces, and referring to a type specimen book is recommended. Typefaces with heavy stroke weights will create darker texts, while lighter strokes will produce more of a readable texture. Furthermore, texts with a larger x-height, ideal leading and line length tends to be more legible.

‣    Counterspace is the space between letters.

‣    Grey value is the tonal value of text on a white background.

‣    X-height is the height of lowercase letters.

‣    Leading is the vertical space between the lines of text.

‣    Line length is the horizontal distance in a line of text that spans across the page (ideally 55-65 characters).

Figure 1.6 Anatomy of a typeface, Week 2 (30/9/24).

back to table of contents.

➼    Week 3

        ‣     Lecture 4 - Text: Part II

There are several methods to indicate paragraphs:
•     The Pilcrow (¶), was used to mark paragraph breaks, but its rarely used today.
•     Line Spacing (Leading), should match the paragraph spacing to maintain cross-alignment across columns.
•     Indentation, to indicate a paragraph especially in justified text and its usually the same size with the line spacing.
•     Extended Paragraphs, can create wide text columns so the usage is very limited.
Figure 1.7 Indentation difference, Week 3 (10/10/24).

There are also typographic errors to take note of, Widows and Orphans. To fix a widow, you have to rebreak line endings throughout the paragraph and for orphans, adjust the column length. (LETTERSPACINGS AND KERNINGS SHOULD NOT BE DONE MORE THAN 3 TIMES.)

‣    Widows are short lines of the type left alone at the end of a column of text.

‣    Orphans are short lines of the type left alone at the start of a new column.

Figure 1.8 Widows and Orphans, Week 3 (10/10/24).

Text could be highlighted through many ways, such as using italics, bolds, highlights behind texts, changing the typeface or color. But when using different typefaces, it is recommended to reduce 0,5pt so it won't disturb the alignment.

There are 3 types of headlines within text that could work together in a sequence, labelled A, B, and C according the level of importance:
•     A Heads, indicates clear break between topics within a section.
•     B Heads, indicates a new supporting argument and are subordinate to A heads.
•     C Heads, highlights specific facets of material within the B head text. 

Figure 1.9 Headlines within texts, Week 3 (10/10/24).

Also, cross aligning headlines, captions, and body text will enhance the architectural sense of the layout, enhancing the reading experience.

Figure 1.10 Cross alignment, Week 3 (10/10/24).
back to table of contents.

➼    Week 4

        ‣     Lecture 5 - Basic

In this week's lecture, we were given specific terms to describe letterforms, which we will implement on our next exercise using Adobe InDesign. This is the foundation for understanding the anatomy of a typeface, and also for working with typography projects in the future. 

Figure 1.11 Description of letterforms, Week 4 (16/10/24).

The full fonts in a typeface is not just the 26 letters of the alphabet. So to work effectively, you need to ensure that you are using the complete set and having a basic understanding of the characteristics. This consists of uppercase and lowercase letters, small capitals, uppercase and lowercase numerals, ornaments, punctuations and miscellaneous characters. Additionally, italics are also included.

Figure 1.12 Composition of a font, Week 4 (16/10/24).

Different typefaces have different traits, whether it's in stroke width or in the overall structure. To clarify, These are the examples of those typefaces:

Figure 1.13 Various styles of typefaces, Week 4 (16/10/24).

We were given 10 fonts to use throughout this typography module. However, note that Mr. Vinod said we should prioritize more on the content, compared to focusing on the amount of typefaces we are going to use. 

Figure 1.14 Different typefaces, Week 4 (16/10/24).


II. INSTRUCTIONS


➼    Exercise 1: Type Expression

For the initial task of the first semester, Mr. Vinod briefed us on the rules and instructed us to create a word sketch that visually conveys meaning. We held a poll with 10 words, and the 6 words with the most votes were selected. Each student could then choose 4 words for their project. I chose the following 4 words: chop, wind, rush, and tangle.

    a. Chop

The word "chop" visualize images of swift actions, whether it’s a knife slicing through ingredients or an axe cleaving wood. To effectively capture this expression, I depicted the words as if something is interfering with the word, and I applied this idea to my first and second sketch; a light but multiple slicing motion in the first, and a single heavy blunt cleave for the latter.

For the third sketch, I thought about using the letters as something that represents 'chop'. Then, I searched for ideas, and found out that the edges of an axe are similar to what it is in the letter P. I improvised and figured that it could also be applied to the letter C, together it will make like an silhouette of a double-headed axe.

Figure 2.1: Cartoon letter P by ax with a wooden handle, Week 1 (27/9/24).
Source: Google, https://images.app.goo.gl/d6cUCGUrDkRHNLt66 

Figure 2.2: "Chop" brainstorming sketch, Week 1 (27/9/24).

    b. Wind

First thing that came into mind when thinking about the word 'wind' is instability, like having a volatile nature. I transferred this interpretation into the word, and instead of making the letters flow gracefully and freely like the wind, I tried a different approach to avoid similarity, using bold and angular styles which features sharp edges, suggesting movement and intensity.

In the first sketch, I visualized gusts of wind blowing from below to above in the same direction. Second sketch is nothing particular, just wind moving in opposite directions. Basically, both of the sketches conveys the movement of wind, yet using bold and capital letters as if the text itself is being propelled by the relentless force of the wind.

The last sketch is my personal favorite, I referenced from Pinterest searching for a simple image of a tornado, which this strongly resembles my idea. I distorted the letters and pictured it forming a spiraling tornado, which it fits perfectly just like I imagined.

Figure 2.3: Tornado icon logo vector design template - Freepik, Week 1 (28/9/24).
Source: Pinterest, https://pin.it/5fl7d1DlZ
Figure 2.4: 'Wind' brainstorming sketch, Week 1 (28/9/24).
    c. Rush

'Rush', well this is a bit of a challenge for me. I got the grasp of how the word should be, but it seems I could not replicate it that well. I did a lot of sketches but there is always not enough emotion to capture the adrenaline and quickening sensation it should be. I imagined rush being written using full capitals from the NASCAR typeface, almost in the same way as the Fast and Furious franchise logo, with the top and bottom being squeezed into the center.

Figure 2.5: 'The Fast and the Furious' media franchise logo, Week 1 (28/9/24).
Source: Wikipedia, https://en.m.wikipedia.org/wiki/File:Fast-furious-logo-fast-furious.png
  
   d. Tangle

For 'tangle', I mainly use the concept of creating a woven or looped appearance. Rather than rigidly structured letters, I made the letters to be like curves that mingle with other letters in the design. My only concern is about the legibility, because the letters may not follow conventional shapes, but rather through bending and twisting then it would look and represent the word better in creative ways.

Figure 2.6: Stylized vine as a 'Tangle' reference, Week 1 (29/9/24).
Source: Pinterest, https://pin.it/2AyENCxaG


 ‣     Sketch Finalization

To start, I was cautious about making too many distortions, as this sketch would be digitalized in the upcoming weeks. Since we would need to use specific fonts required by Mr. Vinod at that stage, I wanted to ensure my sketch did not differ too much from the final digital product.

Figure 2.7: Type expression sketch in Procreate, Week 1 (29/9/24).


 ‣     Sketch Digitization

When approaching this part, I tried really hard to maintain the consistency with the initial sketch concept and it seems I underestimated the importance of considering the fonts before digitalization. In this step, legibility should have been improved because we are already using the real fonts, and alignments should be considered properly. Here's a breakdown of my analysis:

Chop: I tried not to differ from the original sketch as much as possible because Mr. Vinod said the idea was already good. Hence, using a simple font, with a little addition of the knife tool, playing with opacity and letter sizes were to ensure that the 3 'chops' in the word gets highlighted.

Wind: Without applying a lot of distortions, its a challenge to make the word 'wind' to live up to its name. In spite of that, I tested myself and did it with ZERO distortions, merely with scalings.

Rush: For this word I used some additional elements as a symbol to speed, which are few small I's. But it is still with the same font, also adding little tweaks with the gradient tool so that I could get more of the feeling. For the word, I played around increasing opacities on each letter. It creates an impression that an object is gaining intensity, similar to acceleration.

Tangle: I just ungrouped all the letters, arranged it to resemble the vine like the reference I shown. This is the most straightforward process compared to others, maybe its due to me choosing the fonts that I think it is perfectly suited for the word.

Figure 2.8: Digitalized type expression in Adobe Illustrator, Week 2 (4/10/24).

    In the week 3 lecture, we were all given advice on our digitalizations. Mr. Vinod said those results that he stated could be improved should be refined during that session, which one of it was mine: 'wind'. 

The first concept I did was deemed a little bit unreadable, so I widen the spacings between each letters. Additionally, I added some copies of the word with graded opacities and make it look like effects which suggest more like turbulent gusts of wind. Here is the finalized result:

Figure 2.9: Digitalized type expression - 'wind' revised, Week 3 (7/10/24).

 ‣     FINAL Type Expression

Figure 2.10: Final type expression - JPEG, Week 3 (7/10/24).


Figure 2.11: Final type expression - PDF, Week 3 (7/10/24).


  ‣     Type Expression Animation

After I did my revision, I suppose the word 'wind' looks the best out of the four. Hence, for the animation task in Adobe Photoshop, I worked on this type expression. I merged 11 artboards with the same 0,1 second timeline in every frame, also repeating few frames to a total of 16 frames at the last part so the tornado effect would last longer. I mostly played with the placements of the words.

Figure 2.12: Type expression artboards in Adobe Illustrator, Week 3 (9/10/24).               

 And this is the result:
Figure 2.13: Type expression animation 'wind', Week 3 (9/10/24).

    I was told that the animation is still not long enough during the full whirling tornado, therefore I added almost double the initial frame amount, which is now a whopping 35 frames. I also added some new artboards into the animation to give it a flowy motion.  

Figure 2.14: Type expression frames in Adobe Photoshop - revised, Week 4 (14/10/24).

Figure 2.15: Type expression animation 'wind' - revised, Week 4 (14/10/24).
That concludes the last step of this exercise, and I feel quite satisfied on how it turns out. Many of my classmates that were also animating this word, they used curvy fonts which replicates how a wind should be, while myself used a very geometric font with full capitals. That is because I wanted to test out my abilities and creativity, by stepping out from my comfort zone.

 ‣     FINAL Animated Type Expression
Figure 2.16: Final animated type expression - GIF, Week 4 (14/10/24). 

➼    Exercise 2: Text Formatting

After we are all done with our type expression task, we were immediately assigned to another task about text formatting. We will be doing this task in Adobe InDesign, which is a layout design software used for publishings in magazines, posters, flyers. books. newspapers, etc.

Firstly, we were told to format our names using the 10 fonts given before, then we experiment on kernings to remove the awkward-looking gaps and improve readability. Here's the result:

Figure 2.17: Name formatting using kerning, Week 4 (19/10/24).
 
For the real text formatting task, Mr. Vinod explained in detail about how to do good formatting. Tips he has given is like the leading should be 2,5pt -3pt larger than the text point size, rule of thumb for adjusting kerning, using left aligns, and many more. Then, we proceed with the task which is given a text about Helvetica, and only that 10 fonts can be used. I made sure to do cross alignment so the content could be easier in the eyes.

Figure 2.18: Cross alignment, Week 4 (20/10/24).

And this is the first attempt, before Mr. Vinod's review:

HEAD LINE
Typeface: Bembo Std (byline: Adobe Caslon Pro) 
Font/s: Bembo Std Extra Bold (byline: Adobe Caslon Pro Bold)
Type Size/s: 53 pt (byline: 21,2 pt)
Leading: 56 pt
Paragraph spacing: 0

BODY
Typeface: Adobe Caslon Pro
Font/s: Adobe Caslon Pro Semibold
Type Size/s: 9,7 pt
Leading: 12,7 pt
Paragraph spacing: 12,7 pt
Characters per-line: 53-58
Alignment: Flush left
Margins: 14 mm top, 22 mm left, 14 mm right, 50 mm bottom
Columns: 4
Gutter: 5 mm

CAPTIONS
Typeface: Adobe Caslon Pro  
Font/s: Adobe Caslon Pro Bold Italic
Type Size/s: 8 pt
Leading: -
Paragraph spacing: -
Figure 2.19: Text formatting layout, Week 4 (20/10/24).

After being given feedback by Mr. Vinod, I just learned that text fonts cannot be semi-bold or bold, then I changed it to the regular Adobe Caslon Pro, and the regular font will also fit more characters in a line, so it will achieve the recommended 55-65 characters per-line.

In my opinion, this typeface has balanced proportions which will have good readability for the text, even at smaller sizes. The kerning should also be readjusted because it seems too uniformed, while the purpose of kerning is to make smooth ragged lines.  

The image I used representing Helvetica seems too ordinary, and most people used the same nuance. So, I tried a different approach, but first I asked whether my image was breaking any rules, just to clarify because it's very different from the examples given.

HEAD LINE
Typeface: Bembo Std (byline: Adobe Caslon Pro) 
Font/s: Bembo Std Extra Bold (byline: Adobe Caslon Pro Bold)
Type Size/s: 53 pt (byline: 21,2 pt)
Leading: 56 pt
Paragraph spacing: 0

BODY
Typeface: Adobe Caslon Pro
Font/s: Adobe Caslon Pro Regular
Type Size/s: 9,7 pt
Leading: 12,7 pt
Paragraph spacing: 12,7 pt
Characters per-line: 55-60
Alignment: Flush left
Margins: 14 mm top, 22 mm left, 14 mm right, 42 mm bottom
Columns: 4
Gutter: 5 mm

CAPTIONS
Typeface: Adobe Caslon Pro  
Font/s: Adobe Caslon Pro Bold Italic
Type Size/s: 8 pt
Leading: -
Paragraph spacing: -

Figure 2.20 : Text formatting layout - revised, Week 5 (21/10/24).

After showing this layout, Mr. Vinod said there are no problems and could be printed already, printing out a layout will help us see the mistakes we done more clearly.


 ‣     FINAL Text Formatting Layout

HEAD LINE
Typeface: Bembo Std (byline: Adobe Caslon Pro) 
Font/s: Bembo Std Extra Bold (byline: Adobe Caslon Pro Bold)
Type Size/s: 53 pt (byline: 21,2 pt)
Leading: 56 pt
Paragraph spacing: 0

BODY
Typeface: Adobe Caslon Pro
Font/s: Adobe Caslon Pro Regular
Type Size/s: 9,7 pt
Leading: 12,7 pt
Paragraph spacing: 12,7 pt
Characters per-line: 55-60
Alignment: Flush left
Margins: 14 mm top, 22 mm left, 14 mm right, 42 mm bottom
Columns: 4
Gutter: 5 mm

CAPTIONS
Typeface: Adobe Caslon Pro  
Font/s: Adobe Caslon Pro Bold Italic
Type Size/s: 8 pt
Leading: -
Paragraph spacing: -

Figure 2.21: Final text formatting layout without grids - JPEG, Week 5 (21/10/24).



Figure 2.22: Final text formatting layout with grids - JPEG, Week 5 (21/10/24).

Figure 2.23 : Final text formatting layout with and without grids - PDF, Week 5 (21/10/24).

III. FEEDBACKS


‣     Week 1

General Feedback : We were given instructions to do a task about text expression, sketching words where each word resembles their own meaning. No overly distortions is allowed, colors are also not allowed, and the result must be done based on the 10 fonts set by Mr. Vinod in order to ease the digitalization task in the following weeks. Additionally, an e-portfolio blog was also tasked to report our processes during our work.

Specific Feedback : -

‣     Week 2

General Feedback : 

•      Research is heavily implied before doing anything and relying merely on fancy designs will not get you anywhere. You have to learn how to articulate, to speak about the design you created so that you are able to persuade and convince the clients later on in the real industry.

•      As young designers, we tend to overcook our ideas. We must never do it more than what is required, do it as instructed (if in the industry, it means follow what the client wants, not yours).

•      Utilize the tools efficiently in Adobe Illustrator during the digitalization process (for example : knife tool), it will save so much time.

•      Number the sketches (#1, #2, #3, etc.) for good communication and clarity, include links to return to the table of contents for ease of access, no noisy visuals for the e portfolio that will disturb readability (personalizations are ok, but do not over exaggerate). All of these factors will effect the reader's user experience.

Specific Feedback :

•      It is strongly advised to consider the fonts that you are going to choose before doing the sketch. Doing it first without referencing the fonts will cause the digitalization process becoming very different from the initial sketch.

•      Mr. Vinod said my sketch is well ordered and explained, he stated that the 'chop' concept is brilliant and unique. 'tangle' is good, but need to consider more on the space the word is sitting in, assume the word is placed inside a square, do not make it too vertical-oriented, as it will exceed the boundaries given.

•      The word 'rush' failed to represent its meaning, and for 'wind' the first and second sketch require more exploration, the third one is ok, but could be further improved.


‣     Week 3

General Feedback :
•      Each of our type expressions got reviewed, and we were given time to revise the one that he deemed lacking. Mr. Vinod restated that utilizing the space in the square is very important.

•      For the animation task in the upcoming week, he said DO NOT introduce a movement to an artwork that is not there.

Specific Feedback :

•     My 3 other type expressions were already good, but 'wind' could still be improved, use multiple winds to capture the expression effectively.

‣     Week 4

General Feedback :

•      Pause the animation for effect to improve animation clarity, be it in the beginning, middle, or at the end of the animation. Also, just focus on 1 animation at a time, don't put too many animations in a word because it will divide focus.

•     If you accidentally stretch anything from your typeface, you can just reset it in the character panel.

Specific Feedback :

•    The animation and the static typefaces are already good, for the animation I could make the tornado movement last longer at the end, maybe making the tornado moving left and right.


‣     Week 5

General Feedback :

•     Layouts made should have a flow to it, also bylines should have a little bit of space from the headline to allow it to 'breathe'.

•    Using multiple images in a layout won't help, rather it might cause distractions. The text should be easily processed by the reader in a fraction of a second to maintain the reading rhythm.

•    Layouts need to have even black and whites to be balanced, consider the size of the document.

Specific Feedback :

•    Bolds and semibolds cannot be used in body text, it's usually only applied in headlines or emphasis. 

•    The purpose of flush left alignment is allowing the right edges to be smooth ragged using kerning adjustments, rather than uniform like in justified alignment.


IV. REFLECTIONS

‣     Experience

At first, I was so overwhelmed when I came into class. My classmates were very experienced at using the apps given, while me myself didn't even know the basics of utilizing the software. Because of it, I figured out that maybe I should try harder, so that I could catch up with my fellow peers.

As time goes by, I started to get a foothold of the fundamentals and I found the learning process was pretty much enjoyable. At first, I got into design school because I liked it, and I felt like it's my obligation to be good at the field that I pursue.

Facing a lot of critiques and a heavy load of assignments to do, sometimes it makes me question whether I have the talent or creativity to continue on this path. But soon I realized that every single failure is a stepping stone to further improvement. Watching my work slowly evolve, I realized that creativity isn’t something you're born with, but it's something developed through persistence, leading to better results.

‣     Observations

In this particular major, I figured that this is more of a practical-focused study rather than a traditional lecture format with exams and quizzes similar to schools. Having a completely different study style actually engages me and helps me focus more on learning.

Every week, our progress will be reviewed by our lecturer, and we will be given advice on our tasks so that we could improve for the upcoming weeks. For me, this is something very valuable that you won't get in any random course you choose. In any of the projects you do, you are required to think out of the box because design is all about your ability to approach problems from different perspectives.

During the sessions, I figured out that I struggled a lot in achieving great legibility. Not being able to balance the aesthetics with the readability was always a challenge for me. But this motivated me to become more committed into exploring this area. My strength lies in quickly grasping concepts that other people have designed and improving them, which means maybe I am more team-oriented rather than an individual player.

If I could start over, I should search for more examples done by our seniors, because it could act as references on our works in the future, and also to avoid unnecessary mistakes.

‣     Findings

Typography and illustration are two different worlds. At first, I thought that majoring in Creative Media means you are going to participate in many illustration-heavy assignments. Then I discovered that font choices, spacing, and alignment play a vital role in typography to have effective communication with the readers. On the other hand, excessive visual effects and illustrations can only interrupt legibility.


V. FURTHER READINGS

➼    Week 1

Figure 5.1: Thinking with Type by Ellen Lupton, Week 1 (28/9/24).

This book introduces us about basic letterform components, describing in detail about ascenders, descenders which are the part that extend below or above the x height. Cap heights and baselines are also described in it. Below are few pages to get a clear understanding of it.

Figure 5.2: Thinking with Type by Ellen Lupton - Page 34: Anatomy, Week 1 (28/9/24).

Figure 5.3: Thinking with Type by Ellen Lupton - Page 35: Anatomy, Week 1 (28/9/24).

➼    Week 2

In this week, I'm still sticking on the first week's book because I found something interesting: the golden section grid. Basically it's a design layout based on golden ratio that prioritizes proportion, which is more dynamic compared to standard grids like the rule of thirds. And in designs where typography are combined with images, this will be utilized to its fullest potential. It could help designers to determine font sizes to use for the headings and body text to achieve balance in the design flow and ensure the reader's reading rhythm.

Figure 5.4: Thinking with Type by Ellen Lupton - Page 138: Golden Section, Week 2 (3/10/24).

Figure 5.5: Thinking with Type by Ellen Lupton - Page 139: Golden Section, Week 2 (4/10/24).

➼    Week 3

Figure 5.6: Typography Essentials by Ina Saltz, Week 3 (11/10/24).

This book give us in depth explanation about legibility, which before I got the wrong idea of it in typography before reading this book. It is stated that “Legibility might not be a designer’s primary concern. Type can be treated as an image…type can be manipulated or used in a way that is difficult or impossible to read and still play a pivotal role in the reader’s understanding of the text” (Saltz 160).

On the statement above, the book suggests that typography can be more expressive, not just literal text. Sometimes manipulation of typography is to push them towards understanding information through the visual storytelling, so that the reader can engage with text in different ways. I always think that great legibility means good typography, but after reading this book I realized that there are infinite factors that could affect how good a design is.

➼    Week 4

Figure 5.7: The Elements of Typographic Style by Robert Bringhurst, Week 4 (17/10/24).

In page 60 and 61, the book discussed principles of typography and design, specifically talking about the contrast and structural forms. Some key information that is important for me to take note of:

•    Effective typography usually utilize white space, allowing the content to breathe and make the layout aesthetically pleasing.

•    The relationship between the body text and headlines or title is important. The title should not overwhelm the text, but should compliment it.

•    When emphasizing a text, it is advised to keep the punctuations in a normal font to maintain clarity, EXCEPT IN ITALICIZISED TEXT, IT SHOULD BE USED IN ITALIC PUNCTUATION FOR BETTER VISUAL FIT.

•    We should always avoid using drastic shifting in size or weights, because it will become unbalanced and cause clutters.

➼    Week 5

For the last week in this task, I read the same book in week 4. This time, it describes about the usage of bold and italic typefaces. I feel this is an essential information to have since most of the typefaces that are given to us to work with have bolds and italics fonts to it.

Figure 5.8: The Elements of Typographic Style by Robert Bringhurst - Page 56-59, Week 5 (24/10/24).

Bold is used in highlighting headings or definitions while italics are mostly used for emphasis, titles, and quoted materials. The page advises us that we should not overuse this faces to maintain readability and composition balance. The idea of this balance is the same in music: italic and bold as major and minor keys, if these are combined together effectively, it could achieve great visual hierarchy.


Your attention is valued, thank you for reading until the end!

Task 2 ➡
Labels:

Comments

Post a Comment

Popular Posts