Advanced Typography- Exercises





Kyra Binti Rizal Hamzah (0337085)
Advanced Typography- Exercises



Lecture Notes

Week 1

Introduction to module, typographic systems.


Week 2



Today sir touched on the history of grid typographic system and typographic composition.



Instructions 




Exercise 1

Week 1

For this exercise we were instructed to create 2 examples for each type of typographic system with a given text.
Fig1.1 - Sketches


Fig1.2 -More sketches



Fig 1.3 - First draft (Axial)

Fig 1.4 - First draft (Radial)
Fig 1.5 - First draft ( Dilational)

Fig 1.6 - First draft (Random)
Fig 1.7 - First  draft (Grid)
Fig 1.8- First draft (Transitional)
Fig 1.9- First draft (Bilateral)
Fig 1.10- First draft (Modular)
Week 2
I was quite surprised during feedback. Some of the ones I wasn't confident in, Mr Vinod thought was fine, and some that I liked, he told me to fix. Most of them were alright but had minor adjustments to make, but there were a few that I needed to make major changes to; Transitional, Modular and Bilateral.
Fig 1.11- Second draft Axial


Fig 1.12- Second draft, Radial
Fig 1.13- Second draft, Dilational
Fig 1.14-Second draft, Random
Fig 1.15-Second draft, Grid

Fig 1.16-Second draft, Transitional
Final Version

Exercise 2
Type and play

Part 1
For this exercise, we had to find an image and create type out of it.

After class that day, I went to the kitchen to make some tea and I realised we have this sticker / faux stained glass thing on our window, and decided to use this for the exercise.

Fig 2.1 - Image I used.
After that I traced the image. I mean, Illustrator's trace tool did. Thanks Illustrator. Since the sticker design is a repetitive geometric pattern, I decided to focus on just a quarter of the image to find type to make it a bit less of a headache to stare at. 
Fig 2.2 - Traced Image
Then came the letter hunting.
Fig 2.3- Letters I found, A,B,C,X,O
Some of the letters looked a bit strange at first.
Fig 2.4- The initial letters I made out of the pattern
I found that some of the letters had these little curved points at the edges and concluded then that it'd make sense for this to be a serif typeface. I then looked for some other existing typefaces to use as references. 
Fig 2.5- Serifs? And some samples of other typefaces.
I wasn't too sure which of the two examples I would use as a main reference, so I just began refining the type a bit first so I could see which one would be a clearer fit.
Fig 2.6 - Initial attempt at refining the type.

I decided that Fertigo Pro would be a good example to go with as it has just the slightest of serifs, which felt fitting with the way the letters I extracted look.
Fig 2.7- Fertigo Pro (Reference point for my typeface)
At this point I felt like my A looked a bit clawlike and that generally the letters could be a bit smoother looking, so I adjusted it in a way that only part of the strokes would have the rounded detailing from the source image.
Fig 2.8- Refinement part 2.
Then I got kind of stumped; how much refining is too refining?  Is there more that I can do without it losing too much of it's essence? I did give it another round, but I tried to keep the changes minimal. I made the serifs on the letter A less prominent, moved some of the curves on B, and removed some entirely from X and O, just to make the letters look a bit more balanced.
Fig 2.9 - Refinement part 3.

Mr Vinod suggested I make the decorative portion of the typeface more uniform across letters so in this next iteration, I used the same decoration for A and X as well as for C and O. 
Fig 2.10 - Refinement part 4, Final Version

Part 2
Fig 3.0 - Image I chose to use
Fig 3.1 - A first attempt
Fig 3.2 - Second attempt; Made image portrait instead of landscape, changed text color.

I wasn't very happy with how this was turning out so I then tried using a different image, but with a similar concept so I don't spend too much time on this

Fig 3.3 - Redo: Picture I used


Fig 3.4: Final Attempt



Feedback

Week 1
General feedback: 
-Your information needs to look good within the space your working in
Specific feedback:
-Make text smaller, 8-12pt
-Transitional needs work, too much awkward space
-For grid typography, align the text to the columns

Week 2
Specific feedback-
Good choice of reference typeface
Make the curved decorative portions more even
Refine further.

Week 3
General feedback-
Read brief for final project

Specific feedback-

The text is played with a bit but not much, try and make it mix in a bit with the ripples in the water

Week 4

Specific feedback- The word "time" beneath the foot can look more like it's being stepped on, have more sensitivity towards the interplay. Fix blog, lecture notes should be above instructions 


Reflection

Week 2- I hope the lecturers don't get too tired, these online classes take up a lot more energy than our regular classes. For the students it's a bit more goyang kaki but I think on their side there's so much more they have to do and it takes much longer for them to proceed as they usually do. Mr Vinod & Mr Shamsul, if you see this, thanks so much for everything you do. Really appreciate all your effort, and the classes are going pretty smooth despite how difficult the times are right now.


Week 3-Following Mr Vinod's advice to read the final project brief, the part suggesting to "explore the use of type in your area of interest" had me a bit stumped. So generally my design interests are mainly related to UI and app design and in my (((uneducated)))mind, typeface choices in this context are just a matter of use Roboto for everything and go XD 



Further reading

Week 3
Typography for User Interfaces
https://viljamis.com/2016/typography-for-user-interfaces/
This blog post explained some things to keep in mind when choosing typefaces for UI specifically.

First of all, when I was highlighting the post title so I could copy it in here, I was quite intrigued by how the title was highlighted, so instead of a screenshot here's a video of it. Interactions like this could be something I think about for the final project maybe???



This point stood out to me; I don't think I take this into consideration very often

Popular Posts