TYPOGRAPHY ✦ TASK 2: TYPOGRAPHIC EXPLORATION & COMMUNICATION ✦

07.10.2022 – 21.10.2022 / Week 6 – Week 10

liuziyu / 0367533
Typography / B' of Mass Comm (Hons) (Broadcasting)
Task 2: Typographic Exploration & Communication

INSTRUCTIONS

Week6

LECTURES：

Typography in Different Medium

• In the past, printing was considered alive only when it appeared on paper. Once the publication is edited, formatted and printed, it is complete. Nothing changed after that. Skilled typographers and designers will create good typography and readability
• Today, typography exists not only on paper but also on numerous screens. It is affected by many unknown and fluctuating parameters such as the operating system, font system, device and screen itself, etc. The layout experience will vary based on how the page is rendered, since layout occurs in the browser.

Print Type Vs Screen Type

• Long before we read from screens, typefaces were designed to be read from print. It’s the designer’s job to make sure the text flows, flows, and is easy to read.
• Good fonts for printing - Caslon, Garamond, Baskerville are the most common fonts for printing. Because they are characterized by elegance, intellectuality, and high readability in small fonts.
• They are versatile, easy-to-digest classic typeface, which has a neutrality and versatility that makes typesetting with it a breeze.

• Fonts used for the web are optimized and frequently modified to enhance readability and performance on screens in a variety of digital environments. This can include higher x-heights (or reduced ascenders and descenders), wider fonts, more open counters, thicker strokes and serifs, reduced stroke contrast, and modified curves and angles for some designs.
• Another important adjustment, especially for smaller fonts, is more open spacing. All of these factors help improve character recognition and overall readability in non-print environments, including the web, e-books, e-readers and mobile devices.

Hyperactive Link/ hyperlink

• A hyperlink is a word, phrase, or image that you can click on to jump to a new document or a new section within the current document. Hyperlinks are found in nearly all Web pages, allowing users to click their way from page to another. Text hyperlinks are normally blue and underlined by default. When you move the cursor over a hyperlink, whether it is text or an image, the arrow should change to a small hand pointing at the link.

Font Size for screen

• 16-pixel text on the screen is about the same size as printed text in a book or magazine; this factors in reading distance. Because we read so close together, we usually set them around 10 o'clock. If we're going to read them from a distance, we need at least 12 points, which is about the same size as the 16 pixels on most screens.

System Fonts for Screen/ Web Safe Fonts

• Each device has its own selection of pre-installed fonts. This largely depends on its operating system. The problem is that each one is slightly different.
• For Windows-based devices there may be a set. And MacOS draws inspiration from another. And then Google's own Android system also uses their own system.
• Let’s say a designer chooses some obscure paid font family for the design of this website. If we have not installed the font, and it is not extracted from a web-friendly place, the font we see will default back to some basic variant, such as Times New Roman.
• As visitors, though, we don't necessarily know what's going on. To us, it looks ugly.
• However, "cybersecurity" appears in all operating systems. They're a small collection of fonts that overlap from Windows to Mac to Google.

Pixel Differential Between Devices

• Not only do the screens used by our computers, tablets, phones, and TVs differ in size, but the proportions of text we see on the screen are also different because they have different sized pixels. 100 pixels on a laptop is very different from 100 pixels on a 60-inch HDTV.
• There's a lot of variation even within a single device category

Static Vs Motion

• Static typography has minimal features in expressing text. Traditional features such as bold and italics offer only a fraction of the expressive potential of dynamic properties.
• From billboards to posters, magazines to flyers, we come across various forms of static typography with a wide range of uses. Whether they are informational, promotional, formal or aspirational design pieces, the extent to which they impress and impact us is closely related to the emotional connection they have with their audience.

sports typography

Temporal media provide printers with the opportunity to "dramatize" typefaces, making them "fluid" and "dynamic" (Woolman and Bellantoni, 1999). Movie title credits present printed information over time, often brought to life through animation. Motion graphics, especially the brand logos of film and television production companies, contain an increasing number of animation types.

Home work

Week6:

• This week, the teacher asked me to continue to innovate and change my layout design.
• Based on the teacher’s evaluation of my layout design last week, I summarized the following questions:
• Problem 1: I just create it randomly without understanding the meaning of the title, which makes it impossible for readers to understand it at first glance.
• Problem 2: The layout is too messy and there is no design idea in it.
• Finally, I made a final step of improvements based on these questions, and the picture below is my final design.

Week 7:

This week the teacher told us about the types of pens used for letter sketching and provided some example videos for us to watch before we started creating our own letters. The teacher also suggested that we do some research before constructing our own letter forms.

Week 7:

Home work

This week the teacher asked us to observe and compare the four letters H, O, G and B.

• First of all, what I want to say is H and O. From the bottom of the two of them, it is obvious that the bottom of O is more protruding than that of H. I think this is because the bottom of O is a circle, so it is on the same line. When , the bottom of O will come out a little more
• Then there is H. Compared to O, H pays more attention to the neatness of each line. The two vertical lines it generates must be aligned, and then the horizontal line must be placed in the middle of the two vertical lines. Of course, different fonts are different for H The position of the horizontal line in the middle is also different.

• The second one is G and B. The difference from H is that these two are in lowercase form.
• Let’s talk about G first. The shape of g is more like two lowercase O’s plus a vertical line. When designing g according to the shape of the font, there should be a little more vertical lines, and the size of o should be consistent.
• Then there is b, which looks like it consists of a lowercase o plus a vertical line. The bottom of the vertical line should be consistent with the bottom of the o.

• Finally, there are all the letters. When all the letters are arranged together, you can see that the bottom of the part with o will be a little longer than the vertical line. Maybe it is a case problem, or it occurs when arranging the letters. A slight deviation causes the bottom of o to protrude a little more than other letters.

Week 8: rest week

week 9:

I showed my nine font sketches to my teacher, who told me their different opinions on which fonts would look best. Let me choose one that I like, and after choosing it, let's spend a day creating more letters and symbols. Before digitizing, the teacher taught us several ways to create, either using lines, shapes or strokes to digitize our fonts. I also learned about new tools like the Width Tool and Pathfinder Tool that can help us create fonts.

week 9:

Home work

This week’s homework teacher asked us to use three different markers larger than 3.0 to write nine font styles we like.

I chose the first type of the third one because I prefer this sleek font, which looks very comfortable.

Week 10:    I showed the teacher the first draft of the font I designed, and the teacher provided me with many suggestions to help me better improve my font. I spent a lot of time getting personal feedback and improving it, and finally the teacher told us a few things to pay attention to before importing our designs into FontLab.

Week 10: 

Home work

The teacher asked us to use Adobe Illustrator to digitize our words.

When I showed it to the teacher, the teacher said that my S was too rounded and inconsistent with the other letters, and it was a bit out of place. Then he taught me how to become the same as the other letters and become more harmonious.

After the improvement, it is obviously much better. S blends into other fonts and becomes more harmonious.

Week 11:     The teacher gave us another week to further refine and improve our digital fonts, mainly fixing small details and getting feedback.

Week 12:    The teacher asked us to download FontLab 7 and import our fonts. Before copying and pasting the design from the font we designed, we need to set exact guidelines and preferences in it. We had a short lecture on how to use kerning within the font lab, and then moved on to working with our own fonts. We need to export our fonts from fontlab and create a poster based on these fonts.

Week 12:

Home work

This is the font I imported.

Because the font I created is relatively simple, the teacher said I have no other questions to start making posters. Here is my font poster design.

Feed back：

Week6:

1. The layout design assignment for the sixth week was completed through constant revision and updating in the previous two weeks.
2. When I was designing the first version, my teacher said that I had too many font styles and I only needed one.
3. Then the teacher also reminded me that I need to understand the meaning of the title in order to better design the font layout.

Week7：

I showed my homework for this week to the teacher, who asked me to choose one of the nine fonts I liked, and then helped me correct my fonts. For example, C and G looked too similar and there was no difference between them, and the vertical line at the bottom of G The line should be written in dots to highlight the difference between C and G.