TYPOGRAPHY / TASK 2 : Typographic Exploration and Communication

September 26, 2021

TYPOGRAPHY / TASK 2 : Typographic Exploration and Communication

31.9.2021 - 08.10.2021 (Week 6 - Week 8)
Esther Vanessa/0350751/Bachelors of Design (Hon.) in Creative Media
Typography
Task 2 / Typographic Exploration and Communication

JUMP LINKS

LECTURES

Understanding Letterforms

The uppercase letter forms below suggest symmetry even when it's not (refer to figure 1.1 and 1.2)
It is easy to see the two different stroke weights.

Each bracket connecting the serif to the stem has a unique arc

Figure 1.1 Baskerville stroke form

Figure 1.2 Univers

The width on the right and on the left is not equal in weight but it does have the illusion that they are symmetrical
Complexity of each individual letterform can be seen in lowercase 'a'

Figure 1.3 Helvetica vs Univers

When designing letterforms you need to pay attention if they are unique and replicable

Curved stroke 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

To look optically similar size

Figure 1.4 Curved strokes exceeding baseline or median

Forms and Counterforms

Developing a sensitivity to the counterform - it aids in readability

Figure 1.5 The form and counterform

Good feel for how the balance between form and counter is achieved

Referring to Figure 1.6, the letter 'S' holds at each stage of enlargement while 'g' tends to loose its identity as we examine the elements without the entire letterform

Figure 1.6 Enlargement of Letters

Contrast

One of the design principles that can be applied to typography

Figure 1.7 Contrast in just two letterforms

Figure 1.7 Other options for contrast in typography

Different Medium

Nowadays typography has transitioned into more screen based than prints

Figure 1.8 Typography in website

In the past, once a publication was edited, typeset and printed, you cannot change anything afterwards. Good typography and readability were the result of skilled typesetters and designers
Nowadays, there are more unknown parameters to typography such as

Operating system, system fonts, the device and screen itself, the viewport and more
It is also based on how the page is rendered, because typesetting happens in the browser

Print Type vs Screen Type

Print type

A good typeface for print-Caslon, Garamond, Baskerville are the most common typeface that is used for print. They are highly readable when set at small font size.
Print type are versatile and easy to digest

Figure 1.9 Classic printed typeface

Screen type

are optimized to enhance readability onscreen. This includes taller x-height (or reduced ascenders and descenders), wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, as well as modified curves and angles for some designs.
Screen type are intended for smaller sizes, so it is more open spacing - improve readability
Hyperlink - is a word, phrase or image to jump to another document or section from the original document. They are normally blue and underlined.
Font size : 16-pixel (20-24 pt) on screen is about the same size as text printed - they are typically set at about 10/12 points (on prints)
Web Safe Fonts

This used to be a problem because different OS has different pre-installed fonts
Web Safe Fonts will appear across all OS
Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond

Figure 1.10 Screen (left) vs Print (right)

Pixel differences between device. 100 pixels on laptop is very different from 100 pixels on a big 60" HDTV.

Figure 1.11 Pixel differences between devices

Static vs Motion

Static typography has minimal characteristic sin expressing words

Figure 1.12 Static Typography

Good design can be dynamic even if the platform is static

Motion Typography

Opportunity to dramatize type to be more fluid and kinetic.
Found in motion graphics and more

INSTRUCTIONS

TASK

For our second task, we are asked to create a type formatting layout for an editorial text. There are 3 headlines and texts that are provided, and we are free to choose whichever text we want. For the headlines, we can create our own design (using the 10 typefaces given in the beginning of semester) in Adobe Illustrator, however there should not be too much graphical elements and no color is allowed. In this task too we should remember the important things to look out when making the layout such as point size, leading, cross alignment and such. It is also important to have a somewhat balance negative and positive spaces in the bigger picture. Mr. Vinod did give us several pointers on how to create and start the design in his YouTube video.

So first off, out of the three texts, I chose the "Be good, do Good, follow the code" text. I first started by sketching out how I want my potential layouts to look like on my iPad. I made sure to made several options to choose out of from.

Figure 2.1 Initial sketches of the potential layouts (25/09/2021)

Afterwards, I started with creating the design for the headlines. At first, I only started with 3 Headline designs.

Figure 2.2 First headline design (24/09/2021)

The first headline design used Futura font family, mainly black and oblique.

Figure 2.3 Second headline design (27/09/2021)

For the second headline, I used gill sans font family.

Figure 2.4 Third headline design; first attempt (27/09/2021)

For the third headline, I used Futura font family again as I really like it's san serif simple look. On the first attempt I used the italic style to represent movement of "follow". The first try I used a more condensed style, however I think that the normal italic looks more balanced than the condensed version.

Figure 2.5 Third headline design; second attempt (27/09/2021)

I then imported the design to Adobe InDesign where I shall be be working on the overall texts.

Figure 2.6 How the headlines look in InDesign (27/09/2021)

Layout #1

I started working on the first composition. When working on the layout, I have to pay attention to the overall balance and the amount of negative and white space. I specifically use left alignment on all of my compositions so I can avoid rivers (when using justify). When using left alignment, I also need to remember to track and kern the text/line so that the right jagged line won't be to ragged.

Figure 2.7 First try inputting the text without formatting (27/09/2021)

Figure 2.8 After formatting (27/09/2021)

Figure 2.9 Different format for the highlighted sentence (27/09/2021)

Figure 2.10 Final draft of Layout#1 (JPEG) (27/09/2021)

Text Details

Font : Bembo Std

Point size : 11 pt (text), 12 pt (highlighted)

Leading : 13pt (text), 14pt (highlighted)

Paragraph spacing : 13pt (text)

Paragraph spacing correspond to Leading, therefore if my leading is 12pt, my paragraph spacing will be the same. For all of my composition, I made sure that my line length is around 55-65 so it won't affect the readability of the text.

Cross alignment between left and right column should also be achieved.

Layout #2

For my second layout, I decided to change the headline typography a little bit since I believe that the first attempt was a bit too monotone.

Figure 2.11 Changes to the second headline (27/09/2021)

The changes made are the following:

"Follow the code" text is made with ITC Garamond Std in Book

Added small graphic elements

Small design changes to "be good do good" text

Here is how I want to compose the layout. I want the headline to be in the middle.

Figure 2.12 Trying out the layout composition (28/09/2021)

I then proceed by doing similar formatting as I did in the first layout.

Figure 2.13 Inputting and Formatting the main text (28/09/2021)

Figure 2.14 Final draft of Layout #2 (28/09/2021)

Text Details

Font : Adobe Caslon Pro

Point size : 11pt (text), 12pt (highlighted)

Leading : 13pt (text), 14pt (highlighted)

Paragraph spacing : 13pt (text)

Layout #3

Here in my third layout, I want to play around the composition a little bit. That is why I did not align my headline to the columns, instead I aligned it to the edge of the page. I also did the same thing with the formatting of the main text for this layout.

Figure 2.15 Inputting and Formatting the main text (28/09/2021)

Figure 2.16 Preview look of the layout (28/09/2021)

Figure 2.17 Final draft of Layout #3 (28/09/2021)

Text Details

Font : Jansen Text Ltd Std

Point size : 10pt (text), 11pt (highlighted)

Leading : 12pt (text), 13pt (highlighted)

Paragraph spacing : 12pt (text)

Layout #4

Initially I wasn't really planning on making a fourth option, however I feel like the three layouts I did could look too simplistic. Therefore, I experimented more on the third layout, especially on the headline. I tried creating the fourth headline by using Serifa. I made the design to look more like the coding we typically see.

Figure 2.18 Fourth Headline design (29/09/2021)

Figure 2.19 Inputting and Formatting the main text (29/09/2021)

Figure 2.20 First draft of Layout #4 (28/09/2021)

Text Details

Font : ITC Garamond Std

Point size : 10pt (text), 11pt (highlighted)

Leading : 12.5 pt (text), 13pt (highlighted)

Paragraph spacing : 12.5 pt (text)

After WEEK 6, I got further feedbacks in which I try to revise my work.

Both Sir Vinod and I particularly like the work on Layout 4 since it is more interesting than the rest of my layouts; it has much more expression, especially in the headline. However, I am still not satisfied with it therefore I changed a little bit of the design of the headline. I purposefully extended two lines from b from "be good" and d from "do good" as I want the idea of them to actually be one unity. I also added a small cursor element to make it more interesting.

Figure 2.21 Design changes to the headline (01/10/2021)

Afterwards, I set it up on InDesign. I want the extended lines to touch the edge of the spread so it would look continuous.

Figure 2.22 Setting up on InDesign (01/10/2021)

The changes to the amount of column can also be noticed. According to the feedback, making more columns might look better and more balanced, hence the column amount change from 2 to 3. From then on, I adjusted the ragging further more. I also made some changes to the point size for the body text. I also try separating the minor headlines and body text.

Figure 2.23 After formatting the body text (01/10/2021)

Using the show hidden character, I carefully check if there is any wrong formatting such as double paragraph spacing.

Figure 2.24 Showing hidden character in the text (01/10/2021)

I also try adding more graphic lines to the headline design to try and tie the whole spread together.

Figure 2.25 Adding more graphical elements (07/10/2021)

However, after some thought, I figured I didn't like it enough to keep the bolder graphical lines. I also try and explore more, trying out on different font size and sans serif for the body text.

Figure 2.26 Changing the font size and type (07/10/2021)

Afterwards, I try to move around the headline to create a new layout with the same concept.

Figure 2.27 A new layout with the same concept (07/10/2021)

But I don't like it that much so I'm settling for the first layout. I also fixed kerning and tracking so the body text won't look too tight or too loose.

Final Submission - Typographic Exploration and Communication

Figure 2.28 Final Submission (JPG) (07/10/2021)

Text Details
Font : Futura Std Book
Point size : 9pt (text), 10pt (highlighted)
Leading : 11pt (text), 12pt (highlighted)
Paragraph spacing : 11pt (text)

Figure 2.28 Final Submission (PDF) (07/10/2021)

FEEDBACK

Week 6
General Feedback: Explore more on the headlines.
Specific Feedback: On the fourth layout, the idea is good but point size for body text could be smaller.

Week 7
General Feedback:
Specific Feedback:

REFLECTION

Experience

Working on this second task is interesting. We are asked to apply what we have learned in the first task to create an editorial layout. I think that this will be very helpful in the future whenever we are going to create magazine or other editorial layout.

Observation

I found out that although graphical headlines are great design wise, it might not corelate to the text, and that it might actually affect the hierarchy and readability.

Findings

I found out that I need to pay attention more about kerning and tracking as the body text may look too tight or too lose about it, which will affect readability.

Search This Blog

Esther Vanessa [0350751]