Advanced Typography // Task 1
05/05/2023 - 03/0/2023 // Week 1 - Week 5
Hasnol Rafiq Bin Hasnol Raduan / 0356767
Information Design / Bachelor of Design (Hons) in Creative Media / Taylor's Design School
Information Design / Bachelor of Design (Hons) in Creative Media / Taylor's Design School
LECTURE'S NOTES
Typographic Systems
|
| Figure 1.0 - Typographic Systems (05/04/2023) |
Axial System: All elements are organized either to the left or right of a single axis.
Radial System: All elements are extended from a focus point.
Dilatational System: Textual information surround the circumference of
a circle.
Modular System: Text is constructed as standard size unit which is
interchangeable.
Random System: Elements appear to have no specific pattern or
relationship.
Grid System: All text is divided into vertical columns and horizontal
rows.
Transitional System: An informal system of layered banding or flowy
system.
Bilateral System: All text is centered aligned, arranged symmetrically
on a single axis.
Typographic Composition
Principles of Design and Composition: Emphasis, isolation,
repetition, balance (either symmetrical or asymmetrical), alignment,
perspective, rhythm, contrast.
Rule of Thirds: The Rule of Thirds is a photographic guide to
composition. The intersecting lines are used as guide to place the points
of interest, within the given space.
The first mechanically produced letterforms were designed to
directly imitate handwriting. Handwriting would become the basis or
standard for form, spacing and conventions mechanical type would try and
mimic. The earliest system of actual writing, written from left to right
and evolved from pictograms.
Early greek (5th C. B.C.E.): Drawn freehand, not
constructed with compasses and rules, and they had no serifs. In time
the strokes of these letters grew thicker, the aperture lessened, and
serifs appeared.
Roman Uncials: By the 4th century Roman letters were
becoming more rounded, the curved form allowed for fewer strokes and
could be written faster.
English Half Uncials (8th C.): In England, the uncial
evolved into a more slanted and condensed form.
Carolingian Minuscule: Capitals at the start of a
sentence, spaces between words and punctuation. It was this style
that became the pattern for the Humanistic writing of the fifteenth
century; this latter, in turn, was the basis of our lower-case roman
type.
Black Letter (12-15 C. CE): Characterised by tight
spacing and condensed lettering. Evenly spaced verticals dominated
the letterform. Condensing line spacing and letter spacing reduced
the amount of costly materials in book production.
The Italian Renaissance: Newly rediscovered
letterforms Antica. The renaissance analysis of form
that was being applied to art and architecture was directed toward
letterform — resulting in a more perfect or rationalised letter.
Designing Type
“Adrian Frutiger is a renowned twentieth century Swiss graphic designer.
His forte was typeface designing and he is considered responsible for
the advancement of typography into digital typography. His valued
contribution to typography includes the typefaces; Univers and
Frutiger.”
Purpose: “The goal of this new typeface was create a clean, distinctive
and legible typeface that is easy to see from both close up and far
away. Extremely functional.”
Considerations/Limitations: letterforms neded to be recognized even in
poor light conditions or when the reader was moving quickly past the
sign. He tested with unfocused letters to see which letterforms could
still be identified.
|
|
Figure 1.1 - UNIVERS by Adobe Illustrator, InDesign
(2015).
|
General Process of Type Design:
Research :When creating type, we should understand type history,
type anatomy and type conventions. We should also know terminologies,
side-bearing, metrics, hinting. It is then important to determine the
type’s purpose or what it would be used for, what different applications
it will be used in such as whether the typeface is for school busses or
airport signages, etc. We should also examine existing fonts that are
presently being used for inspiration/ideas/reference/context/usage
pattern/etc.
Sketching: Some designers sketch their typeface using the
traditional tool set (brushes/ pens, ink and paper) then scan them for
the purpose of digitization. They are more confident with their hands
and have better control using it. Some designers sketch their typeface
using digital tool sets, such as Wacom directly into a font design
software (much quicker, persistent, and consistent) but this can
sometimes impede the natural movement of hand strokes. Both methods have
their positives and negatives.
Digitization: There are professional software that are used in
the digitization of typefaces, amongst the leading software are:
FontLab and Glyphs App.
There are designers that also use Adobe Illustrator to design or craft
the letterforms and then introduce it into the specialized font apps.
This however is frowned upon by the purist. Attention should not only
be given to the whole form at this stage but also to the counter form.
The readability of the typeface is heavily dependent on it.
Testing: Testing is an important component in the design
thinking process. The results of the testing is part of the process
of refining and correcting aspects of the typeface. Prototyping is
also part of the testing process and leads to important feedback.
Depending on the typeface category (display type/text typ) the
readability and legibility of the the typeface becomes an important
consideration. However it is not as crucial if the typeface is a
display type, where expression of the form takes a little more
precedence.
Deploy: Even after deploying a completed typeface there are
always teething problems that did not come to the fore during the
prototyping and testing phases. Thus, the task of revision doesn’t
end upon deployment. The rigour of the testing is important in so
that the teething issue remain minor.
Perception and Organization
Perception is “the way in which something is regarded, understood, or
interpreted”. So, is perception what you see—and therefore understand—or
what you are manipulated into seeing and understanding?
Perception in typography deals with the visual navigation and interpretation
of the reader via contrast, form and organisation of the content. Content
can be textual, visual, graphical or in the form of colour. However our
focus today is in typography.
|
| Figure 1.2 - Contrast |
Contrast / Size: A contrast of size provides a point to which the
reader’s attention is drawn. For example if you have a big letter and a
small letter you will obviously see the big letter first before the small.
The most common use of size is in making a title or heading noticeably
bigger than the body text.
Contrast / Form: Contrast of form is the distinction between a
capital letter and its lowercase equivalent, or a roman letter and its
italic variant, condensed and expanded versions of typeface are also
included under the contrast of form.
Contrast / Structure: Structure means the different letterforms
of different kinds of typefaces. For example, a monoline sans
serif and a traditional serif, or an italic and a blackletter.
Contrast / Texture: By putting together the contrasts of size,
weight, form, and structure, and applying them to a block of text on a
page, you come to the contrast of texture. Texture refers to the way the
lines of type look as a whole up close and from a distance. This depends
partly on the letterforms themselves and partly on how they’re
arranged.
Contrast / Direction: Contrast of direction is the opposition
between vertical and horizontal, and the angles in between. Turning
one word on its side can have a dramatic effect on a layout. Text
blocks also have their vertical or horizontal aspects of direction.
Mixing wide blocks of long lines with tall columns of short line can
also create a contrast.
Contrast / Colour: The use of color is suggested that a
second color is often less emphatic in values than plain black on
white. Therefore it is important to give thought to which element
needs to be emphasized and to pay attention to the tonal
values of the colors that are used.
Form: Originating from the Greek words “typos” (form) and
“graphis” (writing), typography means to write in accordance with
form. Typography can be seen as having two functions:
- to represent a concept
- to do so in a visual form.
Displaying type as a form provides a sense of letterforms’ unique
characteristics and abstract presentation.
Organisation / Gestalt: Gestalt theory emphasizes that the
whole of anything is greater than its parts—this is based on the
idea that we experience things as unified whole: Instead of breaking
down thoughts and behavior to their smallest elements, the gestalt
psychologists believed that you must look at the whole of
experience.
Therefore in design (read: typographic layouts), the components/
elements that make up the design is only as good as its overall
visual form. While each component may be functional at an elemental
level, the sum of its parts is not greater than the whole or the
overall form.
The Law of Similarity is the gestalt grouping law that
states that elements that are similar to each other tend to be
perceived as a unified group. Similarity can refer to any number
of features, including color, orientation, size, or indeed motion.
The Law of Proximity is the gestalt grouping law that
states elements that are close together tend to be perceived as a
unified group. This straightforward law states that items close to
each other tend to be grouped together, whereas items further
apart are less likely to be grouped together.
The Law of Closure refers to the mind’s tendency to see
complete figures or forms even if a picture is incomplete,
partially hidden by other objects, or if part of the information
needed to make a complete picture in our minds is missing
Law of (Good) Continuation holds that humans tend to
perceive each of two or more objects as different, singular, and
uninterrupted object even when they intersect. The alignment of
the objects or forms plays a major role for this principle to take
effect.
The Law of Symmetry/Law of Praganz: You can find out more
about these laws by viewing the links provided or simply Googling
them. However keep in mind that you will find variation in the
interpretation and you will have to weigh them all to come to a
consensus.of your own.
The idea in the end, is to ensure awareness and inform your work
process. Organisation of information in the form of laying out
complex content in a hierarchical manner requires practice and the
knowledge gained herein but also elsewhere. Knowledge obtained
from reading, listening and viewing must be exercised or put to
use for it to be retained and of standard.
INSTRUCTIONS
TASKS:
Exercise 1
Typographic Systems - We are tasked to create design works for
each of the 8 typographic systems in Adobe InDesign in before next
class. The exercise task is to be done using Adobe InDesign only. Size
200 x 200 mm. In addition to black, you can use one other color. Graphical
elements (line, dot, etc.) can be used but limitedly
Figure 2.0 - Axial System Attempt (05/04/2023)
These are my first few attempts in demonstrating the Axial System. It is clear
the 3 variations do not really differ that much from each other that is due to
the fact that I had done the design within a limited time frame and I had to
refresh my memory on how to work on Adobe InDesign. The designs showcases the
concept of the axial system well and concise but it doesn't explore further.
To improve my designs, I was given feedback that I could have the main title
pivot towards the right side instead of the left side, to aid in achieving a
better visual hierarchy.
InDesign Progress
Figure 2.1 - Axial System Attempt #2
(07/04/2023)
All: Serifa Std (65 Bold, 55 Roman)
After trying out my first attempts at the axial system in class, I decided it
did not really demonstrate a strong understanding of the Axial system. My
first new attempt, I wanted to show the Axial system in a more subtle tone, so
I decided to separate the titles and the contents in different boxes. The
boxes helped in organizing the text and making it feel structured instead of
it looking empty. The second attempt, I decided to go with something simpler
and use a combination of a square and a circle to make the design a little
more interesting. I'd have to admit that this is my least favorite attempt due
to the fact that the circle and square does not really fit in the context of
the design as well as the layout of the text does not do anything interesting.
The final attempt, I decided to do another simpler design. This was a
improvement from the last attempt since everything fit within the context of
the design and has a clear visual hierarchy.
Figure 2.2 - Radial System Attempts
(07/04/2023)
Fonts used:
All: Futura Std (Book, Heavy, Light)
All: Futura Std (Book, Heavy, Light)
My first attempt at the radial system was slightly difficult as I
struggled to establish a strong visual hierarchy with a clear flow for
readers. It leaves a lot o negative space which makes the design look
empty. Although the design demonstrated the radial system, I think it has
quite a messy layout that struggles to standout as a good design. My
second attempt, I believe was a step in the right direction. It showed a
clear visual hierarchy and was easy for readers to read. It doesn't leave
a lot of negative space making the design feel structured. I believe the
addition of the semi circle help in bringing harmony in the design as it
helps draw attentions of the readers.
Figure 2.3 - Dilatational System Attempts
(07/04/2023)
Fonts used:
All: Futura Std (Book, Heavy, Medium)
All: Futura Std (Book, Heavy, Medium)
My first attempt at the dilatational system I thought was a good design,
but after looking at it for longer I have come to realized that it relies
to heavy on the graphical element which is not the aim of this exercise.
My second attempt is a much better realization of the system and uses
minimal graphical elements.
Figure 2.4 - Random System Attempts
(07/04/2023)
Fonts used:
All: Futura Std (Book, Heavy, Medium, Light, Bold)
All: Futura Std (Book, Heavy, Medium, Light, Bold)
I enjoyed doing the random system the most due to the fact that I was
technically able to just put text anywhere without a proper reason, but of
course in both my designs I tried to incorporate a structure in this
structureless system.
Figure 2.5 - Grid System Attempts
(07/04/2023)
Fonts used:
All: Futura Std (Medium, Light, Bold)
All: Futura Std (Medium, Light, Bold)
The grid system was my least favorite system to attempt for as it felt too
basic and structured to come up with a fun and elaborate design. The first
design had all the text sit on one side of the page as I felt that if it
didn't, it would've looked to spread out and leave a lot more negative
space. The second design spreads the text around but has a quite simple
and basic design to it.
Figure 2.6 - Modular System Attempts
(07/04/2023)
Fonts used:
All: Futura Std (Heavy, Book, Medium, Light, Bold)
All: Futura Std (Heavy, Book, Medium, Light, Bold)
The first attempt was a simple layout, it fitted all the text all into
one row or 'module' but doesn't really do anything interesting. For the
second design, I tried making changes to the first design by having the
content move up and down separating them into different columns. The
third design was the same thing but I decided to make the title texts
bolder and standout at the top of the column while the rest of the
information sits at the bottom.
Figure 2.7 - Bilateral System Attempts
(07/04/2023)
Fonts used:
All: Futura Std (Heavy, Book, Medium, Light, Bold)
All: Futura Std (Heavy, Book, Medium, Light, Bold)
My first 2 attempts on the bilateral system are the same design, the only
thing that has changed is that I added more space in between texts at the
top. The first designs, I placed the axis down the middle of the page at
kept a flow throughout the page. The third design is similar but i decided
to put texts on either side of the axis to make the layout more visually
appealing.
After presenting my work to Mr. Vinod and receiving the necessary feedback
, I have decided to improve on all of my designs. The feedback given was:
|
|
Figure 2.8 - Bilateral System Improved
(12/04/2023)
|
My bilateral system should be symmetrical, which means that only my
first designed adheres to the ruling.
Figure 2.9 - Grid System Improved
(12/04/2023)
|
|
Figure 3.0 - Grid System Improved (Grid}
(12/04/2023)
|
That my grid system does not adhere to the technicalities and the rules
because my text overlap columns. So I decided to improve on my previous
design by following and using the columns that I have set for my layout. I
still kept a similar design as my previous because I liked the
minimalistic look that my design had.
Figure 3.1 - Modular System Improved
(12/04/2023)
|
|
Figure 3.2 - Modular System Improved (Grid}
(12/04/2023)
|
|
|
Figure 3.4 - Transitional System Improved
(12/04/2023)
|
My transitional did not work as a system because the text did not follow
one direction. Instead I had text going in multiple directions. To improve
on this, I fixed my design by placing everything together in one single
flow.
Figure 3.5 - Dilatational System Improved
(12/04/2023)
Another problem in a couple of my designs were that the text was too
small. I should make sure my text is within 8 - 12 font size and make my
radial as well as dilatational in a bigger size so its readable.
|
|
Figure 3.6 - Random System Improved
(12/04/2023)
|
I also decided to improve on my random system because my previous design
still showcased a slight structure to it, which would defeat the purpose
of a random system. So to improve on the design, I put more text in
different directions and highlighted a few texts so its readable to the
viewer.
Figure 3.7 - Axial System Improved
(12/04/2023)
I have also improved on my axial design by aligning the texts a lot more
clearly.
Final Task 1 - Exercise Typographic System
|
|
Figure 3.8 - Final Bilateral System
(12/04/2023)
|
|
|
Figure 3.9 - Final Dilatational System
(12/04/2023)
|
|
|
Figure 4.0 - Final Axial System
(12/04/2023)
|
|
|
Figure 4.1 - Final Grid System
(12/04/2023)
|
|
|
Figure 4.2 - Final Modular System
(12/04/2023)
|
|
|
Figure 4.3 - Final Radial System
(12/04/2023)
|
|
|
Figure 4.4 - Final Random System
(12/04/2023)
|
|
|
Figure 4.5 - Final Transitional System
(12/04/2023)
|
Figure 4.6 - Final Compilation System
(12/04/2023)
Figure 4.7 - Final Compilation System (Grid)
(12/04/2023)
Exercise 2
Type and Play - We were tasked to select an image of
anything that does not contain many different elements. We have to
analyze, dissect and identify potential letterforms within the dissected
image. The forms would be explored and ultimately digitized. The
objective is to enhance/support the interplay between the letterforms
and the selected visual.
Figure 5.0 - Type and Play
(19/04/2023)
I decided to use an image of grass right outside on campus ground to
extract a typeface from because looking at the formation and
organization of the grass blades, I realized there were a lot of
opportunities for letters to be formed. I was able to form the letters
H, A, N, D, Y, together to they spell out the word Handy.
|
|
Figure 5.1 - Extracted Typeface
(19/04/2023)
|
After extracting I placed the letters together to spell out the word
Handy. The font shows strong characteristic of the blades of grass while
still managing a quite consistent design. There are still a lot refinement
to be done as it still does not follow the rules of typography.
Figure 5.2 - Refined Typeface Progress
(24/04/2023)
|
|
Figure 5.3 - Refined Typeface #1
(24/04/2023)
|
|
|
Figure 5.4 - Refined Typeface #2
(24/04/2023)
|
|
|
Figure 5.5 - Poster Attempt #1
(24/04/2023)
|
The idea behind this poster was to try blend the type within the blades of
grass and make it seem as if the hand is running their hand through the
typeface. I didn't integrate the typeface as much in the poster because I
wanted make it standout and legible.
|
|
Figure 5.6 - Final Refined Typeface
(2/05/2023)
|
After receiving feedback from Mr. Vinod, I decided to make the each letter
follow the same cap height to keep a strong consistency. The cap height
helps in making the type face looks as if its a tall blade of grass. I also
decided to fix up my 'Y' because it didn't really looked consistent with the
rest of the typeface, I made the descender shorter and the serif longer to
mimic the stalk and tip of grass. I think this is a much better and improved
version of the original typeface, it still keeps characteristics from the
original image but still stand on its own as a font.
|
|
Figure 5.7 - Final Poster
(2/05/2023)
|
I decided to change up my poster design to make it look like a movie
poster. When thinking of tall blades of grass, I was reminded of the
horror movie "In The Tall Grass", I made the poster follow a horror theme
instead of a generic integration of the typeface in grass. I used this
image of a dense field and increased the contrast to create a gloomy
atmosphere as if something lurks within the grass. I integrated the
typeface by having it hide behind the tall grass and peaking out. The
color red for the font was used to pay homage to the classic red used in
old horror movies to represent blood.
FINAL
Figure 5.8 - Final Typeface
(2/05/2023)
Figure 5.9 - Final Poster
(2/05/2023)
FEEDBACK
Specific Feedback: Both designs showcases the concept of the axial system well. To improve my designs, I could have the main title pivot towards the right side instead of the left side .
Week 2
Specific Feedback: My grid system does not adhere to the technicalities and the rules because my text overlap columns. My modular system does not work because it doesnt follow a standardised unit. My transitional doesnt follow one direction. I should make sure my text is within 8 - 12 font size and make my radial as well as dilatational in a bigger size so its readable.
Week 3
General Feedback: Integrate the characterisitc of the subject matter into the typeface
Specific Feedback: My extraction showed the characterisitc of the grass well enough that it is visibly clear. I have to be careful refining the font to make sure not to lose the characteristics of the grass. I could even inlcude stem lines, if it works well.
Week 4
Specific Feedback: Overall, I did a decent job at refining the extraction into making it look as a proper typeface while still including the characteristic of grass. But I must keep the cap height consistent throughout, if i want some variation I must make it more obvious. The letter Y has alot issues and must be improved, It must be more consistent with the rest of the typeface as well as include characteristic.
REFLECTION
Experience: Learning Typographic Systems has been both difficult and enjoyable for
me. I have gained awareness of little things like balance, weight
distribution, and readability via the many activities, which also
incorporate creativity and expression.
Findings: I found it difficult to strike a balance between the rigorous typographic guidelines and my drive for originality. As I advanced through the exercises, though, I came to see that following the systems really gave me a foundation for experimentation and pushing the limits of design. This became particularly clear during the discovering type activity, when I delighted in the process of examining organic things and utilizing them to guide my type design.
Observation: I discovered the value of comprehending the subject and its characteristics while merging text with a picture through the type and image exercise. This made it easier for me to put together a design that reflected the tone and message I wanted to express. Additionally, I discovered that the text's fluidity and movement were crucial in establishing a lively interaction between the two components.
Overall, learning Typographic Systems has been a really helpful experience for me in honing my design abilities and expanding my understanding of type. I now understand how to design with effectiveness and visual appeal while still following typographic rules and principles.
FURTHER READING
 |
Figure 6.0 - Typographic Systems by Kimberly Elam (2007) |
 |
Figure 6.1 - Non-objective Structure (pg 100) |
The non-objective elements in these pieces adopt the shape of a solid structure to support the composition. Three columns and twelve visual fields make up the intricate structure on the right. The only horizontal visual fields are highlighted, considerably simplifying this layout. Long lines of text that cross multiple columns, the white rectangle at the top, and the two white rules all contribute to the horizontal movement. The horizontal flow of the composition is disrupted by the text's arrangement (flush left), which draws the viewer's eye both below and across the picture. Similar to the work above, the work below groups the text using strong horizontal fields. and the flush left placement in each column suggests a vertical movement.
 | |
|
The visual fields and columns that make up a grid are identified by transparent structures. Each column in the pieces to the right and bottom right is a grey area. Transparent horizontal fields that overhang the columns and add contrast to the grey fields by dividing the type into several visual fields. As a result, the area is divided by a visible structure. Transparency is achieved differently in the piece on the left. The phrase "Architectonic" is highlighted by the red outline square, which also turns into a transparent window.
.jpg)
Comments
Post a Comment