Typography | Task 2: Typographic Exploration & Communication
29.10.2023 — 10.11.2023 (Week 5 - Week 7)
Melvin Yung Khun Yew |
0357241 | Bachelor of Design (Hons) in Creative Media|
GCD60104
Typography
Task 2
This portfolio consists of:
Click on the link to jump to that part of the portfolioLECTURES
Week 5 Understanding
Understanding letterforms
As you can see in the letter below, it suggests symmetry, but in fact, it's not symmetrical. It's easy to see the difference in stroke weights in the letterform and have a unique arc between the bracket and the stem connecting within each other to form a serif.
|
| Baskerville font letter A |
In san-serif fonts such as Univers, the uppercase letter forms may appear symmetrical, but the width of the left stroke is thinner than the right stroke upon closer inspection. This shows the meticulous care of the designer who made these letters with the details that create the illusion of maintaining levels of harmony and expression.
From Mr Vinod's perspective, the action of this design is because of the visual sensitivity of the designers to create dynamics and a sense of delicateness as opposed to the rigid structure of the font if it is designed with equal weight on both sides.
|
| Univers font letter A |
We can see the complexity of each letterform by comparing two different fonts together side by side. A palpable difference in the characters can be seen from the stem and the bowl of the letter
|
| lowercase letter a of Helvetica and Univers font |
This difference in characters can suggest various characteristics presented by the letter alone.
Thus, Mr Vinod also warned us about the dangers of overdesigning a font and
the need to simplify the design and ensure consistency to maintain uniqueness
in a font.
Maintaining x-height
The curved strokes such as the letter "s" must rise above the median and even sink below the baseline to appear the same size as the vertical and horizontal strokes they adjoin.
|
|
Increase the height of the curved stroke |
Form/ Counterform
Just as important as recognizing specific letterforms is developing a sensitivity to the counter form — the space describes and is often contained, by the strokes of the form. The counter form includes the spaces between them when letters are joined to form words.
|
| Counter forms in letters |
Examining the form and counter form in close detail provides a good feel for how the balance between form and counter is achieved.
Note: the sense of the letter "s" holds at each stage of enlargement, while the letter "g" tends to lose its identity, as the individual elements are examined without the context of the entire letterform.
Contrast
Contrast is the basic principle of graphic design that applies directly to
typography.
The simple contrasts produced numerous variations:
small + organic/ large + machined; small + dark/ large + light.
|
| Diagram of different contrast |
Conclusion
"On the streets, you look at girls [or boys]. I look at the type. —
Hannes von Döhren
Week 6 Screen & Print
Different Medium
There are two types of medium for now, and they are screen medium
and print medium.
Notice how good the contrast and the balance between the elements are,
forming a dynamic design with a good layout of a website page.
|
| Example of good webpage design |
Comparing typography in the past and present, it was viewed as living only
when it reached paper in the past. Once a publication was edited,
typesetted and printed, it was done. Nothing changed after that. Thus,
good typography and readability were the result of skilled typesetters and
designers.
Nowadays typography exists not only on paper but on a multitude of
screens. It is subject to many unknown and fluctuating parameters:
- Operating systems
- System fonts
- Screen and device
- Viewport
- and more...
Thus, our experience of typography today changes based on how the
page is rendered as typesetting happens in a browser.
Type for print
Initially, the type was designed for reading from a long print before
we read from a screen. It's the job of designers to ensure that the
text is smooth, flowing and pleasant to read.
Good typeface for print: Caslon, Garamond and Baskerville are the most
common typefaces that are used for print. Why? The elegant and
intellectual characteristics but also highly readable even when set at a
small font size. They are versatile and easy-to-digest classic typefaces
Type for screen
Typefaces intended for use on the web are optimized and often
modified to enhance readability and performance on screen in different
digital environments. The modification includes
taller x-height, reduced ascenders/descenders, wider letterforms,
more open counters, heavier thin strokes and serifs, reduced stroke
contrast, and modified curves and angles for some designs.
Good typefaces for screen:
Verdana, Georgia and more.
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 such as the web, e-books, e-readers, and mobile
devices.
Leading and spacing vary in different font text. For example, more open
spacing for the elimination of lumping text.
Hyperlink/ Hyperactive link
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. They can be
seen on almost all web pages.
Font size for screen
The 16-pixel text on a screen is about the same size as text printed in a
book or magazine.
- 10-point size text for reading at inches distances
- At least 12-point size text for reading at arm's length.
For the point (pt) unit, anywhere from 20 to 24 is suitable for screen
reading.
System Fonts for Screen/ Web Safe Fonts
Each device comes with its own pre-installed font selection, which is
based on this operating system.
Operating systems such as Windows, MacOS, Android and even more.
Thus, if a designer chose some obscure, paid font family for the site's
design. We can only see a default font selection like Times New Roman if
we don't have the font installed and it's not pulling from a web-friendly
place. So, sometimes we can mistakenly assume the design looks ugly even
though we don't know that the designer used another font.
Web-safe fonts appear across all operating systems and are a small
collection of fonts that overlap between different operating systems.
Web-safe fonts:
- Open Sans
- Lato
- Arial
- Helvetica
- Times New Roman
- Times
- Courier New
- Courier
- Verdana
- Georgia
- Palatino
- Garamond
|
| The font size of the screen and print medium causes visual differences |
Pixel differential between devices
The screens used by PCs, tablets, phones and TVs are not only different
sizes but the text you see on-screen differs in proportion too as they
have different-sized pixels.
|
| Different pixels in the phone screen and smartwatch screen |
Static Vs Motion
Static typography has minimal characteristics in expressing words.
Traditional characteristics such as bold and italic offer only a
fraction of the expressive potential of dynamic properties.
It can be seen from billboards to posters, magazines to fliers.
Static typography in different places.
Motion typography emerges as temporal media offers typographers chances to "dramatize" type, for letterforms to become fluid and kinetic.
"A great designer knows how to work with text not just as content, he
treats text as a user interface."
— Oliver Reichenstein
↑↑↑ Back to top ↑↑↑
INSTRUCTIONS
Task 2 (20%) - Individual: Typographic Exploration & Communication
For the second task, I was assigned to express typographically
one of the contents of my choice, which the available selections are
"The Role of Bauhaus Thought on Modern Culture", "A Code to Build on and
Live By" and "Unite to visualise a better world". Thus, I started to
explore several options for expression and layout to finally execute a
good layout using the knowledge I gained from the first task.
Submission in a 2-page editorial spread of 200mm x 200mm per page.
Tasks such as:
- Text formatting
- Text expression
Learning goal:
- To demonstrate the use of grids, layouts and page flow
- To apply the necessary skills and sensibilities for effective typographic communication and achieve good reading rhythm with memorability.
Deadline: Week 8
↑↑↑ Back to top ↑↑↑
Work Process
For the header design, I came across the idea of using different letters
and even a number to build and form a "Unite" word again, even though each
of them serves a different purpose in visuals still ended up forming the
exact shape of "unite"
|
|
1st Type expression design |
|
| Layout 1 30/10/2023 |
|
| Layout 2 30/10/2023 |
Here I began to explore more options:
|
| Layout 3 31/10/2023 |
I intended to use the repeating letters inside "Unite", "Visualise" and "Better" and later combined them together with a letter sharing between the text. It was to symbolise how different words can still be fused with each other with the elements in common between them.
|
| Layout 4 31/10/2023 |
Layout 5 is another exploration of using the type expression design from
Layout 2. I replaced the "I" and "E" with "1" and "3" respectively as the
font design still closely resembles the letter, symbolising the close
relationship with other letters to form a complete word even though they
have different functions and usage.
|
| Layout 5 31/10/2023 |
The following layouts are the modifications done after the weekly progress
check and constructive criticisms by Ms Hsin Yin:
Simplifying the type expression for better readability for the header.
Moreover, the rotation of the subheader follows the direction of the
header and allows a smoother reading flow from left to right (to
subconsciously guide the reader from left to right). I also tried out
different font styles for the number "3" using the Futura font.
|
| Layout 6 31/10/2023 |
Noticing the Futura version of "3" is less likely to closely resemble an
"E", I changed back to the original font which is Gill Sans font. In
addition, I also moved the position of the subheader by around 50 pt
downwards and 10 pt left side to leave a breathing space between the
paragraph and the subheader lines.
|
| Layout 7 31/10/2023 |
Final Adjustment
After fixing the widow in the paragraph persisting in the second column of the paragraph of Layout 7, I decided to call it a day and conclude my final work.
 |
| Final layout 7/11/2023 |
Type Expression
Font
Gill Sans MT Bold
Sub Head
Font
Gill Sans MT Bold Italic
Gill Sans MT Bold Italic
Type size
18 pt
18 pt
Leading
22 pt
22 pt
Paragraph spacing
0 pt
Body
Font
Gill Sans MT Regular, Gill Sans MT Italic
Type size
X pt
Leading
XX pt
Paragraph spacing
11 pt
11 pt
Characters per line
40 characters
Alignment
Align Left
Align Left
Margins
36 pt top, 36 pt left + 36 pt right + 36 pt bottom
Columns
2 columns
Gutter
Gutter
14 pt
↑↑↑ Back to top ↑↑↑
Final work
Without grids and guides
With grids and guides
↑↑↑ Back to top ↑↑↑
FEEDBACK
Week 6 :
Specific Feedback
- I like how you utilize the number to the letter in "Unite". The 1 represents the letter I which also stands for "one together" meaning. Working on layout 5, the lead-in line can be adjusted to have the same angle as the header. Some alignments cant can be made to fix the graphics. The inverted 3 here can show the letter E but somehow from "the better world", it can be easily read as "butter" instead of "better" from my perspective. However, it's worth noting that the 3 works fine too here to replace the E.
Week 7:
General Feedback
- Be careful not to use the italic style in a whole body text, especially in paragraphs. Moreover, be mindful of the little details in your work in the future.
Specific Feedback:
↑↑↑ Back to top ↑↑↑
REFLECTIONS
- Experiences
Throughout the whole second assignment, all I can say is it's a quick one. The combination of the knowledge that I've learned in the first exercise assignments such as the type expression and type formatting are being utilised here to create the final editorial spread in the Adobe InDesign. Thanks to the lecturing by Ms Hsin Yin and Mr Vinod, I began to be aware of all sorts of details to be taken care of such as the widows and orphans in the body text which usually I didn't notice before. This assignment also sharpened my sense to emphasize the reading flow and visual hierarchy to enable easier reading comprehension.
-
Observations
Looking at my classmates' interesting work during class every Tuesday, I saw the improvements and some creative ideas in my peer's products that I hadn't thought of that way before. Some of their work is really an eye-opener for me and somehow refreshes my creative brain juice. For some time I tried to search far and wide for some design samples on how to bring out unity definitions into "Unite" for type expression, just to see a limited range of ideas on them.
- Findings
Because of that, I began to do research on the photos and illustrations on how the unity works and how to resemble them in visual terms. In the end, I believe it is safe to say that a diverse vision is one of the utmost key points in designing successful typographic visuals as throughout the assignment, I came to the conclusion that unity means different groups from different areas still can join hands together without considering dissimilarity between them towards a same goal.
↑↑↑ Back to top ↑↑↑
FURTHER READING
Week 5
The book I selected to read in week 5 is Just My Type by Simon Garfield.
After reading through the chapters of the book, I came to a conclusion for each chapter based on my perspective.
First chapter: "We don't serve your type"
The first chapter of the book talks about the creation history of Comic Sans font. However, it also talks in the sense of applying suitable fonts for copious situations. The father of Comic Sans, Vincent Connare intended to create the font to resemble fun elements as he noticed how unnatural and weird vibes of Times New Roman typeface were used on the instructions of Microsoft Bob which is a software package designed to be particularly user-friendly. In 1994, he realised that the software which was designed to be warm and welcoming to the computer user, was demolished by the traditional and chilly feel of the typeface used inside the software. Therefore, Comic Sans is officially developed and used. (It is called Comic Sans as the design of the font originates from the comic books)
But soon after the Comic Sans font gained its popularity (as it was introduced in Windows 95), the abuse of the fonts in different fields from school textbooks, webpages and even on graves (as people saw the fonts quite funny), caused some disgusting reaction by certain community as the typeface ruined the actual intentions of the content and was called ludicrous of the wrong usage of font.
In short, it is important to:
- be mindful of the mood of the content such as when formality is most required (reports, documents)
- be considerate of what visual information a typeface will bring out (formal, casual, emotional, nostalgic...)
Week 6
The book I selected to read in week 6 is Just My Type by Simon Garfield.
Second chapter: "Capital Offence"
In the second chapter, the writer mentions the use of uppercase and lowercase
letters in many cases. Nowadays, we have common sense that a sentence written
in all capitals looks like "A PERSON WHO HATES YOU AND/OR IS SHOUTING".
The book introduced an interesting case of accidental misuse of capital
letters to type an email and send it to another corporation on 25 September
2007. In which the victim of this case, Vicki Walker ignored the only rule
that everyone who has ever emailed: "Don't type in full caps". She was
dismissed from her job three months after her email was deemed to cause
"disharmony in the workplace". (In the end, she still successfully won the
unfair dismissal lawsuit case from her corporation and received compensation.)
Thus, it is worth mentioning the rules of type and type etiquette.
-
Type can have genders (Typefaces used for the title of the book)
As the example below, the Arquitectura font is for the male lines because they are tall, solid and implacable (manly). Centaur font for the female lines because it looks like handwritten, thin and thick strokes, and is charming and elegant.
For easier understanding, heavier, bolder, jagged fonts are mostly male while whimsical, lighter curly fonts are mostly female.
Men Are From Mars, Women Are From Venus by John Gray
Comments
Post a Comment