Typographic Task2 Exploration & Communication
Typography / Task 2: Typographic Exploration & Communication
27/5/2024-10/6/2024( week6-week8)
FANG YAOYUE/0372006/
Typography/Bachelor of Design (Honours)in Creative Media
Task2：Typographic Exploration & Communication
List:
LECTURES
Week 5:
Typo_5_Understanding
1. Letters / Understanding Letterforms
The uppercase letters are suggested to be symmetry, but in fact it is not
all symmetry. The letterforms below both have their own expressions and
both are internally harmonious.
Baskerville stroke form : Easy to identify two different stroke
weights
Univers stroke form : The left width is thinner than the right
width.
Fig 1.1.1 Baskerville "A", Univers "A"
These are lowercase letter "a" of Helvetica and Univers. A
comparison of how the stems of the letterforms finish and how the
bowls meet the stems quickly reveals the palpable difference in
character between the two.
Fig 1.1.2 Helvetica "a", Univers "a"
2) Letters ? Maintaining x-height
X-height generally describe the size of the lowercase
letterforms. There is some additional points, curved strokes, such
as in ‘s’, must rise above the median or sink below the baseline.
This make the letters appear to be the same size as the vertical
and horizontal strokes they adjoin.
Fig 1.1.3 X-heights for lowercase letter
Just as important as recognizing specific letterforms is
developing a sensitivity to the counterform (negative space)
—the space describes, and often contained, by the strokes of the
form. The spaces between letters make up the counterform when
they are combined to form words. The determine the readability
of a word.
Fig 1.1.4 Form and counterforms
One of the most rewarding way to understand the form and
counter of a letter is to examine them in close detail. The
examinations also provide a good feel for how the balance
between form and counter is achieved and a palpable sense of
letterform’s unique characteristics. It also gives you a glimpse
into the process of letter-making.
Its worth noting here that the sense of the ‘S’ holds at each
stage of enlargement, while the ‘g’ tends to loose its identity,
as individual elements are examined without the context of the
entire letterform.
Fig 1.1.5 Form and counterforms
Contrast is a crucial component of design that is used in
typography as well.
Variation for contrast in typography
- Small + Organic
- Small + Dark
- Large + light
- Negative + Positive
Fig 1.1.6 Combination of contrast in Typography
Week 6:
Typo_6_Screen & Print
1) Typography/ Different Medium
In the past, typography was viewed as living on 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 and devices. 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. A good typeface for print such as Caslon, Garamond,
Baskerville are the most common typefaces that is used for
print. Because of their elegant characteristic and highly
readability. They are versatile and easy to digest for
viewers.
On the other hand, typefaces used on the web are modified to
enhance readability and performance on digital
screen.
For example:
- Taller x-height
- Reduction of ascenders and descenders
- Wider letterforms
- More open counters
- Heavier thin strokes and serifs
- Reduction of stroke contrast
- Modification of curves and angles
- More open spacing (especially for smaller sized typrface)
All these are aiming to improve letterforms recognition and
readability in the screen medium like web, e-books, e-readers,
and mobile devices.
Hyperlink
Hyperlink is existed in web pages, allowing users to click their
way from page to another. Text hyperlinks are normally blue and
underlined by default. When the cursor is moved over a
hyperlink, the arrow should change to a small hand pointing at the
link.
Font Size for Screen
16-pixel text on a screen is about the same size as text printed
in a book or magazine.
System Fonts for Screen/ Web Safe Fonts
Each device comes with its own pre-installed font selection,
different operating system might have different
selection.
Thus ‘Web safe’ typefaces are important to know. They’re the
small collection of fonts that overlap from Windows to Mac to
Google. These are the example:
- Open Sans
- Lato
- Arial
- Helvetica
- Times New Roman
- Times
- Courier New
- Courier
- Verdana
- Georgia
- Palatino
- Garamond
The text displayed on PCs, tablets, phones and TVs are in
different proportion too because of different sized pixels. 100
pixels on a laptop is very different from 100 pixels on a big
60″ HDTV.
3) Static v.s. Motion
Static Typography
Static typography expresses words with little
characteristics. Dynamic features have much more expressive
possibilities than traditional attributes like bold and
italics.
Motion Typography
Typographers have the chance to "dramatize" type through
temporal media, making letterforms more "fluid" and "kinetic".
Typographic information is presented in film title credits,
frequently animated to bring the text to life. Animated text
is a common feature of motion graphics, especially in the
branding of film, television production films, music video and
advitisement.
INSTRUCTIONS
"In this task you will be asked to express typographically the content
provided in a 2-page editorial spread (200mm x 200mm per page). Choose 1 from
the 3 text options provided. No images are allowed. However, some very minor
graphical elements, i.e. line, shade, etc. might be allowed."
Images are not allowed, which is a little different from the task in task1.
Images are good for conveying information to people, but this time we can only
use a few lines, curves, and shadows, which is a new challenge for everyone.
In this task, we need to design a editorial layout by using the text
given by Mr Vinod. There is three options which are "The role of Bauhaus thought on Modern Culture", "Unite to Visualise a better world" and "A Code to Build on and Live by".
I choose "The role of Bauhaus thought on Modern Culture" as my
formatting text. This is because I am always have pasison on shapes and
geometry graphics.
I chose Bauhaus for other reasons. Before that, I had read many articles about
Bauhaus in design magazines. The design of Bauhaus was very novel and
interesting. Moreover, Bauhaus School of Design is a place that every design
student yearned for, so I chose to do the layout design of Bauhaus this time.
1) Research
Bauhaus design covers every corner of the world, as long as you can think
of their existence, Bauhaus is already one of the most well-known design
companies in the world, in order to better learn this course, I once again
online to inquire about the Bauhaus information.
Fig 2.1.2 Bauhaus Design
Fig 2.1.1 Bauhaus Design
The design concept of Bauhaus is very consistent with people of any age,
whether they are adults, children or old people, when they see his design,
they will shine.
Bauhaus design is often abstract, angular, and geometric, with little
ornamentation. Its goal was to merge all artistic mediums into one
unified approach, that of combining an individual's artistry with mass
production and function.
Fig 2.1.3 Bauhaus Design
Some characteristic of Bauhaus design:
- Form follow functions
- Minimalism
- Simplicity
- Primary colours
- Geometry shapes
- Balanced asymmetry
These are some of the reference:
Fig 2.1.4 Bauchaus Design Reference
Since we are not instructed to use colour in the design, I convert these
references into greyscale to observe the brightness.
Fig 2.1.5Bauhaus Design School
Fig 2.1.6 Bauhaus Design School artwork
These are my rough design sketch for this exercise:
Fig 2.1.7 Rough design sketch 1
Fig 2.1.8Rough design sketch 2
Fig 2.1.9 Rough design sketch 3
Fig 2.1.10 Rough design sketch 4
Fig2.1.11 Type Expression Digitisation
Fig2.1.12Type Expression Digitisation
Fig2.1.13 Type Expression Digitisation
Fig 2.1.14Type Expression Digitisation
Fig 2.1.15 Type Expression Digitisation collect
Fig 2.1.16 Type Expression Digitisation collect
I found that Bauhaus designs often use geometric shapes to make their works
more beautiful, so I learned Bauhaus design. Now, I have incorporated many
geometric shapes, such as triangles, circles, ellipses, semicircles,
squares, rectangles, and lines, to make the picture more full and
beautiful.
Fig 2.1.17 Improved Layout
Fig 2.1.18 Improved Layout
Fig 2.1.19New Layouts (Blocks)
Fig 2.1.20New Layouts (Blocks)
Fig 2.1.21 Text Formatting Process
Fig 2.1.22 Text Formatting Process
Next, I combined the design in AI with the layout in Id, and arranged
and reorganized them with the knowledge of the previous lessons.
Fig 2.1.23 Editorial Text Formatting Design (JPEG)
Fig 2.1.24 Editorial Text Formatting Design (PDF)
Fig 2.1.15 Editorial Text Formatting with Grid (JPEG)
Fig 2.1.16 Editorial Text Formatting with Grid (PDF)
Formatting Details:
LAYOUT DESIGN:
Font/s: ITC Garamond Std
Type Size/s: 21 pt ("Bauhaus"), 21 pt ("Modern"), 21 pt ("The Role Of & Culture"), 21pt ("Thought on")
Leading:-
Paragraph spacing:-
HEAD LINE:
Font/s: Univers LT Std
Type Size/s: 18 pt
Leading: 21.6 pt
Paragraph spacing:-
BODY:
Font/s: Futura Std
Typ Size: 9 pt
Leading: 10.8 pt
Paragraph spacing: 11 pt
Characters per-line: 46
Alignment: Left aligned
Margins: 12 mm
Columns: 3
Gutter: 5 mm
FEEDBACK
Week6:
General feedback ： This week we finished the task of task1.
Under the guidance of Mr.Max, I changed the layout and blog, which made my
layout more neat and my blog more beautiful
Specific feedback：In class, we drew sketches for task2. I drew five
sketches, among which there were some problems in the first page of the
sketch. Mr.Max hoped that my first page of Bauhaus could be made more
attractive and there would be no problems in the layout, and I would improve
the problems in the following assignments.
When making Bauhaus fonts, it is necessary to incorporate Bauhaus elements,
such as geometric figures, and then let readers intuitively recognize these
letters, so as to be a good font layout design
Week7：
General feedback ：This week, our classes were cancelled due to the public holiday, but Mr.Max still dutifully made up for us. Thank you very much, Mr.Max. The teacher gave me a lot of suggestions in class, and I accepted and improved them one by one.
Specific feedback：My Bauhaus font design is good, but it is too complicated, because in my mind Bauhaus will use a lot of geometric forms to make the whole picture richer and more interesting, so I added a lot of lines and geometric figures, but the picture is full, but it can not let the reader recognize Bauhaus at a glance, a bit of the cart before the horse. Therefore, after Mr.Max raised this question, I immediately modified the u, lengthened it to make the whole picture feel interactive, and adjusted the spacing to make the font more beautiful.
REFLECTION
Experience:
The whole experience of learning layout design was very good. With the help of
Mr.Vinod and Mr.Max, I changed from a novice to a student who can use the
software proficiently. Every design is a new challenge, and every time I try
to make a new and unique design, I finish my homework early and ask questions
actively. This also makes me gain a lot, time passes quickly, there is still a
long way to design, I will continue to study hard.
Observations:
I often watch the videos of Mr.Vinod repeatedly, and I often go to see the
good works of my classmates. I find that a good design has one thing in
common: a sense of high-level. In many cases, the more complex the better, the
simpler the design. If the Bauhaus design looks messy and people can't find
out how to read it, it must be wrong, so I changed it repeatedly to make the
layout simple and easy to understand.
Findings:
Aesthetics, simplicity and comfort are three very important factors in design,
without which there is no readability. Good design can make readers interested
in reading. If a design leaves the reader uninterested, I think such a design
is a failure. I am also constantly looking up materials, watching videos and
reading repeatedly to increase my ideas and motivation.
FURTHER READING
This week, I finished the exercise of task2 and started an extended reading. In this reading, I saw a lot of the evolution of typefaces and how people in Europe continue to innovate and improve typefaces.As Mr. Vinod strongly suggested the book 'Typographic design: Form and communication', I decided to read sections of it on a weekly basis.
Typographic design: Form and communication
.jpg)
font size
I read this book this week about font size, how to change how to deal with font design, font size has a very important impact on the whole picture, whether it is on the cover of magazines, advertising covers are very important. Adjusting the font size has an extremely important position for the beauty, space, weight and size of the entire picture.
.png)
The gap between fonts(1)
Adjusting the font and font size is very important, so is arranging the space between the font and the font. If the font is too large and compact, it will have a bad effect on the whole picture. Such as too dense, let the reader lose interest in reading.
The gap between fonts(2)
When we do the layout of the design, we should pay more attention to the white space and typesetting, we should have our own thoughts, jump out of this limited space to design, show our ideas more in the design, and integrate the design into life.
评论
发表评论