Typography: Task 2

24/10/2023 - 7/11/2023 / Week 5 - Week 7

Lim Yu Xuen / 0359676

Typography/ Bachelor of Design (Hons) in Creative Media / Taylor's University

Task 2: Typographic Exploration & Communication (Text Formatting and Expression)

୨୧ __________________________________________________________ ୨୧

TABLE OF CONTENTS

1. Lectures
2. Instructions

3. Project 2: Editorial Text Formatting

Process Work

3.1 Sketches

3.2 Progress

3.3 Final Design

4. Feedback

5. Reflection

6. Further Readings

୨୧ __________________________________________________________ ୨୧

LECTURES

31 October 2023

Lecture 6
Week 6 - Understanding

Understanding Letterforms

The uppercase letterforms below suggest symmetry, but it is in fact not all symmetry. It is easy to spot the different stroke weights of the Baskerville stroke form, which is on the left side, while uppercase letterforms on the right side. Univers has thinner width of the left stroke than the right stroke. Type designers create letterforms that are both internally harmonious and individually expressive.

Figure 1.1 Baskerville and Univers Uppercase Letterforms, Week 5 (31/10/2023)

The complexity of each individual letterforms is evident by observing the lowercases "a" of the two very similar sans serif fonts, Helvetica and Univers. A comparison of how the stems of the letterforms finish, and how the rounded parts connect to the stems. It shows the difference in character between the 2.

Figure 1.2 Letter "a" of Helvetica and Univers, Week 5 (31/10/2023)

Maintaining x-height

The x-height describes the size of the lowercase letterforms. Curved strokes must extend above the middle line or sink below the baseline, to show that both letters appear the same size as the vertical and horizontal strokes they adjoin with.

Figure 1.3 Lowercase maintaining x-height, Week 5 (31/10/2023)

Form and counter form

Studying the form and counter of a letter specifically is important and is one of the most effective methods for gaining a comprehensive understanding. The space described is often contained by the letter strokes. When letters are joined together to form words, the counter-form includes in between them. Moreover, it assures the readability of the text.

Figure 1.4 Form and counter forms, Week 5 (31/10/2023)

Examine letters closely to take a glimpse into the process of letter-making. It also provides a satisfiable feeling for how the balance between form and counter is achieved and the uniqueness of the letterforms.

Figure 1.5 Form and counter forms, Week 5 (31/10/2023)

Contrast

Contrast is one of the most important basic design principals applied in typography. The simple contrast produces multiple variations as below:

Figure 1.6 Contrast Variations, Week 5 (31/12/2023)

7 November 2023

Lecture 7
Week 7 - Screen & Print

Typography in Different Medium

Back in the past, typography was only seen as living only when it reached paper. No changes were being made once the publication was published. To finish a publication, it will be edited, typesetted and printed. Today, typography do not only exist in papers but is seen on multitude of screens. There are many factors and parameters, such as the operating system, system, fonts, screen size, device, viewport and so on.

Print Type VS Screen Type

Type for Print:

In Type Print, they are initially designed for intended for reading from print a long time before we start reading them on screen. A designer's job is to ensure that the text is smooth, flowing, and pleasant to read. Good typefaces such as Caslon and Baskerville are often used for print due to its elegant and intellectual design. It is also easy to read at small font sizes.

Figure 1.7 Type for print, Week 6 (7/11/2023)

Type for Screen:

Typefaces used for the web are often modified to enhance readability of text and to improve the performance on screen in various digital environments. Taller x-heights, wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, modified curves are some of the examples. All these characteristics improve character recognition and enables them to be recognised easily and overall improve on readability in non-print environments such as the web, e-books, e-readers, and mobile devices.

Hyperactive link / Hyperlink:

It is a word, phrase, or image that is clickable and allows you to navigate to a different document or another section within the same document. Hyperlinks are also present on most web pages, enabling users to navigate from one page to another. Hyperlinks are normally blue and underlined by default.

Font Size for screen:

Text that is 16 pixels in size on a screen is about the same size as text printed in books or magazines, accounting for reading distance. Typically, they are set for reading distance because books are read at a close range, which is at 10 points. If it is to read at an arm's length, it will be at least 12 points which is equal to about 16 pixels on screen.

System Fonts for screen / Web Safe fonts:

Each device comes with a pre-installed font and it is largely based on their operating systems, as each system differs from one another. For instance, Windows, MacOS, and Google based devices uses its own fonts. Web safe fonts appear across all operating systems. The fonts which are included are: OpenSans, Times New Roman, Times, Courier New, Verdana, Courier, Georgia, Garamond, and Palatino.

Pixel Differential Between Devices:

The text displayed on screens are different in size and proportion due to different pixel sizes across various devices. These devices includes PCs, tablets, phones, and TVs. For example, 100 pixels on a laptop screen is not the same as 100 pixels on a big 60' HD television.

Figure 1.8 Varying Pixel Sizes On Screens, Week 6 (7/11/2023)

Static VS Motion

Static typography has minimal characteristics in expressing words. It has limited capabilities when it comes to conveying words effectively. Conventional attributes like bold and italic styles does very little to express dynamic properties. We encounter all forms of static typography with varying purposes in billboards, posters, and so on.

Figure 1.9 Static Typography, Week 6 (7/11/2023)

Motion Typography has a sense of movement in a still font. Nowadays, motion typography can be found in billboards and commercials online to convey information interestingly. It is more dramatic and kinetic with its letterforms. Typographic details are often displayed gradually with animation, linked to the music in the background.

Figure 1.10 Motion Typography, Week 6 (7/11/2023)

୨୧ __________________________________________________________ ୨୧

INSTRUCTIONS

Task 2: Typographic Exploration & Communication (20%)

Typographically express the given content in a 2-page editorial spread (200mm x 200mm per page) Choose 1 from the 3 text options provided. No images are allowed. However, some very minor graphical elements, i.e. line, shade, etc. might be allowed

Explore several options in expression and layout (sketches). Execute a good layout, with an expressive and appropriate headline in line with the spirit/message of the text.

2-page editorial spread (200mm x 200mm per page)

With baseline grid (JPG & PDF)
Without grid (JPG & PDF)

Marking Criteria:

Each expression to be explored in great variety and creatively
The expression conceptually and typographically communicates the meaning being conveyed
The textual information is extremely well formatted (font size, line-length, leading, alignment, cross alignment, reading rhythm, information hierarchy, widows and orphans)
The layout and composition is suitable, impactful, memorable, and engaging

Learning Goals:

To demonstrate the use of Grids, layouts, and page flow
To apply the necessary skills and sensibilities for effective typographic communication and achieve good reading rhythm with memorability

Timeframe:

Week 6 - Week 7 (Deadline on Week 8)

Read more about this module below

Document 2.1 Module Information Booklet (MIB) of Typography

୨୧ __________________________________________________________ ୨୧

PROCESS WORK

Type Exploration and Communication, also known as type expression and text formatting, this assessment requires us to complete 3 tasks by utilising the knowledge and skills we have learnt over the past few weeks. We were tasked to create an editorial layout and choose one of the three text options below (provided by Mr Vinod):

1. The role of Bauhaus thought on Modern Culture
2. A Code to Build on and Live By
3. Unite to Visualise a better world

After some research and ideation, I have decide to select "A Code to Build on and Live By". I had severals ideas to express "code" after looking through many examples on Pinterest. It is also the most interesting out of all 3 choices given. NOTE: no images are allowed & minor graphical elements might not be allowed.

3.1 Sketches

For the concept I have chosen, which is "A Code to Build on and Live By", quite a number of ideas pop up in mind. The first few ideas was to have a mixture of underscores, periods, and symbols that represents a coding style. I did a total of 3 sketches with different headline expressions and columns.

Figure 3.1 Rough Sketches, Week 5 (25/10/2023)

3.2 Progress

I begin the process of digitising the headline in Adobe Illustrator to explore different expressions of the concept I have chosen to do.

Headline 1

In the first headline, I chose the. typeface Univers LT Std. I also made use of different font styles, ranging from bold to light. Besides that, I mainly added components that can be found through "html" and "morse codes" as I think it heavily reminds me of the coding style I am trying to achieve.

Figure 3.2 Headline 1, Week 5 (26/10/2023)

Headline 2

For the second version, I got inspired by barcodes and morse codes. I turned the E in the word "code" into a barcode to visualise this idea better. The font style used for A and & is light, while the rest of the letters are bold condensed.

Figure 3.3 Headline 2, Week 5 (26/10/2023)

Headline 3

For the third design, I referenced to a Pinterest photo "barcodes and qr codes" for inspiration. I adjusted different sizes for the word "code" and turned the letters "o & e" to numbers. Besides that, I also created outlines for the letter A and adjusted it to make it look like the symbol >, which is known to be used in html codes. I used the letter "I" and adjusted it sizes to thin long lines so that it represents a barcode. For the Qr code design, I used shapes and stack them upon another so that it looks like the qr code I initially thought of.

Figure 3.4 Headline 3, Week 5 (26/10/2023)

Final Headline

Lastly, I decided to use the headline 3 after receiving some feedback from lecturers and friends. With Mr Vinod's guidance and opinions, I decided to remove the qr code as it is not allowed to add graphic design into our headline. Other than that, I made sure to make the headline less empty, by adding more barcode and coding symbols. To enhance reading ability, I changed the fonts and sizes for the individual letters in "code".

Figure 3.5 Final Headline, Week 5 (26/10/2023)

After that, I tried different layout designs to find out the best suitable layout for my final headline. Here are some tries below:

Layout 1

First, I referenced to my previous sketches and aligned the final headline on the left of the page, while the text given would be in 2 columns on the right of the page.

Figure 3.6 Layout 1, Week 5 (25/10/2023)

Layout 2

For my second layout, I placed the headline on the top left corner, and split the text in 3 column. Besides that, I bolded the letters for the small titles, and adjusted the kerning of all the texts so the paragraphs aligned nicely at the end.

Figure 3.7 Layout 2, Week 5 (25/10/2023)

Layout 3

For the last layout design, similar to layout 2, I placed the headline on the first page's second corner. I separated the texts into 6 texts box in total. Each text box is placed from first column to second and so on. I wanted to make it look easy to read for the viewer, hence I thought of separating all the important subtitles for each paragraph.

Figure 3.8 Layout 3, Week 5 (25/10/2023)

Finally, after receiving feedback from Ms Hsin Yin and Mr Vinod, they recommended to go for layout 1. The few changes I have to make is to adjust the kerning and tracking, meanwhile maintaining readability and cross assignment. I chose the font: Gill Sans Regular at 10 points and 12 points of leading. I also bolded the subtitles to make it easier to spot for the readers.

Figure 3.9 Body text before adjustment, Week 6 (31/10/2023)

Figure 3.10 Body text after adjustment, Week 6 (31/10/2023)

3.3 Final Design

HEAD

Fonts / Type size:

Janson Text LT Std-

55 Roman (C) / 67.908 pt

55 Roman (0) / 59.224 pt

56 Italic (D) / 50.5291 pt

45 Light (3) / 44.3647 pt

57 Condensed (To Build On & Live By) / 6.2656 pt

BODY

Fonts / Type size: Gill Sans- Regular & Bold

Type size: 10pt

Leading: 11pt

Paragraph spacing: 11pt / 3.881mm

Characters per-line: 60

Alignment: Justified Left

Margins: 10mm (top, left, right, bottom)

Columns: 2

Gutter: 7mm

JPG with and without grids:

Figure 4.1 Final Task 2 without grids - JPG

Figure 4.2 Final Task 2 with grids - JPG

PDF with and without grids:

Figure 4.3 Final Task 2 without grids - PDF

Figure 4.4 Final Task 2 with grids - PDF

୨୧ __________________________________________________________ ୨୧

FEEDBACK

Week 6:
General Feedback: Make sure that the blog for task 1 is updated fully before the deadline given which is in 1st November. One more thing to take note is to avoid orphans, make sure the paragraph does not leave a word at the end.

Specific Feedback: Ms Hsin Yin gave feedback on my GIF progress and recommended some changes to be made. She reminded me to update my blog regularly, and start progressing in Task 2

Week 7:
General Feedback: Do not use italic for whole body text. Finalise and update blog by next deadline (next week) for submission of Task 2.

୨୧ __________________________________________________________ ୨୧

REFLECTION

Experience:
During these few weeks, I have experienced combining different principles of type expression and text formatting to complete Task 2. I started off by researching online on successful editorial magazines for inspiration. I brainstormed these for at least a few hours as the layouts were a great source to draw ideas from. For this project, we were given guidance on how to format our text and arrange them nicely so it enhances readability and catches reacher's attention. The process was not as challenging since it is a combination of things I have learnt to create for my past assignments. It was more of a smooth experience, but I got the chance to enhance my skills throughout completing task 2.

Observations:
In Task 2, I observed that in the process of designing my headline, there were many ideas that pop up in my mind but I also learnt to take things at a time, and not designing my headline too complicated. It is also important to have many options when showing lecturers for feedback, as that might be the most ideal way to learn from my lecturers. Additionally, I observed that some of my friend's work inspires me to create and put more effort into my own assignments. I believe it is good to learn from other people, as it brings inspiration and uniqueness to my work, and at the same time, I can learn and support other people.

Findings:
Well chosen fonts and layout designs can make a big difference to our artwork. It is also important to explore as many good layouts to spark my interest in creating a better artwork. This task really made me realised that even the littlest details can make a huge impact in our outcome for this task. I definitely look forward to designing artworks that can be understood easily.

୨୧ __________________________________________________________ ୨୧

Search This Blog

Lim Yu Xuen 0359676

Typography: Task 2