Typography / Task 1：Exercise

on

Week 1-Week 5 （21th April 2024-27th May 2024）

WangShengxiao/0369380

Bachelor of Design(Honours)in Creative Media

Typography/Task1：Exercise

Table of Contents:

1. Lectures

2. Instruction

3. Lecture Notes

4. Task 1

5. Feedback

6. Reflection

7. Further Reading

LECTURES

Week 1: We started delving into course modules, focusing on using Blogger to effectively present our work.

Week 2: Mr. Vinod provided valuable insight in understanding the feedback, followed by Mr. Vinod's building on our initial sketch, which we needed to start working on our digital piece after making a second change to the sketch.

Week 3: We started to learn how to make animations improved by digital works. We then started Task 1/ Exercise 2 to apply our newfound skills and make improvements to the animation work.

Week 4: After the second animation improvement, we devoted ourselves to the new software tool Indesign and to typesetting exercises.

Week 5: Improve the animation design, then watch the videos to learn how to use the given videos for layout design, and this week we will improve task1's blog.
INSTRUCTIONS
  • LECTURE   Week 1 
During our first week of classes, we were required to watch a series of pre-recorded instructional videos curated by Mr. Vinod, which could be accessed through a playlist on a designated account on YouTube. These tutorials provide a comprehensive walkthrough to crafting an e-portfolio and mastering Blogger's versatile platform. We need to present our class notes, research results, sketches and final projects easily and professionally.

In addition, these videos provide a basic understanding of  typography, clarifying basic concepts such as fonts, font variations, and font families. Mr. Vinod explores the field of visual communication in greater depth,
skillfully illuminating the nuances between calligraphy, alphabet and typography, revealing the unique characteristics and applications of each art form. Through his meticulous guidance, we gain valuable insights into the intricate world of design and develop a deeper appreciation for the artistry and functionality of typographic elements.

2) Development
We need more research and exploration of our own regions, countries and civilizations, as well as contributions to other knowledge systems, in order to gain a more holistic perspective to develop our knowledge and broaden our horizons and knowledge.

1. Development of early alphabet forms:
Phoenicia to Rome.At first, writing was done by carving words into wet clay with a sharpened stick, or on stone with a chisel. The uppercase form is a simple combination of straight lines and circles, which is the material and tool needed for early writing.

2. Development and timing of early letter forms:
The Greeks changed the direction of writing.
The Phoenicians, like other Semites, wrote from left to right, and later the Greeks invented a form of writing called "tiller oxen," which meant that words could be read alternately from right to left or left to right. When they changed the direction of the reading, they also changed the direction of the font. The Greeks, like the Phoenicians, did not use Spaces and other punctuation marks in their letters, which they wrote as shown below.



The Etruscan (now known as Roman) sculptors first painted letters on stone, later switching to carving on marble, and their strokes were characterized by the fact that the weight of the strokes varied from vertical to horizontal, and then the width of the beginning and end of the strokes was eventually retained in the carved font.


3. Handwriting from the 3rd to 10th centuries AD:
Square capital letters are forms of writing found on Roman monuments, these fonts have serifs at the end of the main strokes, and the width of the strokes is limited by reed pens to keep their orientation about 60 degrees straight down.


4. Boldface is Gutenberg's typeface: 
With the dissolution of Charlemagne's empire, Alcuin's play presents regional differences. In Northern Europe, a condensed vertical font known as Blackletter or textura became popular. In the South, however, rounder, more open typefaces were more popular and were called "rotunda" by people at the time.


The earliest printing methods were inspired by the handwritten styles prevalent in Northern Europe during that era. Initially, lowercase letters were influenced by the script used by Italian humanists, while uppercase letters drew from ancient Roman inscriptions. Over two centuries, these styles evolved from calligraphy, spreading from Italy to England.
To mimic the fluidity of Italian handwriting, italics were condensed, allowing more text to be accommodated per page. Originally viewed as distinct from Roman typefaces, italics soo became complementary to them.
Although designed to emulate handwritten calligraphy, italic typefaces are not always ideal for lengthy texts but find widespread use in shorter applications.
Progress in casting and printing technology led to improvements in typeface design. The transition to a more rationalized style saw exaggerated contrast between thick and thin strokes and simplified punctuation.
Further refinement resulted in a style with even stronger contrast between strokes. The English version, known as Scottish-Roman, approached the transitional form.
Originally, serif fonts dominated, with bold parentheses and minimal variation in stroke thickness, catering to the demand for bold advertising fonts in commercial printing. As they evolved, these scaffolds were shed.
Recent developments have broadened the concept of font families to include both serif and sans-serif fonts.

  • LECTURE   Week2
Typography: Text and tracking: kerning and letter spacing Kerning is the automatic adjustment of the spacing between letters. It is often incorrectly referred to as "letterspacing". Letter spacing means adding Spaces between letters and adding or removing Spaces in words or sentences, a fact known as "tracking." 


Typesetting: Text/tracking: kerning and letter spacing：

Typesetting: Text/tracking: kerning and letter spacing：



Left flush: This format best reflects an asymmetrical writing experience. Each line starts at the same point, but ends where the last word ends. The Spaces between words are consistent throughout the text, allowing types to create uniform grayscale values.


Block letters: Like centered, this format gives text a symmetrical shape. It is done by widening or narrowing the spacing between words, and sometimes between letters. The white space between these lines sometimes forms a "river" that runs vertically through the text. Whenever possible, you need to pay careful attention to line breaks and hyphens.


Layout: Text/format text
The genre tends to be based on factors such as personal preference, popular culture, and the need for expression. However, when setting the font field, express the author's information clearly and appropriately. Words that draw attention to themselves before the reader has even read the actual words are wrong and should be avoided. 


Typography: Text/typeface
The font sample book shows a variety of font samples in different sizes. Without a printed page showing samples of different font sizes, one cannot rationally choose a font. The selection is determined on the screen only when the final version is to be read on the screen. 
A printed sample book (or printed ebook) is an accurate reference for fonts, font sizes, font spacing, font lines, and so on. 


  • LECTURE   Week3
There are several options for indicating paragraphs. In the first example, we see 'pilcrow '(¶), preserved from medieval manuscripts and rarely used today.

The following example shows the "line spacing" between paragraphs. Therefore, if the line spacing is 12pt, the paragraph spacing is 12pt. This ensures cross-alignment between text columns


Different methods of emphasis require different means of contrast to highlight the content.

·quotes
Quotes, like bullet points, can be clearly indented to break clear reading axes. Compare the citation indented at the top with the citation expanded at the bottom.

Highlight text with quotation marks
Quotation marks are not quotation marks. The quotation mark is a shorthand for inches and feet. Because of the limited number of keys on typewriters, they were used instead. Later they became known as "dumb quotes".

·Italics
Use the same font family to increase the word weight and make it bold
Use different font families
Use different colors to highlight (black, cyan and magenta are suitable)

Visual differences between the two font families
When highlighting serif font content to sans serif font, reducing the size of the highlighted content by 0.5 is an appropriate way to maintain visual consistency.
When using a background color to highlight behind the content, maintain continuity on the left reading axis to ensure optimal readability.


Keep the difference on the left reading axis 
Inner and outer placement highlights the differences in text

For certain typographic elements, such as bulleted points, placing them outside the left edge of the column is necessary to maintain a strong reading axis.

Title within the text
Below are examples of A, B, and C, according to their level of importance. We need to make sure that these headlines clearly convey the layers of information to the reader.

Grade A Title
Level A headings show a clear separation between topics within a chapter. They are slightly larger than the text.
- Bold and use different font families
- Lengthened and aligned with the text
- Use larger sizes in the same font family
- Small capital letters

Grade B Title
Level B headings are subordinate to Level A headings. It shows examples of new supporting arguments or themes. Therefore, A Level B title should not interrupt content as significantly as a Level A title.
- Small capital letters
- Italics
- Bold serif font
- Bold sans-serif font

Grade C title
Level C headings highlight specific aspects in the content of Level B headings. They do not interrupt reading flow as well as B-level titles.
- Small capital letters
- Italics
- Bold serif font
- Bold sans-serif font

Hierarchy

Cross align
Reinforce the structure of the page by cross-aligning the features and captions with body types, while reflecting complementary vertical rhythms.


  • Week2
    1) Introduction
    W1 Introduction to the module
    • Subject outline & expectations
    • Learning & Assignment objectives
    • Students responsibilities
    • Assignments & assessment methods

    • Sketchs
    I choose the "sleep"、"jump"、"smile"、"dive".

    When i designed “sleep”, I didn't have a lot of inspiration and ideas, so I made the letters look more three-dimensional by changing them into different shapes, as well as making the word look like it was sleeping.
    When i designed “jump”, I made it look like it was jumping by making the letters jagged and using shadows to make it look dynamic.
    When i designed “smile”, I made the "s" look like the smiling mouth, and the "I" points look like the eyes and so on, which combined to look like the smiling person.
    When I designed "dive", I didn't have a lot of ideas and inspiration, and I made the lines look dynamic by adding some design to the lines of these letters.






    • Week3
    1) Introduction
    W2 The evolution of typography
    • Overview (West) type usage & prod.
    • Distinctions between the terms “Font”,“Typeface”, and “Type Family”.
    • The great pioneers.

    How to evaluate your sketch?
    1. Are the explorations sufficient?
    2. Does the expression match the meaning of the word?
    3. On a scale of 1–5, how strong is the idea?
    4. How can the work be improved? 
    How to evaluate your digitisation?
    1. Is the digital exploration sufficient?
    2. Does the expression match the meaning of the word?
    3. Is the expression well crafted (crafting/lines/shapes)?
        3a. Does it sit well on the square art-board
        3b. Is the composition engaging? Impactful?
    4.  How can the work be improved?



    • Week4
    1) Introduction
    W3 Type structure, family and anatomy
    • Letterform and structure
    • Typeface, typestyle, family type

    We need to animate one of the four digitizations that are further refined out of the 16 sketches

    We can't add other shapes and lines, we can only design by changing the shape of the letter itself.


    • Week5
    1) Introduction
    Complete and Submit your final T1, Ex.2 Text Formatting before the next class.
    - JPEG 300ppi, grayscale (with grid visible and without)
    - PDF (with grid visible and without)
    - Provide formatting details: Font & typeface, point size, leading, etc. (see comment section)
    - View student eportfolio samples for best practice















    Text Formatting

    We learned how to use Indesign by watching a video that Mr. Vinod posted on Youtube. We needed to design at least three different layouts.



    work 1
    work 2

    Final work

    Reflection
    Week 2:
    We expand our creative thinking by understanding the meaning of words, which enhances our imagination and creativity. We need to understand the meaning of words to carry out creative design, which is the first step for us to learn typography, so I am full of interest in this course.
    Week 3:
    We started by learning to use professional software such as Ai and Ps for font design and drawing. In this process, I gradually became familiar with the basic use of these software and tools. Our design not only needs to reflect the meaning of the words, but also needs to be skilled in using the software while expressing our ideas.
    Week 4:
    This assignment gave me an initial exposure to the method of making simple dynamic diagrams. Starting with a simple, step-by-step teaching method is very suitable for students like me who do not know much about software details. This arrangement gives us the opportunity to gradually master the relevant operational steps, and we hope to gradually master more knowledge under this guidance.
    Week 5:
    We learned the basic knowledge of typography, and carried out some font and typography exercises, which laid the foundation for our later in-depth study.

    Feedback

    Week 5:

    Specific feedback: The title is very important, it needs to be more eye-catching, and the font should be larger, otherwise it will affect the reader's interest in reading, the margin and distance should be appropriately wide, do not make the font too crowded, improve the blog, and do a good job of picture descriptions.

    Week 4:

    Specific feedback:In the animation design, additional lines and designs can not be added, and the design concept can only be designed on the letter itself, which is best in line with the meaning of the word itself.

    Week 3: 

    Specific feedback: In the process of making digital design dynamic, we cannot add other shapes and lines, we can only design by changing the shape of the letter itself.

    Week 2:

    General feedback: In the second week, we need to digitize four of the 16 sketches, without distorting the letter form, and preferably with a simple but memorable idea.

    Specific feedback: We need to transform the blog language to English and pay attention to the color scheme of the blog to make the font eye-catching.

    Week 1: 

    General feedback: In the first week, we need to watch the MIB, create our own e-portfolio (blog), and add links to the Google feedback form.

    Specific feedback: Choose four sketches from the given words. Make at least four sketches for each word. There is no limit to the method, but be careful that the sketches best match the meaning of the word.



    📖Further Reading

    During this period, I studied 《The Creation of Typography》. Every week, I would read a part and extract and summarize what I learned in this week's study.


    The Creation of Typography

    By Jost Hochuli, Goulden

    Published: 2015


    1. Origin and development of fonts

    The evolution of ancient writing

    The development of typefaces began with the writing systems of ancient civilizations, such as Sumerian cuneiform and Egyptian hieroglyphics.

    The Greek and Roman alphabet systems gradually evolved into the basis of modern Western typefaces.


    Sumerian cuneiform

    Medieval calligraphy

    In medieval Europe, handwritten books used calligraphic fonts such as Blackletter.

    The aesthetics of typeface were greatly explored by the scribes of the monastery during this period.


    Medieval blackbody calligraphy

    2. The Revolution of movable-type printing

    Gutenberg and movable type printing
    In the 15th century, Gutenberg invented movable type printing, which greatly accelerated the production of books.
    The first book printed in movable type was the Gutenberg Bible, which marked the birth of the printed type.
    The Gutenberg Bible
    The impact of movable type printing on typeface
    Movable type printing led to the gradual standardization and industrialization of type design.
    Different countries and cultures have produced their own unique typeface styles, such as the Italian Renaissance typeface and the British classical typeface.

    3. Classification and evolution of fonts
    The main categories of fonts
    Serif: such as Roman orthography, with decorative serifs.
    Sans-Serif typefaces, such as Helvetica, remove serifs and emphasize modernity.

    Serif and sans serif fonts
    Modern font design
    The 20th century saw the emergence of a large number of modern typefaces, such as Bauhaus's geometric typefaces and Helvetica's minimalist designs.
    In the digital era, the richness of font design tools and platforms makes font design enter a new stage of development.

    4. Application and cultural influence of fonts
    The use of fonts in printed matter
    Fonts play an important role in books, newspapers, advertisements and other printed matter.
    The choice of font directly affects the conveying effect and visual beauty of information.

    Font application in modern advertising
    Fonts and brands
    Fonts are an important part of a brand's image.
    Big brands often have their own custom fonts to enhance brand recognition and uniformity.

    The brand font of Coca-Cola

    5. The future of font design
    Technology and innovation
    The future of font design will be increasingly influenced by artificial intelligence and virtual reality technologies.
    Dynamic Fonts and Variable Fonts will become the new design trend.

    Display of variable fonts
    Globalization and diversity
    Typeface design will pay more attention to multicultural and global trends.
    Font designers will need to consider the needs of different languages and writing systems to create more inclusive font designs.

    Conclution
    The Birth of Typeface delves into the history and evolution of typefaces, from ancient writing systems to modern digital typeface design, showing the evolution of typefaces as an important part of human civilization. Through a large number of historical pictures and examples, the book clearly explains the basic concepts and development of font design, which is a rare classic to understand the history and design of fonts.

    Comments

    Post a Comment