Typography | Task 2: Typographic Exploration and Communication
-31/10/2025 - 13/11/2025/(Week 6 - Week 7)
-Takeguchi Shunta/0386416/Bachelor of Design in Creative Media
-Typography
-Task 2: Typographic Exploration & Communication (Text Formatting and Expression)
TABLE OF CONTENTS
LECTURES
Lecture 5: Understanding
Summary
-The design of letters is not always symmetrical, even
though the structures of the letters are symmetrical. This
is to create both internally harmonious and individually
expressive letterforms
-Below, letter form 'A' in different typefaces, both have
different slope stroke width, and for Baskerville, different
arcs
Baskerville 'A'(left) and Univers 'A'(right)
-Subtle differences make a huge impact on the readability
and the outlook of the letters
-It is important to consistently replicate the unique
feature added to the letterform when making a new
letterform
-Curved lowercase letterforms, such as 's', must rise
above the median(or sink below the baseline) to appear the
same size as the vertical and horizontal strokes
-Curved lowercase letterforms adjoin less space, touching the
median line, and it looks smaller when letters are equal size
Curved lowercase letterforms rising above the median
-Counterform(counter) is the negative space within or around
the letterform
-When letters are joined to form words, the counterform
includes the space between them
-How well we handle the counterforms when setting text
determines how easily we can read what has been set
-The designer designed letterforms with optimum readability,
so adding too much letterspace is not recommended
Forms and counterforms
-Examination in close detail gives a good understanding of
the form and counterform of a letter
-Analyzing existing same category letterforms is crucial to
understanding the convention forming of particular letterforms
-Contrast is an important element when creating a
differentiation of information
contrast example
Lecture 6: Screen&Print
Summary
-Experience of typography on screen changes based on how the
page is rendered, because typesetting happens in the browser
-Experimentation level of typography in web design or app
design is rather restricted, since it requires high coding
skills
-Caslon, Garamond, and Baskerville are the most common
typefaces for print. Because of their characteristic, which
are elegant and intellectual, but also highly readable when in
a small text size
-If the book is text-based, it is not experimental as
typography since it is a question of cost
-Typefaces for screen use are optimized and often modified
to maintain readability. Such as a taller x-height(or
reduced ascenders or descenders), wider letterforms, more
open counters, heavier thin strokes and serifs, reduced
stroke contrast, and modified curves and angles
-The old screen couldn't express the delicate typefaces
because of a lack of clarity, but this problem is no longer
there
-Verdana, Georgia are designed for screen use
-For smaller size typefaces in the screen environment, there
is more open spacing(leading, letterspacing) to improve
character recognition and readability
-Hyperlink: a word or image that can be clicked on to jump to
a new document or a new section within the current
document
-16 pixel text on a screen is about the same size as text
printed in a book. If reading a book at arm's length text size
should be at least 12 points, which is about the same size as
16 pixels on screen
-20~24 point text size is normal for screen reading
-Different typeface designs or variations between the
operating software are no longer an issue, thanks to Google
Fonts
-Text on a different-sized screen differs in proportion
because they have different-sized pixels
Pixel size on different screens
-Static typography has minimal characteristics in expressing
words
-The impression level of static typography leaves on the
viewer is closely knitted to their emotional connection
-Temporal media(such as film, motion graphics) offer
typographers opportunities to dramatize type, for letterforms
to become fluid and kinetic
INSTRUCTION
PROCESS WORK
Research
I chose the Bauhaus document for my task 2. I have heard the
word and know that it was a German design movement, but I
never knew exactly what it was, so I began by searching for
the meaning. Below is what I learned from websites(https://officialbauhaus.jp/blogs/magazine/what-is-bauhaus?srsltid=AfmBOoqJ7N-eGBAI9x0uVJ2UpveLvGtQufL3ExbGu8sWvaHRp9tkZL_c, https://favorric.com/blogs/column/history-bauhaus?srsltid=AfmBOoqdkMxv0g6AlIXd1ijEM79ho4FGMPhNUohHhKT2AjIa2sQZzsdH).
-The Bauhaus was an art school founded in Weimar, Germany, in
1919 by architect Walter Gropius.
-Bauhaus design is rational, simple, and functional.
-Key tenets of Bauhaus design are "form follows function" and
"less is more."
-Showy design is not beautiful; functional design is.
-Simple geometric forms such as circles, squares, and
triangles are common in Bauhaus design, art, and architecture.
-Primary colors (red, yellow, and blue) are used boldly yet
sparingly.
-One of the guiding principles of Bauhaus design is the idea
of "truth to materials."
-The Bauhaus used modern materials of the early 20th century,
such as glass, steel, cellophane, and plywood.
-The simple design and materials allowed Bauhaus designs to be
easily mass-produced and accessible to a wide audience.
(Image source: https://favorric.com/blogs/column/history-bauhaus?srsltid=AfmBOoqdkMxv0g6AlIXd1ijEM79ho4FGMPhNUohHhKT2AjIa2sQZzsdH)
Bauhaus design posters
(Image source:
https://favorric.com/blogs/column/history-bauhaus?srsltid=AfmBOoqdkMxv0g6AlIXd1ijEM79ho4FGMPhNUohHhKT2AjIa2sQZzsdH)
Ideation
My first sketch came from the beginning of the Bauhaus
manifesto, 'The ultimate goal of all art is the building!'. I
created the 'B' to look like a building by drawing
with right angles and straight lines. I found the letter
'B' design when I was exploring graffiti drawing, a few years
ago.
Graffiti-style letter 'B'
Layout sketch 1
Layout sketch 2
Layout sketch 3
In the other sketch, I focus more on using shapes. I installed triangle, circle, square, and rectangle. I felt it would be boring installing only shapes; therefore, I placed the black rectangle on the head. And I also tried to bring out a stylish impression with that.
layout sketch 4
I handed these 4 sketches in to Mr. Max and got approval to
proceed to digitize on Illustrator for sketches 1, 2, and
4.
In the digitalizing process of sketches 1 and 2, I put effort
into creating the 'B' shape. Since the shape is made with
simple lines, I made different art boards with fine
adjustments to see which is the most sophisticated
design.
'B' design draft 1
'B' design draft 2
'B' design draft 3
'B' design draft 4
Mr. Max suggested that draft 4 is the best as the letters fit
in the shape the most.
Digitalizing sketch 4 was much easier since just adding shapes
to the art board. As I thought in the sketch process, laying
the rectangle on top of the letter gave it a stylish look.
Making it more stylish, adding white color to the rectangle
stroke in draft 2.
Shapes design draft 1
Shapes design draft 2
But because of the rectangle reduce readability, Mr. Max
advised the modification below. Deleting the crossbar in the
letter 'A' and extending the rectangle through the middle of
the letters.
Shapes design draft after consultation
I also created a draft not in my initial sketch. While I was
playing around on Illustrator, I found the option(alt) + arrow
key, I can paste the selected object in the direction of the
arrow. I used this function and created three-dimensional look
like drafts shown below.
Three-dimensional design draft 1
Three-dimensional design draft 3
They are a simple design, but also impressive and organized.
Mr. Max, in the consultation, recommended the improved design
shown below. Filling black in the closed counter of 'A'
to create a sense of unity with 'H', and extending stems of
'H' up to the top and bottom of the layout to raise a dynamic
impression.
Three-dimensional design draft after consultation
I moved on to InDesign, arranging the sub-headings and text
for each three different designs. I used sans-serif typefaces,
Univers and Futura, only for this draft, since I thought that
the simple design without decoration matched the
Bauhaus concept.
There wasn't much exploration in the text,
but for the sub-headings, I experimented with different type
families and placements and went with the ones I liked
best. Many of my designs use long lines and rectangles,
so by placing text above them, I tried to express the
continuity of the lines.
InDesign draft
Final outcome
Mr. Max recommended a spread 1 or 6 for the final outcome, and I
chose spread 1. Spread 1 looks more original than the others, so
I felt it would make a more impression on viewers.
Final outcome JPEG
Final outcome PDF
Final outcome with grid JPEG
Final outcome with grid PDF
HEAD
-Font/s: Futura Std light condensed
-Type Size/s: Around 350pt(outlined for adjustment)
-Leading: 0
-Paragraph spacing: 0
BODY
-Font/s: Univers LT Std 55 Roman
-Type Size/s: 20pt
-Leading: 23pt
-Paragraph spacing: 23pt
-Characters per-line: 26~42
-Alignment: Justify with last line aligned left
Page Margins
Left page
-Top + Inside + Outside + Bottom: 100px + 80px + 280px + 20px
-Columns: 2
-Gutter: 60px
Right page
-Top + Inside + Outside + Bottom: 100px + 150px + 200px +
20px
-Columns: 2
-Gutter: 60px
FEEDBACK
Week 6
General Feedback: I learned the process of doing task 2.
Specific Feedback: E-Portfolio is following the instructions
and looks nice and organized.
Week 7
General Feedback: Introduction to task 2 process
Specific Feedback: My sketches look good enough to move on to
digitalization. For digitalized sketches, Sketch 1: the one
with bigger letters is better. Sketch 2: The line in the
middle should be thinner so that it is more readable. Place
shapes in organized positions. Sketch 3: It would be better to
fill the closed space in 'A' with black. Extend the vertical
line of 'H' to make it look more unique.
Week 8
General Feedback: Introduction to task 3
Specific Feedback: For final work, the first or sixth spread in the draft is recommended.
REFLECTION
Experience
As Mr. Max said in the Task 2 briefing, this task combined the expression and text formatting from Task 1. Therefore, I did not learn many new things; I applied the knowledge and skills I had learned in Task 1. The hardest part was coming up with creative ideas. Creating an attractive layout is not so difficult; however, in this work, I needed to incorporate a concept into the design. In my case, Bauhaus. I struggled to create a design that would allow viewers to feel the Bauhaus without being excessive.
Arranging the text boxes and letter spacing was burdensome and time-consuming since I had to try several ideas to see what looked better.
Observations
I felt it was important to understand the content when making text-based work, such as a magazine. I started this task by researching what the Bauhaus is, which helped me determine the style and mood I wanted to convey. Creating a design based on the content can give an organized impression and allow the viewer to appreciate the work more deeply.
Findings
I mentioned I used the graffiti style of design when sketching part, so I thought that adapting different genres of design may construct a creative idea. When I felt stuck in conceiving new ideas, I took a look at seniors' work or Bauhaus design posters on the internet, but I found my idea after looking at these references to be pretty similar to them, and no trick. So I changed my approach, and I came up with the first sketch design. If there is a clear concept, I tend to search for references regarding it, so to make a change, I learned it is good to explore something different from the concept. I might have the same situation as a design student, so I want to utilize this method.
FURTHER READING
8 micro tips for remarkably better typography(https://betterwebtype.com/8-tips-for-remarkably-better-typography/?utm_source=chatgpt.com)
This website teaches tips for better typography on screen use. Each tip was introduced with a clear example image, so it was straightforward to understand. Especially the second tip, about line height(leading) seems practical for me.
'Here’s the thing with headings — they’re generally short. Usually one line of text, sometimes two. In extreme cases, they break into three lines. But that’s it. A line height of around 140% is recommended for body text, so full paragraphs. When the same is applied to headings it looks like the lines are drifting apart. Like they don’t belong together (left example in Fig 2). Reduce the line height of headings to somewhere between 110 and 120%. The headings will look more compact, cohesive and polished.'
Large line height in a heading versus a smaller one
For the heading, I was putting a big number as line height, since it is a heading, which should be large and give impact. But the difference above is obvious, so I will utilize this tip for future exercises.
A Type Primer - Page 88 English is not Chinese
On this page author explains the difference between English and Chinese text structure and character. Chinese characters have the same width, so it makes it easier to read top to bottom, but English characters are not. When designing from top to bottom in English, such as with headings, I will be careful not to include overly complex words or multiple words.
A Type Primer - Page 146 ~ 155 Expressing hierarchy
In this section, the author demonstrates how designers can establish a hierarchy using an apple tart recipe as a practical example. Changing different elements, the author created 4 options. I noticed the options gradually became better and clearer in information. I learned that in order to create a clear hierarchy, it is important to use different methods depending on the type of information.
Comments
Post a Comment