Typography/Task 2: Typographic Exploration and Communication

TYPOGRAPHY; TASK 2

1/9/2021 - 8/10/2021 (Week 6 - Week 7)
Diane Lim En Wei / 0345187 / B'Creative Media
Typography

Task 2 / Typographic Exploration and Communication (Text Formatting and Expression)

LECTURES

Week 6 (1/9/2021)
Before beginning any layout, there must be an understanding of what is the material we are dealing with. One way of tackling that is to;
  • Look at the content, in the page size. e.g if you need to add text to a 200x200px page, add a dummy text to the page along, including the headline. 
Fig 1.1 ; Text on a 200x200px page (example) (5/10/2021)

By doing this, it cements an understanding on how much space there is and how much space the text covers on the page. With this understanding, the next move is to start on a digital thumbnail sketch. Explore possible ideas and layouts for expressing the text. 

When creating layout, create patches of gray blocks over the text, so as to decipher if there's good balance between the text and negative space.

Week 7(8/10/2021) Typography in a different Medium
Typography in the past was viewed as living only when it was printed onto paper. Once a publication was edited, typeset, and printed, it was done. Nothing would have changed after that. Good typography and readability were the result of skilled typesetters and designers at the time.

In today's era, typography exists not only on paper, but on a multitude of screens. It has been the subject of many unknown and fluctuating parameters. Such as; Operating system, system fonts, the device and screen itself, etc. Our experience of typography today has been changed based on how a page is rendered, as typesetting happens in a browser.

Type for Print
Primarily, type was designed intended for reading from print before it was ever intended to be read on a screen. It is the designer's job to ensure that text is 
  • Smooth,
  • Flowing,
  • Pleasant to read.
A good type face for print;
  • Caslon,
  • Garamond,
  • Baskerville.
Them being the most common type faces used in print. This is because of their characteristics being;
  • Elegant,
  • Intellectual,
  • Highly readable when set at small font size.
These fonts are versatile, easy-to-digest classic typeface. They have a neutrality and versatility that makes typesetting with it a breeze. 

Type for screen
Type faces intended for we b are optimized and often modified to enhance readability and performance onscreen, in a variety of digital environments. This can include;
  • Taller x-height, or reduced ascenders and descenders,
  • Wider letterforms,
  • More open counters,
  • Heavier thin strokes and serifs, 
  • Reduced stroke contrast,
  • Modified curves and angles from designs.
An important adjustment, especially for typefaces intended for smaller sizes, is that it needs more spacing. All of these factors serve to improve character recognition, and overall readability in the non-print environment, which can include the web, e-books, and mobile devices. This is so there is no lumping of information which can be acceptable/done on print, but not necessarily on screen.

Hyperlinks
Hyperlinks, a word/phrase/image that you can click on to jump to a new document or a new section within the current document. These hyperlinks are normally blue in color and underlined by default. When hovering the cursor over a hyperlink, the arrow would change to a small hand pointing at the link. 

Font size for screen
16px text on a screen is about the same size as text printed in a book/magazine; this is accounting for reading distance. We read books pretty close, a few inches away, they are typically set to 10 points. If you were to read them at arm's length, you'd want at least 12 points, which is about the same size as 16 pixels on most screens.

System fonts for screen/web safe fonts
Each device comes with its own pre-installed font selection. Often times when a designer picks an obscure, paid font family for a site's design, if the device does not have the font already installed, the font you would see would default back to some basic variation of Times New Roman. 

'Web safe' fonts appear across all operating systems. They're the small collection of fonts that overlap from Windows, to Mac, to Google. 

Pixel differential between devices
The screens used by our PCs, tablets, phones, TVs, are not only different sizes, but the text proportion differs as each screen has different sized pixels. 100px on a laptop is very different from 100px on a big 60" HDTV. 

Fig 1.2 ; Pixel differential between devices (8/10/2021)

Static vs Motion
Static typography
Static typography has minimal characteristics in expressing words. Traditional characteristics such as bold and italic offer only a fraction of the expressive potential of dynamic properties. 

Motion typography
Motion typography, a dramatized type of letterforms to become 'fluid' and 'kinetic.' e.g; Film title credits present typographic information over time, often bringing it to life through animation. Motion graphics, particularly the brand identities of a film/television production companies, increasingly contain animated type.

Type often overlaid onto music videos and advertisements. Often set in motion to follow the rhythm of a soundtrack. On-screen typography has developed to become expressive, helping to establish the tone of the content it is associated with, or express a set of brand values. In title sequences, typography must prepare the audience of the film, by evoking a specific mood.

INSTRUCTIONS


Task 2 submissions must include the following:
  1. Layout Research
  2. Sketches
  3. Digital Progression
  4. JPG submission (300dpi, grayscale, max quality)
  5. PDF embedded
Requirements:
  1. Font size (8–12)
  2. Line Length (55–65/50–60 characters)
  3. Text Leading (2, 2.5, 3 points larger than font size)
  4. Ragging (left alignment) / Rivers (Left Justification)
  5. Cross Alignment
  6. No Widows / Orphans

Task 2 / Typographic Exploration and Communication (Text Formatting and Expression)

Week 6 (1/9/2021)
I first did research on some layouts I could take inspiration from; 
Fig 2.1 ; First inspiration found (29/9/2021)

I really liked this layout as it strayed so far away from the layout I was initially thinking of, but it somehow works. The headline for the text I had decided to use was; "Be Good, Do Good, Follow The Code." I had the plan to highlight the word 'CODE,' in bold, however unlike Fig x.1, I wanted to stray away from old-timey Serif fonts. 

Fig 2.2 ; Second inspiration found (29/9/2021)

I really like how the orientation of the text is in Fig 2.2, however I feel it depends too much on the graphics.

Fig 2.3 ; Third Inspiration found (29/9/2021)

I enjoy the clean look to this, with the word 'YOURSELF,' being highlighted by the font size and the bolding, just like how I want the word 'CODE' to be highlighted. I appreciate how clean it looks, but it did not feel exciting enough.

Before creating my thumbnail sketches, I first put all the text into a 200x200px page.

Fig 2.4 ; Text on a 200x200px page.

Using the inspirations I found, I made three layout sketches; 

Fig 2.5 ; First layout sketch (29/9/2021)


Fig 2.6 ; Second layout sketch (29/9/2021)


Fig 2.7 ; Third layout sketch (29/9/2021)

I disliked Fig 2.7 the most, it looks too blocky, and again, has no dynamic. Fig 2.5 and Fig 2.6, both were based off of my first inspiration (Fig x.1) , and was just me experimenting with organization. 

I then drafted up my first attempt at Task 2. 
Fig 2.8 ; First attempt at Task 2 (29/9/2021)

In Fig 2.8, I followed my sketches through and through, and I disliked how it looked. It looked extremely messy, and I made changes to it.  Along with that, the leading of the heading is much too small.

Fig 2.9 ; Second attempt at Task 2 (29/9/2021)

I like this attempt, as there is a growth in text from the left to the right. However I will be fixing the ragging, and getting rid of the orphans as much while smoothing out the ragging.

Fig 2.10 ; Third attempt at Task 2 (29/9/2021)

I am much happier with my attempt in Fig 2.10, I am satisfied with the ragging.

Week 7 (8/10/2021)
After receiving feedback from Mr. Vinod, I made changes to Fig 2.10, and corrected a huge mistake I make, it being the dimensions. Resulting in the fourth attempt.

Fig 3.1 ; Fourth attempt at Task 2 (29/9/2021)

Fig 3.3 ; Distribution of text and space (5/10/2021)

After receiving feedback from my lecturer, I made the necessary changes, resulting in this final outcome, with the changes being that the Point size was lower, and the JPG being exported at 600dpi rather than the previous 300dpi.

Fig 3.4 ; Final outcome of Task 2 (8/10/2021)

Fig 3.5 ; Final PDF (8/10/2021)


FEEDBACK

Week 6 (1/9/2021)
Specific Feedback - Kerning was done well, however, the leading is tight, consider the x-height of Gill sans font. Never use two san serif fonts together, if you are going to use Gill sans, only use Gill sans, as not many other fonts go well with it. Headline is meant to link with the word 'CODE', both should be the same font to ensure unity. The concept is good, where deciphering the word 'CODE' plays into the headline well. The headline should be smaller so as to let the word 'CODE' shine more. Also it's the wrong dimensions. 

Week 7 (8/10/2021)
Specific Feedback - The quality of the JPG submission seem to be a little low resolution, with the point size seemingly being a little too big for the line length. It would require a smaller point size. I need to do more further reading as well.

REFLECTION

This has been my favorite work done for Typography so far. I am very happy with the results and extremely satisfied with the direction I took it. I feel I achieved the dynamic look that I was going for, while also keeping a good distribution of negative space and text (Fig 3.3), and I'm just overall satisfied with the idea. It was extremely fun trying to come up with layouts, and seeing what works and what doesn't. Along with that, learning about the Gill sans font through feedback, along with never using two San Serif fonts together, has been an extremely useful thing to learn.  

FURTHER READING/REFERENCES

For further reading, I read through 'Typographic design, form and communication," written by Rob Carter, Philip B. Meggs, Ben Day, Sandra Maxa, and Mark Sanders.

Fig 4.1 ; Book cover of  Typographic design; form and communication (15/10/2021)

Typographic form and communication

The Typographic grid - A grid used by designers to organize information within a space. Provides strategy for composing text, and other visual elements. 

Type and its relationship to space - Imagine a letterform as a point in a space, a line of text being the extension of a point as a line in space, and a text block as being an extension of a line as a plane in space. Consider;
  • A single letterform, when centered, appears motionless, but when placed off center, it appears to move, as if it were gaining velocity, while approaching the outermost boundaries of the space.
  • Rotating a letter makes it appear to be tumbling.
  • Lines of type are put into motion from the direction of their origin (e.g, this line of text is being read from left to right) the moment they are read. Suggests horizontal movement, unless placed vertically or at an angle.
We are most comfortable with the horizontal. We build our creations in relationship to our environment, that being; firmly grounded by gravity, we are orientated to the earth horizontally and vertically. This is why we feel safest (in design) horizontally, with verticals being more of a challenge, as we are both afraid of flying and falling. 

Fig 4.1 ; Type and its relationship to space (15/10/2021)

Divided space -  A system of proportional relationships. 
To work effectively with a typographic grid, one needs to understand that it is also a system of proportions. It is good to consider the proportion models that have been handed down for centuries; such as the Golden ratio, and the Fibonacci sequence (closely related to the Golden ratio).

Fig 4.2 ; Fibonacci Sequence (15/10/2021)

A square, subdivided into a 256-unit grid of smaller squares opens more room for proportional possibilities and variety. 

Fig 4.3 ; Examples of the proportional possibilities (15/10/2021)

Single column grids
When text appears to be simple, linear, narrative, as one can observe in a traditional novel, it is often best if it were set as a single block. 
Single column grids appear quite unremarkable to the average reader, but is an effective way to craft layouts with the utmost concern being minute detail. This and along with considering typeface, adjusting letter, word, and line-spacing for optimum legibility.

Multicolumn grids
Multicolumn grids contain unique anatomical characteristics; 
  • with margins that provide boundaries for typographic elements, that also define the active space of the page. 
  • They have text columns, 
  • gutters used to separate the text columns,
  • and flow lines that create a dominant axis for the alignment of elements from page to page. 
  • Baseline grid, the baselines for the primary text, a horizontal division of space used in aligning text elements from column to column (cross-alignment).
  • Columns, used in establishing visual pathways.
Fig 4.4 ; Anatomical characteristics of multicolumn grids (15/10/2021)

When working with multicolumn grids, it is essential to balance three interdependent variables;
  • Type size
  • Line length
  • Leading
Interdependent meaning that an adjustment to one, most probably results in an adjustment to the others.

Grids may consist of primary and secondary divisions, e,g; a book consisting of two columns as a dominant structure, with an optional structure of six columns. Adding these concurrent grids provide flexibility, and also enables designers to layer typographic elements (achieves the illusion of 3D space). 

Fig 4.5 ; Example of concurrent grids (15/10/2021)

Modular grids
This grid, compared to the standard columnar grid, allows for opportunities to present more complex information with a higher degree of accuracy and clarity. 

Fig 4.6 ; Example of Modular grids (15/10/2021)

Visual hierarchy is achieved when there is an understanding between the different levels of information and their representation as contrasting elements. The modular grid may seem mathematical, repetitive, and unimaginative, however, these grids should be seen as a system for organizing information. 

A general rule to keep in mind; the more complex the grid structure, the more flexible the organizational possibilities. The process however, is a balancing act between variety and unity. 


Comments

Post a Comment