Typography | Task 2 Typographic Exploration & Communication (Text Formatting and Expression)
30/10/2023 - 06/11/2023/ Week 6 - Week 7
Wong Jia Yi Carmen 0357198
Bachelor Of Design (Honours) In Creative Media
Task 2: Typographic Exploration & Communication (Text Formatting and Expression)
Table Of Contents
LECTURES
Week 6: Redoing Our Task 2
PHYSICAL CLASS
After receiving feedback for our task 2 which we previously did last week, I was told that my layout is unorganised and that I needed to change it, focus on one word to express topographically which today I did.
The outcome from the lecture:
I understood:
- utilize the space around
- placing of the layout
- font and headline can't be too big and can't be too small
ONLINE LECTURES
Typo_6_Screen&Print
Typography In Different Medium
Traditionally, typography was considered complete once a publication was printed, with skilled typesetters and designers ensuring good typography and readability.
- Today, typography is no longer limited to paper; it spans various screens and is affected by dynamic variables like operating systems, fonts, devices, screens, viewports, and web-based rendering, shaping our reading experience.
- The concept of a "page" has evolved. Instead of a fixed paper size, we now have to contend with various viewports, each of which may offer a different experience in terms of layout and type rendering. As a result, the same web page may look completely different on a large desktop monitor compared to a smartphone screen.
- The dynamic nature of typography in the digital age means that how we perceive and interact with it is subject to constant variation. It is no longer a static entity, it can change based on the specific device, the operating systems, and even the web browser used to access it.
Print Type VS Screen Type
1. Type for Print: Typefaces were meticulously designed with the primary purpose of facilitating reading from the printed page. This design approach took root long before the widespread adoption of digital screens as a primary medium for reading. Therefore, it is the designer's responsibility to ensure that text presented in any format, be it in print or on screens, maintains a high standard of legibility and readability.
- When selecting a typeface for print, it's essential to consider the distinctive characteristics of the typeface itself. Among the most common and celebrated choices are Caslon, Garamond, and Baskerville. These typefaces are renowned for their timeless elegance and intellectual appeal. What sets them apart is their remarkable legibility, even when employed in small font sizes. This makes them ideal for various print materials, from books to magazines, and even formal documents
fig. 1.0. Example Of Dated Method Of Typesetting JPEG Week 6 (30/10/2023)
2. Type for Screen: Typefcases tailored for digital applications undergo a meticulous process of optimization and at times, receive specific modifications to enhance their readability and performance in the dynamic realm of various digital environments.
- One key consideration in this transformation is often related to the x-height, where adjustments may be made to increase it or reduce the lengths of ascenders and descenders. By widening the letterforms and making counters more open, designers ensure that text is comfortably legible on screens of all shapes and sizes.
- To optimize the typefaces for on-screen use, designers frequently introduce modifications such as thickening the strokes and serifs, reducing the contrast between different stoke weights, and refining the curves and angles in select type designs. These adjustments aim to provide an optimal reading experience, accommodating the specific challenges posed by digital platforms and devices, where the typefaces must maintain their legibility and aesthetic integrity.
- For smaller text sizes, it's crucial to have more open letter spacing. These adjustments improve character recognition and readability in digital environments like the web, e-books, e-readers, and mobile devices.
3. Type for Screen: When dealing with smaller font sizes, that pertains to increasing the spacing between characters. This augmentation in character spacing, also known as tracking or letterspacing, plays a fundamental role in optimizing legibility and overall readability in the context of various digital platforms, including the web, e-books, e-readers, and mobile devices. These adjustments not only cater to the unique challenges posed by digital screens but also contribute to an improved and more comfortable reading experience for users across these diverse digital environments.
4. Hyperactive Link / Hyperlink: A hyperlink is a clickable element on web pages, typically appearing as blue, underlined text or images. Clicking them allows users to navigate to new pages or sections within the current document, and the cursor usually changes to a hand when hovering over a link.
5. Font Size for Screen: Text at 16 pixels on a screen is similar in size to printed text, set at about 10 points, which is comfortable for reading up close. To match this on screens, a font size of at least 12 points (around 16 pixels) is ideal.
6. System Fonts for Screen / Web Safe Fonts: Every device has its own built-in font library, mainly determined by its operating system. Windows, macOS, and Android devices each have their distinct font sets. If a designer selects a rare, premium font for a website but you don't have that font installed, and it's not being loaded from a web-accessible source, your browser will substitute it with a standard font like Times New Roman. As a visitor, you might not even realize this, but it would make the website appear unattractive. Web-safe fonts, however, work consistently across various operating systems, ensuring a consistent appearance from Windows to Mac to Google.
-Some Web Safe Fonts to Use In All Platforms:
Open Sans, Lato, Arial, Helvetica, Time new Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond
7. Font Size For Screen:
fig. 1.1. Font Size For Screens Vs Print JPEG Week 6 (30/10/2023)
8. Pixel Differential Between Devices: The screens of our PCs, tablets, phones, and TVs not only come in various sizes but also display text differently due to variations in pixel sizes. For instance, 100 pixels on a laptop are not equivalent to 100 pixels on a large 60" HDTV. Even among devices of the same class, there can be a significant amount of diversity.
fig. 1.2. Techincal Information In Terms Of Screen Size JPEG Week 6 (30/10/2023)
Static Vs Motion
- Static typography, lacking dynamic features, has limited expressiveness. Features like bold and italic provide only a fraction of this potential. It's used across various media, serving different purposes (informational, promotional, formal, aspirational). Its impact hinges on emotional connection with viewers.
fig. 1.3. Example Of Static VS Motion JPEG Week 6 (30/10/2023)
fig. 1.4. Example In Billboard JPEG Week 6 (30/10/2023)
1. Motion Typography
- In temporal media, typographers can use animation and motion to make type more dynamic. For example, film credits and motion graphics in the entertainment industry often incorporate animated types to add a lively dimension to the content.
- Type is frequently superimposed on music videos and ads, often synchronized with the beat of the music. The use of on-screen typography has evolved to convey emotions, set the tone for the content, or convey specific brand attributes. In title sequences, typography plays a crucial role in setting the mood for the upcoming film.
INSTRUCTION
fig 1.0 Typography Module Information
Task 2: Typographic Exploration & Communication (Text Formatting and Expression)
Timeframe: Week 06 - Week 07
Deadline: Week 08
We were given 3 articles to choose from and express typographically. Finally, I chose the last one and I started to sketch out my idea for each word
fig. 1.1 Sketches Of Each Word - JPEG Week 5 (25/10/2023)
After I was done with the sketches, I immediately began to digitalize them using Adobe Illustrator.
fig. 1.2 Digitalized Of My Sketches - JPEG Week 5 (25/10/2023)
fig. 1.3 Editorial Spread (Without Grids) - JPEG Week 5 (25/10/2023)
fig. 1.4 Editorial Spread (Without Grids) - PDF Week 5 (25/10/2023)
fig. 1.5 Editorial Spread (With Grids) - JPEG Week 5 (25/10/2023)
fig. 1.6 Editorial Spread (With Grids) - PDF Week 5 (25/10/2023)
After receiving feedback from Mr Vinod, I made some changes.
fig. 1.7 Editorial Spread (Without Grids) - JPEG Week 6 (30/10/2023)
fig. 1.8 Editorial Spread (Without Grids) - PDF Week 6 (30/10/2023)
fig. 1.9 Editorial Spread (With Grids) - JPEG Week 6 (30/10/2023)
fig. 1.10 Editorial Spread (With Grids) - PDF Week 6 (30/10/2023)
After another feedback from Mr Vinod, I've made some final changes again.
Final Work
HEAD
Font/s: Gill Sans Std Bold
Type Size/s: 92pt
Leading: 0
Paragraph spacing: 0
Font/s: Gill Sans Std Bold
Type Size/s: 92pt
Leading: 0
Paragraph spacing: 0
BODY
Font/s: Futura Std Book
Type Size/s: 10pt
Leading: 12pt
Paragraph spacing: 0
Characters per-line: 56
Alignment: Left Aligned
Font/s: Futura Std Book
Type Size/s: 10pt
Leading: 12pt
Paragraph spacing: 0
Characters per-line: 56
Alignment: Left Aligned
Margins: 3.7 mm top, 1.9 mm left + 2.3 mm right + 3.2 mm bottom
Columns: 2
Gutter: 1.2 mm
Columns: 2
Gutter: 1.2 mm
fig. 2.0 Final Editorial Spread With Symbols - PNG Week 7 (6/11/2023)
fig. 2.1 Final Editorial Spread (Without Grids) - PDF Week 7 (6/11/2023)
fig. 2.2 Final Editorial Spread (Without Grids) - PDF Week 7 (6/11/2023)
fig. 2.3 Final Editorial Spread (With Grids) - JPEG Week 7 (6/11/2023)
fig. 2.4 Final Editorial Spread (With Grids) - PDF Week 7 (6/11/2023)
FEEDBACK
Week 6
General Feedback: The title can be organized, but not really organised, the columns can be moved to the middle, and the text has to be aligned and be in an appropriate font size. The placement of the headline and body text has to be considered, make use of the space around.
Personal Feedback: The body text is scattered, has no flow and should be organized. The headline is not really expressed typographically, Choose one to express typographically not more, and utilize the space around as well.
Week 7
General Feedback: How we present your work is the key to the marks. When we see something that catches our attention, we need to identify the meaning and not just simply take it just because it looks nice. Margins and columns are important in typography, it's fundamental and basic, and we have to learn it. Ctrl=alt=i shortcut for symbol
REFLECTION
Experience
Week 6 was a culmination of my journey so far, where I not only honed my typography skills but also broadened my horizons by exploring the diverse applications of typography in various design disciplines. With each passing week, I gained a deeper appreciation for the art and science of typography, and I looked forward to further challenges and growth in the coming weeks.
Observation
I continued my quest for knowledge and self-improvement. The commitment to learning remained a constant, reinforcing the idea that personal growth is an ongoing journey. In the absence of specific challenges and accomplishments, I can reflect on the importance of adaptability and resilience. The ability to face uncertainties and changes with a positive mindset is a valuable skill. I found that maintaining consistency and dedication to my goals was a recurring theme. Regardless of the nature of the endeavours, staying true to my objectives remained a cornerstone of progress.
FURTHER READING
Week 6
fig. 1.0. A Type Primer - JPEG Week 6 (30/10/2023)
I've learned from reading this book that design is defined at the outset as the process of problem-solving. Graphic design is presented as a particular type of problem-solving that entails producing visual components to successfully convey concepts and messages. Because typography is concerned with creating the markings that make words visible, it is emphasized as an essential component of visual design. Put another way, it's about using text and fonts to visually communicate information and messages.
The importance of effectively using type in graphic design is emphasized in the paragraph. It implies that a key factor in the success of graphic design initiatives is typography. The author draws attention to a deficit in the materials on typography education that are out there. They convey how challenging it is to locate a work that sufficiently explains typography's intricacies to beginners. It is said that the current manuals are either deficient in examples or target experts more than novices.
The author hopes to close this gap by clearly and practically outlining the fundamental ideas and uses of typography. The book attempts to replicate the classroom setting and offer an informational flow that complements beginning courses.
Comments
Post a Comment