TYPOGRAPHY / TASK 2: TEXT FORMATTING & EXPRESSION
24.10.2023 - 3.11.2023(Week 5 - Week 6)
Lew Guo Ying / 0365721 / Bachelor of Design in Creative Media
Typography
Task 2: Typographic Exploration & Communication (Text Formatting and Expression).
Jumplink
1. Lectures
2. Instruction
3. Feedback
4. Reflections
LECTURES
Week 5：Understanding Letterforms
- Discussing various aspects of typeface design, focusing on the form and counter if letterforms.
- Analyzing different typefaces, such as Baskerville, Helvetica, and Universe, to highlight the nuances in their letterforms.
- Letterform Baskerville is not symmetrical, and each stroke is treated individually with unique arcs in the brackets.
The uppercase letterforms suggest symmetry but in fact, it is not symmetrical. The stroke weights of the Baskerville stroke form vary and the brackets connecting the seraph to the stem have unique arcs.
- Uppercase forms demonstrate meticulous care in creating harmonious and expressive letterforms.
Symmetry may appear but close examination reveals differences in stroke width. Reasons behind these differences may be optical or to maintain harmony and dynamism.
- Helvetica and Universe have noticeable differences in the finial arc and bowl-to-stem connection.
- In Helvetica, the finial arc tapers towards the end, while in Universe, it tapers in the middle and flares at the end.
- The connection of the bowl to the stem is different in Helvetica and Universe, with Helvetica having a subtle tail and Universe not having it.
- Consistency in replicating unique characteristics is important in font design.
- Maintaining the uniqueness of a feature in all letterforms adds to the consistency.
- Curved strokes like's must be adjusted to appear the same size as vertical and horizontal strokes.
Counterform
- Understanding counter forms is crucial in typography.
- The counterform refers to the space inside and around a letterform.
- The counterform affects the readability and legibility of the text.
- Analyzing letterforms helps understand their construction and unique characteristics.
- The examination of the letterforms provides a good feel for the balance between form and counter.
- Analyzing existing typefaces in the same category helps understand the conventions and approaches used by different designers.
Contrast
- The basic principle of graphic design applies to typography.
- Contrast is a powerful and dynamic principle in design.
- Contrast can be achieved by using different variations of type.
Week 6: Screen & Print
Typography in different medium
- The video discusses the various mediums in typography, with a focus on print and screen, and their increasing prevalence in technology.
- Typography exist in all forms and shapes.
- Typography has permeated many different platforms, including screens and print communication.
- While screens have become the dominant medium for communication, print still remains important due to the tactile experience it provides.
- It is unclear whether people of different generations prefer reading online ebooks or traditional print books.
- Typography plays a significant role in screen-based areas, including animation and website design.
- Typesetting in web design allows for more experimentation and variability.
Print Type Vs Screen Type
Print Type
- Serif typefaces like Caslon on Garamond and Baskerville are commonly used for print due to their elegant and readable characteristics.
- Other serif typefaces like Times New Roman, Franklin Gothic, and Century Gothic are equally good in terms of readability and legibility.
- Serif typefaces have a classic and versatile neutrality that makes typesetting with them easy.
- Typography for screen purposes
- Typefaces intended for use on the web are optimized for readability and performance on screen.
- Some typefaces have modified curves, angles, and letterforms to compensate for previous clarity issues.
- Typefaces like Verdana, Arial, and Georgia are commonly used for screen purposes
- Using a screen-specific typeface and open spacing improves readability in non-print environments.
- Design rules are subjective and dependent on the designer and target audience.
Hyperlink/ Hyperactive Link
- Hyperlinks are a common navigation tool in web pages, PDFs, and social media platforms.
- This may involve adjustments like increasing the x-height, widening letterforms, creating more open spaces within characters, strengthening thin strokes and serifs, reducing stroke contrast, and making alterations to curves and angles in certain designs.
- Another critical adjustment, especially for typefaces intended for smaller text sizes, is the use of more open spacing. These modifications are aimed at enhancing character recognition and overall readability in non-print environments, including the web, e-books, e-readers, and mobile devices.
Font size for screen
- The text size for reading on screen should be around 20 to 24 points.
- Text on screens is typically set at 10 points, equivalent to 16 pixels.
- Different devices have their own pre-installed fonts, but with Google Fonts, you can use uniform fonts across all browsers and operating systems.
System Fonts for Screen / Web Safe Fonts
- The advent of Google Fonts has resolved the issue of limited fonts on Windows platform compared to Mac platform.
- The availability of Google Fonts has expanded font options on both Windows and Mac platforms.
- The variation in screen sizes and pixel proportions across devices poses challenges for designers when it comes to screen-based design.
Static Vs Motion
- Static typography has minimal characteristics in expressing words, while motion typography offers more expressive potential.
- Dynamic properties of typography can leave different levels of impression and impact on the audience.
- Good design can be dynamic irrespective of the platform used.
- Static typography lacks dynamic properties and offers minimal expression.
- Traditional characteristics like bold and italic provide limited expressive potential.
- Static typography is used in various mediums like billboards, posters, and magazines, serving informational, promotional, formal, or aspirational purposes.
- The impact of static typography depends on its emotional connection with the audience.
- Typography is fundamental across various industries including animation and motion graphics.
- Designers with a good sense of typography are highly valued and needed in the industry.
- Typography in motion graphics is often used in music videos and advertisements, following the rhythm of a soundtrack.
- On-screen typography helps create an expressive tone and establish brand values in title sequences.
- Temporal media allows typographers to create dynamic and fluid type.
- Film title credits use animation to bring typography to life over time.
- Motion graphics in film and TV logos feature animated type.
- Type is often synchronized with music videos and ads, following the soundtrack's rhythm.
- On-screen typography is expressive, setting the tone for content and conveying brand values.
- Typography in title sequences prepares the audience by evoking a specific mood.
INSTRUCTIONS
Task 2：Text Formating & Expression
Reseacrh
Sketch
I selected article 3 titled "Unite to Visualize a Better World". I then created a sketch emphasizing unite and visualization.
Afterwards, I made an effort to improve the overall neatness and tidiness of the work. Additionally, I discovered that certain fonts, when used in combination with certain letters such as U and A, or U and V, can create the appearance of an arrow. Thus, I decided to use this arrow symbol to replace the word "to".
Layout
I started using InDesign to digitize my sketches. I created two versions of the designs since both had unique characteristics, and I chose between them at the end.
Final Layout:
The final version was chosen amongst exchanges with the teacher. I changed the alignment to justify left to make it look neater, but after I changed it the rivers appeared because of the neat alignment, I tried to change the hyphenation but it didn't work very well. Finally, I went online to find a solution to make my layout neater and satisfactory.
Font/s: Univers LT Std
Type Size/s: 109 pt
Leading: -
Paragraph spacing: -
Font/s: Janson Text LT Std(Body Text), Futura Std(Lead-in Text)
Type Size/s: 11 pt
Leading: 13 pt
Paragraph spacing: 13 pt
Characters per-line: 49
Alignment: Justify Left
Columns: 4
Gutter: 5mm
FEEDBACK
Week 6:
General Feedback: When aligning text to an article, it's important to avoid widows and orphans. Kerning adjustments can improve tidiness. Also, Task 1 is due on 3.11.23.
Specific Feedback: The headline design can be linear, and repeating patterns can draw attention to the text. Use arrows to replace "to," but keep all words visible.
Week 7:
General Feedback: Cannot use italics for whole sentences. Task 2 is due on 12.11.23. Also, purchase 3 Artline pens for Task 3.
Specific Feedback: When using justified alignment, be careful with rivers, which occur when gaps form in the text. To prevent rivers, consider adjusting spacing or using a different alignment. Screens may not accurately display rivers, so it is helpful to print out the text to check for them.
REFLECTION
Experience
In Task 2, I am required to design a headline using Adobe Illustrator, and the emphasis on specific words needs to be considered. However, I found that many visually appealing designs I came across on the internet often involve the use of colour and images. Unfortunately, this task does not permit the use of colour and images. Therefore, designing within these constraints can be quite challenging.
In addition to that, I also need to integrate the designed headline into InDesign and combine it with the article. I have to rely on font size and layout to capture the reader's attention.
Observation
While working on Task 2, I found that using the regular alignment doesn't always make the text appear tidy. So, I switched to "justify left alignment" for formatting. However, this led to the problem of "rivers," which has been quite frustrating. Even towards the end, I can still see occurrences of "widows" and "orphans," which consistently affect the overall layout.
In Illustrator, while designing the headline, I discovered that text can be creatively arranged to form graphical elements, effectively replacing some of the individual characters. However, my teacher advised that presenting the entire headline as text is preferable and that combining it with graphical elements might yield a more impactful result.
Findings
After going through the typesetting process with "justify left alignment," I encountered issues with "rivers" that significantly affected the overall neatness of the text. My teacher suggested that printing the document can be helpful in identifying "rivers," "widows," and "orphans." So, I started looking for solutions online and discovered one method involved enabling hyphenation. However, I noticed that this significantly impacted the reading experience, and my sentences had a lot of hyphenation symbols at the end due to it.
Upon further research, I found that InDesign has a built-in feature for addressing this issue. By opening the "Preferences" and enabling "H&J violation" under the "Composition" settings, the problematic sentences with "rivers" are highlighted. Then, it's simply a matter of adjusting the values in the "justify" settings within the paragraph options to quickly resolve the "rivers" problem.
FURTHER READING
Special Styles
Computer typography allows for special effects but misuse can make it hard to read.
Underlining
Many programs mishandle underlining, with limited user adjustments.
Underlines should be adjusted to avoid contact with characters, coming in
straight and word underline styles.
Small Cap and All Caps
- Small caps are good for subheads or the first line of the paragraph, but not overused.
- All caps are harder to read and only for short headlines or subheads.
- All caps should never be used for long sentences or emphasis.
Special Purpose Styles
- Many special-purpose styles exist for footnotes, references, and mathematical formulas in publishing programs.
- Users can typically change the default settings in programs to adjust the character size and baseline shift of affected text.
Text Scaling
- Some programs let users create a fake condensed or extended font by squeezing or stretching a font horizontally.
- This distorts the original design of the font.
- It's better for the user to choose the true condensed or extended font if possible, or adjust the design to avoid the need for the fake font.
Vertically
Fonts also can be vertically stretched. The only advantage to this method, rather than resizing the type, would be to keep the type technically the same size.
Outline and Shadow
- Outline and Shadow are two styles that have been heavily overused in older desktop publishing programs and have become clichéd.
- It's best to avoid using them if possible.
- Newer programs have stopped offering traditional outline or shadow settings and replaced them with more advanced options.
Font Size
- Fonts come in different sizes and use points as a method of measurement.
- Computers use 72 points per inch, while traditional typography uses 72.27 points per inch (but this is no longer commonly used).
- The correct font size depends on its usage and can vary depending on the font, audience age, and column width.
- Body copy should usually be around 9-12 points, and some fonts are more easily readable at smaller sizes than others.
- Audience age should be taken into consideration, with older audiences typically requiring larger font sizes.
- Column width also affects the font size, with larger columns requiring larger font.
- A column of type should generally be 50-65 characters across.
- A type that is too small can cause "cramming" and make the copy difficult to read.
Character and Word Spacing
- Text formatting involves adjusting font, size, and line spacing
- Larger type sizes may need character spacing adjustments
- Paragraphs should be adjusted to avoid "widows" and "orphans"
Kerning
- Kerning, or inter-character spacing, enhances the text's visual appeal
- Many word processors do not allow kerning adjustments, while page-layout programs often apply kerning automatically
- Manual kerning adjustments may be necessary for specific letter combinations, such as lowercase and uppercase letters, including F, I, K, L, O, P, Q, T, V, W, X, and Y
- All uppercase letter combinations like VA and WA also require kerning adjustments
Tracking
- Word spacing adjustment is known as Tracking, similar to kerning but involving characters, words, and spaces
- Its primary aim is to make type fit a specific space without changing the type size or line spacing
- Tracking can be negative (bringing words closer together) or positive (pushing words farther apart)
- It is useful for resolving single words (orphans or danglers) at the end of a paragraph with minor tracking adjustments, best done after completing all editing
- In FrameMaker, tracking is called Spared.
Tracking for Effect
- Tracking can be used as a design tool.
- Like all design tools, it can be overused and abused.
- Remember the goal is readability.
Word & Letter Spacing for Justify Type
- Justification settings can automatically impact word, letter, and character spacing
- The menu allows specifying minimum, optimum, and maximum percentages for setting justified text
Special Glyphs (characters)
- Most computers provide options for using foreign characters and special symbols
- Accessibility to special characters can be challenging for beginners, but users can consult manuals or use the on-screen character locator
*InDesign has a built-in Glyph palette, making the special character selection very easy. For other programs, use either Key Caps (Macintosh) or Character Map, available in the system accessories/utilities folder.
Comments
Post a Comment