Typography Task 1 Exercises

Typography/ Task 1: Exercises

26.09.2023- 24.10.2023/ week 1- week 5

Rafa Maritza Hertrian/ 0364958

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

Task 1: Exercises 1 & 2

LECTURES

WEEK 1: INTRODUCTION

During this period, students are introduced to e-portfolios that we need to complete throughout the semester. Therefore, all the students including me created an account in Blogspot.com.

Typographny_0_Introduction

Typography is fundamental to any design study. It is explained how typography pushes students to develop their own design styles. This is because typography is generally visually tuned, as it has a very basic yet broad understanding of it.

Typography can also be found in animation, web design, app design, signage, bottle design, books, posters, and many more. Aside from that, learning typography can also teach students to find their own characters and attributes in design and also develop their skill set since typography has a lot of areas for people to explore.

Relating to typography, there are calligraphy and lettering:

Calligraphy refers to writing styles such as black letters and round hands - Penmanship (informal calligraphy)

Lettering refers to how letters are drawn

[Even though there is no exact limitation on designing typography, it is important to learn the basics first as the knowledge can serve as the blueprint of every design.]

Typography definition based on Oxford Dictionary = The style and appearance of the printed letter

Typography definition based on Wikipedia = Legible, readable, and appealing

It is stated in the lecture that the effect on the audience is important in typography. This means certain styles have to be made with a reason behind them.

Other terminologies

Font (foundry in French is a place with metals): Individual font or weight within the typeface

e.g. Bold/ italic/ Regular
Typeface: an entire family of fonts/weights that shares similar characters/ styles
e.g. Georgia/ Arial/ Times New Roman

Typo_1_Development

Note: the lecture is based on the Western perspective of typography development. Hence it is highly requested to do further researches on other areas of the world.

TIMELINE

Early letterform: Phoenician to Roman. Initially, writing refers to scratching. In this era, instruments used for writing included wet clay sharpened sticks, or carving. This shows that types of writing are heavily influenced by the instruments used.
The Greeks: originally, the letter direction was right to left, referencing from the Arabic calligraphy. However, it starts to change from left to right. This was called 'Boustrophedon'.
Etruscan: Marble-painted letterform before inscribing them
During the Phoenician era, the letters were already pretty similar to the modern alphabet, but there are some differences such as the 'A' has a different rotation.
However, in the Greek are, the 'A' already starts to be fixated like the modern-day 'A'.

HANDSCRIPT

Square Capital: Serifs added to the finish of the main stroke.
Rustic Capitals: 30 °brush
Uncials (20 of anything): Small letters
Half-uncials: formalization of curly words
Charlemagne: the first unifier (uses majuscule, miniscule, capitalization, and punctuation)

Type classification

Black letter: based upon hand copying
Old Style: Lowercase forms
Italic: Condensed and closed
Script: Replication of calligraphic form (not readable but rather focuses on the visual)
Transitional: Oldstyle form that advances from casting and printing
Modern (Bodoni): rationalization
Sans Serif (Without Seriffs): seen as a gothic style earlier because it is simpler. It is also called a Grotesque style

WEEK 2

About feedback: practice self-judgment (do not be dependent on lectures' feedback). creativity is all about taking risks. To build confidence in your judgment watch lectures and read books because it will give you an idea of the trends.

Learn to live with uncertainty.

Acceptable design: additional lines, contrast, placement.

Not acceptable: Illustration, too many graphic elements, too much distortion

Typo_3_Text_p1

Text/Tracking: Kerning and letter spacing

- Kerning: the act of setting the space range between letters

- Letter spacing: adding more space between letters

- tracking means removing space between letters

Figure 2.1 Kerning and letterspacing

When is Kerning and Letter Spacing applicable?

It is unnecessary to kern a large amount of text because it will take too much time to edit each word. However, in small texts such as headlines, kerning or letter spacing is important to focus on. It is also very important to add letter spacing if uppercase text is used.

Tracking

There are three types of tracking which are normal, loose, and tight. If spaces between letters are either too tight or too loose, it will make the text harder to read because generally, people see words, especially in lowercase form, as patterns. Hence, more or less spacing will make the 'pattern' distorted and harder to read.

Note: it is highly unrecommended to letter space lowercase because uppercase can stand on its own while lowercase requires a counter form (black spaces between the white) created between letters to maintain the line of reading.

Figure 2.2 Types of tracking

Formatting

Flush Left: align text in a flash manner (mirroring the asymmetrical experience of reading) in this formatting, each line starts at the same point but ends whenever the last word of the stops.
Centered: imposes symmetry, assigning equal value and weight to both ends of lines. This will add pictorial quality to the material. This format is quite hard to read because the starting point is always different (better used for short texts). It is important to amend the line break so it doesn't look jagged.
Flush right: places emphasis on the end text. Useful for captions where the relationship between text and image might be ambiguous without a strong orientation.
Justified: imposes symmetrical shape on the text. Letter spacing and kerning need to be used to make it more neat.

note: spaces in between that form due to the justification of the text.

Using justified formatting can make 'rivers' appear. Rivers refers to white spaces running vertically through text which is not good.

Figure 2.3 Alignments (Flush left, centered, flush right, and justified)

WEEK 3

Before using a typeface, test the way it looks like in its purpose. For example, if it’s for screen, test it out on screen while if it’s for print, test it out on print.

Indicating Paragraphs

Pilcrow: indicate paragraph space. A holder from medieval manuscripts is used today.
leading: Line space between the paragraphs
note: The leading size will be somewhere around 2 to 3 points higher than the text point size
IMPORTANT Leading space and paragraph space should be the same, meaning double enter to create more space between paragraphs is not good. This is to maintain cross-alignment (when there are two columns, the lines are aligned correctly.

Line Space vs Leading

Leading space: space between two sentences sentence

Line spacing: the baseline of one sentence to the descender of another sentence

Create indentation: this is used in newspapers to cram as much information as possible because of printing cause. Note: left alignment is not suggested when using indentation because it creates ragging on the left and right. The best alignment to use is justified.
Extended paragraph: creates unusually wide columns of text. despite these problems, there can be strong compositional or functional reasons for using it (academic writing).

UNPARDONABLE GAFFE

widow: short line of a type left alone at the end of a column in a text
orphan: short line of a type left alone at the end of a column in a text

Note: This can be avoided by reducing the column width or creating a new line. Best to make sure that no column of text starts with the last line of the preceding paragraph.

Figure 3.1 Widow and Orphan example

Highlighting Text

Using italic
increase boldness
change the typeface by making it bold when changing the typeface, you might want to reduce the point size because the typeface might be bigger (match the x-height)
Numbers follow capital letters’ x-height, hence the point size of numbers might need to be changed if used next to lowercase letters. use of lowercase numbers
change color (only use black, cyan, and magenta)

WEEK 4

Typo_2_Basic

Letterforms: knowing this makes it easier to identify typefaces
Baseline: visual base of the letterform
Median: defining the x-height of the letterforms
X-Height: the height in any typeface of the lowercase ‘x’
ascender height: larger than uppercase letter (because capital letters have more surface than height)
descender height
Stroke: any line that defines the basic letterforms
Apex/ Vertex: the joining of two diagonal stems
Arm: short strokes off the stems
Barb: half finish/ half serif on some horizontal arm
Bowl: the rounded form
Bracket: the transition between the serif and the stem (the base of the letterform)
Crossbar: horizontal strokes that connect with two stem strokes
Cross stroke: a horizontal stroke that overlines a stem
Crotch: interior space where two strokes meet
Descenders: anything below the baseline
ear: extension of a main stem
em: the width of an uppercase M (the distance equal to the size of the typeface)
en: the half amount of em
finial: rounded non-serif terminal to a stroke
ligature: the shape built by two or more letterforms
link: connecting strokes of the bowl and the loop of a lowercase g.
loop: descender in lowercase g (only appear in some typefaces)
serif: right-angled or oblique foot at the end of the stroke
shoulder: curved stroke
spine: curved stem in s
stress: the orientation of the letterform, indicated by the thin stroke in the round stroke
swash: the flourish that extends the stroke of the letterform (do not use capital letters together
tail: curved diagonal stroke
terminal: a self-contained finish of a stroke without a serif

Ranges

uppercase: capital letters, including accented vowels
Lowercase: the same characters as the uppercase
small capitals uppercase letterforms drawn to the x-height of the typeface
Uppercase numeral: numerals that have the same height as uppercase
Lowercase numerals: the form that numbers used to take in the industrial age and commerce. (In sale signs for example)
Italic: small cap but are almost all roman
punctuation, miscellaneous characters: have to be matched with the typeface if used (especially in mathematical texts)

INSTRUCTIONS

Task 1/ Exercise 1: Type Expression

In this task, students are asked to create typographic designs out of 4 words. The designs must represent the chosen words' meaning, context, and emotions. The 4 words I have chosen are Bounce, Dive, spring, and Chaos.

Later on, we have to choose certain typefaces for each font. But before that, we are suggested to create sketches that are purely from our imagination. Next are my sketches:

Sketches

Figure 2.4 Dive Sketches

Figure 2.5 Chaos Sketches

Figure 2.6 Spring Sketches

Figure 2.7 Bounce Sketches

After reviewing my work with the lecturer, I have learned that most of my designs were incorrect because I applied too many graphics, which is not recommended for this exercise. Some of these designs were asked by the lecturer to be further edited and used for digitalization which will be explained below.

Digitalization

The next step was to convert the designs to Adobe Illustrations. I digitalized the sketches that were suggested to use. This digitalization needed a lot of adjustments. For the 'Dive' digitalization, it does not represent the word itself, so this design will have the most construction. For the 'Chaos' design, I was suggested to fill up the space with more chaos words without making them overlap with each other, this will add more sense of chaos. The spring design does not look like a representation of spring at all, but the choice of organic font is already acceptable. Finally, the 'bounce' design is pretty much acceptable, so I did not make any adjustments to that design.

Figure 3.2 First digitalization

Below is the new digitalization of the designs. For the 'dive' design, I used. As I said previously, I added adjustments to my designs

Figure 3.3 Second digitalization (after feedback)

Type Expression Animation

Figure 4.1 Animation process in Photoshop

The dive design is the design that I already have a clear imagination of, hence I animate it first. I make the 'ive' dive into the 'D' representing the word itself.

Figure 4.2 'Dive' animation

For me, even though the design is very simple, I felt satisfied with it because I feel like it represents 'dive' word perfectly.

Task 1/ Exercise 2: Formatting

This exercise's purpose is to learn and apply the knowledge of text formatting such as type size, leading, letterspacing, alignment, columns, kerning, paragraph spacing, etc.

Kerning and Tracking

I practiced using kerning and tracking using 10 different fonts while following the tutorial video that was provided by the lecturer. While applying the fonts, I noticed the odd space between the text, Hence, I understood the importance of kerning in bigger texts because the flaws are more visible.

Figure 5.1 InDesign exploration (no kerning)

Figure 5.2 Fonts with kerning and tracking

Layouts

Following that, I practiced making layouts from long texts. Not only that I follow the tutorial video, but I also tried to apply the skills I've learned before such as kerning, letter spacing, grayscale, widow, and orphan.

As I finished learning how to use InDesign as a tool to make the layout, I started to experiment with different layouts, this is the final design that I am satisfied with.

Figure 6.1 Layout practice (flush left)

For this design, I chose to add an image on the side of the first few texts to make the layout less bland and I also added an image on the lower right side to add balance. I chose to use flush left alignment so that it is easier for the readers to keep their focus on reading this long text. However, I noticed that using this alignment created a lot of ragging and there are some widows that appears.

FIgure 6.2 Layout practice (centered left)

After trying to fix the ragging with kerning and letterspacing, I still find the text quite amusing to look at. Therefore, I tried to justified alignment and I was satisfied with how it looked

Figure 6.3 Layout Practice (centered left & with kerning)

As it was mentioned in the lectures using justified alignment might be risky because rivers and unnecessary space might appear. Hence I tried to minimize them by adjusting the letterspacing and kerning.

FINAL TEXT FORMATTING LAYOUT

HEAD

Font/s: Univers LT Std

Type Size/s: 36 pt

Leading: 45 pt

Paragraph spacing: 0

BODY

Font/s: Univers LT Std

Type Size/s: 8.5 pt

Leading: 15 pt

Paragraph spacing: 11 pt

Characters per-line: 55

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

Figure 6.4. Final Text Formatting Layout

FEEDBACK

Week 1

Start creating the e-portfolio and set it up as the template given. Examples can be seen from previous students

Week 2

I showed my e-portfolio to the lecturer and the feedback I got is that I need to elaborate on the lecture notes for week 1. I also need to start adding elements to the further reading section. The module information booklet also did not show up in the blog, hence, I will have to figure out a way to make it appear. I haven't started digitalizing my sketches for task 1, so I showed my sketches from Procreate. The feedback I got is that I need to minimize adding graphics to my designs

Week 3

I finished digitalizing 1 of the design of each work that was approved the previous week. The feedback I got about the digitalization of the word "Dive" is that the representation of the word dive cannot be seen. Therefore, the lecturer told me to find a way to make it represent the word dive. For the 'Chaos' digitalization, the lecturer suggests not making the writings overlap with each other and adding more chaos so that it'll look more chaotic. The lecturer did not see the vision in the 'spring' digitalization. She suggests creating floral shapes using letters from the word 'spring'

Week 4

In the class, I asked the lecturer to comment on my animation. She approved it but she said making the 'D' grey is unnecessary. However, even though it's grey, it is still acceptable.

Week 5

The lecturer reminded me to pay attention to the cut-off text from the layout I created. However, overall my design is decent. I also suggested next time I create more than a design so that I can experiment with my design skills.

REFLECTIONS

Experience

Working on task 1 was a good start for my journey in mastering typography because two of the practices were light practice and easy to follow. Not only that I learn some skills on how to use digital tools, but I also learned precise fundamentals of typography from watching the lectures provided. The type expression exercise was a fun practice because we were allowed to express our ideas in the first sketches. However, I was kind of disappointed because most of my first sketches were deemed to be unacceptable because too many additional graphics were added. However, it taught me how to practice my creativity even though there are limitations. Aside from that, the text formatting practice has even more limitations. Finding a layout that matches the text was very challenging because of the thought of 'someone has come up with this idea too' But I tried not to overthink it as I am still in the process of exploring.

Observations

In these first 5 weeks, the lecturer always gave out tasks at the end of the and asked us to show them in the next class. I noticed from the feedback given that in the world of typography, representation is more important than complexity or aesthetics. This is because some of the designs that I consider a bit too simple to my liking catch the attention of the lecturer more instead.

Findings

From the lectures provided and the feedback given, I have learned a lot of things that I did not even know were crucial until it was taught. One of them was the fact that certain typefaces can have different impacts on the message given. Another thing is that every text alignment style has its own purpose. For example, flush left alignment fits more into long texts as it is easier to find the beginning of each line while it is not ideal to use centered alignment because of the opposing reason.