1. Understanding letterforms
The uppercase letter forms below suggest symmetry. But in fact it is not
symmetrical.It is easy to see the two different stroke weights of the
Baskerville stroke from(below)
More noteworthy is the fact that each bracket connecting the serif to the
stem has a unique arc.
|
|
Fig 1.0 Baskerville 'A'
|
The Uppercase letter forms may appear symmetrical, but a close
examination shows that the width of the left slope is thinner than the
right stroke.
|
|
Fig 1.1 Univers 'A'
|
The complexity of each individual letterform is neatly demonstrated by
examining the lowercase ‘a’ of two seemingly similar sans-serif
typefaces—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.2 Helvetica 'a' and Univers 'a'
|
2. Maintaining x-height
The x-height generally describe the size of the lowercase letterforms.Such
as in 's',such as in ‘s’, must rise above the median (or sink below the
baseline) in order to appear to be the same size as the vertical and
horizontal strokes they adjoin.
|
|
Fig 1.3 Lowercase maintaining x-height
|
3. Form and Counterform
The space describes, and often contained, by the strokes of the form. When
letters are joined to form words, the counterform includes the spaces
between them. Counterform has the same importance as the letterforms as it
helps to recognize the shape of the letters and assure the readability of
the words.
|
|
Fig 1.4 Form and Counterform
|
4. Contrast
The simple contrasts produces numeerous variations:
small+organic/Iarge+machined;small+dark/large light,etc
|
|
Fig 1.5 Contrast
|
Lecture 7: Typo_6_Screen&Print
Typography in different medium
No changes were made once a publication was edited, typeset and printed
Print Type vs Screen Type
1.type of print
The type was designed intended for reading from print long before we read
form screen. It's the designer's job to ensure that the text is
smooth,flowing, and pleasant to read.
typeface for print-Caslon,Garamond,Baskerville (characteristics: elegant
and intellectual, highly readable at small font size)
|
|
Fig 1.7Type for print
|
2. Type for Screen
Typefaces intended for use on the web are optimized and often modifies to
enhance readability and performance on-screen in a variety of digital
environments.
Examples of adjustments: taller x-height or reduced ascenders and
descenders, wider letterforms, more open counters heavier thin strokes and
serifs, reduced stroke contrast, modified curves and angles, etc.
Another important adjustment-more open spacing(especially for typeface).
All the adjustments were made to improve character recognition and overall
readability in non-print environments (web, e-books, e-readers ad mobile
devices).
3. 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 can
be found on nearly all web pages. Text hyperlinks are normally blue and
underlined by default.
4. Font Size for screen
16-pixel text on a screen is about the same size as text printed in a book
or magazine, accounting for reading distance. Printed text is typically
set at about 10 points within the reading distance of a few inches away,
while at least 12 points within the reading distance of arm's length,
which is about the same size as 16 pixels on most screens.
5. System Fonts for Screen / Web Safe Fonts
Each device comes with its own pre-installed font selection. Which is
based largely on its operating system. The problem is that each differs a
little bit
Web safe fonts: Open Sans, Lato, Arial, Times New Roman, Times, Courier
New, Courier, Verdana, Georgia, Palatino, Garamond
6. Pixel Differential between Devices
The text on screens in different devices (PCs, tablets, phones and TVs)
differs in size and proportion because of the different-sized pixels of
the screens. Even within a single device class, there will be a lot of
variation.
|
|
Fig 1.8Pixel Differential between Devices
|
Static vs Motion
1. Static Typography
Static typography has minimal characteristic in expressing words.
Traditional characteristics such as bold and italic offer only a
fraction of the expressive potential of dynamic properties.
2. Motion Typography
Temporal media offer typographers opportunities to“dramatize”type, for
letterforms to become “fluid”and “kinetic”(Woolman and Bellantoni,
1999).
On-screen typography has developed to become expressive, helping to
establish the tone of associated content or express a set of brand
values.
INSTRUCTIONS
<iframe
src="https://drive.google.com/file/d/1z1lFerEL7JObwjBxRSl_zbH_FIJPyxD4/preview"
width="640" height="480" allow="autoplay"></iframe>
TASK2
Text formatting and presentation
"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."
1. search
Before that, I went to the website and searched for
various visual references to provide inspiration.
|
|
Fig 1.9 Visual References
|
2. Sketches
Firstly I designed 5 different designs.
|
|
Fig2.0 Sketches
|
Final #1,#2,#5 sketches for digitisation
3.Digitization
I used Adobe illustrate for digitisation, where the eyes
this digitisation, Mr max advised me not to make the
word into a circle because it can't be read, according
to Mr max's advice, I changed it to the upper eyelid
‘unite to visualise ’the lower eyelid‘ a better world‘.
|
|
Fig2.1 Type Expression Digitisation
|
After getting feedback from Mr max, I used InDesign to
start the layout
|
|
Fig2.2 Layouts and Layouts blocked out
|
Mr Max chose one of the designs as my final work.
|
|
Fig 2.3 Final layout (without grids)
|
|
|
Fig 2.4Final layout (with grids)
|
HEAD
Font/s: Calisto MT(Unite),ITC New Baskerville
Std(to a better world)
Type Size/s: 72pt (unite ),10pt (to a better
world)
BODY
Font/s: ITC New Baskerville Std (text),Univers LT Std,
ITC New Baskerville Std(Lead-in text)
Type Size/s: 10 pt (text), 36pt (Lead-in text)
Leading: 10 pt (text),36pt (Lead-in text)
Paragraph spacing: 12 pt (text)
Characters per-line: 35 characters
Alignment: Left justified
Margins: 12.7 mm (top, bottom, left, right)
Columns: 3
Gutter: 5 mm
Fig 2.5 Final layout PDF (with grids)
Fig 2.5 Final layout PDF (without grids)
HEAD
Font/s: Calisto MT(Unite),ITC New Baskerville Std(to a
better world)
Type Size/s: 72pt (unite ),10pt (to a better world)
BODY
Font/s: ITC New Baskerville Std (text),Univers LT Std,
ITC New Baskerville Std(Lead-in text)
Type Size/s: 10 pt (text), 36pt (Lead-in text)
Leading: 10 pt (text), 36pt (Lead-in text)
Paragraph spacing: 12 pt (text)
Characters per-line: 35 characters
Alignment: Left justified
Margins: 12.7 mm (top, bottom, left, right)
Columns: 3
Gutter: 5 mm
FEEDBACK
Week 6
-
General feedback: I learnt more
about typography and practised on one of the
three different articles provided in class.
-
Specific feedback: When working
on the draft, as I had been designing around
one angle, Mr Max suggested that I look at
different angles of the title.
WEEK7
-
General feedback: I learnt more
skills about the use of ai to further improve
the design expressed in my drafts
-
Specific feedback: Mr Max chose to
digitise #1, #2 and #5.
WEEK8
-
General feedback: This week was
independent study week and I used the id to
complete my final work!
-
Specific feedback: Mr Max chose the third layout with the
orbs as my final work.
REFLECTION
Experience:
Compared to the previous exercise, we had
3 article options to choose from, so there
was a lot more variety and perspective to
choose from. Many of the designs provided
me with inspiration as I was conducting a
search for various visual communications.
However, I found it challenging to create
some unique designs because the same
articles were used, so we needed to
understand and design from different
perspectives
Observations:
I made some title changes from my sketch.
We may explore different angles and try to
find new creative ideas .
Findings:
I found out that in order to
create a better design we have to look at
it from different perspectives and make
the design simple and easy to understand
so that it is easier for the reader to
understand the meaning of what you are
designing, I also found out that there are
a lot of ways that we can design the
typography such as fonts, words, shapes,
graphics etc. to express it。
FURTHER READINGS
|
|
Fig 2.6TypographyBasics
|
This book is about the basics of typography, with readability as the primary goal. If the typography makes the information on the page difficult to read, then no matter how "pretty" the page layout or how "unique" the font choices, the page is not fulfilling its primary responsibility: to effectively convey information to the reader.
This post also talks about how there are
many different designs of fonts and also
shows me the differences between them such
as Serif, Sans Serif , Mono-Spaced,
Display, Script.Text, Dingbats
