Typography / Task 2: Typographic Exploration & Communication
Teh Ming En/0364908
Typography-Bachelor of Design (Honours) in Creative Media--Taylors University
Task 2: Typographic Exploration & Communication
LECTURES
Week 5:
Understanding Letterforms
|
| Fig 1.1 Baskerville 'A' and Universe 'A' |
|
| Fig 1.2 Helvetica 'a' and Universe '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.
Maintaining x-height
|
|
Fig 1.3 Median and Baseline |
Form/ Counterform
|
| Fig 1.4 Form/ Counterform |
Counterform (or counter) - 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. How well we handle the counters when we set type determines how well words
hang together. It is easily we can read what’s been set.
The simple contrasts produces numerous variations:
Letter/ Contrast
small+organic/ large+machined; small+dark/ large light...
|
| Fig 1.5 Helvetica Bold 'A' and Baskerville 'A' |
|
| Fig 1.6 Diagram of Contrast |
Week 6:
Typography In Different Medium
Print Type:
The most common typefaces that are used for print are print-Caslon,
Garamond, and Baskerville because of their characteristic which are
elegant and intellectual but also highly readable when set at small font
size.
|
| Fig 2.1.1 Example of Print Type |
|
| Fig 2.1.2 Example of Print Type |
Screen Type:
Typefaces intended for use on the web are optimized and often modified to
enhance readability and performance on screen in a variety of digital
environments. This can include a taller x-height, wider letterforms, more
open counters, heavier thin strokes and serifs, reduced stroke contrast, as
well as modified curves and angles for some designs.
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, which can include the web, e-books, e-readers, and mobile
devices.
Hyperactive Link/ 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. It was found in nearly all Web pages.
Text hyperlinks are normally blue and underlined by default.
Font Size for screen:
16-pixel text on a screen is about the same size as text printed in a
book or magazine; this is accounting for reading distance. Because we read
books pretty close — often only a few inches away — they are typically set
at about 10 points. If you were to read them at arm’s length, you’d want
at least 12 points, which is about the same size as 16 pixels on most
screens.
System Fonts for Screen/ Web Safe Fonts:
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.
|
| Fig 2.2 Pixel between different device |
Static VS Motion:
|
| Fig 2.3 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.
Motion typography - Film title credits present typographic information
over time, often bringing it to life through animation/motion graphics.
Motion graphics particularly the brand identities of film and television
production companies, increasingly contained animated type. Type is often
overlaid onto music videos and advertisements, often set in motion
following the rhythm of a soundtrack. It establishes the tone of
associated content or expresses a set of brand values.
INSTRUCTION
Task 2: Typographic Exploration & Communication
In Task 2, we will be asked to create a 2 page editorial layouts, the size of
each page is 200mmx200mm. We have to choose 1 from the 3 contents provided and
use Adobe InDesign to complete the work. Adobe Illustrator is allowed to
express the headline.
Research
Before starting the task, I did some research on the content I chose. I search
the information about Bauhaus.
|
|
Fig 3.1 Bauhaus |
|
| Fig 3.2 Bauhaus Pattern Design |
Layouts
|
| Fig 3.3 Layouts (26/10/2023) |
|
|
Fig 3.4 Layout #1 (26/10/2023) |
|
| Fig 3.5 Layout #2 (26/10/2023) |
|
| Fig 3.6 Layout #3 (26/10/2023) |
First, I created the three different layouts and showed them to Miss Low. I
liked the Layout #2 but I overlooked the number of characters in single line.
It was too long, it will make reader feel tired while reading.
|
| Fig 3.7 Layouts (27/10/2023) |
After that, I modified the number of characters in a single line of Layout #2,
and changed the arrangement of the text. Miss Low suggested me adjusted the
position of title of my Layout #3. After #3 was completed, I decided to choose
it for my final layout.
|
| Fig 3.8 Final Layout (31/10/2023) |
HEAD
Font/s: Futura Std
BODY
Font/s: Futura Std
Type Size: 10pt (text), 16pt (lead-in-text), 11pt (subtext)
Leading: 12pt (text), 20pt (lead-in-text), 13pt (subtext)
Paragraph spacing: 0
Characters per-line: 62
Alignment: Align Left
Margins: 10mm
Columns: 2
Gutter: 5mm
Final Typographic Exploration & Communication
|
|
Fig3.9 Typographic Exploration & Communication JPEG (31/10/2023) |
Fig3.10 Typographic Exploration & Communication PDF (31/10/2023)
|
|
Fig3.11 Typographic Exploration & Communication with Grid JPEG
(31/10/2023) |
Fig3.12 Typographic Exploration & Communication with Grid PDF (31/10/2023)
FEEDBACK
Week 6
General Feedback: The
text should avoid distortion. The Italic typefaces usually used to highlight
some sentences or paragraph. I was suggest didn't use it in all
article.
Specific Feedback: My title design of layout #2 is creative, but the number
of characters in single line is too long. It will cause reader tired easily
when reading the content. For layout #3, I was suggested to adjust the
position of the title, it is recommended to put it inside 'B'. Adjust the
position of lead-in text.
Week 7
General Feedback: Make sure the link of the e-portfolio and PDF in it can
be opened in another computer.
Specific Feedback: The layout #3 can be the final composition.
REFLECTION
Experience
I was enjoying the process of creating the layout. The difference from the previous exercise, the layout of this exercise is horizontal and we have to create the title with Adobe Illustrator(also can use Adobe InDesign). It was a creative process and I was enjoyed in it because I could create some unique and special things in the process. The difficult part for me is the arrangement of text and text formatting as I hard to control the number of characters.
Observations
I have realized that the arrangement of the text is important in an article. The fonts and typefaces selection of the text are also a key in typography. Different typefaces are use for different purposes, for example Italic typeface usually used to incorporate words or phrases from a foreign language into a mostly English text to indicate that they are not the primary language. Besides that, it also used for quotations within a body of text.
Findings
In this exercise, I found that we can make the text show different effects as long as we make a little changes on it. For my final layout, I placed 'the role of ' and 'thought on modern culture' into the 'B' word and changed to white color that makes the title look more focused. Furthermore, I found that readability affects readers to understand the content of a text comfortably and easily.
FURTHER READING
 |
| Typography Systems Book |
This book was written by a designer, Kimberly Elam.
 |
| Example of Radial System |
These two posters were designed using radial system. The poster above is the Contemporary Improvised Music Festival poster. It was designed in two- and three-dimensional space. The text blocks on dimensional shapes radiate around an ellipse and the text is organized by date in out-lined rectangular shapes and emphasized by dropped-out black rectangles. Below is a musical poster, it use the sole of tap shoe as a focal point for type that radiates from it and the words radiating around it. These emphasize the points of the poster so that readers can easily get the message when viewing it.
 |
| Radial System, Thumbnail Variations |
The further experience with the system often yields interesting grouping of line, simplified composition, and more dense textures. Because of the Initial Phase, Intermediate Phase ,and Advance Phase.
-Initial Phase: Initially, radial components occupy a considerable amount of composition space, as each line is seen as an individual element.
-Intermediate Phase: Once the designer is comfortable with the radial system, experimentation begins with curve lines, arranging space between lines, grouping lines, grouping and rightangle arrangements, and corner focal point placement.
-Advance Phase: As further experience with the radial system, designers focus on grouping line of text and creating a hierarchy. The focal point can be reinterpreted from an imagined pin point to the implied center of a large circle.
 |
Radial system has a strong diagonal direction in compositions, they are visually active and dynamic. However, radial compositions are difficult to read because of the limited amounts of text. It is suitable for visual messages with limited text.
Comments
Post a Comment