Typography / Task 2

26.10.2023 - 6.11.2023 (Week 6 - Week 7)

Tan Sin Mi (0368821)

Typography

Task 2

CONTENT

LECTURES
INSTRUCTIONS
FEEDBACK
REFELECTIONS
FURTHER READING

LECTURES

CLASS SUMMARY

WEEK 6:

In the first class, Ms. Low and Mr. Vinod explained what typography is and let us watch the tutorial, it teaches us how to setup our E-portfolio. Follow the step of the tutorial, we created a blogger and we're going to put our task on it. Before the class end, we were given 6 words to choose 4 words from it and sketch, we will have to put our design on our E-portfolio.

WEEK 7:

For today, we have shown our sketch to our lecturer, and we have to write down the feedback from lecturer for the sketch. Then, we are using Adobe Illustrator to create our digitized explorations.

LECTURES SUMMARY

5. UNDERSTANDING

1) UNDERSTANDING LETTERFORMS

I. Uppercase

The uppercase letter forms below suggest symmetry, but in fact it is not symmetrical.
Easy to see the two different stroke weights of the Baskerville stroke form.
Each bracket connecting the serif to the stem has a unique arc.

Figure 1.1 Baskerville 'A'

The uppercase letter forms may appear symmetrical, but a close examination shows that the width of the left slope is thinner than the right stroke.
Both Baskerville (previous) and Univers (below) demonstrate the meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive.

Figure 1.2 Univers 'A'

II. Lowercase

The complexity of each individual letterform is neatly demonstrated. (Helvetica and Univers)

Figure 1.3 Helvetica vs Univers

A comparison of how the stems of the letterforms finish and how the bowls meet the stems quickly reveals the palpable difference in character between the two.

Figure 1.4 Comparison of 'a'

2) MAINTAINING X-HEIGHT

The x-height generally describes the size of the lowercase letterforms.
Curved strokes, 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.

Figure 1.5 X-height

Figure 1.6 Median and Baseline

3) FORM / COUNTERFORM

The space describes and is often contained, by the strokes of the form.
When letters are joined to form words, the counterform includes the spaces between them.

Figure 1.7 Space describes

To understand the form and counter of a letter, examine them in close detail.

The examination also provides a good feel for how the balance between form and counter is achieved and a palpable sense of letterform's unique characteristics.

The sense of the ‘S’ holds at each stage of enlargement, while the ‘g’ tends to lose its identity, as individual elements are examined without the context of the entire letterform.

Figure 1.8 The form and counter of 's' and 'g'

4) CONTRAST

The basic principles of Graphic Design apply directly to typography.
The simple contrasts produce numerous variations: small + organic/large + machined; small + dark/ large light.

Figure 1.9 Contrast

5. UNDERSTANDING

1) DIFFERENT MEDIUM

I. Type For Print

A good typeface for print-Caslon, Garamond, Baskerville are the most common typefaces that is used for print.
Their characteristic which are elegant and intellectual but also highly readable when set at small font size.
They are versatile, easy-to-digest classic typeface, which has a neutrality and versatility that makes typesetting with it a breeze.
Figure 2.1 Type for print

Figure 2.2 Type for print 2

II. Type For Screen

Typefaces intended for use on the web are optimized and often modified to enhance readability and performance onscreen in a variety of digital environments.
Include a 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.
Important adjustment: especially for typefaces intended for smaller sizes – is more open spacing.
All of these factors serve to improve character recognition and overall readability in the non-print environment.
Figure 2.3 Type for screen

III. Hyperactive Link / Hyperlink

A hyperlink is a word, phrase, or image that you can click on to jump to a new document or a new section within the current document.
Hyperlinks are found in nearly all Web pages, allowing users to click their way from page to another.
Text hyperlinks are normally blue and underlined by default.
When move the cursor over a hyperlink, whether it is text or an image, the arrow should change to a small hand pointing at the link.

IV. Font Size For Screen

Accounting for reading distance, 16-pixel text on a screen is about the same size as text printed in a book or magazine.
Because we read books pretty close — often only a few inches away — they are typically set at about 10 points.
To read them at arm’s length, you’d want at least 12 points, which is about the same size as 16 pixels on most screens.

Figure 2.4 Font size on screen vs print

V. System Fonts for Screen/ Web Safe Fonts

Each device comes with its own pre-installed font selection. Which is based largely on its operating system.
Each system such as Windows, MacOS and Android may differ a little bit.
For example, if the designer picked some obscure, paid font family for this site’s design. If you don’t have that font already installed and it’s not pulling from a web-friendly place – more on that later – the font you see would default back to some basic variation like Times New Roman.
Web safe appears across all operating systems. They are the small collection of fonts that overlap from Windows to Mac to Google.
Example: Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond

VI. Pixel Differential Between Devices

The screens used by our PCs, tablets, phones and TVs are not only different sizes, but the text you see on-screen differs in proportion too, because they have different sized pixels.
100 pixels on a laptop is very different from 100 pixels on a big 60″ HDTV.
Even within a single device class there will be a lot of variation.
Figure 2.5 Pixel Differential Between Devices

VII. Static Typography

Minimal characteristic in expressing words.
Traditional characteristics such as bold and italic offer only a fraction of the expressive potential of dynamic properties.
All forms of static typography with wide ranging purposes: billboards, posters, magazines, fliers, etc.
Whether they are informational, promotional, formal or aspirational pieces of designs, the level of impression and impact they leave on the audience is closely knitted to their emotional connection with the viewers.

VIII. Motion Typography

Temporal media offer typographers' opportunities to “dramatize” type, for letterforms to become “fluid” and “kinetic” (Woolman and Bellantoni, 1999).
Motion graphics, particularly the brand identities of film and television production companies, increasingly contain animated type.
Type is often overlaid onto music videos and advertisements, often set in motion following the rhythm of a soundtrack.
On-screen typography has developed to become expressive, helping to establish the tone of associated content or express a set of brand values.
In title sequences, typography must prepare the audience for the film by evoking a certain mood.

INSTRUCTIONS

Task 2: Typographic Exploration & Communication

WEEK 6:

We are going to use the content that provided by Mr. Vinod and using Adobe Illustrator to create a title logo of the content and combine the logo with the subheading and content by using Adobe Indesign.

I have created 4 different versions:

1. FIRST DESIGN

Figure 3.1 First Design

2. SECOND DESIGN

Figure 3.2 Second Design

3. THIRD DESIGN

Figure 3.3 Third Design

4. FOURTH DESIGN

Figure 3.4 Fourth Design

WEEK 7:

I chose the FIRST DESIGN as my final editorial spread. And I adjusted the kerning of the content.

MY FINAL EDITORIAL SPREAD:

Figure 3.5 Final Editorial Spread without grids - JPEG

Figure 3.6 Final Editorial Spread without grids - PDF

Figure 3.7 Final Editorial Spread with grids - JPEG

Figure 3.8 Final Editorial Spread with grids - PDF

HEAD

Font/s: Bodoni Std Poster Italic (bauhaus) / Univers LT Std 53 Extended Oblique (others)

Type Size/s: 170.15pt (bauhaus) / 44.73pt (others)

Leading: 204.18pt (bauhaus) / (53.67pt) (others)

Paragraph spacing: -

BODY

Font/s: Bodoni Std Italic

Type Size/s: 13pt

Leading: 11pt

Paragraph spacing: 11pt

Characters per-line: Average at 45

Alignment: Flush left

Margins: 12.7mm top, 12.7mm left + 12.7mm right + 150mm bottom

Columns: 4

Gutter: 4.234mm

FEEDBACK

Week 6:

General Feedback: I have to upload my task 2 lectures summary.
Specific Feedback: Follow the video tutorial and start our task 2 exercises.

Week 7:

General Feedback: I need to upload the pdf of final version.
Specific Feedback: Remember to upload the final version with grids.

REFELECTIONS

Experience

In this assignment, I learned how to design a title creatively and format it with the text. I think putting everything together and formatting it was the hardest part of this assignment for me because there weren't many creative ideas I could think of. I should look at other creative works to enhance my imagination.

Observations

Designing a graphic design requires not only interesting font design, but also the orderly layout of titles, text and pattern materials. Only organized layout can bring a better experience to users.

Findings

I think designers who can do a good job in graphic design are really great, because after going through this assignment, I found that it is not easy to combine all the elements. It’s not just about designing the title, but how the designed work should be combined with other things and combined just right.

Search This Blog

Tan Sin Mi (0368821)