ADVANCED TYPOGRAPHY / Task 1 : Exercises

March 28, 2022

ADVANCED TYPOGRAPHY / Task 1 : Exercises

28.03.2022 - 18.04.2022 (Week 1 - Week 4)
Esther Vanessa/0350751/Bachelors of Design (Hon.) in Creative Media
Advanced Typography
Exercises : Typographic Systems & Type & Play

JUMP LINK

Typographic Systems
Part 1 : Finding Type
Part 2 : Type and Image
Final Artwork

LECTURE

Lecture 1

Typographic Systems

"All design is based on a structural system" with eight major variations with an infinite number of permutations. These eight are as follows :

Axial
Radial
Dilatational
Random
Grid
Modular
Transitional
Bilateral

When giving form to a content -> it is dependent on communcation. The typographic systems are similar that the systems has a set of rules that is unique and provides a sense of purpose that focuses and direcs the decision making.

Axial System

All elements are organized to the left or right of a single axis

Figure 1.1 Axial System

Radial System

All elements are extended from a point of focus

Figure 1.2 Radial System

Dilatational System

All elements expand from a central point in a circular fashion
Has hierarchy, or differentiate the info to different clubs

Figure 1.3 Dilatational System

Random System

Appear to have no specific pattern or relationship

Figure 1.4 Random System

Grid System

System of vertical and horizontal divisions

Figure 1.5 Grid System

Transitional System

an informal system of layered banding
Corporating the type size and colors to mke it interesting and creating hierarchy

Figure 1.6 Transitional System

Modular System

A series of non-objective elements that are constructed in as a standardised unit

Figure 1.7 Modular System

Figure 1.8 Example of Modular system

Bilateral System

All text is arranged symmetrically on a single axis

Figure 1.9 Bilateral System

Many designers focus on the grid system and are unaware of the potential that other systems hold. Understanding this allows us to break free from the "the rigid horizontal and vertical grid systems of letter press". It allows designers to use more fluid means to create typographic messages.

Lecture 2

Typographic Composition

Principles of Design Composition

Are usually emphasis, isolation, repetition, symmetry and asymmetry, alignment, perspective. Some of these principles are a little more easily translatable than the other.

Figure 1.10 Emphasis in composition

Notions like repetition and perspectives are harder to translate/use in typography.

Rule of Thirds is still used as guides even in typography. Intersecting points = focal point of layout

Figure 1.11 Using Rules of Thirds

While Grid system may seem to be old, the versatility of the system and its modular nature allows an infinite number of adaptations. The approach of our reading loves to be in order rather than all over the place, and this is why Grid is still popular.

Figure 1.12 Grid Examples

Post-modernist era in Typographical systems explored chaos, randomness, and asymmetry. These are the results of those works.

Figure 1.13 Randomness in post-modernist Typographical Systems

Environmental Grid

This is a system that was based of an existing structure. Designers considered using Non-Objective Elements to create a unique and exciting mixture of texture and visual stimuli.

Figure 1.14 Example from Brenda McMannus of Pratt Inst.

Form and Movement
System is based on the exploration of an existing Grid Systems. The placement of a form on a page, over many pages creates movement. It didn't matter if it's on paper or screen.

Figure 1.15 9 Spreads where N-O Elements to mimic movement of moving screen

INSTRUCTIONS

TASK 1 : TYPOGRAPHIC SYSTEMS

For our first task, we are assigned to create 8 typographic work that applies the typographic systems mentioned from the lecture above. Mr Vinod suggested us to first start with very rough, simple thumbnail sketches before starting anything. I, of course, start the process of working on this by looking at a bunch of examples from the internet and study them.

Figure 2.1.1 Dilatational Example

Figure 2.1.2 Axial Example

Figure 2.1.3 Radial Example

Figure 2.1.4 Dilatational Example

Figure 2.1.5 Dilatational Example

Figure 2.1.6 Axial Example

Here are a couple examples I took from the internet. I mainly focuses on the definition on what makes a certain system. These examples and others I skim through the internet helped me understood a lot more about the systems.

Afterwards, I started my sketches on procreate. Just rough sketches of them with a lot of trial and error (even those that I did not include in the "final" sketch compilation)

These sketches are by no means a final product nor will I be exactly copying them, but more for a mere rough idea and will of course further develop while attempting in InDesign.

AXIAL ATTEMPT

In the attempt of doing the Axial system, I encountered a certain caveat when working in InDesign. It has been a while since I used InDesign so I am a bit rough at best.

Figure 2.2.1 Axial Progress (29.03.2022)

The caveat I mentioned above is how we are not free to rotate the pages/spread, and we could only rotate them in 90 degree at a time. I have to say my neck was about to break when I was working around the attempts.

Figure 2.2.2 Axial Attempt #1 (29.03.2022)

Figure 2.2.3 Axial Attempt #2 (29.03.2022)

Feedback : #2 too many strong lines, choose either the horizontal or vertical. #1 attempt is not working very well.

I removed some lines in #2 and fixed it for the final version.

Figure 2.2.4 Axial Final (02.04.2022)

DILATATIONAL ATTEMPT

This attempt flowed a bit easier for me, not too much of thinking and just my hands doing the auto-pilot work. I really liked what I did here although it did take me a little bit more time for just one attempt, mainly to adjust the positions of the texts and if I achieve good level of readability

Figure 2.2.5 Dilatational Attempt #1 (30.03.2022)

Feedback : Needs more work

So since sir Vinod's not too fond with this one, I tried doing a new layout and I think this one works better.

Figure 2.2.6 Final Dilatational (05.04.2022)

I think with this one, there's a distinct flow and overall more interesting and aligned to one another.

RADIAL ATTEMPT

This one's a bit tricky, I have to admit. mainly because the few examples I saw from the internet are really similar each to one another. I also had a certain uncertainty on if it is actually radial or not.

Figure 2.2.7 here's me almost crying out of frustation (31.03.2022)

Another InDesign caveat (also apart from the fact that I despise the pen tool here *sigh*) there are really just limited things you can do in InDesign, therefore I had to work in my Adobe for the headlines and move it back to InDesign. I am, however, thankful that I could just copy paste them.

Figure 2.2.8 Radial Attempt #1 (31.03.2022)

Figure 2.2.9 Radial Attempt #2 (31.03.2022)

Feedback : Radial #1 has readability issues, widen the circumference so even if it's not really a circle. Radial #2 is not really working.

I fixed the readability issues and created a much more seamless "circle".

Figure 2.2.10 Radial Final (04.04.2022)

RANDOM ATTEMPT

.. This one. I am genuinely annoyed working on. Trials and error proved that my thinking is still organized and more often than not, it didn't came out as random as I'd like it to.

I took inspiration from this *unhinged* meme I found when I was scrolling through twitter. Please excuse the language; twitter people are .. something.

Figure 2.2.11 no comment

Albeit a little weird, I kind of vibe with it.

So I put into InDesign whatever random ideas I have in mind.

Figure 2.2.12 Random Attempt #1 (31.03.2022)

Feedback : too much going out in the background, can do better

I tried fixing it and created a much more simple yet random background for this. Safe to say I really struggled but I managed to fix the background issue.

Figure 2.2.13 Random Final (04.04.2022)

GRID ATTEMPT

This one's relatively easier to work with and the work flow is much more fluid compared to others. I suspect familiarity that actually helps with this one.

Without much to say, I think it's pretty obvious that I am inspired by Chinese style deco, and winged around it.

Figure 2.2.14 Grid Attempt #1(31.03.2022)

Feedback : Need some more work too.

With this one, I chose to use my second attempt of Modular as my grid, as I think it's more appropriate if so. I also fixed several issues as the text sitting on the baseline.

Figure 2.2.15 Grid Final (03.04.2022)

TRANSITIONAL ATTEMPT

Another challenging one. I had to consult a few of my mates if I actually got the right idea of what transitional is. Turns out it has something to do with movement. I had pretty good ideas of this one and I quite like how both turned up.

Figure 2.2.16 Transitional Attempt #1 (01.04.2022)

Figure 2.2.17 Transitional Attempt #2 (01.04.2022)

Feedback : #2 remove the graphic element as it causes a traffic jam.

I removed the graphical element and adjusted some of the text to create a better flow.

Figure 2.2.18 Final Transitional (04.04.2022)

MODULAR ATTEMPT

This one's also a bit tricky as I really do not want it to look a bit boring and if I really got the right idea of what modular actually is. I'd say the second attempt is pretty though.

Figure 2.2.19 Modular Attempt #1 (02.04.2022)

Figure 2.2.20 Modular Attempt #2 (02.04.2022)

Feedback : Both are ok, #2 looks a little bit more like grid

Therefore, for the final I'll be using #1 Attempt. I fixed some minor text issue, changing the color and moving the text so it does not sit on the baseline.

Figure 2.2.21 Modular Final (04.04.2022)

BILATERAL ATTEMPT

Final stretch? sort of. This one's also relatively easier compared to the rest, again with the familiarity. I quite like how they turned up too.

Figure 2.2.22 Bilateral Attempt #1 (02.04.2022)

Figure 2.2.23 Bilateral Attempt #2 (02.04.2022)

Feedback : #1 is better and interesting

So for Bilateral I'll just be using #1 Attempt.

Figure 2.2.24 Bilateral Final (02.04.2022)

Attached below is the complete pdf of the attempts above including the grid, column and guides I used throughout the working process.

TASK 2 : TYPE & PLAY

Part 1 : Finding Type

For this task, we are supposed to look for fonts existing in either nature or manmade, the things we see everyday. We need to trace them, extract them to Illustrator, impose them on existing fonts, refine them and introduce back elements that made them unique. Particular purpose with this task was to try and visualize our fonts to be able to evoke certain feelings.

Initially, I had a couple things to go through during the tracing part of the task. Firstly including maps, then to bread (croissant) and a random bushes i took a picture of near Taylor's. Eventually settled with maps bacause I think that's the most unique and eligible out of the rest.

Figure 3.1.1 Google Map Screenshot (08.04.2022)

Figure 3.1.2 Extraction from the map (11.04.2022)

Figure 3.1.3 Extraction from the map (11.04.2022)

These were not the first extractions. Mr Vinod suggested to re-do the tracing since I focused too much on the lines and instead should have read the bigger picture. Here's a short video of the tracing process.

Afterwards, I begin the refining.

Figure 3.1.4 Extraction in Illustrator (11.04.2022)

After extracting, I started my work process of refining. This includes introducing lines that make part the characteristics of maps, and also started to straighten the lines (the initial first 4 letters were barely eligible). Sir Vinod suggested I learn more about how map lines work so it will look more like map.

Figure 3.1.5 Introducing smaller and thinner lines (12.04.2022)

After some more work around, I felt the need to make it more "map"-like by "cutting" out the fonts, since it was looking more like broken stone/cement instead of maps.

Figure 3.1.6 Process and trying to see how it looks if it was white on black (12.04.2022)

I also look at the font white on black to better understand it. Mr Vinod was okay with this specific refining process, however, he said to not impose it on sans-serif fonts.

Figure 3.1.7 First couple of hours working on the fonts (11.04.2022)

So I took that specific step and work again starting from there. More straightened lines and some more natural looking lines later, it started looking a bit better. I then also imposed with Open Source - Black font for reference. Here is the full run down and work process.

Figure 3.1.8 Full work process (17.04.2022)

Here is the final draft both in black on white and white on black.

Figure 3.1.9 Final draft (17.04.2022)

After feedback session, I went back and go for very minimal refinements (removing soft edges) and note from Sir Vinod to make the font fill with black and not with outline. Here's the final rundown.

Figure 3.1.10 Final Rundown (17.04.2022)

Figure 3.1.11 Extended Rundown (18.04.2022)

And here's the final result.

Figure 3.1.12 Final Result (18.04.2022)

Part 2 : Type and Image

For our third exercise, we were given a pretty vague instructions. The only thing sir vinod remind us is to be aware of the image we use and if the word we chose works for the image. So I went scouring for tutorials on YouTube and pictures on google.

This was my first attempt. It was to show the word Silk on top of the word silk.

Figure 4.1.1 First Trial (23.04.2022)

To do the 'folding' effect, I used split warp. For the shadows I use overlays and brushes. It was only a trial, so I redid the same with a different typeface and ended up with this. The writing is bigger too.

Figure 4.1.2 Second Attempt (24.04.2022)

I also went ahead and did more, some of them being more minimalistic.

Figure 4.1.3 Trial 2 (24.04.2022)

Figure 4.1.4 Trial 3 (24.04.2022)

Figure 4.1.5 Trial 4 (24.04.2022)

Figure 4.1.6 Trial 5 (24.04.2022)

Albeit liking Attempt 2, 3, and 4. I still liked the Silk one the best. During feedback session, sir Vinod likes the Silk the best too, and it looks finished already. So I cropped that attempt and call it done.

Figure 4.1.7 Final Attempt (25.04.2022)

FINAL WORKS

Typographic Systems

Figure 5.1.1 Axial Final (02.04.2022)

Figure 5.1.2 Dilatational Final (05.04.2022)

Figure 5.1.3 Radial Final(04.04.2022)

Figure 5.1.4 Random Final (04.04.2022)

Figure 5.1.5 Bilateral Final (02.04.2022)

Figure 5.1.6 Transitional Final (04.04.2022)

Figure 5.1.7 Modular Final (04.04.2022)

Figure 5.1.8 Grid Final (03.04.2022)

Finding Type

Figure 5.1.9 Final Artwork for Finding Type (18.04.2022)

Type and Image

Figure 5.1.10 Final Artwork for Type & Image (25.04.2022)

FEEDBACK

Week 5

General Feedback: Do potray the image with the right word/type, including the right typefaces.

Specific Feedback: Silk looks good. For NYC can work with different composition and more words instead of just three letters.

Week 4

General Feedback: Remember to not loose too much of the characteristics of the font but still keep it unique

Specific Feedback: Font now looks okay. Needs a little refinement but otherwise already shows that it's a map. Do not forget to make it fill instead of outline on Illustrator.

Week 3

General Feedback: Preserve the characteristics in the font as it should visualize the item you picked

Specific Feedback: Do not focus too much on the lines in the map, and instead should have looked at the bigger picture. Straighter outer lines and crooked inner lines. Study more the patterns of a map.

Week 2

General Feedback: Downsize numbers/capital letters to 0.5 in body texts - to make it look more homogenous. Less is more with the graphical elements, always try to proportionate the layout instead to maximize reading flow.

Specific Feedback:

-Axial : #2 too many strong lines, choose either the horizontal or vertical. #1 attempt is not working very well.

-Radial : Radial #1 has readability issues, widen the circumference so even if it's not really a circle. Radial #2 is not really working.

-Dilatational : Needs more work

-Random : too much going out in the background, can do better

-Grid : Need some more work too.

-Transitional : #2 remove the graphic element as it causes a traffic jam

-Modular : Both are ok.

-Bilateral : #1 is better and interesting.

REFLECTION

Experience

These exercises are a bit frustrating, candidly speaking. Especially the first one, as I feel like typographic systems can be really similar to each other. They can be very rigid and fluid at the same time. Even if I do not like layouting as much, I realize it is pretty important, even in UI/UX (the specialization I chose). I learnt more than I've liked to in this particular exercise, and trust me that it's a good thing in disguise.

Finding type is also a bit frustrating. At first I was kinda circling around the map idea, I didn't know how to make it not look like a stone, and looked like map instead. In the end, I quite liked how it turned out, and it really does visualize "map" in the typeface.

Type and Image is fun, that I have to admit. Although the instructions were a bit vague, I think I utilized photoshop well enough to did the artwork justice in visualizing what I have in my head. This by far took me the least time and I was more laxed than ever. Tutorials on YouTube and intuitive thinking made me explore so much more creativity when working on this exercise.

Observation

I observed that typographic systems are everywhere, and layouting is really important in basic design. On manipulating type into images, tutorials are found all over youtube and you can obviously mix and match between those tutorials and there's so much you can do in Photoshop.

Findings

I also realized that more often than not, typographic systems are mixed and matched with each other. I also found out that I should just stop and revisit another day if I keep doing things that aren't really working out.

Search This Blog

Esther Vanessa [0350751]