Typography-Task 1:Exercises

October 04, 2024

Typography-Task 1:Exercises

27/09/2024

23.09.2024 – 28.10.2024 / Week 1 – Week 5

ZHOU YUTONG/ 0378676

Typography / Bachelor of Design (Honours) in Creative Media

Exercises : Task 1 - Exercise 1 & 2LECTURES

INSTRUCTIONS

LECTURES

Week 1-Typo_0_Introduction : Summary of my lecture here.

Typography plays an important role in design; it is a kind of visual way of expression and text processing. Mastering typography is not that easy; it takes lots of practice and feedback. Typography isn't just about text-it is about fonts, layouts, and presentation of information. Over time, while technology has changed, so did the methods and tools of typography. Knowledge of the history of typography and basic terminology is important to designers because it takes part in communication of information and appearance.

concrete task

Typographical

(1) Typography is essential in the design; it helps in paying attention to detail. The acquisition of these skills does contribute to various areas of design and further development in students.

(2) Moreover, typography can be made animated too, like film titles or GIFs. All that shows how designers can be creative with typography.

(3) Web designers need to be informed about typography in order to make websites appear both attractive and user-friendly.

(4) Fonts and typefaces are two different things. Fonts refer to an individual typeface or word weight. Typefaces refer to families of fonts.

Week 1-Typo_1_Development : Summary of my lecture here.

This course reviews how typography has changed throughout the ages: how typefaces have been influenced first by writing instruments, then by the materials of the day, and finally how different cultures and technologies have had an impact on the writing of letters. The teacher underlines that it should be done from a Western point of view; there is, however, its limit, and one should not forget to look at other regions too.

concrete task

1.Preamble

(1) Asia has contributed much to typography. Due to that fact, we usually don't understand global design history since such contributions are usually overlooked.

(2) Research should focus on the ignored groups.

(3) The local Malaysian designers need further attention and documentation so that in the future research, they can be represented in various ways.

2.Typography:Development/Timeline

Early letterform development : Phoenician to Roman.

Typography developed much, especially in the West. First of all, there is a need to see the development of writing from Phoenician into Roman and, therefore, how its tools and materials have developed.

(1) Early writing instruments decided the way typefaces developed. The earliest writing was made by people, who used sharp instruments on wet clay or stone.

(2) This early tool was capable of only straight lines and circular arcs.

Fig.1.1 4th century B.C.E.Tunisia. Phoenicians votive stele Carthage

(3) The Greeks changed the direction of writing, a style of writing known as Bosco III.

It gave the text more readability, hence the impact of more writing.

(4) The Etruscan and Roman made letter form on marble, the stroke of those letter changed from vertical to horizontal.

Fig.1.2 Augustan.inscription in the Roman Forum

This method lets you test a drawing before engraving, avoiding mistakes on expensive materials.

(5) Alphabets have evolved in many ways. The development of writing tools and techniques has led to changes in writing, making it more efficient and practical.

3.Hnad script from 3th--10th century C.E.

(1) The block capital letters took their form from the reed pens in order to take up a suitable form for a particular style of writing.

Fig.1.3 4th or 5th century : square capital

This genre of writing originally appeared about the fifth century BC and found favor rather rapidly on Roman monuments.

(2) Cursive writing was developed to increase the speed and efficiency of writing.

The advent of this form of writing allowed letterforms to be written in a shorter period of time while retaining legibility.

4.Typography:Development/Timeline

(1) The development of the typefaces is long, complete with many significant fonts like Garamond and Baskerville that led the charge for most of history.

Digitalization brought these fonts up to date and made them more accessible for use in modern design, thereby expanding the palette for the designer.

(2) This lesson will explain the categorization of different fonts and when each font is used.

Week 2-Typo_3_Text_P1 : Summary of my lecture here

It also involves formatting the text into good readability, mainly word spacing and tracking, which are word spacing; therefore, it means automatic spacing of letters while letter spacing refers to increasing the spacing of the letters. It also shows how to format text using InDesign software, including how to select the right font size, line spacing, and text alignment. It gives emphasis to the readability of text in design, where big paragraphs and not too much spacing between letters and wrong line adjustment would provide serious damage to the visibility of the message.

Text/Tracking : Kerning and Letterspacing

concrete task

1.Preamble

(1) Letter spacing is the amount of space added or subtracted between letters.

In a letter, correct spacing allows for airier feelings, and when writing in all capital letters, for example, words do not jam together.

(2) If the typesetting application, like InDesign, is applied, then text formatting adjustment is pretty easy. Because such applications are created for work with big volumes of text, they allow users to manage to get the desirable text effect and layout fast.

2.Design Documentation

(1) No. of columns selected is very vital regarding neat and readable type. In the above illustration, three columns have been selected in order to provide good laying out of text and pages space can be utilized with efficiency.

(2) The spacing word and spacing line in setup will provide a better look and readability to your text.

The video show how to use shortcut keys to quickly adjust these parameters to achieve the desired visual effect.

(3) Letter spacing is very important in design, especially when using capital letters

Proper letter spacing improves the readability and aesthetics of the text and prevents letters from going beyond the text box.

3.Design Typesetting

(1) In design typography, the treatment of letter spacing is critical to readability.

While increased spacing in uppercase can relatively be more acceptable, serious deepening of it in lowercase means a lot for reducing the general readability; hence, it is not suggested by serious designers.

(2) While capital letters can exist in a vacuum, lower-case letters require negative space-space between letters-to be readable. As this text demonstrates, when lower-case is set too open, that negative space is removed and the text becomes unreadable.

(3) Text justification relates to the dynamics of the act of reading itself, and left-justification is closer to the natural tendency.

With consistent spacing, text is not only easier to read, but also more visually harmonious.

4.Design Balance

(1) It's all about a judicious balance between aesthetic effect and the communication of the message. Very flowery fonts may hamper the communication of the meaning to the reader; hence, the choice of typeface becomes very crucial.

(2) A font should be both readable and decorative when it's chosen. Designers have to choose the most proper fonts on different occasions so that the contents and messages can be delivered in a proper way.

(3) Display fonts shall not be set in all uppercase.

The design should ensure that the use of fonts conforms to the design specifications so as not to detract from the overall visual effect.

Week 3-Typo_4_Text_P2 : Summary of my lecture here

Part IV: He revises the salient features taken from his previous lecture about the important concepts of text formatting, which constitute letter spacing, word spacing, and alignment. It's very crucial in typography to have even text color and maintain spacing between paragraphs. Vinod also explains the concept of taking care of paragraph spacing, line spacing to have the facility of cross-aligned text in InDesign. Discussion covers avoidance of orphaned or orphaned lines, emphasis on ways through which it is possible to give emphasis to the text by the use of italics, bold amongst others. Finally, it is emphasized to develop clear hierarchies and typography.

concrete task

1.Key Concepts in Text Formatting

Basically, it means the space between two letters or words, word spacing means the distance kept between two letters. Basically, the correct understanding of the terms requires text formatting.
Introduction to paragraph markers, that is, signs indicating gaps between paragraphs, their origin, and how they find application today would have the students exercise typography. Once they master the same, that would enhance their typographic skills.

2.Appropriate font size and line spacing

The leading should be at least 2 to 3 points larger than the font size to provide better readability and optical appearance.
A typesetting tool like InDesign will allow for more accurate paragraph spacing, and line spacing. To create spaces between paragraphs, do not hit ENTER twice, but rather type out exactly what the space should be.
The line spacing should be the same as the spacing between paragraphs if it is to align well. Then the paragraph spacing should be as long as the line spacing for the best reading rhythm, which is visually consistent.

3.Cross-alignment and line spacing are important to ensure that text is neat and tidy

Besides, some nicely applied paragraph spacing and line spacing complete a few excellent typographic effects, good for readability by this designer.
Cross-alignment means the alignment through the columns, and this effect can be achieved when the values of the paragraph and line spacing are kept the same. The effect that can be achieved with span alignment is really an important issue in typography.
There is a great difference between line spacing and leading. The former is a calculation based on a type baseline concerning typesetting, while the latter means real spacing between lines of typesetting. In other words, both are indispensable concepts with respect to typography.

4.Dealing with orphaned and orphaned behavior is very important

With appropriate paragraph line-ending and column lengths, it is very easy to avoid all of these typographical problems, which works to enhance readability of the text.
Emphasis could be brought to certain texts by making them italic or bold. A person could make fonts thicker or a different font type for bringing emphasis in order for it to catch the eye in a big block of text.
It is very common, when using different kinds of fonts, for one to have to decrease the font size by 0.5 for them to appear uniform. It will not make one block of text stand out too much when compared to the other, hence keeping the typographical harmony.

5.The visual hierarchy of this book and the arrangement of typographic elements

In typography, a very important thing is visual hierarchy; with the organization of elements, the sequence that will be followed by the reader is structured.
This means that designers need to first realize how different typographic elements intersect in clarity of information communication and effectiveness of the reading axis.

It is important understand the difference between quotation marks and apostrophes.
Apostrophes are used to indicate feet and inches, while quotation marks are used to quote

6.Different header levels

In designing the text, variably leveled headings will amply be able to capture the hierarchy of information. With clear visual separation, it can make the readers comprehend and follow the text content much better.

Crossaligned design in text strengthens the visual structure of a page. When subheadings are aligned vertically with main body texts, they converse information across and help the flow of reading. Spacing and alignment in this process of designing must be done accordingly.

Maintaining consistent line spacing and spacing improves the readability of text and makes the hierarchy of information clearer.

Week 4-Typo_Ex Type Formatting 1:4 : Summary of my lecture here

Well, this video covers a very basic typography adjustment related to letter spacing-word spacing, better known as kerning, and line spacing or tracking.
The word spacing adjusts the spacing between individual letters. Line spacing, on the other hand, is evenly spacing for a series of characters.
The following video demonstrates, through InDesign CC software, how to set up a new document and then practice with the 10 provided fonts. To achieve good, readable text, font selection is emphasized, as well as the importance of letter and line spacing for aesthetic appeal.
This will go a long way in the eventual mastery of text formatting. Finally, it is pointed out that attention to information presentation and formatting is an important part of accomplishing any given task.

concrete task

1. Word spacing (kerning) and letter spacing (tracking)

(1) Kerning and tracking are for different application scenarios: basically, kerning works for a visual effect of a particular combination of characters, while tracking is applied to readability and consistency for the whole text.

(2) Character spacing adjustment-kerning: this is, in detail, the art of making characters balance. Good kerning would make the readability of the text and the aesthetics go a step further and make the design catchier.

(3) Letter spacing-tracking: this refers to the even adjustment in space between characters within a certain range. This adjustment is usually done for blocks of text in order to maintain overall visual consistency in flow.

2.How to use the text box tools and character formatting controls

(1) The text box tool is easy to use, simply select the tool and click and drag to create a text box. You can then enter text into the text box, such as a name, and resize the text box as needed.

(2) The right font can really make a big difference in the way your text comes out. The video shows how to choose various fonts。

such as bamboo regular, from the control panel to achieve the desired design effect.

3.center alignment

(1) Letter spacing adjustment is a part of design that cannot be ignored. By observing the space between letters, letter spacing can be effectively modified to eliminate visual discomfort, thus enhancing the readability and aesthetics of the text.

(2) Letter Spacing Adjustment, also called Word Spacing Adjustment, is mainly used to cancel the extra space between letters so that words look more compact and beautiful. Such adjustment can be made in a very quick way by selecting letters that need adjustment and then making use of the shortcut keys.

4.Tips for Parent Pitch Adjustment

(1) Adjusting kerning, the space between letters, and/or tracking, the overall spacing of a word, will create a more pleasing, harmonious text.

(2) During letter spacing adjustment, by viewing them, you should evaluate with your eyes half-closed to make a better judgment on whether it is appropriate or not. (3) Taken into account that different fonts are used, you can change at once properties of the text via pipette tool so that the text will be according to the previously selected font.

5.Presentation of information is critical

It is always important that line spacing should be increased so that the text takes its proper place on the page. This it does by allowing the text to stretch from top down with less sacrifice for comfortable page margins on all sides.

Typo_Ex Type Formatting 2:4 : Summary of my lecture here

In this task, learn how to adjust font size, line length, line spacing and paragraph spacing on an A4 page. First, understand the importance of a grid system to organize information effectively. Next, adjust margins and columns to ensure an attractive page layout. Choose the right font size (usually between 8 and 12 point) and make sure line lengths are between 55 and 65 characters. Lastly, use the appropriate line spacing and spacing of paragraphs such that any written text will be legible and look quite attractive. With these steps, visually balanced and easy-to-read documents could be created.

concrete task

1.How to introduce a new page

(1) It is important to master the use of a grid system.
Because with the correct arrangement of grids, a page's readability and visualization can be developed.

(2) The margin space may be changed to enhance the general display of a page. Good page layout is based on good-looking margin space, which attracts the viewer's attention.

2.Appropriate margins and number of columns

(1) While laying out documents, good margins and the number of columns are necessary for appeal: uniform margins give unpleasant-looking documents; a reasonable number of columns improves readability of text and makes the layout more beautiful.

(2) Margins are very important in the design of a document; standardized margins make a document look boring.

(3) The font size and line spacing is also an important aspect of the typography. Usually, the A4 and A3 documents should have font size in between 8 to 12 points to maintain clarity and readability of text.

3.Text formatting is very important

(1) Text formatting is of great importance and affects not only readability but also the aspect in general. Regulating the spacing between paragraphs and lines makes the text more readable, hence boosting the user experience.

(2) In text editing, proper paragraph spacing allows reading comfort. The spacing between paragraphs helps the readers to catch up on the contents more comprehensively without visual litter.

4.Appropriate font size and number of characters

Checking the number of characters in a column can be critical when choosing a font size. The right number of characters helps to ensure that the text is not too small or too large for comfort while reading and is usually recommended to be between 55 and 65 characters.

Typo_Ex Type Formatting 3:4, 4:4 : Summary of my lecture here

3:4 Learn to link text boxes, align and work with text edges. Emphasized that left alignment is the best choice when working with large amounts of text. Explained how to link text boxes for text flow and to make sure there are smooth transitions of text between columns.

4:4 The final portion was the text formatting with regard to layout and alignment. Exercises in text formatting were said to be very important.

concrete task

Typo_Ex Type Formatting 3:4

1.How to connect text boxes in a document

(1) The design of a document involves considerations of levels of information. Headings, subheadings, and the body of a document should be clear so the focus and structure of the document will be immediately obvious to the reader.

(2) InDesign does not treat images the same as other software. For example, use the Direct Selection tool to move the image inside the bounding box to crop the image.

2.Inserting images and adjusting text layout in documents

(1) The appropriate control of the text can enhance the readability and visual effect of the document; based on this, set a reasonable margin and number of columns to optimize the display of the text.

(2) In the text boxes, standard text size must be kept. Different sizes could give the wrong impression to the reader and make changes in information hierarchy or readability, therefore consistency will be a key word in design.

3.Adjusting spacing and word spacing in typography

(1) In the process of typesetting, point size and line spacing are related to the effect brought by the text. Reasonable line spacing can reflect neat text, which cannot lead to much visual fatigue.

(2) Removing hyphenation in text is yet another easy method to optimize your typography. Hiding the hyphenation gives the text more visual integrity and prevents the text from breaking on many lines

4.Text alignment is very important in typography

(1) Left alignment has the advantage of offering a natural type of read and is suitable for most texts. In contrast, too full alignment can easily lead to a few words being spaced out and affect reading fluency. Full alignment therefore needs to be used with care.

(2) Typesetting: When adjusting word spacing and line spacing accordingly to achieve better readability, full alignment is especially used in order to avoid compactness of the paragraphs by increasing their spacing.

Typo_Ex Type Formatting 4:4

1.Completing text formatting

(1) In layout design, there is an indispensable hierarchical relationship between headings and subtitles. A clear visual hierarchy will be able to guide the reader's gaze from title to body, emphasizing the delivery of information.

(2) Setting margins is based on the very basis of layout design. All the text information being within the set space will make the text look neater and more organized overall.

2.Location and alignment of information is important

(1) The information relationship understanding plays an important role in the whole layout process.

(2) Rescaling and text spacing can be done in the following ways for the layout to be readable: designers should eliminate all the options of interference of raised sections of texts with each other to ensure a clean and professional look.

3.Concept of baseline grid and its importance

(1) The baseline grid is shown by adjusting the view threshold. This feature enables designers to view the alignment of text in full-text mode to make sure that typography is correct and consistent.

(2) Line grids allow the text to be more easily read and visually analyzed due to the uniformity within each line of text being on the baseline, which in turn helps avoid typographical clutter.

4.How to adjust the layout of images and text

(1) Positioning images and text helps you to achieve a clean layout. You'll have to move these around until their positions feel visually aligned in order to improve the aesthetic feel of your design.

(2) Another crucial and important task involved in the finishing touches of formatting is ensuring that text crosses. You will be able to create a neat and readable material by observing how the text crosses with other elements.

Typo_Ex Type Formatting 4:4A : Summary of my lecture here

Achieving crossalignment is often hard, especially with text formatting. This desired result can be achieved with an automated approach rather than the manual adjusting of each element.

1.Achieving cross-alignment

(1) Turning on hidden characters is one of the key steps in the automation process. By pressing the command option I, you can view hidden paragraphs and characters, which helps to check if the text is formatted correctly.

(2) Cross-alignment also includes adjusting heading size and line spacing. When the heading font size is increased, so should the line spacing; otherwise, the text will not avoid each other

2.The line spacing of text needs to be a multiple of the font size

(1) Text alignment can be done promptly with the selection of text and paragraph control tool. By clicking on the Alignment Baseline icon, automatically all the selected text adjusts its alignment, thereby simplifying the process of typesetting.

(2) In the typesetting, it should be able to make clear hierarchy relationship of headings and body for readers at one look. Generally speaking, it's a good way that showing the division of different levels by changing the style of the heading or subhead.

Typo_2_Basic-Summary of my lecture here.

It is a very general lecture on typography, briefly touching on the composition of letterforms. He says that, first of all, to know the parts of letters and their respective names is necessary in being able to identify certain fonts better. He goes into basic ideas of things such as baseline, centerline, x-height, and rising and falling parts of a letter, and then discusses the visual effects of different letters and their design principles. Glyphs, spacing of letters, and styles of numbers are also covered, while the importance of choosing the right font family for your design is emphasized.

concrete task

1.Composition of letter forms

These are the tendencies of letters to differ in visual and mathematical proportions. Comparing the height of uppercase and lowercase letters shows just how important the visual adjustments in design are that are critical to typography.
Different parts of the structure of the alphabet such as vertices, shoulders and rising lines have specific names and functions.
The basics of composition involve serifs, crossbars, and the inner space of the letters. Knowing what these things are and in what ways they come into play can only serve to increase readability and the visual appeal of the typeface, thus strengthening the design.

2.Internal space for serifs, crossbars and letters

The serif is essential in the letter design, and it is mainly located at the end of the letters or on crossbars. The serifs may be straight or curved, depending on the visual effect which it imparts to the letters.
The concepts of M and N spaces give the designer an idea of the space between letters: an M space being the width of a full letter, an N space being half the width of a letter, often used for spacing adjustments in typography.
Ligaturesare designed to avoid visual conflicts between letters. By combining specific letters together, designers cancreate a more harmonious font appearance and enhance the overall design quality

3.Understanding stroke direction and pressure changes in letters

The pressure variations in letters can be divided into two groups: oblique and vertical pressure. In general, the oblique pressure is brought about by handwriting, while vertical pressure creates a more stable visual effect; special attention in design is required in this respect
The concepts uppercase and lowercase letters have their roots in the early history of lead typesetting. This historical background helps us understand why terms like uppercase and lowercase are still used today to describe letter forms.

4.Good typographical choices are crucial

Design relies on good typographic choices to make a statement. A designer should learn some of the classic fonts in order to understand the characteristics and applications of other fonts.
Limiting the number of fonts used can really help designers begin to master the basic skills more strongly. Practicing these nine classic fonts allows designers to know more about nuances of fonts and their application.
Choosing the right typeface enhances the effectiveness of the design communication and ensures that the message is clearly conveyed.

Above are the video notes

Task:Exercise - Type Expression

week 1 : Compose and express the chosen 4 words using any of the 10 typefaces provided.

Sketches:

Fig2.1 Jump, chop, shake , fish.（24.09.2024）

Fig. 2.2 Jumping, chopping, shaking and fishing. A Redesign（15.10.2024）

The teacher asked us to choose four letters as the subject matter, FISH,CHOP,SHAKE,JUMP. using a fixed font to show the spirit of the words. In this process, I found that it was not easy to express the effect I wanted to express, the teacher suggested that I use some line bends to express the vitality of the letter, I found this method is effective and fast, through the line bends can be expressed as if the letters come to life.

week 2 : We need to finish the font design using photoshop

FIg.3.1 Four designs were selected (31.09.2024)

revise

FIg.3.2 Four designs were selected (31.09.2024)

For the FISH, I used waves to represent the sea, I represented a fish underwater, and S represented the hook.

About JUMP, I connect J and M together as a trampoline, U stands for the person, P stands for the ground to step on, and U shows a kind of bouncing feeling on it.

For SAKHE, I pulled the whole font to show a sort of up and down feeling.

Regarding CHOP, I designed the P as a knife, with a horizontal line running through it like a knife slicing down and splitting the word in half.

Although fixed fonts have some limitations compared to hand-drawn line drawings, the neatness of the picture and the outstanding expression of the effect is the superiority of computer design.

Week 3 : Designing static fonts into dynamic text

Fig 3.3 dynamic pictures(06.10.2024)

I chose CHOP as the design object, and obviously I designed the P as a knife just so it could be wielded in the GIF image to justify moving the CHO around as a chopping effect, and I messily erased it with an eraser to make a sort of chopped up letter effect。

Technology was a big challenge in this process, I kept copying and pasting and moving the layers around to get the desired effect.

Week 4 : T1, Ex.2 Text Formatting

FIgure 4.1 Name Design(23.10.2024)

FIgure 5.1 Cover Layout Design(23.10.2024)

revise

FIgure 5.1Cover Typography Summary(23.10.2024)

I chose the Bembo Std font for the layout, firstly I watched five videos to understand how to layout fonts, I created cool sheets of layout, one with a grid, which helped me to have a neat picture when I was laying out the lettering

FINAL Text Formatting Layout

HEAD LINE
Typeface: ITC New Baskerville Std

Font/s: ITC New Baskerville Std

Type Size/s: 72 pt
Leading: 60 pt
Paragraph spacing: 0

BODY
Typeface: ITC New Baskerville Std

Font/s: ITC New Baskerville Std
Type Size/s: 14 pt
Leading: 14 pt
Paragraph spacing: 0 pt
Characters per-line: 57
Alignment: left justified

Margins: 20 mm top, left + right + bottom
Columns: 2
Gutter: 10 mm

FIg. 5.2 (29.10.2024)

FEEDBACK:

Week 1

My teacher checked my work and gave me feedback, she thought my topic design was not original enough and told me to try to think of some more good ideas and that it would be better if I expressed them electronically!

Week 2

My teacher looked at my design and she said it was improved this time but slightly lacking, overall it was okay, I used a fixed font this time and took my teacher's suggestion from last time

Week 3

My teacher said that my design was a bit complicated and told me to reflect it with a simple design that was not too curvy and did not reflect human characteristics

Week 4

The teacher told me to follow the requirements given and that the spacing of the fonts needed to be taken care of

REFLECTION:

Experience:Throughout the task, I learnt a lot, starting from the very first draft design to the final design of dynamic fonts, I learnt about the different ways of typography, which was very interesting and at the same time impressed me that the fun of words is endless, no matter whether it's the meaning of the words themselves or the interesting forms of embodiment, the typo course has made an impact on me that is immeasurable!

Observations：Teachers will give us feedback on our work every time, from which we can learn a lot, the subject of design is to continue to learn knowledge and advice, and continue to move forward, and at the same time, the work of other students many very good, which is worthwhile for me to learn!

Findings ：In the first task we learnt to use some of the PS and ID software, it was just some introductory ones but we could already handle a lot of problems, the most interesting thing was that we could realise our ideas with the help of the software, we made our own fonts, and even made it move, which I had never tried before, and tried to make text typography at the same time, which made me feel that the next step I Could try my hand at making a book

Further Reading

1.Typography is an evolution of the written word, and as such it

participates in a history of visual communication extending thousands

of years. That evolution is presented here in the form of a timeline that

traces a development from hand, to mechanical, to digital practice, in

the context of world-historical and art-historical events.