Typography | Task 2: Typographic Exploration & Communication
22/9/21 - 13/10/21 (Week 5 - Week 8)
Jane Chong Yun Ann (0344255)
Typography/Free
Elective in Bachelor of Design in Creative Media
Task 2: Typographic
Exploration & Communication
LECTURE NOTES
For previous lectures: click me!
Lecture 6 | Screen & Print
Figure 1.1: Different typography mediums, Week 6 (28/9/21)
Figure 1.2: Screen design for a website, Week 6 (28/9/21)
Typography today is subjected to many uncertain and fluctuating variablessuch
as OS, system fonts, the device and the screen itself; the typographer is no
longer the only factor deciding how the typography looks like.
Type for Print
The initial design for type was reading from print, where the text is smooth
and flowing. A good typeface for print are Caslon, Garamond and Baskerville as
they have a visual appeal while also retains its readability when in large
bodies of text.
Figure 1.3: Print type example, Week 6 (28/9/21)
Type for Screen
The type used on webs are altered to improve the readability and performance
on device screens. It can involve freater x-height, wider letterforms, open
counters...and so on. There is also greater open spacing, especially for
typefaces intended in smaller sizes (such as e-books). This is to improve
character recognition and readability.
A hyperlink is also a feature of type for screen. It is usually blue and
underlined and when a cursor hovers over it, the cursor should become a
pointer.
The usual font size for screen is 16px, which is about the same size as text
printed on a book. It is larger than the usual 12px for print type as it
accounts for reading distance; we read books at a closer distance as compared
to how we read books and magazines.
There are also pixel differential between different devices. For example, the
pixels in the screens of PCs are different from the pixels in the screens of
TVs.
Static Typography
These are the typography that has minimal characteristic in expressing the
words. The only expressive impact of the type is from the bold and italic
uses.
Motion Typography
These are types that are exaggerated to have greater dynamism, often brought
to life with animation. This may be accompanied with music as it is more
expressive.
Figure 1.4: Static vs Motion, Week 6 (28/9/21)
INSTRUCTIONS
<iframe
src="https://drive.google.com/file/d/17Pcc6te7YofVyQeTHGc726eL8o3sJSHD/preview"
width="640" height="480" allow="autoplay"></iframe>
EXERCISES
Task 2: Typographic Exploration & Communication
We were given three bodies of text (all including heading, sub-heading and
body) to choose from to create a 2-page editorial spread expressing the
content typographically. Little to no graphic elements are allowed and it
must be in greyscale. Mr Vinod gave three different bodies of text. I chose
the one with the title "Be Good, Do Good, Follow the Code" as I felt it was
the most interesting (and maybe it reveals the Computer Science bias out of
me because of the word 'code').
Research/Inspiration
Figure 2.1: Editorial spread inspiration, Week 6 (28/9/21)
I went to Pinterest to source some inspiration. I found myself leaning
towards titles that were aligned vertically or had an 'outflowing' effect
(eg: GROUND ZERO) where it spills over to another side of the
page.
Sketches
I kind of felt like my Computer Science "background" gave me an advantage in
terms of knowing how code syntax looks like (though, anyone could have easily
Googled it). Hence, my inspiration also came from my major degree.
I wanted to incorporate recognizable Java syntax and naming conventions (eg:
beGood, followTheCode()) to express the title and set the theme of the
editorial spread. I also wanted to try to involve HTML-style code (eg:
<div/>), but not combine both Java and HTML designs in one spread as it
would be too inconsistent.
Figure 2.2: Several editorial sketches, Week 6 (28/9/21)
Figure 2.3: Colour block layouts, Week 6 (28/9/21)
We had to use Adobe InDesign for this exercise. It was my first time using it
and I took some time to get used to the functionality of InDesign. The trouble
differentiating 'Master Spreads' and 'Pages' were real :,)... But I managed to
create some layouts from the sketches! I also attempted some variations to
some designs. As you can see, the Serifa font was used quite frequently. The
reason behind being it resembled the 'Courier' type font of many coding
languages the best.
Figure 2.4: Layouts attempts, Week 6 (28/9/21)
My personal favourites are the first, fourth and sixth one. The fifth one felt like it had too many distracting elements (ie: the "<<<<<") and the second and third one didn't had as much contrast/weight between the heading and the body text. For the bottom-most design, I italicized the consonants in "code" to create an interesting effect in the word. I found this 'trick' from the text formatting exercise where it involves repeating our names 10 times.
From the feedback received, I adjusted accordingly.
Figure 2.5: Cross alignment and hidden characters, Week 6 (1/10/21)
Figure 2.6: Altered layout 1, Week 6 (1/10/21)
Fonts: Serifa Std (Roman and Italic), Futura Std (Bold, Heavy and Book)
Point Size: 9pt (body text), 56, 120 and 128pt (heading)
Leading: 11pt (body text), 33pt (heading)
Line Length: 55-65
Figure 2.7: Altered layout 2, Week 6 (1/10/21)
Fonts: Serifa Std (Bold, Italic and Roman)
Point Size: 9pt (body text), 100pt (heading), 20pt (subheading), 18pt
(last words)
Leading: 11pt (body text)
Line Length: 55-65
I found myself leaning towards Figure 2.6 as it felt more dynamic; there was a
sense of movement with the diagonal arrangement of the "codecodecode". The overflowing "codecodecode" onto the next page was more interesting too. I liked
Figure 2.7 too because of the naming convention but, compared to Figure 2.6,
it felt more 'plain'.
Final: Task 2
Figure 2.8: Final Task 2: Typographic Exploration & Communication
(JPG), Week 6 (1/10/21)
Figure 2.9: Final Task 2: Typographic Exploration & Communication (PDF), Week 6 (1/10/21)
Time Allocation
Sketching: ~1-2 hours
Digitizing + Adjustments: ~2-4 hours
Total: ~3-6 hours
FEEDBACK
Week 6
General Feedback: Mr Vinod says we seem to tackle everything at
once, when we should figure it out element by element; express the title
well, then move on to the placement of the body text around.
Specific Feedback: <code/> idea: excellent type formatting, but
the flow of "codecodecode" is disrupted. Make "be good, do good, follow the"
follow the shape of the repetitive "codecodecode". Adjust the text body after
adjusting the shape, so it may start at a lower top margin. In the other idea
(followTheCode();), the lines may not serve a purpose to the theme. The double
slashes can have more kerning and an almost double space is needed after the
double slashes.
Week 7
General Feedback: In our 'lecture notes' section, we need to link it back to other lecture notes in Task 1. Some dates are missing, the details on top are missing..etc.
Specific Feedback: Mr Vinod commended on my visual research and said that I had good progression and work. My e-portfolio has good progression as well.
REFLECTION
Experience
This was a positive experience for me. And honestly, it felt much faster than the previous exercises for some reason. While InDesign took awhile to get used to, I found it a very convenient tool to use to format texts (time to replace MS Word with this). I did, however, found it a little annoying finding double spaces here and there after exporting the PDF / JPG files. There were probably 3-4 instances of this, not sure if it is my own typo error after moving things around or if it is Mr Vinod being sneaky by adding double spaces randomly.
Observations
Many students did the 'Follow the Code' body of text too, but quite a number did the 'Bauhaus' one. I did not do much research on Bauhaus but I found so many peers' design so cool because they played with the geometric shapes, layout and lines (kinda mad I didn't even think of researching all potential bodies of text.. I just saw 'code' and went with it :,).. oh well lesson learnt).
Findings
Text with larger point size need larger leading. However, at a certain point size the leading space becomes awkward, so I struggled with finding a point size that where the leading did not leave a gaping space between the lines or smoosh the two lines together for the heading text.
FURTHER READING
From the book list that were recommended, I chose "Typographic design:
Form and Communication" by Rob Carter, Philip B. Meggs, Ben Day, Sandra
Maxa and Mark Sanders.
Reference: Carter, B., Day, B., Meggs, P. B., Maxa, S., & Sanders, M.,
(2015). Typographic design: Form and Communication. Hoboken, New Jersey:
John Wiley & Sons, Inc.
Figure 10.1: Book cover of Typographic design: Form and Communication,
Week 6 (28/9/21)
From the book I came across a chapter called "Syntax and Communication".
Each individual letter has its own unique characteristic. While usually
assembled in a word, individual letters are often modified to create new
designs. An example is in Fig 15.1, where two letters are modified in a
way where each letter is still recognizable, but also together.
Figure 15.1: Example of letter configurations, Week 6 (28/9/21)
The interaction between the white of the paper with the letter can create
a visually dynamic piece. The use of negative space creates contrast and
creates a 'form-to-void' relationship that is essential to typographic
expressions.
Figure 15.2: Example of form-to-void relationship, Week 6
(28/9/21)
Another aspect is the word. I think this reading would have been more
useful for our Type Expression exercise (but oh well). By observing the
relationships between form, counterform and its structural forms, a
cohesive type expression can be easily formed. Interletter spacing and
counterform spaces have different configurations, hence, there should be a
visual balance rather than strict measurement.
Figure 15.3: 'Camerata' expression by Sergio de Jesus, Week 6
(28/9/21)
The above type expression shows the letterforms in terms of expressing the
relationship between the consonants and its connecting vowels,
representing a movement within the word.
Comments