Typography Task 2: Typographic Exploration & Communication Week6 - Week7 ( 31/10/2023 - 7/11/2023)

31.10.2023 - 7.11.2023

Ruthlene Chua Zhen Si 0365222 

Bachelor of Design (Honours) in Creative Media -Typography

Task 2

• Lecture 
• Instructions
• Class Summary
• Task 2 Exercises
• Feedback
• Reflections
• Further Reading

---

LECTURE (SUMMARIES VIDEO)

REFER TO TASK (1)

Week 6-31/10/2023: Typo_6_Screen&Print

• How is typography used ?
• In the past, typography was only considered alive until it touched paper. Nowadays, typography may be found on many other screens in addition to paper. Numerous unidentified and erratic factors, including the operating system, system typefaces, the device and screen itself, the viewport and more, might affect it.

Figure1.0 : Examples of typography in print

• Print Type Vs Screen Type 
• Type for Print
• A good typeface for print: Caslon, Garamond, Baskerville etc. (common typefaces that use for print because of their characteristic which are elegant, intellectual and even readable when set at small font size) 

Figure 1.1 : Examples of typesetting

• Type for Screen
• Typefaces intended for use on web are optimized and modified to enhance readability and performance on screen in a variety of digital environment. This includes taller x-height or reduced ascender/descender , wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contract,  modified curves and angles for design 
• Important adjustment :Open spacing character recognition and general readability in non-print environments, such as the web, e-books, e-readers, and mobile devices, are enhanced by typefaces designed for smaller sizes.

• Hyperactive Link/hyperlink
• It is a word, phrase, image that you can click and jump into new document or new section within the current document. Hyperlink are found in web page, allowing users to click their way from page to another. Hyperlink will have a blue line under.

• Font size for screen
• 16 pixel text on screen is the same size as text printed in book or magazine
• Usually set at 10 point because we read books very close
• In arm length, it should have at least 12 point , which is same size as 16 pixels on most screens 

Figure 1.2: The Differences of Font Screen and Print 

• System Fonts for Screen/Web Safe Font
• Each system comes with its own pre-installed font selections, therefore font should be installed to avoid font default back to some basic variation.

• Pixel Differential Between Devices
• Different devices has different variation 

Figure 1.3: Technical information in term of screen size

•  Static Vs Motion
• Static typography has minimal characteristic in expressing words. Traditional characteristic such as bold and Italic offer only fraction of the expressive potential of dynamic properties.
• Motion Typography offer typographers opportunities to "dramatize" type, for letterforms to become "fluid" and "kinetic"
• Type is often overlaid onto music videos and advertisement, its often set in motion following the rhythm of a soundtrack.
• On Screen typography has developed to become expressive, helping to establish the tone of associated content or express value. 

---

INSTRUCTIONS 

<iframe src="https://drive.google.com/file/d/1P1-N-eCTO_nkCLQU0XI8iIPDiF31034k/preview" width="640" height="480" allow="autoplay"></iframe>

---

CLASS SUMMARY 

Week 5: - Previous Task 1 e-portfolio -

Week 6: -NONE-

Week 7: We are told to do sketches of our own words by using the providing words and type of pens.

---

Week 5 (24/10/2023) : TASK 2

Task 2 Exercises - Text Formatting ( Advance layout making )

• The point size range for body text 8 - 12 
• if a point size is 10, leading should be 2.5 to 3 point larger , font size can straightly decide the leading as a result 
• Line length can be between 55 to 60 but 45 is also acceptable 
• Flow the text in the document to see how much space the text takes up in the document 
• Create artwork with expression in illustrator and bring it into design
• Space managing is important, it help readers lead eyes on the whole text
• Create alignment = Create association 
• Design 3 type expression of the text's Headlines by using AI

• Design 1 Font used: Gill Sans Std &Georgia

Figure 1: Design of the sentence " The role of Bauhaus thought on modern culture"

• Design 2 Font used: Serifa Std

Figure 2: Design of the sentence " A code to build on and live by "

• Design 2 Font used: Janson Text LT Std

Figure 2: Design of the sentence " Unite to visualise a better world "

Week 6  (31/10/2023) : TASK 2

• Apply all design into passage layout: 

Figure 1&2&3：After applying design into the text layout

• Choose 1 layout design among 3 of them to advance
• Improve the 3rd layout design:" Unite to visualise a better world"

   Figure : The process of  reforming the design

• Final Layout: 

Figure1 : Final Layout (without grids *jpeg format*)

Figure 2 : Final Layout (without grids *pdf format*)

Figure3 : Final Layout (with grids *jpeg format*)

Figure 4 : Final Layout (with grids *pdf format*)

HEAD

Font/s: Janson Text LT Std

Type Size/s: 40pt

Leading:37pt 

Paragraph spacing: 14.4pt

BODY

Font/s: Adobe Caslon Pro

Type Size/s: 11pt

Leading: 11pt

Paragraph spacing: 3.881 mm

Characters per-line: 58-62

Alignment: Left align

Margins: 10 mm top, 10 mm left + 10 mm right + 10 mm bottom

Columns: 4

Gutter: 5 mm

Week 6 (14/11/2023) : Independent study week

Week 7 (21/11/2023) : 

Figure 5: Word tracing using ai

---

FEEDBACK

Week 6 - Text Formatting ( Advance layout making )

Specific Feedback: The word "unite to visualize a better world" the main word is the word "World", perhaps we can do some adjustment on the word "World" and make the word "visualize" not so appealing.

General Feedback: I failed to consider the article's subject. If that's the case, in order to emphasis and make the primary words more attractive, I need to consider what the article is actually trying to say and describe.

Week 7 - Individual Study Week

General Feedback: Keep update the newest information and notes of typography e-portfolio.

---

REFLECTIONS

Experience:

After the sixth week, we turned our attention to the more complex art of creating text layouts, using typographic text formatting as our main tool. This stage involved more than just lining up letters on a page; it involved carefully coordinating fonts, sizes, line lengths, and spatial arrangements to produce designs that were both aesthetically pleasing and functionally sound. It was stressed how crucial it is to use caution while deciding on the body text's point range, controlling line breaks, making sure the text flows naturally, and effectively allocating space. One lesson that really stuck out was from Mr. Vinod, who taught us about the subtle nuances of typography. It was more than just text alignment—it was about building relationships. His observation struck a deep chord, emphasizing the relationship between understanding, specificity, and improving the typeset of each piece. 

Observation:

There is still so much to learn about typography, which has laws that must be followed in order to create beautiful designs. I must so identify and retain each of them in order to progress my design. I came to see that the more deeply I grasped the subtleties, the more skillfully I could use type to not only communicate information but also arouse feelings and build a relationship with the reader. Every change was more than simply a letter alignment; it was an intentional construction of associations that strengthened the bond between the viewer and the information.

Findings:

In contrast to photography, typography is widely recognized as an art form; nonetheless, it may also serve as a useful instrument for certain typesetting or presentations. Typography may include many artistic elements and styles, but it can also need computer skills and technological understanding. In the end, typography is a flexible field that combines creative imagination with technical accuracy to become which is necessary of communication and design.

---

FURTHER READING 

Figure 1.a : Cover of the Book ( Butterick's Practical Typography. by- Matthew Butterick)

• Link To the book (online typography book)
• The author of this book about typography is Matthew Butterick. The reason I find it intriguing is that reading via the font makes it simpler to grasp. It is explained in simple, concise terms. Because it was an online book, clicking the link allows you to get right into the subject. Matthew Butterick, a typographer and lawyer, presents a wealth of practical advice, thoughtful guidance, and clear explanations that cater to both beginners and experienced designers.

COLORS 

• The term "color" in typography has two definitions.

• When a typeface is black, typographers will occasionally refer to it as generating a certain hue on the page. When used in this way, the term captures a range of difficult-to-measure elements, including texture, rhythm, contrast, and darkness.
• The typical interpretation of color as the opposite of black and white is the second meaning. 
• In the past, most of us had to make do with monochrome laser printers, thus this was an inconsequential problem. 
• More writing is being presented on screens these days, and color printers are widely used. Thus, color is now taken into account practically.

• Why Black ?
• Nothing attracts the attention more strongly on a text page than the contrast between light and dark hues. Because of this, emphasis is created more by bold fonts than by italic fonts. (Also see italic or bold.)
• Not only does color affect how intensely colored text is viewed, but font weight and size also play a role. Therefore, a more vivid hue can be conveyed by a thin or small text than by a heavy or huge typeface.

• CAUTIOUS : In print, body text in printed documents MUST always be set in black type.
• Why ? : At a typical body-text point size, color isn’t effective as a form of emphasis. Small letterforms don’t cover much surface area on the page, so colored text isn’t noticed unless it’s loud. Multiple shades of one color are usually better than multiple contrasting colors.

• Gradient fills, when used thoughtfully, can add depth to typography, mimicking natural light variations.

BAD FONT 

Figure 1.b: Examples font of Papyrus, Bookman, Bodoni, Copperplate, Office Scripts

• the world of typography boasts some fonts that have gained infamy for their perceived lack of aesthetic appeal or functionality. 
• While certain fonts, like the one likened to "Atomic Fans," have garnered a unanimous disapproval in the public eye, skilled typographers tend to overlook these fonts for their honesty in embracing their identity. 
• However, the fonts that truly irk experienced typographers are those that masquerade with false virtues, attracting novices but ultimately becoming symbols of amateurish design.

Figure 1.c : Atomic™ Sans Regular

• Fonts like Papyrus, aspiring to exude a historic and hand-drawn appearance, fall short of authenticity, resembling an artifact from the '80s with outdated features rather than the intended charm. Similarly, Bookman and Bodoni, once potentially respectable, now evoke outdated eras—Bookman reminiscent of the bygone Ford administration and Bodoni, although flashy, poses readability challenges after just a few words.

Figure 1.d : Papyrus Font (typeface)

• The evolution of script fonts through modern type design techniques highlights the shortcomings of earlier digital-age script fonts, such as those bundled with Microsoft Office. The progress made in recent years has rendered these older script fonts clunky and cheap-looking in comparison, showcasing how advancements have elevated the quality and aesthetics of script typefaces.
• Overall, this scrutiny of fonts underscores the importance of authenticity, functionality, and relevance in typographic choices.

IDENTIFYING FONTS

Figure 1.e : Ways to identifying font

• Identifying fonts can be a skill honed through practice and familiarity. While experienced typographers may recognize a considerable number of fonts by sight, beginners can improve their font-spotting abilities with certain strategies.

• In printed books, seeking out colophons—sections that describe the printing and typography—can reveal font information. Additionally, examining the CSS code in web browsers or using tools like the WhatFont extension for Chrome can help identify fonts on websites.

• For printed materials without colophons or web content, services like What The Font and Ident font offer valuable assistance. What The Font utilizes uploaded photos of type to algorithmically identify fonts, while Ident font serves as a comprehensive database for font identification.

• Another approach involves studying key characters in fonts. By focusing on distinctive details in characters like A, E, G, M, Q, R, S, a, e, f, g, r, s, t, and the ampersand, one can begin recognizing differences among fonts. Notably, punctuation characters often possess similarities, making them less effective for font identification.

• Moreover, seeking guidance from seasoned typographers or font identification experts via social media platforms can provide quick and accurate font identification, especially when faced with challenging cases.

• Ultimately, improving font-spotting skills requires a combination of practical experience, utilizing available tools and resources, and a keen eye for distinct font characteristics, enabling enthusiasts to enhance their font recognition abilities over time.

The typical opinion after reading "Practical Typography" is that one has an updated appreciation for the art and research of typography, improved understanding, and increased confidence. Butterick's practical style creates a lasting impression, enabling readers to produce typographic designs that are both more aesthetically pleasing and functional.