Typography - Task 1: Exercises

the act of creating letter, typefaces, type families, word animations
used in movie titles, posters, web/app design, signage design, label design, logotype
can affect how we present ourselves, our information and how we communicate effectively

Evolved over 500 years: calligraphy > lettering > typography

Calligraphy: write the letters, many writing styles

Lettering: draw the letters

Terminology:

Font: Individual font/weight within typefaces - Georgia Regular, Georgia Italic, Georgia Bold

Typeface: Family of fonts/weights that share characteristics - Georgia

Typo_1: Development of Typography

To put in effort to do research on minor communities and smaller voices that are often overlooked and contribute that knowledge to larger bodies. Eg. asia, east asia designers.
Do research on local designers.
Give voice to the voiceless.

Early letterform development: Phoenician to Roman

Figure 1.1 Phoenicians votive stele Carthage, Tunisia

Figure 1.2 Evolution from Phoenician Letter

Initially, writing meant scratching into wet clay with a stick or carving into stone with a chisel.
At their core, uppercase forms are simple combinations of straight lines and circles.
Arabic and modern latin are mostly derived from phoenician

Figure 1.3 Greek writing style 'boustrophedon'

Phoenicians, like other semitic people, wrote from right to left.
Greeks changed the direction of writing and the orientation of letterforms, they write and read from right to left, then left to right, then right to left and so on.
This style of writing is called ‘boustrophedon’ (how the ox ploughs)
Etruscan and Roman carvers painted letterforms before inscribing them.

Hand script from 3rd - 10th century C.E.

Square capitals

found in Roman monuments
letterforms have serifs added to the finish of the main strokes
pen held at 60° creates thick and thin strokes

Figure 1.4 Square Capitals

Rustic capitals

Compressed version of square capital to allow more words on a sheet of parchment
More difficult to read
Pen held at 30°

Figure 1.5 Rustic Capitals

Cursive hand

Everyday transactions
Forms were simplified for speed
Lowercase were developed as a result of writing fast

Figure 1.6 Cursive Hand

Uncials

Small letters
Incorporates some aspects of the Roman cursive hand

Figure 1.7 Uncials

Half-uncials

Further formalization Is cursive hand
Formal beginning of lowercase letterforms

Figure 1.8 Half-uncials

Standardization by Chermalagne

Majorscule (uppercase), miniscule (lowercase), capitalization and punctuation were introduced

Figure 1.9 Canoline minuscule

Gutenberg: the guy who invented the modern day printing press

Text Type Classification

1450 Blackletter

Earliest printing type
Form based on hand-copying styles

Figure 1.10 Blackletter

1470 Oldstyle

Based upon lowercase forms used by Italian humanist scholars for book copying and uppercase forms inscribed on Roman ruins

Figure 1.11 Oldstyle

1500 Italics

Echoes contemporary Italian handwriting
Originally their own typeface, but were soon cast to complement roman forms

Figure 1.12 Italics

1550 Script

Attempt to replicate engraved calligraphic forms
Very decorative forms, not suitable for lengthy texts, extremely difficult to read
Not designed to be read in capital letters

Figure 1.13 Script

1750 Transitional

A refinement of oldstyle forms because of advancement in casting and printing
Not following handwriting system

Figure 1.14 Transitional

1775 Modern

Further rationalization of oldstyle forms
Extreme contrast between thick and thin stroke

Figure 1.15 Modern

1825 Square serif / Slab serif

Heavily bracketed serif, with little variation between thick and thin strokes

Figure 1.16 Square / Slab Serif

1900 Sans serif

Eliminated serifs
Referred as grotesque and gothic (people found it ugly)

Figure 1.17 Sans Serif

1990 Serif / Sans serif

Includes both serif and sans serif
Skirt the boundaries of the classifications

Figure 1.17 Serif / Sans Serif

Typo_3: Text P1

Text / Tracking: Kerning and Letterspacing

Kerning: automatic adjustment of space between letters

Letterspacing: add space between letters

Tracking: Kerning and Letterspacing in a word or sentence

Kerning keys: Alt + Left Arrow

Figure 2.1 Kerning and letterspacing

We don't read words as individual letters, we recognize them by shape/patterns. Thus, changing the tracking and counter space of the word reduces the recognizability of patterns that these words form.

Figure 2.2 Normal tracking, loose tracking and tight tracking

Text / Formatting text

Grey value: text on a white page

Flush left

This format most closely mirrors the asymmetrical experience of handwriting
Each line starts at the same point but ends at the last word on the line
Remember to make the ragged right smooth

Figure 2.3 Flush left

Centred

This format imposes symmetry upon text, assigning equal value and weight on both ends of a line
Irregular starting points for each line, does not make a good reading experience, thus should be used sparingly on small amounts of text

Figure 2.4 Centred

Flush right

This format places emphasis on the end of a line as opposed to its start
It can be useful in situations like captions or axial layouts
Use sparingly and ragging must be smoothened

Figure 2.5 Flush right

Justified

This format imposes a symmetrical shape on the text by expanding or reducing spaces between words
Produces ‘rivers’ of white space through the text
Careful attention to line breaks and hyphenation is required

Figure 2.6 Justified

Type that calls attention to itself before the actual words is simply interference.
If you see the type before you see the word, change the type.

Text / Texture

We must choose typefaces that suit the message at hand.
Sensitivity to the colour of grey value is important to create successful layouts.

Figure 2.7 Anatomy of a typeface

If the x-height is bigger than the ascender and descender, there is more readability

Text / Leading and Line Length

Type size:

Large enough to be read easily at arms length.

Leading:

Text that is set too tightly encourages vertical eye movement; a reader can easily lose track. Type that is set too loosely creates striped patterns that cause distraction.

Line length:

Keep line length between 55-65 characters. Extremely long or short line length impairs reading.

Figure 2.8 Leading and line length

Figure 2.9 Leading and line length

Text / Type Specimen Book or Sheet

To provide accurate reference of the type, size, leading, line length, etc
Ideal text: middle grey value
If designed for print, judge the printed out version; If designed for screen, judge the screen.
Always zoom in to check, details are important.

Figure 2.9 Type specimen sheet

Typo_4: Text P2

Text / Indicating Paragraphs

Pilcrow (¶): A holdover from medieval manuscripts seldom use today.

Line Space (Leading): Leading is the space between each line of text, line space is the space of the text + leading. Paragraph space should be same as line space, to ensure cross-alignment between columns of text.

Figure 3.1 Line space vs. leading

Standard Indentation: Usually same size as line space or point size. Was done on newspaper to save space and cram more information on one page. Should be used with justified alignment.

Figure 3.2 Standard Indentation

Extended paragraphs: Creates unusually wide columns of text. Despite these problems, there can be strong compositional or functional reasons for choosing it.

Figure 3.3 Extended paragraphs

Text / Widows and Orphans

We must make sure to avoid this occurrence!

Figure 3.4 Widows and Orphans

Widow: Short line of type left alone at the end of a column of text.

Solution: Rebreak your line endings throughout paragraph

Orphan: Short line of type left alone at the start of a new column.

Solution: Make sure not to start new column with last line of paragraph from previous column.

Text / Highlighting Text

Changing the font
Changing the type family
Changing the color (only to cyan, magenta and yellow)
Creating a box around the text
Using typographic elements (bullets and quotation marks)

Text / Headline within Text

A head indicates a clear break between the topics within a section.

Figure 3.5 A heads

The B head is subordinate to A heads. B heads indicate a new supporting argument or example for the topic at hand. They should not interrupt the text as strongly as A heads do.

Figure 3.6 B heads

C heads highlight specific facets of material within B head text. They don't interrupt the flow of reading. C heads in this configuration are followed by at least an em space for visual separation.

Figure 3.7 C heads

Text / Cross-alignment

Cross aligning headlines and captions with text type reinforces the architectural sense of the page—the structure—while articulating the complimentary vertical rhythms.
Doubling the leading of the headline can help maintain cross-alignment

Figure 3.8 Cross allignment

Typo_2: Basic

Basic / Describing Letterforms

To identify specific typefaces, it’s essential to understand a letterform’s components.

Basic / The Font

Uppercase and Lowercase
Small Capitals: uppercase letterforms drawn to the x-height of the typeface

Figure 4.1 Small Capitals

Uppercase Numerals (lining figures): same height as uppercase letters and are all set to the same kerning width

Figure 4.2 Uppercase Numerals

Lowercase Numerals (old style figures or text figures): set to x-height with ascenders and descenders

Figure 4.3 Lowercase numerals

Italic: refer back to fifteenth century Italian cursive handwriting

Figure 4.4 Italic

Punctuation, miscellaneous characters: can change from typeface to typeface. It is important to ensure that all the characters are available in a typeface before choosing the appropriate type

Figure 4.5 Punctuation and miscellaneous characters

Ornaments: used as flourishes in invitations and certificates

Figure 4.6 Ornaments

Basic / Describing Typeface

Roman: an uppercase form that is derived from inscriptions of Roman monuments
Book: lighter stroke in roman
Italic: based on the fifteenth century Italian handwriting
Oblique: based on a roman form of a typeface
Boldface: thicker stroke than a roman form
Semibold, Medium, Poster, Black
Light: lighter stroke than the roman form
Thin: even lighter strokes
Condense: a condensed version of the roman form
Compressed: extremely condense styles
Extended: extended variation of a roman form

Figure 4.7 Describing typefaces

Basic / Comparing Typeface

We are to use the 10 typefaces below throughout this module. These 10 typefaces represent 500 years of type design. Each typeface gives different feelings, it is important for us to understand these typefaces well and choose the right typeface for conveying messages in a particular work.

Figure 4.8 Comparing typefaces

INSTRUCTIONS

Task 1: Exercise I - Type Expression

Compose and express of 4 words, in a way that makes the meaning of the words become visible. First, brainstorm and sketch out our ideas, then choose the most ideal sketch for each word to proceed with digitization in Adobe Illustrator. A set of 10 typefaces were given for us to work with for the digitization phase. After finalizing the type expressions, choose one to animate into a GIF using Adobe Photoshop.

Ideation

Out of the six words that were given, I chose chaos, spring, float and dive as I felt more confident in exploring the text expression for these words. My initial manual sketch was drawn without specific typefaces. I started out by searching the definition of the words and looking at images to find inspiration. Then, I sketched as many ideas as I could.

Figure 5.1 Type expression sketches - Chaos, Week 2 (03/10/2023)

Figure 5.2 Type expression sketches - Spring, Week 2 (03/10/2023)

Figure 5.3 Type expression sketches - Float, Week 2 (03/10/2023)

Figure 5.4 Type expression sketches - Dive, Week 2 (03/10/2023)

Digitization

After getting feedback on my sketches and determining the best ideas for each word, I went on with digitization on Adobe Illustrator. For each word, the process started out with laying out the words in different typefaces to see which one was most ideal.

Figure 5.5 Digitalized type expression sketches - Chaos, Week 3 (10/10/2023)

For chaos, I explored on the same idea using different typeface. I also experimented on the details such as the scattered words/letters as well as the positioning to get the best outcome. Overall, this was the most time consuming one to make. In the end, I chose the top right as my final as I thought it looked the most visually pleasing.

Figure 5.6 Digitalized type expression sketches - Spring, Week 3 (10/10/2023)

For spring, it was simple and easy to make. By using the repeated letter N and the suitable typeface, I was able to express the meaning of spring. I explored a bit more by using the 's' and 'g' to serve as hooks of the spring, but my tutor advised I opt for the ones without visual elements, as we don't want it to be too illustrative. In the end, I chose to go for the digitization using futura std light condensed in oblique as it shows more movement.

Figure 5.7 Digitalized type expression sketches - Float, Week 3 (10/10/2023)

For float, I explored two different ideas. The first was improved from my sketch where instead of all alphabets floating in mid-air, only the center two alphabets are floating. The other one was inspired by balloons suspended at the ceiling as they cannot go any higher. The second idea was more interesting so I went with that for my final.

Figure 5.8 Digitalized type expression sketches - Dive, Week 3 (10/10/2023)

For dive, I explored quite a few ideas. Most of them centered around letter 'i' diving, whereas the bottom right was the letters arranged to look like a person was diving into the pool. The top two ideas got an okay from my tutor so I went with the top right as I thought it looked better. The bottom right idea was too illustrative thus it was discouraged.

Final Type Expression

Lastly, I finalized my type expressions by putting them into the given template, and arranging them in an order that looked best.

Figure 5.9 Final digitalized type expression, Week 3 (10/10/2023)

GIF Animation Process

The second part was to create a GIF animation. Fortunately, I had experience with animating, so I wasn't too overwhelmed with this task. However, it was my first time using Adobe Illustrator and Photoshop to animate, which was a slightly different experience. I chose 'float' to animate as I immediately had a visual on how to animate it.

Figure 5.10 Gif frames in Adobe Illustrator, Week 3 (10/10/2023)

I created a total of 42 frames, most of which was for the word to float from bottom to top. However, I later came to know that I did too many frames as it moved really slowly after I imported them into Photoshop. For the final part, I had to move the characters one by one to achieve the effect that I wanted.

Figure 5.11 Gif frames in Adobe Photoshop, Week 3 (10/10/2023)

Figure 5.12 Gif frames in Adobe Photoshop, Week 3 (10/10/2023)

After exporting the 42 frames into Photoshop, I deleted some of the frames in between the floating part, so that it could float faster. In the end, the total frames for my animation was 32. I made changes several times so that the animation could be smoother.

Final GIF Animation

Figure 5.13 Final animated gif - float, week 3 (10/10/2023)

Task 1: Exercise II - Text Formatting

Using Adobe InDesign, create an A4 layout that addresses of different aspects of text formatting such as type choice, type size, leading, line length, paragraph spacing, forced-line-break, alignment, kerning, widows and orphans and cross-alignment. This exercise aims to improve our skills and knowledge when it comes to spatial arrangement and information hierarchy.

Kerning & Tracking

Before we start to format the text layout, we had to do this exercise to practice our kerning and tracking skills. We had to kern and track our names in 10 different typefaces. It definitely takes time and practice to develop the sense for it. There were several instances where couldn't get it to look right.

With kerning:

Figure 6.1 Text formatting with kerning, Week 4 (17/10/2023)

Without kerning:

Figure 6.2 Text formatting without kerning, Week 4 (17/10/2023)

Comparison:

Figure 6.3 With and without kerning overlayed, week 4 (17/10/2023)

Formatting Text Layout

For the second part of this exercise, we had to format an A4 layout for the text given.

Figure 6.4 Body text before vs. after kerning, week 5 (24/10/2023)

After setting all the type size, leading, paragraph spacing and alignment, I applied kerning to the body text to smooth the ragging on the right.

Layout Explorations

I experimented and created 4 different layouts for this exercise.

Figure 6.5 Layout exploration #1, week 5 (24/10/2023)

Figure 6.6 Layout exploration #2, week 5 (24/10/2023)

Figure 6.7 Layout exploration #3, week 5 (24/10/2023)

Figure 6.8 Layout exploration #4, week 5 (24/10/2023)

After feedback from my tutor, I decided to finalize layout #4 as she said it was the most interesting one, with the body text and the picture complementing each other.

Final Outcome

Fonts: Univers LT Std

Headings - Black, Bold Condensed, Bold Oblique

Body text - Roman

Caption - Light Oblique

Point Size:

Headings - 18 pt, 45 pt, 9 pt

Body text - 9 pt

Caption - 9 pt

Leading:

Headings - 33 pt, 11 pt

Body text - 11 pt

Caption - 11 pt

Paragraph spacing: 11 pt

Characters per-line: 50~63 characters

Alignment: Left alligned

Margins (mm): 24 top, 40 bottom, 12.7 left, 12.7 right

Columns: 4

Gutter: 5 mm

Figure 6.9 Final Text Formatting (without grids) - JPEG, week 5 (24/10/2023)

Figure 6.10 Final Text Formatting (without grids) - PDF, week 5 (24/10/2023)

Figure 6.11 Final Text Formatting (with grids) - JPEG, week 5 (24/10/2023)

Figure 6.12 Final Text Formatting (with grids) - PDF, week 5 (24/10/2023)

FEEDBACK

Week 2

General feedback:

Presentation of our work is important, if the way we present our work is terrible, the lecturer may just stop looking at our work.
Make sure to update e-portfolio weekly so that work doesn't pile up.
We must do further reading to learn and broaden our knowledge about typography.

Specific feedback:

1. Chaos

For idea #1 and #2, the texture can be changed to putting repeated 'chaos', can be explored

Idea #5 is the most ideal

Try not to add affects like texture or 3d

2. Spring

Idea #3 is most ideal, but need to find typeface that has variety on the broadness

Vertical words are harder to be read, hence why #1 is not ideal

3. Float

Idea #2 is most ideal, but can be explored more, such as not all words floating

As for idea #3, repeated alphabets have been used in other words so we choose other ideas

Try not to add extra graphic elements

4. Dive

Idea #3 is most ideal

Quite straightforward designs

Week 3

General feedback:

Label the pictures in our E-portfolio.
Start further reading.
The final electronic version of the font was generally fine, and I reworked Chaos in class with a more visually striking design.
Look at the details, don't overlook the unnecessary visual noises in our work.

Specific feedback:

1. Chaos

The visuals are all the same idea with different, miss Hsin Yin just chose the most aesthetically pleasing one, which is visual #2.

2. Spring

The vertical visuals and sacrifices the legibility.

The horizontal visuals with repeated N is good to go, oblique font is recommended so that there's more movement going on.

The horizontal visual with added 'S' and 'G' at the top and end is okay, it's subjective and all about preferences. Miss Hsin Yin prefers without as it is straightforward enough, and you don't always need illustrations to convey the meaning of the word.

3. Float

It is obvious that the visual #2 with all letters floating and touching the top is the better choice.

4. Dive

Visual #1 is quite straightforward and quite ideal as well, can choose visual #2 if we want to have more creativity going on. Visual #4 is interesting but the legibility of the word has been sacrificed so not recommended.

Week 4

General feedback:

Update further reading

Specific feedback:

Gif animation is good.

Week 5

General feedback:

Be mindful of the alignment of the texts.

Specific feedback:

Layout #4 is the most interesting, so go with that. Make sure to set the margins nicely.

REFLECTIONS

Experience

Throughout these exercises, I have learned the basics of typography. We had to learn how to use Illustrator, Photoshop, as well as InDesign to complete our tasks. Fortunately, the tutorial video offered by the lecturers did a great job in teaching us how to use them.

For the first exercise, it was an interesting experience to create art and expression using type. Though, it was a little challenging to think of the ideas as we were not allowed to distort the typeface or add graphical elements. the digitization process became more fun as I started to get familiarized with how to use the software.

As for the second exercise, I struggled with getting the kerning of the words to look right, I think I still need more time and practice to develop the sense for it. However, I enjoyed exploring different layouts for text formatting.

Observations

I realize that I'm scared of making my work simple, having the mindset of simple means not enough. However, I have learned that it is fine if our design is simple, sometimes simple is better, as long as it is not simplistic.

I liked that the lecturers made us post our progress weekly to the Facebook page, this helps to keep me on track of work. It also gives me the opportunity to see other people's work, which helps me gauge on whether or not I'm falling behind in terms or skills and ideas.

Findings

As Mr. Vinod said: "Simple is good, simple is difficult!" Sometimes the design doesn't have to be too complex or extravagant for it to be good, sometimes simple is needed and preferred. Though it is all subjective.

The way we present our work is very important, it really makes a difference. Ensure that it is neat, the first impression matters.

Always sketch as many ideas, or try out as many designs as possible, push and train your mind to create more. Having options to choose from is never a bad thing, and you can always keep the idea in your pocket and use it somewhere in the future.

Search This Blog

Teo Mei Hui (0358315)

Typography - Task 1: Exercises

Comments

Post a Comment

Popular Posts

Games Development - Tasks

Major Project 1