Typography - Task 2: Typographic Exploration and Communication

The uppercase may look symmetrical, but actually isn't. The width in the left and the right is different. It is because an optical reason to make it look nicer. Even a small curves in fonts could affect the readability. Consistency in designing typefaces is important.

Figure 1.1, Letters

B. Maintaining x-height

The curved strokes such as 's' must rise above the median in order to appear to be the same size as the other letter.

Figure 1.2, Maintaining X-Height

C. Counterform

This is really important in typeface design, because it aims in the reading and legibility of formatted text of letterforms. When you have too much space, you are reducing the readability. We have to examine them in close detail to understand the form and counter of a letter.

Figure 1.3, Counterform

D. Contrast

This is one of the Design principle. Contrast creates impression of the typefaces.

Figure 1.4, Contrast

1. Typo_6_Screen&Print

This lecture is talking about typography in different medium:

In the past, typography was viewed only when it was printed. Nowadays, typography exist not only in paper but on screen. The experience of typography today changes based on how the page is rendered.

Print type: The characteristic are elegant, intellectual, and readable ->Caslon, Garamond, Baskerville

Figure 1.5, Typography for printing

Screen type: Versatile, has a neutrality. Often modified to enhance readability and performance on screen. Typefaces used in screen are more open spacing -> Verdana, Georgia

Figure 1.6, Typography for poster (screen)

Hyperlink: a word that you can click on to jump to a new document. The text are normally blue and underlined.

Font Size for Screen: 16px text on screen=text printed in a book/magazine

System Fonts for Screen (Web safe fonts): The web safe fonts appear across all operating systems -> Open sans, lato, Arial, Helvetica, Times New Roman, Times, Courier New, Verdana, Georgia, Palatino, Garamond.

Pixel Differential Between Devices: the text on screen differs in proportion, because they have different size pixels. Ex; 100 pixels on a laptop is not the same with 100 pixels on a big 60inch TV.

Figure 1.7, Pixel Differential Between Devices

Static typography has minimal characteristic in expressing words. Although it is "static", it doesn't mean that it does not have dynamic. A good design has dynamic.

Motion typography usually used in the brand identities of film and television production companies, contains animated type. Motion typography has developed to become expressive.

Top ↑

INSTRUCTIONS

Top ↑

TASK 2 — Typographic Exploration and Communication

In this task, we are given 3 text to choose 1 and make it into a typography layout in InDesign. From the three text, I pick the second one, "Punk's Design Revolution: Breaking the Rules." Because it seems interesting.

a. Ideas & Sketches

First, I search through Pinterest to collect as many ideas as possible. These are the pictures that best represent my concept.

Figure 2.1, References

After that, I started to sketch my ideas in Procreate. I want the "PUNK" to be the highlight of the text, so I was thinking to make it a little shredded. For the rest of the title, I want it to look like it's linked (like the references one). I'm planning to make a 4 column margin, but I will be experimenting the column too later.

Figure 2.2, Task 2 First Attempt

b. Digitization

After sketching, I started to digitize it. Mr. Vinod said that it is okay to make the title in adobe illustrator. So, I make the title's drafts in my Illustrator. Starting it, I tried it out with the 10 fonts that are given by Mr. Vinod. I was thinking to pick a bold sans-serif font because I want it to look modern and could be distorted a bit (shredded), and I finally choose Futura Std Bold Condensed font for my layout.

Figure 2.3, Font Testing

For the "Punk", I use a knife tool to make it look shredded. Then, I rotate it a little bit for each letter. I like how this came out because it does not distort the font, but also giving the punk vibe.

Figure 2.4, Digitization Title "Punk's" (1)

Figure 2.5, Digitization Title "Punk's" (2)

For the title, I experienced a lot of trial and errors. I added a black background for the text and change the text's color into white. Here is the result:

Figure 2.5, Digitization Title Draft 2

I started rearranging the layout in Adobe Illustrator and exported each text separately so it’s easier to modify it in InDesign later, since I expect to make a lot of changes before finalizing everything. Then, I begin to input it into indesign.

Figure 2.6, #1 Layout Draft

I feel like my first layout attempt was too simple. Especially the headlines, so I explored some designs for the title (in AI).

Figure 2.7, Title Design Evolution

After receiving advices, I started to rearrange the layout. I redesigned the title to make it more 'punk' styled and highlighting the title more equally, also changing the body text leading into 13pt (initially 12pt), and added the pull quote. For the second attempt, I use the font Futura Std Heavy and font size 22pt with leading 25pt for the pull quote. I also make the title asymmetrically to reflect the "punk" style.

Figure 2.8, #2 Layout Draft

As for the third one, the title looks more organized. The pull quote text size is also the same with the second attempt (22pt and leading 25pt), but it differs on the font. I use Futura Std Book oblique for this attempt. The reason why I make these two layouts have different pull quote is because of the composition, since both have different layout composition (I managed to balance it).

Figure 2.9, #3 Layout Draft

After the feedback session in week 7, Mr. Vinod told me that the negative space is well managed, but he said to make it bigger (exceeding the margin) and to make the "Breaking the rules" in 1 line. At first, I was confused because the negative area would look different if I make the "Breaking the rules" in 1 line.

Figure 2.10, #4 Layout Draft

So, I decided to make the "Revolution" smaller and move it slightly to the right, making a little space in the left.

Figure 2.11, #5 Layout Draft

For the final result, I finally choose the #5 Layout Draft. In Addition, I followed Mr. Vinod suggestion in the tutorial to cover the text with shape to see if the division within the white area.

Figure 2.12, Shape version

c. Final Result (PNG & PDF)

HEAD
- Font/s: Futura Std Bold Condensed/Futura Std Light Condensed/Futura Std Medium Condensed
- Type Size/s: 222pt/167pt/102pt/81pt
- Leading: 0pt
- Paragraph spacing: 0pt

BODY
- Font/s: Futura Std Book/Futura Std Heavy
- Type Size/s: 10pt/22pt
- Leading: 13pt/25.3pt
- Paragraph spacing: 13pt/11.3pt
- Characters per-line: 55
- Alignment: Align left

PAGE MARGINS
- Top + Left + Right + Bottom: 12.7mm + 12.7mm + 12.7mm + 12.7mm
- Columns: 4
- Gutter: 5mm

Figure 3.1, Final Result

Figure 3.2, Final Result (Grid)

Top ↑

FEEDBACK

WEEK 6

Specific Feedback:

Change the body text leading into 13pt (initially 12pt) because Futura typeface have a longer ascender, so the readability is better when it is 3pt higher than the body text size.
Could add pull quote
The title could be more diverse, don't just emphasize the "PUNK'S" but also the other too.
For the second layout, move the "punk" to the left, "design" to the right, and also find points of alignment also for "breaking the rules."

General Feedback:

Pay attention to the paragraph spacing

WEEK 7

Specific Feedback:

Make the text bigger (outside the margin)
Make the "Breaking The Rules" in 1 line

General Feedback:

Be careful with gutter, it depends on the layout.

Top ↑

REFLECTION

Experience

This task is fun yet frustrating for me. I had hard times deciding the title's layout (I have 20 drafts actually just for the title.. but those are similar, so I just put the best of the best draft here).

Observations

I realized that designs that seems simple are actually harder to make compared to design that seems full because we need to maintain the whitespace while keeping it balanced with other elements.

Findings

From this task, I learned a lot about managing white spaces and became aware of it, the white spaces are not problematic if we maintained it well. I also learn how to do a pull quote (as this is my first time making it).

Top ↑

Search This Blog

Cherilynn Farrencia Faustine (0384745)

Typography - Task 2: Typographic Exploration and Communication

Comments

Post a Comment