Labels

Advanced Typography - Task1

29/3/2021 - 20/3/2021 // Week 1 - Week 4 
Gan Shin Tung / 0346455
Advanced Typography / Bachelor of Design (Hons) in Creative Media 
Task 1: Exercises

Lectures 
Week 1: Typographic System
  • Axial
  • Radial
  • Dilational
  • Random
  • Grid
  • Modular
  • Transitional
  • Bilateral
Axial System
All elements are organized based on a single axis.

Radial System
All elements are extended from a point of focus.

Dilational System 
All elements expand from a central point in a circular fashion.

Random System
Elements appear to have no specific pattern or relationship.
Grid System
A system of vertical and horizontal divisions.

Transitional System
An informal system of layering and banding.

Modular System
A series of non-objective elements are constructed as a standardized unit.

Bilateral System
All texts are arranged symmetrically on a single axis.

Week 2: Typographic Composition

Principles of Design Composition
  • emphasis
  • isolation
  • repetition
  • symmetry
  • alignment 
  • perspective
The Rule of Thirds
A photographic guide to composition, a frame space can be divided in 3 columns and 3 rows. The intersecting lines are used as a guide to place the points of interest, within the given space.

Environmental Grid
  • An extraction of crucial lines both curved and straight are formed
  • Includes non-objectives to create an unique and exciting mixture of texture and visual stimuli
  • the systems/ structures were developed around key features of an environment associated to the communicators of the message
Form and Movement
  • To explore the multitude of options the grid offer
  • To dispel the seriousness surrounding the application of the grid system
  • To see the turning of pages in a book as slowed-down animation in the form that constitutes the placement of image, text and color.
Week 3: Context & Creativity
  • Greek influence on Rome but not Egyptian or Near Eastern influence on Greece
  • 19 century and the rise of British empire, it became out of style to credit Africa with anything of value and therefore Greece and Rome were elevated over much older, much more influential civilizations like Mesopotamia, the Indus Valley, China, etc
  •  With the digital revolution, the west would digitalize many historical creations and type foundries would create, market, sell or license them.
Evolution of Middle Eastern Alphabets
While the Phoenician letter marks a turning point in written language, the use of script itself has been possibly influenced by the Egyptian hieroglyphics and Hieractics Scripts.

The Evolution of Chinese Scripts: From the Oracle bone to Seal script to Clerical script, Traditional and Simplified scripts.

Instructions
<iframe src="https://drive.google.com/file/d/1VHFeQWykhbim_bieeDuv3Dk6uJXkyU65/preview" width="640" height="480"></iframe>
Task 1:

Week 1 : Typographic System
In the first exercise, we were to come out with one design of each typographic system. The paragraphs were given in the module information booklet. However, Mr.Vinod decided to let us try out designing one of the typographic systems which are Axial during class time,e and get feedback from students.
Figure 1.1 Axial first attempt (29/3/2021)
I didn't think that this design would be my final, I would definitely make another design for Axial as the time is limited. I also had some technical issues with my home wifi and so on so I was rushing through it.

Sketches : 

Figure1.2 Sketches

I made some sketches before I work on my design in Indesign. I then transfer my ideas into Indesign in 200mm x 200mm size paper which was provided in the requirements. Here are my first attempt at designing my ideas in Adobe Indesign.

Figure 1.3 Axial #1 (1/4/2021)

Figure 1.4 Bilateral #1(1/4/2021)

Figure 1.5 Grid #1 (1/4/2021)

Figure1.6 Modular#1 (2/4/2021)

Figure1.7 Radial #1 (2/4/2021)

Figure1.8 Random #1 (2/4/2021)

Figure1.9 Transitional #1 (3/4/2021)

Figure2.0 Dilatational #1(6/4/2021)

After getting general feedback and also specific feedback during class, I made some changes to my designs. 

Figure2.1 Bilateral #2 (6/4/2021)

Figure2.2 Grid #2 (6/4/2021)

Figure2.3 Modular#2 (6/4/2021)

Figure2.4 Dilatational #2 (6/4/2021)

Figure2.5 Radial #2 (6/4/2021)

Figure2.6 Random #2 (6/4/2021)

Figure2.7 Transitional #2 (6/4/2021)

Figure2.8 Axial #2 (6/4/2021)

Figure2.9 Typographic System PDF (6/4/21)
Week 2: Type & Play (Part1)
In this exercise, we were told to choose an image of man-made objects or structures and nature. We will then need to analyze, dissect and identify potential letterforms.

I decided to use a human photo to identify the letterforms. I am using a fashion model's photos. 

Figure3.0 Fashion Model Photo(8/4/2021)

Figure3.1 Tracing using Pen Tool in Ai (8/4/2021)


Figure3.2 Tracing only(9/4/21)

After finishing the tracing, I analyzed and found the possible letterforms.

Figure3.3 Five letterforms(20/4/21)

Figure3.4 Original Letters(20/4/21)
Figure3.5 First Attempt(20/4/21)
Figure3.6 Second Attempt(20/4/21)

Figure3.7 Third Attempt(20/4/21)

Figure3.8 Fourth Attempt(20/4/21)

After getting feedback from my classmates and Mr.Vinod, I apply changes that were needed.

Figure3.9 Final Outcome(24/4/21)


Figure4.0 Original & Final

Figure4.1 Final Letter'U'

Figure4.2 Final Letter 'I'

Figure4.3 Final Letter 'T'

Figure4.4 Final Letter 'E'

Figure4.5 Final Letter 'O'


Figure4.6 Final Outcome PDF

Type&Play:(Part2)
For part 2 of type and play exercise we have to find an image online and insert a suitbale letterforms relating to the image itself. It doesn't have to be long, keep it simple and clean. I chose a picture of cherry blossom.

Figure4.7 Image Chosen(20/4/21)

Figure4.8 Editing(20/4/21)

Figure4.9 First Attempt(20/4/21)

After getting the feedbacks from my classmates I decided to make another design and choose another image.

Figure5.0 Second Attempt(24/4/2021)
Mr.Vinod said there is no interactive found on my designs therefore I decided to find another image to work on new designs.

Figure5.1 Final Attempt(28/4/2021)

Figure5.2 Final OutcomePDF(28/4/21)
Reflection:
Week 1: I try to search online to get ideas to come out with 8 different designs. Although some are not easy to understand I try to find more examples and find a consistency of patterns so that I could understand more.

Week 2: I find a few human poses that look like letterforms. I then trace them one by one, it was not easy and it took me quite some time. I feel like everyone will find images of objects so why don't I try something different.

Week 3: After receiving Mr.Vinod's specific feedback I realized I was wrong about the concept of this exercise. Luckily, Mr.Vinod gave us one more week time to finish this exercise.

Week 4: I'm glad that Mr.Vinod approved my work. I really put the effort into making the letterforms. I refer back to the rubrics he gave in class when we have group review sessions. Now I just have to work on the minor issues of the letterforms.

Week 5: It's so hard to find a suitable image to design on. After few mistakes, I went on book cover images instead of google images. I hope this time I'm doing it right. 
Feedback :
Week 1:The feedback that I've gotten from my group mates is that my school logo was too far from my main text. They recommend making it straight towards the center.

Week 2:
General feedback: Mr.Vinod suggested we work without any elements first, then add on if needed. He also said we had to be careful with how we use the color of non-objective elements. The color should assist in enhancing the information.
Specific feedback: Mr.Vinod liked some of my designs, others which he didn't like he refer me to watch his typo system modular video.

Week 3: 
General Feedback: Try to keep the letters consistent by having the same height, width, and thickness of the letters. At the same time remain the characteristic of the object in the letters.
Specific Feedback: Extract the letterforms from the image, not the image that suits the letterform, you got the wrong concept. You could just choose one and extract letterforms from it.

Week 4:
General Feedback: Once again consistency of the letterforms, width height, and thickness. Remain the characteristics of the letterforms. 
Specific Feedback: The letters are very consistent but the O and the U need a little tweak. Try to reduce the T bottom stroke a little. Make the I using the stroke of the T as a base.

Week 5:
Specific Feedback: No interplay between image and type (first pic; flower). Blue leaves and text does not feature any interplay between image and text as shown in examples. Pup with text has limited interplay.
Further Reading:

Week 1: Bold or Italic


    Bold or italic—think of them as mutually exclusive. That is rule #1. Rule #2: use bold and italic as little as possible. They are tools for emphasis. But if everything is emphasized, then nothing is emphasized. Also, because bold and italic styles are designed to contrast with regular roman text, they’re somewhat harder to read. Like all caps, bold and italic are fine for short bits of text, but not for long stretches. Text that is neither bold nor italic is called roman. Nevertheless, some writers —let’s call them to overemphasize—just can’t get enough bold and italic. If they feel strongly about a point, they won’t hesitate to run the whole paragraph in bold type. Don’t be one of these people. This habit wears down your readers’ retinas and their patience. It also gives you nowhere to go when you need to emphasize a word. Foreign words used in English are sometimes italicized, sometimes not, depending on how common they are. For instance, you would italicize your bête noire and your Weltanschauung, but neither your croissant nor your résumé. When in doubt, consult a dictionary or usage guide. Don’t forget to type the accented characters correctly. Characters adjacent to the outside edges of the emphasized text—like punctuation, parentheses, brackets, and braces—do not get the emphatic formatting. See headings for tips on how to avoid the arms race of overemphasis when working with multiple heading levels.

Week 2: Typeface Mechanics 001



    Our conscious minds want to draw one shape, but our eyes need to see another. Part of typeface design is managing this eternal friction between logic and optics. It’s always there, no matter the style.
This new series of posts will explore call «typeface mechanics», the behind-the-scenes work that makes typefaces visually functional. It is what placates the stubborn oddities of human perception, helps or hinders the user, and informs long-standing conventions of design. The typeface design process has many counterintuitive moments. One of the earliest pertains to vertical position and size, which we expect to be consistent among letters. We could simply pick a measure and apply it everywhere. But this straightforward and logical plan would fail, thanks to our eyes and brains. Square shapes like H have a simple and stable relationship to the baseline and cap-height. Their upper and lower edges coincide with these boundaries and stay put. Even within a single family, variations of weight and width can alter a shape’s exterior, and require a recalibration of alignment. For instance, a V might present a sharp exterior point in lighter weights. But accommodating the extra mass of heavier weights could force a blunter apex and change its apparent depth, and therefore require a new alignment. Lowercase alignments are often more difficult to negotiate, because many letters have flat shapes immediately adjacent to round shapes, and both need to be optically correct. A mixed alignment should look «natural», and show no sign of the struggle involved. Sloping serifs can make matters harder again. This feature, a hallmark of an old-style lowercase, leaves only a handful of letters with a flat shape on top.

Week 3: Your Body Text Is Too Small


    The majority of websites are still anywhere in the range of 15–18px. Through the typewriter era we ascertained that 12pt was about the optimum size for legibility in print despite the fact that books, magazines and newspapers go smaller to reduce paper quantity costs. We’re focusing on legibility instead of readability.Unfortunately, it’s a common mistake to purposefully design a website in a way to avoid scrolling.Frameworks can save valuable time and enforce a reliable system for collaboration, especially when it comes to typography. We can make assumptions about how far a user is from a screen, whether that’s with a phone, tablet, or desktop computer, but it’s become more common to browse the web on ultra high-definition displays and smart TVs.Our ability to handle large amounts of information is limited by our brain’s processing power. Larger font sizes on headlines can elicit a much stronger emotional connection, and the same applies to body text. As a general principal in typography, it’s usually better to stick with a serif or sans-serif font for body text. However, not every font works well when scaled up. Some typefaces can look crisp and sharp at smaller sizes but feel awkward and poorly designed when big. Since there are so many different characteristics between typefaces, one size for a particular design will have a perceptually different scale to a different typeface at the same size.Enlarged body text may require us to fine-tune the letter spacing to attain better readability and aesthetics. According to The Elements of Typographic Style, Robert Bringhurst states that the optimal line length, or number of characters per line in typography is around 55 to 75.

Week 4: Font Smoothing Explained

    Attention to detail is essential for good design. That’s why designers spend huge amounts of time polishing borders, textures and other visuals. Arguably the most important area of web design is typography. What is font smoothing?Anything on the screen, including type, is displayed using pixels. The simplest approach to display type is to use pixels of solid color to represent glyphs . This method is easiest to implement and fastest to compute.The first method is antialiasing. It uses partial opacity to emulate smooth curves of the glyphs. As the final result, the shape of glyphs is more true to the type’s design.
An obscure feature of LCD displays allows for more sophisticated font smoothing. Each pixel on LCD screen consists of 3 horizontally arranged subpixels. These are responsible for rendering red, green and blue components of any color pixel. Software capable of using subpixels can effectively emulate horizontal resolution that is 3 times bigger than normal resolution. Text looks very different, depending on whether subpixel rendering, standard antialiasing or no smoothing at all is used.On Macs, the situation is relatively simple. Rendering layer of OSX, Quartz, uses subpixel rendering, as ClearType does. However, the results are strikingly different. Fonts on Macs seem to be more «full» and closer to the original designs of typefaces.By default, Windows versions prior to and including XP use no antialiasing at all, producing sharp, but jagged glyphs. Starting from Windows Vista, ClearType is on by default, though users could still opt for disabling it in favor of standard antialiasing or no font smoothing at all.Traditionally, web browsers had been using operating system’s settings. Internet Explorer 7 was the first browser to change that. By default it has ClearType turned on, regardless of Windows settings. Adobe Photoshop can be used only for a basic check of how the final text will look like.Unfortunately, a designer cannot ensure that users will see HTML text exactly as designed. Rendering the whole page as an image or Flash file is not a sensible alternative due to performance, usability and accessibility concerns. What, then, can a designer do to ensure maximum legibility and a good look of a type? Accept the reality. Right now there’s no way to tell what settings your users have. Most likely, they have subpixel rendering on Mac OS X, no antialiasing at all on Windows XP with IE6 or Firefox, and ClearType in IE7, IE8 or Vista, but you can’t be 100% sure. Needless to say, a website will look very different across all these environments. Assume the worst. When designing the page in Photoshop, check how does it looks without any text smoothing at all and with Smooth setting applied. Bear in mind that Smooth setting is not equal to standard antialiasing and there’s no Photoshop equivalent whatsoever to subpixel rendering.







Labels:

Comments

Post a Comment

Popular Posts