Typography - Task 2
Denise Anjali // 0342430
Typography // Bachelor of Design in Creative Media
Task 2: Typographic Exploration & Communication
LECTURES
Link to previous Video Lecture summaries
Week 6: Screen and Print
Different mediums
Typography has permeated many different platforms especially screens because technology is largely screen based. Paper communication has reduced exponentially but it is not extinct. Tactile field is an important factor. Increasingly, screens that convey information without converting to print is shown to not be conducive to education. Many rich people limit or deny screen use for their young children because young minds require more tactile and holistic learning with screen do not provide. Screens can also have an addictive effect as well.
Print has a long history in graphic design and typography has an impact on many aspects of design which are mostly on screens. Typography, and by extension layout design, plays an important role in website and app UI design.
In the past, typography was viewed as living only when it reached print. Good typography and readability were the result of skilled typesetters and designers. Today, typography exists not only on paper but on a multitude of screens. Our experience of typography today changes based on how the page is rendered, because typesetting happens in the browser. This not to say there is a lack of experimentation. However, this oftentimes requires a lot of coding.
Print type vs screen type
Print type - primarily type was designed intended for reading. It’s the designer’s job to ensure that the text is smooth, flowing, and pleasant to read. Some common good typefaces for print are Caslon, Garamond and Baskerville. There are many sans serif typefaces that fit this as well. This is because they are highly readable at a small font size. They are versatile, easy-to-digest typefaces that are neutral and make typesetting easy.
Type for screen - typefaces intended for web use are optimised and often modified to enhance readability and the performance onscreen. This can include a taller x-height, reduced ascenders & descenders, wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrasts and modified curves and angles for some designs. Another adjustment is more open spacing.
Hyperlink - word, phrase, image that you can click on to jump to a new document or new section within the current document. Typically blue and underlined by default.
16 pixel text on a screen is about the same size as the text printed in a book or magazine (12 pts, suitable for reading at arm’s length)
System fonts for screen - each device comes with its own pre-installed font selections. May differ based on operating systems. Web-safe ones appear across all operating systems. Majority of fonts are web-safe these days. Ex: Open sans, Garamond, Arial, Georgia
Screens used by various devices have different sizes, thus text differs in proportion because they have different pixel sizes.
Static vs motion
Static typography has minimal characteristics in expressing words. Traditional characteristics such as bold and italics offer only a fraction of the expressive potential of dynamic properties. Good designs can be dynamic even if it is static.
Motion typography offer typographers opportunities to “dramatise” type, for letterforms to become “fluid” and “kinetic”. Motion graphics increasingly contain animated type. Type is often overlaid onto music videos and advertisements, often set in motion following the rhythm of a soundtrack.
“A great designer knows how to work with text not just as content, he treats text as a user interface”
INSTRUCTIONS
Task 2: Typographic Exploration & Communication
This task is a combination of the previous exercises. We have to create a type expression of the title of an article and plan the layout of the article in a 200mm x 200mm 2 page spread.
We were advised to start this task by planning with sketches.
Figure 1.1: Layout sketches 1, Week 5 (02/10/2022)
Figure 1.2: Layout sketches 2, Week 5 (02/10/2022)
From these sketches, one of the first digital drafts I made was based on the top sketch in figure 1.2.
Figure 1.3: Digital draft of layout design, Week 6 (3/10/2022)
Figure 1.4: Exploration of layout ideas, Week 6 (09/10/2022)
Figure 1.5: Further exploration of layout idea 1, Week 6 (10/10/2022)
Figure 1.6: Chosen final layout, Week 7 (11/10/2022)
Final Task 2: Typographic Exploration & Communication Outcome
Fonts: Serifa
Type Size: 80 pts
Leading: 96 pts
Paragraph spacing: 96 pts
Body
Fonts: Futura Heavy/Futura Book
Type Size: 9 pts
Leading: 11 pts
Paragraph spacing: 11 pts
Characters per line: 60
Alignment: Left-aligned
Margins: 20mm top, 30mm bottom, 12.7mm left & right
Columns: 2
Gutter:5mm
FEEDBACK
For peer review feedback and when analyzing own work, we were told to consider the following when doing so:
1. Do the expressions match the meaning of the words?
2. Are the expression well crafted (crafting/lines/shapes)?
2a. Do they sit well on the art-board
2b. Are the composition engaging? Impactful?
3. Are there unnecessary non-objective elements present?
4. How can the work be improved?
TEXT FORMATTING
1. Is kerning and tracking appropriately done?
2. Does the font size correspond to the line-length, leading & paragraph spacing
3. Is the alignment choice conducive to reading?
4. Has the ragging been controlled well?
5. Has cross-alignment been established using base-line grids?
6. Are widows and orphans present?
Week 6
For this week, we were told to look at each other's work and provide feedback to each other.
General feedback: Make sure all requirements are met to consider the task complete. Avoid placing information in the center as it will get swallowed by the gutter. Learn to use space well. Remember how to make dynamic margins. Make sure the title and the text interact. Analyze the forms of the layout by blocking out the text with shapes.
Specific feedback:
Mr Vinod - My overall layout has a clear idea but text formatting is too large and should be fixed.
Peer feedback - The expression is good and matches. There is an awkward space on the 2nd page. The lead-in text should stand out more, maybe by changing the font or size. There is a lack of paragraph spacing. There are many orphans. The lines could be better arranged for a stronger effect. The arrangement of text columns are boring.
REFLECTION
Exploration: This project was more fast-paced than the previous task. This time, we had to rely more on our own criticisms and the feedback of our peers to judge our work.
Observations: I observed that my peers gave me consistent feedback on certain aspects of my work. I also observed that some of my sketches were similar to ideas that other students had as well. I noticed that my ideas tended to follow a similar line of thinking.
Findings: I found that my ideas can be combined to get the best of both worlds. I also found that some mistakes can be so obvious as to miss them altogether, as is the case when I had created my draft using the wrong body.
FURTHER READING
Week 6: Computer Typography Basics (Creamer, David, 2003)
Under the chapter Computer Typography Basics, we cover what hyphens and dashes are in Special Formatting. Hyphens are usually used only to divide words or numbers, but can be used to break words from one line to the next. Headline and subheads should never be hyphenated. For words that are hyphenated but should not be broken at a line ending, a non-breaking hyphen should be used.
In the category of hyphens, there are discretionary hyphens. A hyphen should never be typed directly into a word if the program allows the use of discretionary hyphens, or "dishies." Dishies are hyphens that disappear when they are not needed. A dishie will not be visible when it is not at a line break.
There are 2 types of dashes; the en-dash and the em-dash. En-dashes (usually the width of the letter "N") are used to separate range of items, such as dates, quantities, and time. If you can substitute the word "to" or "through" in place of the dash, then the dash is used correctly.
The em-dash (typically the width of the letter "M") is used in place of a comma to set off a section of the sentence that uses special emphasis. It also has other uses like preceding the attribution of a quote. Em-dashes should never be typed as two hyphens in a row. Hyphens should always be kept with the first portion of the word on the upper line while en-dashes should be kept unbroken with the items they separate. Em-dashes can be kept with either the upper or lower line and whether there is a space before or after is a matter of style, so long as it is kept consistent throughout.
Comments
Post a Comment