Typography - Final Project
14/5/2019 - 28/6/2019 (Week 11 - Week 13)
Vun Wan Min (0334263)
Typography
Final Project - Expression, Hierarchy and Composition
LECTURE NOTES
Lecture 10: Typography in Different Medium14/6/2019 (Week 11)
In the past, typography was only on paper. Once a publication was edited, typeset and printed, it was
done. 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.
Type for Print
Primarily, type was designed intended for reading from long printed texts before we read from screen. It’s the designer’s job to ensure that the text is smooth, flowing, and pleasant to read.
A good typeface for print are Caslon, Garamond, Baskerville. Because of their characteristic which are elegant and intellectual but also highly readable when set in small font size, they are commonly use.
Type for Screen
Typefaces intended for use on the web are optimized and often modified to enhance readability and performance onscreen in a variety of digital environments. They would adjust the x-height such as increased or reduced ascenders and descenders), wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, as well as modified curves and angles for some designs.
Another important adjustment – especially for typefaces intended for smaller sizes – is more open spacing. All of these factors serve to improve character recognition and overall readability in the non-print environment, which can include 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 move the cursor over a hyperlink, the arrow change into a small hand pointing at the link.
Font Size for screen
A 16-pixel text on a screen is about the same size as a text printed in a book or magazine; this is accounting for reading distance. Because we read books pretty close, often only a few inches away. They are typically set at about 10 points. If you were to read them at arm’s length, you’d want at least 12 points, which is about the same size as 16 pixels on most screens.
System Fonts for Screen/ Web Safe Fonts
Each device comes with its own pre-installed font selection. It is based largely on its operating system. Each operating system differs a little bit.
Windows-based devices might have one group. While MacOS ones pull from another. Then Google’s own Android system uses their own as well.
When the designer picked some obscure, paid font family for the site’s design. If you don’t have that font already installed and it’s not pulling from a web-friendly place, the font you see would have default back to some basic variation like Times New Roman.
You, as the visitor, wouldn’t necessarily know that’s what happened, though. To you, it would just look plain ugly.
‘Web safe’ ones, however, appear across all operating systems. They’re the small collection of fonts that overlap from Windows to Mac to Google.
Default Typeface for screen type: Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond
 |
| Fig. 1.1: Font Size of Screen and Print |
Pixel Differential Between Devices
The text you see on-screen differs in proportion, because they have different sized pixels. 100 pixels on a laptop is very different from 100 pixels on a big 60″ HDTV. Even within a single device class there will be a lot of variation.
 |
| Fig. 1.2: Pixel Difference |
It has minimal characteristic in expressing words. Traditional characteristics such as bold and italic offer only a fraction of the expressive potential of dynamic properties. From billboards to posters, magazines to fliers, we encounter all forms of static typography with wide ranging purposes. Whether they are informational, promotional, formal or aspirational pieces of designs, the
level of impression and impact they leave on the audience is closely knitted to their emotional connection with the viewers.
 |
| Fig. 1.3: Example of Static Typography |
Temporal media offer typographers opportunities to “dramatize” type, for letterforms to become “fluid” and “kinetic” (Woolman and Bellantoni, 1999). Film title credits present typographic information over time, often bringing it to life through animation. Motion graphics, particularly the brand identities of film and television production companies, increasingly contain animated type.
It is also often overlaid onto music videos and advertisements, 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 a set of brand values. In title sequences, typography must prepare the audience for the film by evoking a certain mood.
Example of Saul Bass's title sequence - Anatomy of a Murder (1959):
No Lecture
21/6/2019 (Week 12)
No lecture was conducted because last week was the last lecture.
INSTRUCTION
Final Project - Expression, Hierarchy and Composition
Week 11We have to create a social message around campus. The social messages have to create a powerful impact to it. I have decided to create a message about student's goals with idioms.
"There is no elevator to success, You have to take the stairs," there are two meanings. Which is there is no easy way to success, and that you have to take the hard way as achievement is through hard work and determination or that you could take the stairs.
 |
| Fig. 2.1: Sketch 1 |
 |
| Fig. 2.2: Sketch 2 |
 |
| Fig. 2.3: Sketch 3 |
 |
| Fig. 2.4: Sketch 4 |
 |
| Fig. 2.5: Sketch 5 |
 |
| Fig. 2.6: Sketch 6 |
 |
| Fig. 2.7: Sketch 7 |
 |
| Fig. 3.1: Digitize Initial Designs |
 |
| Fig. 3.2: Second Initial Design |
 |
| Fig. 3.3: Studio Feixen - Wired Magazine |
 |
| Fig. 3.4: Third Initial Design |
 |
| Fig. 3.5: Stairs Design Typography |
 |
| Fig. 3.6: Errors of Designs |
After showing these to Mr Vinod, the "THE" in the first design looks like it was stretch but was not. It was rotated the right using the 3D effect and rotated again to the left.
Mr Vinod said that the reading rhythm should be from top to bottom.
 |
| Fig. 3.7: Screenshot of "THE" Character |
 |
| Fig. 3.8: Adjusted Design |
 |
| Fig. 4: Chosen Design |
 |
| Fig. 5: Screenshot of Animating Progress |
 |
| Fig. 6: First Attempt of Animation |
Final Project - Expression, Hierarchy and Composition (PDF):
 |
| Fig: 7: Final Design (Frame) |
FEEDBACK
Week 11:Specific Feedback:
Project 2: Good arrangement.
Final Project: Mr Vinod said that it is a good line but said that I have to choose one word to emphazise the meaning and simplify it. He also said that to use a bold typeface.
Week 12:
Specific Feedback:
Mr Vinod said that I should declutter my design as it has a confusion of words and to look at other people's work.
Week 13:
Specific Feedback:
Mr Vinod and Mr Shamsul advise me to take that risk and print it. Life is not going to be easy and that you just have to face it. My animation is acceptable but "there is" has a slight shaking, I have to be careful about it. I have to make my PDF height longer to see the whole artwork and frame the work on the grey side of the paper paste it on the middle using a thin double side tape and double check it.
Week 11: I have a hard time making the type posters.
Week 12: I have a lot to learn about making posters.
Week 13: Being afraid won't do much.
Observation:
Week 11: Making a posters based on stairs are hard.
Week 12: I see that making the stairs effect id hard.
Week 13: Taking the risk of printing.
Findings:
Week 11: I find that creating type posters requires a lot of creativity to make it looked more attractive.
Week 12: Rotating the letters are not easy.
Week 13: Talking would help and just take the risk to print is not hard but still afraid.
In summary, I have a hard time doing this project as it is not my kind work to do. Even though, I do not favor it, but it was still a good experience to have. It can take a lot of work but the outcome would look good. Making mistakes is part of life and taking risk is the norm to have a better understanding of life and it is not easy.
Mastering Type by Denise Bosler
Choosing The Right Typeface
Within a typeface there are several things that distinguish one word from another. Understanding the design is crucial to selection of a typeface with good legibility and refinement to convey the text.
Designing With Sentences
Sentences are the crux of communication. It's how advertisers direct readers to purchase their products, how individuals express themselves and how designers interact with each other. The design and interaction of these words determine the success of the communication.
It also has some nice examples.
21/6/2019 - 18/6/2019 (Week 12 - Week 13)
Thinking With Type (2nd Edition) by Ellen Lupton
Scale
It is the size of design elements in comparison to other elements in a layout as well as to the physical context of the work. It is to create hierarchy and contrast by playing with the scale of letterforms. Changes in scale help create visual contrast, movement, and depth as well as express hierarchies of importance.
Superfamilies
A traditional roman book face typically has a small family, an intimate group consisting of roman, italic, small caps, and possibly bold and semibold styles. It consists of dozens of related fonts in multiple weights and/or widths.
Kerning
An adjustment of the space between two letters.
Metric Kerning - The kerning tables that built into the typeface. It is using the spacing that was intended by the type designer.
Optical Kerning - Executed automatically by the page layout program. Rather than using the pairs addressed in the font's kerning table, optical kerning assess the shapes of all characters and adjusts the spacing wherever needed.
Tracking
Adjusting the overall spacing of a group of letters is called tracking or letterspacing. By expanding the tracking across a word, line, or entire block of text, the designer can create a more airy, open field.
Tracking is usually applied in small increments, creating a subtle effect not noticeable to the casual reader.
Space and Meaning
It is to express the meaning of a word or an idea through the spacing, sizing, and placement of letters on the page.
REFLECTION
Experience:Week 11: I have a hard time making the type posters.
Week 12: I have a lot to learn about making posters.
Week 13: Being afraid won't do much.
Observation:
Week 11: Making a posters based on stairs are hard.
Week 12: I see that making the stairs effect id hard.
Week 13: Taking the risk of printing.
Findings:
Week 11: I find that creating type posters requires a lot of creativity to make it looked more attractive.
Week 12: Rotating the letters are not easy.
Week 13: Talking would help and just take the risk to print is not hard but still afraid.
In summary, I have a hard time doing this project as it is not my kind work to do. Even though, I do not favor it, but it was still a good experience to have. It can take a lot of work but the outcome would look good. Making mistakes is part of life and taking risk is the norm to have a better understanding of life and it is not easy.
FURTHER READING
14/6/2019 (Week 11)Mastering Type by Denise Bosler
 |
| Fig. 8.1: Mastering Type by Denise Bosler |
Within a typeface there are several things that distinguish one word from another. Understanding the design is crucial to selection of a typeface with good legibility and refinement to convey the text.
Designing With Sentences
Sentences are the crux of communication. It's how advertisers direct readers to purchase their products, how individuals express themselves and how designers interact with each other. The design and interaction of these words determine the success of the communication.
 |
| Fig. 8.2: Sentence Gallery |
21/6/2019 - 18/6/2019 (Week 12 - Week 13)
Thinking With Type (2nd Edition) by Ellen Lupton
 |
| Fig. 9: Thinking With Type (2nd Edition) by Ellen Lupton |
It is the size of design elements in comparison to other elements in a layout as well as to the physical context of the work. It is to create hierarchy and contrast by playing with the scale of letterforms. Changes in scale help create visual contrast, movement, and depth as well as express hierarchies of importance.
Superfamilies
A traditional roman book face typically has a small family, an intimate group consisting of roman, italic, small caps, and possibly bold and semibold styles. It consists of dozens of related fonts in multiple weights and/or widths.
Kerning
An adjustment of the space between two letters.
Metric Kerning - The kerning tables that built into the typeface. It is using the spacing that was intended by the type designer.
Optical Kerning - Executed automatically by the page layout program. Rather than using the pairs addressed in the font's kerning table, optical kerning assess the shapes of all characters and adjusts the spacing wherever needed.
Tracking
Adjusting the overall spacing of a group of letters is called tracking or letterspacing. By expanding the tracking across a word, line, or entire block of text, the designer can create a more airy, open field.
Tracking is usually applied in small increments, creating a subtle effect not noticeable to the casual reader.
Space and Meaning
It is to express the meaning of a word or an idea through the spacing, sizing, and placement of letters on the page.
Comments
Post a Comment