Typography Task 2 - Typographic Exploration & Communication
21/10/2024-8/11/2024( Week 5 - Week 7 )
TANG LILIN (0376668)
Bachelor OF DESIGN (HONERS) IN CREATIVE MEDIA || TYPOGRAPHY
Typography
Task 2
LIST
LECTURE
Week 5 Typo_5_Understanding
- Understanding Letterforms
Mr. Vinod showed us the capital letter A in two fonts: Baskerville and
Univers. In both fonts, the A looks symmetrical, but in fact the strokes
on the left are more or less thinner than the strokes on the right. We can
observe the complexity and differences of the two fonts by comparing the
lowercase letter a. For instance, as the images below, the lowercase
letterform "a" in Helvetica typeface have a beautiful curve at the
connection of bowl to the stem stroke.
Maintaining X-height
However, we should keep in mind that curved strokes in the x-height which
generally describe the lowercase letterforms, 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. Because if we make it in same size to
other letterforms, it may optically looks smaller .
Form/Counterform
When we do typography-related work, we should first consider the
readability of the text. Cultivate the sensitivity of counterform (space
description).How well you handle the counters when you set type
determines how well words hang together.We should avoid adding letter
spacing in letterforms.
Contrast
The basic principles of Graphic Design apply directly to
typography.Contrast is the most powerful way in doing designs.The simple
contrasts produces numerous variations:small+organic/large+machined; small+
dark/ large light ...
|
| fig 1.1 Understanding Letterforms |
The best way to understand letters is to carefully observe their details
from each stroke.For example, when we want to design a letter, we don’t
know it very well, so in order to design it well, we need to piece
together the entire shape of the letter from the details little by
little.
|
| fig 1.2 Contrast |
INSTRUCTION
TASK 2 - Typographic Exploration & Communication
Among the three texts, I chose 'The Role of Bauhaus Thought on Modern
Culture' for my design project. After reading it, I understood that the main
content highlights the Bauhaus's centennial influence on modern design, art,
and culture—from architecture to typography. Artists like Kandinsky, Klee,
and Schlemmer played significant roles in shaping its legacy. Therefore, I
decided to combine Bauhaus-style typography with the title design. I then
searched online for examples of Bauhaus-style typography.
Inspiration
fig 3.1 inspiration #1 & #2 & #3
Above is the Bauhaus-inspired typography I collected.
When creating my typography design, I extended the strokes of the letters
to the edges of the page and added geometric shapes like triangles and
circles within the letters, which are very characteristic of the Bauhaus
style. Then, I began sketching my typography layout.
Process
|
| fig 3.2 sketches for the composition |
Above is my sketches for the composition.
|
| fig 3.3 sketches in AI |
Then, I attempted to create my sketches in Illustrator. The above is the result of digitizing my sketches. Next, I began working on the composition.
fig 3.4 some process for designing
After having the digital version of the sketch, I added text and noticed that sometimes the composition wasn’t ideal, so I kept adjusting the layout. I also spent a lot of time and effort to avoid widows and orphans in the text.
|
| fig 3.5 All of compositions I made |
fig 3.9. details of final composition 1
fig 3.6 details of final composition 2
These are some efforts for adjusting.
|
| fig 3.7 layout module analysis |
Here is the layout module analysis of my final design.
Final
Final
|
| fig 3.8 Final Composition |
To make it look fuller, I added a geometric circle within the letter
'O' in 'ROLE.' 'THE ROLE OF' is positioned in the upper left of the
layout to align with the reader's natural left-to-right reading
direction, so this part is placed on the far left of the composition. I
enlarged the letter 'A' to make it the largest letter in the title, as I
wanted it to be the focal point of the layout. I added a geometric
triangle within the letter 'A' to align with the Bauhaus style.
Additionally, I extended the strokes of the letter 'A' to connect with
the letters 'B' and 'U,' creating a roof-like peak that resembles the
top of a building. I also extended the strokes of the letters 'H' and
'S' and applied a gradient effect. The remaining title text is placed
above the extended line of the letter 'S,' with the lead-in text section
below it.
I tried to use the extended portions to frame the text section, aiming to guide the reader's gaze, establish a reading order, and clarify the location of the text section, so readers wouldn’t feel lost upon seeing the layout. I adjusted the spacing between the lead-in text and the extended line of the letter 'S' multiple times. Bringing them closer makes the layout cleaner and tidier, while spacing them farther apart enhances the readability of the lead-in text and provides a more balanced and orderly composition. Ultimately, I chose the more distant spacing as the final composition.
Regarding the text section, I also enlarged the letter 'T' in the first word of the article to make it clear where the text begins. The text is laid out in four neat columns, with careful adjustments to letter spacing, line spacing, and line length.
I tried to use the extended portions to frame the text section, aiming to guide the reader's gaze, establish a reading order, and clarify the location of the text section, so readers wouldn’t feel lost upon seeing the layout. I adjusted the spacing between the lead-in text and the extended line of the letter 'S' multiple times. Bringing them closer makes the layout cleaner and tidier, while spacing them farther apart enhances the readability of the lead-in text and provides a more balanced and orderly composition. Ultimately, I chose the more distant spacing as the final composition.
Regarding the text section, I also enlarged the letter 'T' in the first word of the article to make it clear where the text begins. The text is laid out in four neat columns, with careful adjustments to letter spacing, line spacing, and line length.
HEAD LINE
Typeface: Futura Std / Univers LT
Std
Font/s: Futura Std：Medium Condensed / Light Condensed
/ Book / Medium
Univers LT Std：55
Roman / 39 Thin Ultra Condensed / 57 Condensed
Typeface: Gill Sans Std / Univers LT Std
Font/s: Italic / 65 Bold Oblique
Type Size/s: 16 pt
Leading: 12 pt
BODY
Typeface: Univers LT Std
Font/s: 45 Light / 55 Roman
Type Size/s: 10 pt
Leading: 12 pt
Paragraph spacing: 12 pt
Characters per-line: 37
Alignment: left justified
Alignment: left justified
Margins: 10 mm top, 30 mm left + right + bottom
Columns: 3
Gutter:
5 mm
fig 3.9 Final Composition PDF (without grid)
|
|
fig 3.10 Final Composition with grid |
fig 3.11 Final Composition PDF (with grid)
FEEDBACK
Week 5:
General Feedback: Ms. Vitiyaa gave us feedback on last week's
assignment and told us that we should follow the golden ratio principle
when doing text formatting and try to put all elements in the page in the
golden section. This will result in a good design.
Specific Feedback: I realized that the designs I made before were
just for the sake of looking good, and I didn’t consider how to layout
based on design principles. I think I should read more about design
principles and theories.
Week 6:
General Feedback：We finished the work of task 1 and submitted the
eportfolio.
Specific Feedback：Ms. Vitiyaa gave me feedback that all layouts
should use Golden Ratio. We started working on task 2
Week 7:
General Feedback: Completed the layout for Task 2. This week, we were assigned Task 3, along with the learning tasks for Week 8 (self-study week).
Specific Feedback: Ms. Vitiyaa gave me feedback that my layout is good, but I made a spelling error in the word “modern.
General Feedback: Completed the layout for Task 2. This week, we were assigned Task 3, along with the learning tasks for Week 8 (self-study week).
Specific Feedback: Ms. Vitiyaa gave me feedback that my layout is good, but I made a spelling error in the word “modern.
REFLECTION
Experience
For my experience with Task 2, I found it interesting. I learned a lot
about Bauhaus design and enjoyed working on article layout and title design.
I experimented with incorporating various Bauhaus-style elements into the
title design, but I feel that I didn’t fully integrate the title design with
the text. For this layout design, I preferred to keep my layout simple and
clear, prioritizing readability.
Observation
In this task, or rather in the entire typography design process, the design
flow goes from sketching to digitizing the sketch, and then integrating the
digital sketch with the text. Throughout this process, I realized that due
to my lack of experience and insufficient theoretical knowledge of
typography, I often found myself confused about how to arrange the layout.
Additionally, when integrating the digital sketch with the text, there were
instances where the ideal design did not align with reality, so I had to
frequently adjust my title layout. Typography is a very precise and
demanding field that requires a lot of patience.
Finding
When adjusting the various elements in the layout, I found that widows
and orphans were often a challenge for me. Regarding text adjustments, I
wasn't sure what fundamental principles to follow when designing the
text's line length, column width, and gutter. As a result, I had to spend
a lot of time and effort making gradual adjustments to make the edges
appear smoother. Additionally, deciding on the number of text columns,
whether the text should align at the top or bottom, how to arrange and
layout the text in a way that suits my title design—these are all issues I
did not fully consider during the sketching phase.
FURTHER READING
|
| fig 6.1. Typographic Systems |
- Grid System
A grid is a system of vertical and horizontal divisions used to organize and arrange the relationships between various elements. Grids are commonly used in publication design and web design. They guide the hierarchy of screen elements and promote consistency across pages.
The Skyline grid consists of three columns, subdivided into eight visible areas. This grid helps arrange the layout in an orderly and structured manner, with clear hierarchy.
|
| fig 6.2. grid system |
In screen design, the use of grid frameworks needs to be flexible, as
information is constantly changing. Additionally, influenced by different
themes and audiences, how the layout is arranged and how the content varies
make the design process challenging.
|
| fig 6.3. composition made in grid system |
The grid system allows designers to better understand composition and
layout during the design process. Of course, the grid system also requires
alignment. After much practice, experienced designers can make the
composition space more interesting and visually engaging, with a sense of
drama.
|
| fig 6.4. some interesting grid system design |
Groups and Subgroups
Graphic design is set off by the wider tracking. Tightly tracking creates
the darkest gray, normal tracking creates a mid gray, and wide tracking
creates a light gray. It means the more tight space of text may attract
more focus.
Tone
In typography and layout design, we can use
tone to create and control hierarchy, emphasizing important
information.
Rhythm and Direction
In design, we can use shapes
to define the order and format in which text enters the viewer's eye.
Shapes can also be used to highlight important elements within the
text.
Nonobjective Structure
It can control vertical and
horizontal visual movement. It can also complement the composition in a
strong structural form.
|
|
fig 6.5 Front Cover of Typography Design Form and Communication |
I also read some content about the grid system in this book.
fig 6.6. types of grid
Basic Grid: Simple horizontal and vertical lines used for basic arrangement.
Modular Grid: Small units composed of multiple evenly spaced horizontal and vertical lines, more suitable for multi-column layouts.
Column Grid: Used for column layouts, commonly found in magazines and web design, allowing designers to create multi-column layouts.
Golden Ratio Grid: A grid based on the golden ratio, often used in high-end design and artworks, creating elegant and harmonious layouts.
Comments
Post a Comment