Typography-Task Exercise 2 Edit text format

November .1.2023

1/Nov/2023-31/Nov/2023-Week6-Week8

Lin Chenyi/0367008/Bachelor of Design (Honors) in Creative Media

Typography/Taylors University

Task

INSTRUCTIONS

THE LECTURES

week 6

Typography in Different Medium

The publisher's typographers and designers can increase the readability of the article after editing, formatting, and printing the publication.

We can see that typography is everywhere in modern society and exists on many forms of screens.

Such as the operating system, system fonts, the device and the screen itself, etc. Typography is available everywhere in the browser.

Fig 6.1 Poster design

Print type

Font design is to make long texts easier for readers to read and to ensure the smoothness of the text.

Good fonts for printing - Caslon, Garamond, Baskerville are the most

Common fonts used for printing. These fonts are beautiful and smooth, allowing readers to better read the content of the article.

They are versatile, easy-to-understand classic fonts with neutrality and versatility that make typography simple and beautiful.

Print Type Vs Screen Type

Fig 6.2 Text layout

Fig 6.3 Text layout

Screen type

Modifying and optimizing web fonts can increase the readability of fonts on digital screens. These include text height and width, line spacing, character spacing, etc. There are also small designs, strokes and serifs that can be added or subtracted.

For some fonts, we need to change the font size to help improve text space and recognition of non-typographic fonts.

Hyperactive links/hyperlinks

We can find hyperlinks in many websites. Users can click or double-click to jump to a new web page through words, phrases or images. Common text hyperlinks are usually blue and underlined.

Screen font size

When typographers design text, they need to select appropriate fonts and font sizes to ensure readability and fluency.

Print type vs. screen type

System fonts for screen/web safe fonts

Layouts for different media per device

Each device has its own selection of pre-installed fonts. This is mainly based on its operating system. We can install the fonts we need to use on different systems.

Font Size for screen

Fig 6.4 Font, text size

Pixel Differential Between Devices

Fig 6.5 Screen form

static and motion

Static typography has minimal features in expressing text. We can encounter various forms of static layout in our daily life, such as posters, flyers, magazines, etc.

Fig 6.6 Magazine, poster

Fig 6.7 Billboard

Motion  typography

Temporal media offers typographers the type of "dramatic" opportunity to make typefaces "smooth" and "dynamic"

Later, the movement will be expressed through animation.

graphics

Layouts for different media

static and motion

We can see many fonts in life appearing on music advertisements and music videos, including title sequences and typography.

Practice：

The layout of #1

Fig 6.1

Fig 6.2

The layout of #2

Fig 6.3

Fig 6.4

Final text format layout JPG:

 Final text format layout with grid  PDF:

Final text format layout  JPG:

 Final text format layout with grid  PDF:

The layout of #3

Fig 6.5 Fig 5.1 Final Layout JPG Without Grid

After the teacher's guidance, I made the following corrections:

• Adjusted font size
• Adjust the spacing between the letters "on" and "and" appropriately
• Fill the letters on and ld with white and add outlines

Fig 6.6 Final Layout JPG Without Grid

Body

Font: Adobe Arabic Bold (title, body text)

Font size: 9pt (text), 10pt (heading)

Line spacing: 10pt (text), 10pt (title)

Paragraph spacing: 22pt

Number of characters per line: 51 characters

Alignment: left

Margins: 12.7 mm (top, left, right), 12.7 mm (bottom)

    

Final text format layout    PDF:

 Final text format layout with grid  PDF:

FEEDBACK:

Week 6

General feedback: To avoid widows and orphans in our edited text, we need to adjust the spacing and width of the text to increase the readability of the article.

Specific feedback: The layout of #1#2 is too simple and is not recommended. The text for Layout #3 was well expressed and I tried combining them together to create a new layout. After the teacher's guidance, I made the theme text more detailed. Using black borders and no coloring can better preserve the text.

In class, the typesetting assignment was submitted, and the teacher pointed out many areas for improvement.

•  The text is too small. Need to be changed to No. 9-10.
• In the letter on, there should be harmony between the two. If it is changed to the same filling outline, it will be much more beautiful.
•  There are two complete words between the letters on and and. My arrangement is too large and some adjustments should be made.
• According to this design idea, you can also make the last two letters of the word build white in the middle and black in the outer outline.

REFLECTION:

Experience:

Observe:

I found that in layout design, we often use the method of building a grid to arrange pictures and texts so that the information is clearly conveyed, the layout is beautiful, and the reading rhythm is reasonable. In the actual operation process, we need to choose the appropriate grid type according to the specific work content, and set reasonable parameters to align the text with the grid.

FURTHER READING:

"Grid System in Graphic Design" - Reading Notes

"The beauty of reason under order"

Benefits of using a grid

Using a proper grid in your visual design can help:

• Use visual communication methods to construct fact-based arguments;
• Construct graphic and text materials systematically and logically;
• Use graphics and text to make the organization more rhythmic and unified;
• Make the structure of visual information more transparent and tense.

Proper grid

Paper size

Graphic and text layout in 8-frame grid

We can see that in many cases, the layout of the 8-cell grid system can accommodate illustrations of various sizes. In the legend below, there are 8 image sizes in the 8-cell grid system. Depending on the actual work, the designer can combine images of the same or different sizes on the same page. The grid marked with a red slash in the legend can be used for paintings, pictures, charts, illustrations, color blocks and other elements.

Graphic and text layout

Example

Photos, illustrations, color blocks in grid

 

In design, the quality requirements for photos/illustrations are relatively high, and photos/illustrations that are clear and have a unified tone must be selected.

If there are multiple photos of product introductions, it is best to take them at the same location and angle to ensure visual unity.

In actual work, photo materials are often not taken at the same time and in the same space, and the backgrounds are inevitably inconsistent. At this time, in order to ensure uniformity, the photo materials need to be processed. The usual processing method is: cut out the main object, and then Use a gray or colored block as a base underneath. If there is a grid, the substrate must be aligned with the grid, if there is no grid, the substrate must be aligned with the line of text.

 

If you add a color block that is the same size as the grid in a grid with text, the beginning and end of the text will overlap with the edge of the color block, which is obviously not a satisfactory visual effect. The usual solution is:

• The color block should be consistent with the grid, and the text box should be indented;
• The color block extends all around and exceeds the text box.

Example

Identify and select fonts

After understanding the factors that affect readability, we can decide the font size to use based on the layout of the article. The most critical factor is the x-height of lowercase letters and their relationship to uppercase and uppercase letters.

Letters below the baseline are called descenders, and letters above the x-height are called ascenders. The x-height is the space between the tops of the lower non-rising parts.

            

Typography is about caps/ascenders and x-height. Fonts with larger x-height or "tall" lowercase characters are easier to read than fonts with smaller x-height characters. The gaps between different fonts are different.