Typography (Week 1-Week 5) Task 1

Typography (Week 1-Week 5) Task 1 



25 SEPT 2023 - 23 OCT 2023 / Week 1 - Week 5

WU ZIYANG / 0368325

Typography / Bachelor of Design (Hons) in Creative Media

Task 1 : Type Expression and Formatting : Exercise 1 & 2

Table of content









LECTURES

WEEK 1:                              

Class:
This was my first class. The teacher introduced himself and explained the following points about the course:
First, the teacher added us to the Facebook group so that we could see the teaching content he post.
2. Submit personal information.
3. Explain the composition of this course module and how to learn this course.
4. How the job is done and how it is submitted.
5. How to register a blog and how to use it.

Typo_0_introduction

Typography as a subject, module design, fundamental aspect in any design studies discipline. It is develops attributes there fundamental to any discipline, simply like the attention to detail.
Fig 1.1
Good typography is an art, what we need to learn is how to take the right artistic road to develop excellent art.

Fig 1.2

   Fig 1 .3 Evolution from Phoenician letter


Fig 1.4

Phoenicians: wrote from right to left.

Greeks: "Boustrophedon" , which is read alternately from right to left and left to right.

Etruscan : painted letterforms before inscribing, which influenced their strokes qualities.


Fig 1.5
early letterform development


Fig 1.6

Square Capitals: found in Roman monuments. These letterforms have serifs added to the finish of the main strokes.
Fig 1.7

Rustic capitals are a compressed version of square capitals.
They allowed for twice as many words on a sheet of parchment and took less time to write.
The pen or brush was held at an angle of approximately 30° off the perpendicular.
Rustic capitals were faster and easier to write, but slightly harder to read due to their compressed nature.


Fig 1.8

were simplified for speed. We can see the beginning of what we refer to as lowercase letterforms.


Fig 1.9

The board forms of uncials are more readable at small size than rustic capitals.

Fig 1.10

Charlemagne issued an edict in 789 to standardize all ecclesiastical texts in Europe.
The task of standardization was entrusted to Alcuin of York, Abbot of St Martin of Tours.
Fig 1.11


The monks rewrote the text using both majuscules (uppercase) ,miniscule capitalization and punctuation which set the standard for calligraphy for a century.


Fig 1.12
With the dissolution of Charlemagne's empire came regional variations upon Alcuin's script.The humanistic script in Italy was based on Alcuin's minuscule.



WEEK 2


Fig 2.1
The term 'kerning' refers to the automatic adjustment of space between letters. It is often mistakenly referred to as letterspacing. In fact, letterspacing means to add space between the letters. The addition and removal of space in a word or sentence is referred to as 'tracking"



Fig 2.2

InDesign is a publishing software,an create graphics in large numbers



Fig 2.3
use Ctrl+Shift+>          make letters larger
    use Ctrl+alt+>           make text boxes larger




Fig 2.4
Normal tracking, loose tracking and and tight tracking



Fig 2.5


Flush left: This format most closely mirrors the asymmetrical
experience of handwriting. Each line starts at the same point but
ends wherever the last word on the line ends. Spaces between words
are consistent throughout the text, allowing the type to create an even
gray value.

Fig 2.6

Centered: This format imposes symmetry upon the text, assigning
equal value and weight to both ends of any line. It transforms fields of
text into shapes, thereby adding a pictorial quality to material that is
non-pictorial by nature. Because centered type creates such a strong
shape on the page, its important to amend line breaks so that the text
does not appear too jagged.


Flush right: This format places emphasis on the end of a line as
opposed to its start. It can be useful in situations (like captions)
where the relationship between text and image might be ambiguous
without a strong orientation to the right.


Justified: Like centering, this format imposes a symmetrical shape
on the text. It is achieved by expanding or reducing spaces between
words and, sometimes, between letters. The resulting openness of
lines can occasionally produce rivers' of white space running
vertically through the text. Careful attention to line breaks and
hyphenation is required to amend this problem whenever possible.


Video Typo_4_Text_Part 2

Fig 2.7

a holdover from medieval manuscripts seldom use today.



Fig 2.9

A widow is a short line of type left alone at the end of a column of text.
An orphan is a short line of type left alone at the start of new column.




Fig 2.10

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



 
Fig 2.11

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


Video  Typo_2_Basic

Fig 3.1

Baseline   The imaginary line the visual base of the letterforms.
   Median   The imaginary line defining the x-height of letterforms.
X-height            The height in any typeface of the lowercase '×



Fig 3.2

Apex / Vertex The point created by joining two diagonal stems (apex above and vertex below)


Fig 3.3

Arm Short strokes off the stem of the letterform, either horizontal (E.
F, L) or inclined upward (K, Y).

Fig 3.4

Em/en Originally refering to the width of an uppercase M, and em is now the distance equal to the size of the typeface (an em in 48 points, for example). An en is half the size of an em. Most often used to describe em/en spaces and em/en dashes


Fig 3.5

The orientation of the letterform, indicated by the thin stroke in round forms.



Fig 3.6

Terminal The self-contained finish of a stroke without a serif. This is something of a catch-all term. Terminals may be flat ('T' above). flared, acute, (t' above), grave, concave, convex, or rounded as a ball or a teardrop (see finial).


Fig 3.7

Uppercase Capital letters, including certain accented vowels, the c cedilla and n tilde, and the a/e and o/e ligatures.


Fig 3.8

Lowercase Lowercase letters include the same characters as uppercase.


Fig 3.8

Punctuation, miscellaneous characters Although all fonts contain standard punctuation marks, miscellaneous characters can change from typeface to typeface. It's important to be acquainted with all the characters available in a typeface before you choose the appropriate type for a particular job.


Video Typo_5_Understanding




Fig 4.1

The uppercase letter forms below suggest symmetry, but in fact it is not symmetrical. It is easy to see the two different stroke weights of the Baskerville stroke form (below); more noteworthy is the fact that each bracket connecting the serif to the stem has a unique arc.


Fig  4.2

The complexity of each individual letterform is neatly demonstrated by examining the lowercase a of two seemingly similar sans-serif typefaces- Helvetica and Univers.


Fig 4.3

The x-height generally describe the size of the lowercase letterforms. Must rise above the median (or sink below the baseline) in order to appear to be the same size as the vertical and horizontal strokes they adjoin.



Fig 4.4

One of the most rewarding way to understand the form and counter of a letter is to examine them in close detail. It also gives you a glimpse into the process of letter-making.



Video Typo_6_Screen&Print


Fig 5.1

Printing is used for reading in print long ago.



Fonts now used on the web have been optimized to:
1. Increased readability
2. Higher X height or reduced rise height
3. Wider letter forms and more open counters heavier, heavier fine strokes, modified curves and angles for some designs



Fig 5.2

Pixel differential between devices


If we're going to read it, we usually set it at about 10-pixel, if it's far away in this case we can set it at 20 pixels. The best font size for screen reading is between 20 and 24.




                                        INSTRUCTIONS








EXERCISE


WEEK 1

For task 1, The teacher posted six words on Facebook, We need to choose four words from those six words, Sketch to show their meaning.


The word I choose is "cry", "dizzy", "slide", and "freeze"


Fig 1.1


WEEK 2

For task 2, We need to render four drafts in the Al.
 
                               
Fig 2.1


WEEK 3

For task 3, We need to bring last week's pictures into action.


I animate with the word "dizzy" and create five frames to express this animation.

                                   

Fig. 3.1  Type Expressions

  • I import each improved frame into ps for editing. Then arrange each frame neatly.

Fig 3.2
  • Finally complete the animation and export.

FINAL



                                   



Week 4

Kerning and Tracking

  • I used 10 fonts given by the teacher to edit my name.

Fig. 4.1 Kerning and Tracking  Without kerning


Week 5

The exercise is that we use the articles and titles given by Mr.Vinod to format them. We only can use black and white pictures, any colors is not allowed.
Fig 5.1


Fig 5.2








Fig 5.3



Fig 5.4Final Modify PDF




FEEDBACK

WEEK 2 
The professor told me that there were too many painting elements in my practice last week. I should focus on the design of fonts. So I made some changes.
WEEK 3 
The professor told me the font does not meet the requirements.

WEEK 4  
maybe what you can do is you can like make it spread more actually it reaches the ages of the frame and then sort of like move like that there should be.


WEEK 5:
Text In many cases, it is not recommended to center text, if centered, it will make the text difficult to read. If the spacing of the letters on each line is uneven or unbalanced, use lowercase uppercase letters instead of uppercase letters to make each line even. Cross alignment of each line is a must. Avoiding bodoni and futura light fonts in the text can make it difficult to read. Specific feedback:I should move the title up the page, there's too much distance at the top, the main problem is that the spacing of the letters is too big, so I need to adjust all the spacing of the characters, to zero, up to three times or down to three times, no more.

WEEK 6

My first version of paragraph font did not follow the requirements. There are too many paragraphs and the pictures inserted do not meet the requirements, so I made some adjustments to replace the picture with helvetica.


WEEK 7

My work does not highlight the key points. And the design is meaningless. Font size and line spacing do not meet the requirements. So I redesign as required.


There was a big mistake in this week's homework. I made an adjustment as soon as possible. This is my first time to come into contract with such a design work. I know it is inevitable. But it also makes me know more about how to work hard and how to design better works.



REFLECTIONS

Experience


During these exercises, I learned something new. At the beginning, I did not know how to use Adobe illstruction. After a period of learning, I became relatively proficient in using it, and I learned the typography of fonts. Through task 1, I learned about character mine removal, line spacing character adjustment, font selection, etc.


Observation

In each class lecture, I saw the works of other students, the advantages and disadvantages of their works have been pointed out to us by the teacher, their ideas are very interesting, I also learn from the experience, so as to apply it to my own works.There are many shortcomings in my work that need to be improved.


Findings

Through learning, I know that typography is an important part of life. We need to pay attention to many details in typesetting design, and we need to consider many factors when designing and typesetting fonts. There are a lot of rules and theoretical knowledge for us to discover and learn.



FUTURE READING



The author of this book is a book written by Massimo Vignelli.  He has rich experience in graphic design and product design. This book is about the guidance of design principles.

The book tells about v's views on its design, and focuses on the important role of introduction, typesetting, grid  in society.


Syntactic consistency is of paramount importance in graphic design as it is in all human endeavors. Grids are one of the several tools helping designers to achieve syntactical consistency in graphic design.


This passage in the article benefited me a lot:

Throughout our creative lives we have sifted through everything to select what we thought best.  We sifted through colors, textures, typefaces, images, and gradually we built a vocabulary of materials and experiences that enable us to express our solutions to given problems - our interpretations of reality.


I think this book has deepened my understanding of design and what kind of design the society needs. We should meet the needs of the society and use design to improve our lives.


However, one has to be cautious in playing with ambiguity because if not well measured it can backfire



I discovered that what is important is to master a design discipline to be able to design anything, because that is what is essential and needed on every project.








Comments

Popular posts from this blog

Brand Corporate Identity | Task 1: Breaking Brand

Publishing Design

Interactive Design-EXERCISE 1&2