Typography Task 2 Text Formatting & Expression

 

Typography/ Task 2: Text Formatting & Expression 

24 October 2023- 7 November 2023/ week 6 - week 7 

Rafa Maritza Hertrian/ 0364958

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

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

---

LECTURES

Week 5 [Typo_5_Understanding] 

Letters/ understanding letterforms 

• there are nuances in type design; some letters look symmetrical but not.
• Typefaces are differentiated by how the strokes in a letter meet each other.  An example is the lowercase 'a' in Helvetica has more curvy strokes near the finish of the bowl compared to Univers which has a more straight finish. Note: it is better to create a more simple and replicable character than a really decorative one. 

Figure 1.1 lowercase 'a' of Helvetica and Univers

• maintaining an X-height: curves strokes such as an 's' must rise above the median line or sink below the baseline to have the same size. This means that sometimes we cannot always rely on the X-height to make the text the same size, optical adjustments are sometimes needed. 
• Developing sensitivity to the counter form: knowing the space outside of the letter form is equally important for readability. 
• Balance between form and counter: creates unique characteristics 

Figure 1.2 Form and counter form

• The basic principle of graphic design applies to typography: the simple contrast creates numerous varieties (light, bold, condensed, organic. etc) 

Week 6 [Typo_6_Screen&print] 

Different Mediums 

• Typography premiered on different platforms these days and not just printed. But this does not mean that paper typography will go out of style 
• there is research about screens and e-books not conducive to the learning experience
• connects to typography: animation, new media, environmental entertainment 
• Website typography: Contrast, Boldness, balance 

Figure 2.1 Website Typography

• typography now does not only exist on paper (experience of typography is based on how the page is rendered) 

Print type vs. screen type 

• type is first intended for long texts 
• good typefaces for print: Caslon, Garamond, Baskerville (because of their high readability) 
• Dated typesetting in novels has a good line length but it has been used a lot
• Type for the web is usually stylized to enhance its readability by taller x-height/ reduced ascenders and descenders, wider letterforms, more open counters, heavier thin strokes and serifs, and reduced stroke contrast. 
• Verdana, Georgia used for screen 
• important adjustment: adding open spacing, especially for smaller sizes (to reduce lumping)

---

INSTRUCTIONS

Task 2: Typographic Exploration & Communication

In this task, we were instructed to create an editorial page for one of 3 texts with all the typography skills that have been practiced in previous exercises. This includes creating designs with minor distortion, minor additional graphics, and creating expressional placements. 

Inspiration mood board 

Before designing, I looked at several examples of editorial spreads from Pinterest to get a better picture of how other typographers create those pages. This way, I developed several ideas in my head on what I was aiming to make. 

Figure 2.2 Inspiration mood board of editorial spreads

Chosen text: A Code to Build On and Live By

Terminologies 

• Code: Based on Oxford Languages, code refers to "a system of words, letters, figures, or symbols used to represent others, especially for the purposes of secrecy." or " Program instructions"
• Build on: "Use something as a basis for further development" - Oxford Definition
• Live by: "To agree with and follow (something such as a set of beliefs) - Merriam-Webster

Sketches 

Sketching helped me outline the initial ideas that I had in mind. I sketched 3 alternative designs. 

 

Figure 2.3 Editorial spread sketches 

Digitalization

For digitalizing the heading, I used Adobe Illustrator and used the 10 given type families. 

Figure 3.1 Digitalization Heading 1 

Figure 3.2 Digitalization heading 2

In the first design, I focused on making a contrast between 'Build on' and 'Live by' because I feel like these two create a catchphrase. 'Build on' is expressed in a bold and big way while 'Live by' is expressed by more organic typefaces. As for the second design, I set up the text as if it were a program instruction by adding less than and more than elements. The second After making the heading, I exported these designs to Indesign and laid out the rest of the text. 

Figure 3.3 Digitalization Editorial Spread 1

Figure 3.3 Digitalization Editorial Spread 2

For the first digitalization, I feel like the heading has already shown pretty much expression, Therefore, I decided to make the text simple by creating two columns with one being higher than the other. For the second digitalization, on the other hand, I decided to make 3 columns, the left one placed at the lowest, the one in the middle placed around the very middle of the line, and the right one set at the highest height. This is to represent the phrase 'Build On'.  

Editing 

While creating the design, the lecturer commented on the first design shown in Figure 3.3. She said that the contrast between 'Build on' and 'Live by' is interesting. However, the placement of it makes it hard to digest and I was suggested to make the placement centered. 

Figure 3.4 Editorial Spread 1 improved (1) 

After getting feedback, I went back to Illustrator and changed the text placements to a centered style. I feel like the placement is more concise and clear. However, I felt like the combination of the heading and layout seemed like it is unfinished. 

Figure 3.5 Editorial Spread 1 improved (2) 

I applied the text layout from Figure 3.3 to this layout to add more complexity. I also added lines around the texts, making the text look like buildings that go higher and higher. 

---

FINAL RESULT

Figure 4.1 Final Result Editorial Spread jpg (11/07/2023)

 

Figure 4.2 Final Result Editorial Spread PDF (11/07/2023)

Figure 4.3 Final Result Editorial Spread with Grid jpg (11/07/2023)

Figure 4.4 Final Result Editorial Spread with Grid PDF (11/07/2023)

FINAL TEXT FORMATTING LAYOUT

HEAD

Font/s: Futura, ITC Garamond

Type Size/s: 130 pt, 106 pt, 64 pt

Leading: 248 pt, 78 pt, 127 pt 

Paragraph spacing: 0

 

BODY

Font/s: Bembo Std 

Type Size/s: 11 pt 

Leading: 13.8 pt

Paragraph spacing: 11 pt

Characters per-line: 112, 36

Alignment: left justified

 

Margins: 12,7 mm top, 12,7 mm left + 12,7 mm right + 12,7 mm bottom

Columns: 2

Gutter: 5 mm

---

FEEDBACK

Week 6 

I showed my design to the lecturer and she preferred the design in Figure 3.1 because it shows the contrast between the two keywords of the heading which are "Build on" and "Live by". However, she said the placement was unappealing because it reduced the focus. I was suggested to make a center alignment. 

Week 7 

I need to fix because some text are missing in the spread. 

---

REFLECTION

Experience

In this task, I tried to apply the skills that I have learned from doing task 1 such as choosing typefaces, tracking, kerning, formatting, leading, and letter spacing. So far I feel like I know what to do when creating the editorial compared to when I was creating Task 1. Making designs based on the emotion or context of the text is one of the things that I am trying to focus on in making the editorial spread. It may seem like the simplest task but it turns out, it takes more thinking than the rest of the steps in making it. 

Observation

The more I practice typography, the more I notice that I need to pay attention to utilizing white space to enhance my designs. This is because in making editorial spread, empty spaces cannot be avoided, so it is important to see white spaces as an element of design. 

Finding 

Designs have to be created based on the form of the final product. For example, if the text is going to be printed then the design has to be created in a way that is appealing in printed form. It goes the same way for digital texts, it has to have a design that will look good in screen. 

---

FURTHER READING

I want to understand further how Fonts or typefaces are used in the world of typography so I picked a novel by Simon Garfield titled Just My Type. This book focuses more on the fonts used and how they are used. 

5.1 Just My Type cover page

Chapter 1 [We don’t serve your type] 

Comic Sans is one of the most commonly seen typefaces. It is a font that looks like it was written by an eleven year old or it looks like it would appear in alphabet soup. This typeface was established by a man named Vincent Connare who worked in the Microsoft Corporation as a typographic engineer. He spotted that Times New Roman was not suitable for Microsoft Bob which was a ‘warm and fuzzy’ software so he suggested using Comic Sans. However, Comic Sans become overly used for texts that have a more serious context to it which makes it look like a joke. 

Therefore, a lot of typographers want to ban this typeface. 

5.2 Just My Type Chapter 1

Chapter 2 [Capital Offence] 

Using capital letters is deemed to look like you hate someone and are shouting. A woman named Vicki Walker was fired from her for using capital letters in an email. There gae been rules of type and type etiquette 

• Didot: looks classy especially in italics (good for classic books)
• Ambroise Light: less fusty than Didot.
• Bembo: suutable for book text as it retains consistent readability 

Type can have gender Artiquitectura looks masculine because it is tall, solid, and implacable

• Centaur looks feminine because it has thin and thick strokes and it is charming and elegant 
• Heavy bold jagged fonts are mostly male: Colossals
• Whimsical, lighter curly fonts are female: ITC Brioso Pro Italic Display

5.3 Just My Type Chapter 2