Typography : Task 2
May 28, 2024
|| 05/21/2024 - 06/03/2024 (Week 5 - Week 6)
|| Bertrand Alden Gani / 0370471
|| Typography
|| Bachelor Of Design In Creative Media
|| Task 2: Typographic Exploration & Communication
TABLE OF CONTENTS
1. Lectures
2. Instructions
3. Task 2
4. Feedback
5. Reflection
LECTURES
Week 5
Letters / Understanding letterforms
The uppercase letter forms shown below indicate that it is symmetrical. However, in fact it is not. As we can observe at the bottom, there are two different stroke weights of the Baskerville stroke form; notably is the fact that each bracket connecting the serif to the stem has a unique arc.
Figure 1.0 Symmetry in Baskerville uppercase
Letters
Baskerville (Figure 1.0) and Univers (Figure 1.1) may appear symmetrical, but a close inspection shows that the width of the left slope is thinner compare to the right stroke. Both stroke form demonstrate the meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive.
Figure 1.1 Symmetry in Univers uppercase
Each of individual letterform complexity is nicely demonstrated by examining the lowercase 'a' of two seemingly similar sans-serif typefaces - Helvetica and Univers. If we compare how the stems of the letterform finish and how the bowls meet the stems, we quickly realize the palpable difference in character between the two.
Figure 1.2 Comparison of Helvetica and Univers lowercase
As both the letterform are overlapping, the difference between the two become even more noticeable.
Figure 1.3 Overlapping of the two letterforms
In order to appear to be the same size as the vertical and horizontal strokes they adjoin, curved stroke must rise above the median or sink below the baseline.
Figure 1.4 Example of curved letterforms rising above/below the median
Figure 1.5 Curved letterforms rising above or below
Just as important as recognizing specific letterforms is developing a sensitivity to the counter - the space describes, and often contained by the stroke of the form. When letters are joined to form words, the counter includes the spaces between them. How well you handle the counters determines the readability of the word.
Figure 1.6 Forms and Counterforms
One of the most rewarding way to understand the form and the counter of a letter is to examine them in close detail. The examination gives you a good feel how to balance between form and counter, also gives you a glimpse how to make a letter.
It is noteworthy that the sense of the 'S' holds at each stage of enlargement, while the 'g' tends to loose its identity.
Figure 1.7 Example
One of design principles - Contrast also applies directly to typography because it makes the typography more readable.
Figure 1.8 Contrast in typography
Week 6
Letters / Understanding letterforms
1) Typography / Different Medium
In the past, typography was viewed as living only when it reached paper. 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. It is subject to many unknown and fluctuating parameters, such as operating system, system fonts, the device and screen itself, the viewport and more.
2) Print v.s. Screen Type
Primarily, type was designed intended for reading from print long before we read from screen. Caslon, Garamond, Baskerville are the most common typefaces for printing because their characteristics of elegant and intellectual, as well as highly readable even in small font size.
Figure 1.9 Print Type Example
- a taller x-height (or reduced ascenders and descenders)
- wider letterform
- more open counters
- heavier thin strokes and serifs
- reduced stroke contrast
- modified curves and angles
These aim to improve letterform recognition and readability in the screen medium, for example web, e-books, e-readers, and mobile devices.
Hyperactive Link / Hyperlink
Font Size for Screen
16-pixel text on a screen is about the same size as text printed in a book or magazine.
Figure 2.0 Book Font Size
System Fonts for Screen / Web Safe Fonts
Each device comes with its own pre-installed font selection that differs based on its operating system.
These are example of 'Web safe' typeface:
- Open Sans
- Lato
- Arial
- Helvetica
- Times New Roman
- Times
- Courier New
- Courier
- Verdana
- Georgia
- Palatino
- Garamond
Pixel Differential Between Devices
The screens used by our PCs, tablets, phones and TVs are not only different sizes, but the text you see on-screen differs in proportion too, because they have different sized pixels. 100 pixels on a laptop is very different from 100 pixels on a big 60" HDTV.
Figure 2.1 Pixel Difference
3) Static Vs Motion
Static Typography
Static typography expresses words with little characteristics. Dynamic features have much more expressive possibilities than traditional attributes like bold and italics.
Figure 2.2 Example of Static Typography
Temporal media offer typographers opportunities to "dramatize" type for letterfroms to become "fluid" and "kinetic". Typographic information is often presented in film title credits, usually bringing it to life through animation. Beside that, animated text is also common in music videos and advertisement.
Figure 2.3 Example of Motion Typography
INSTRUCTIONS
TASK 2
In this task, we are required to apply what we learn in Task 1, which was type expression and type formatting. We were given 3 sets of topic and text. We are suggested to make the cover page ourselves.
I chose the 2nd sets of topic and text: "A code to build on and live by"
First, I gather some ideas from the internet, then I proceed to make sketch in Procreate. Here is my sketch:
After I watched the tutorial video, I went to Adobe Illustrator to digitalize my cover page. Unfortunately, It didn't turn out well, so I decided to try new idea instead. I continued using Adobe InDesign to adjust the text formatting. Here is the result:
.jpg)
I showed the result to Ms. Low Hsin Yin and received some feedbacks. She said that I need to work on the readability of my title and text so I decided to redo the entire thing. I made a new design but I still went with the idea of stacking the words. Here is my final results:
.jpg)
Formatting Details:
COVER PAGE
Font/s: Myriad Pro
Type Size/s: 70 pt
BODY
Font/s: Univers LT Std, 65 Bold (first sentence of paragraph) Univers LT Std, 55 Roman (the rest of the sentence)
Type size/s: 11 pt
Leading: 13 pt
Paragraph Spacing: 13 pt
Characters per-line: 40-47
Alignment: left align
Margins: 10mm top, 10mm bottom, 10mm left, 15mm right
Columns: 2
Gutter: 5 mm
FEEDBACK
Week 6
General Feedback : Finalize Task 1
Special Feedback : Tell Ms. Low Hsin Yin if I need more time to submit Task 1
Week 7
General Feedback : The idea is fine
Special Feedback : Don't use shape for the words. Use proper typeface
Week 8
General Feedback : The readability of both the title and text needed to be considered
Special Feedback :
Title: the idea stacking the word is fine, but try to restructure to improve the continuity of reading. Text: vertical reading direction from bottom to top is not acceptable, please do horizontal text formatting.
REFLECTION
Experience :
I learned two new things which are type expression and type formatting. I tried how to express a words meaning by just visualizing it. I also experimented with type formatting, how to make the text easy and interesting to read.
I learned two new things which are type expression and type formatting. I tried how to express a words meaning by just visualizing it. I also experimented with type formatting, how to make the text easy and interesting to read.
Observations :
I observed that design really affect the interest of someone to read a text. Good and cohesive design tends to attract more reader while normal and bland design tends to make reader lose interest.
I observed that design really affect the interest of someone to read a text. Good and cohesive design tends to attract more reader while normal and bland design tends to make reader lose interest.
Findings :
I find that experimenting combination of type expression and type formatting really fun. I also learned that other than good design, I also need to consider the readability and continuity of the design.
I find that experimenting combination of type expression and type formatting really fun. I also learned that other than good design, I also need to consider the readability and continuity of the design.
FURTHER READING
"Thinking with Type"
by Ellen Lupton
Thinking with Type by Ellen Lupton is a book all about typography, it has three sections: letters, text, and grids and it’s filled with great references and instructions on how and why they are used, from kerning to modular grids. The book includes Type crimes which are little dos and don’ts in typography, For anyone who is a visual learner, I would recommend starting with this book. The pages are filled with engaging, full-color examples, and it’s a quick, easy read. It’s written for more of a general audience that includes writers and editors, rather than just designers. The focus isn’t on the web as much; it’s just more of an all-around typography primer.
Comments
Post a Comment