Typographic Hierarchy (part 3)

Size change & stroke weights

In the first  layout and last layout, conservative changes were made to invoke a sense of hierarchy due to size and weight. In the second layout, more liberty was taken with the letters. Purposeful line interactions were created, most notable in the title. The blocks of events were made up of various scales to create perfectly rectangular shapes. In the third layout, variations in scale made it possible to completely fill the page with text. Although some parts are hard to make out, and even eligible, the impact is strong.

Graphic elements: rules (lines)

In the first layout, delicate horizontal rules were placed under important dates. The rules extend from flush left of the text to the right margin, growing the space occupied by that section of the poster. In the second layout, bold rules were added to accentuate the flow of information. The lines here match the slope of the middle blocks of text. In the third layout the rules are placed to draw the viewers attention to important pieces of information. Without varying the weight or scale of the text, rules stress certain elements, in this case ‘School of Design’ and ‘Admission Free’. In the final design, rules are put in place to support a river; the left edges of the large rules align with the left edge of the primary block of text. The right edge of the rule extend to the limits of the longest line to suggest a more linear right side.

Critique comments: (On the third scale-modulated layout and the first rule-modulated layout).

Scale: Despite the high complexity and busyness of the composition, the meaning eventually comes out. Critics claim that even upon close inspection some elements are truly illegible. However, this illegibility invokes a strong interest.

Rules: The commentary on this composition indicated that the rules were effective in increasing the strength of their corresponding text. The rules could have had a different length to better build a rectangle around the dated block of text.

Typographic Hierarchy (part 2)

Horizontal shift & linespacing: Line spacing is used in conjunction with horizontally shifting the text to create blocks of information. The margins provide levels of importance in some cases, but merely separation in others.

Horizontal shift & stroke weights: Without a linespace, any grouping had to be accomplished with horizontal shifts. By increasing the letter weight in conjunction with shifting the text allowed for a freedom in layout. One such example is the white rectangle intruding on the text in the first design. Another element is the imaginary line splitting the dates and times from the rest of the content in the last design with these constraints.

Linespacing & stroke weights: Linespacing allows the blocking of information. Increasing the stroke of the type provides readability at a distance. At a higher level, each block has some level of pattern or repetition or symmetry.

Critiquing follows:

Critique of single stroke weight/horizontal shift layout
Critique of single line spacing/stroke weight layout
Critique of single line spacing/horizontal shift layout

Critiques given by Deepa; comments are candid and pointed.

Typographic Hierarchy (part 1)

Stroke Weights: The variation in weight provides places for the viewers eyes to jump. The weight also provides emphasis.

Line Spacing: By adding space between the various segments, the content is broken into blocks. By allowing a single line to stand on its own, it recieves extra attention.

Horizontal shift: two flush-left margins: Indents enable the blocking of text. The two layers give separation.

Horizontal shift: three flush-left margins: With three margins it’s possible to get the viewers eyes dancing around the page. The layouts with three levels of indentation provide three means of differentiation.

Final Space and Meaning

Based on in class comments and subsequent manipulation, I converged on the following design.

Space and Meaning: Confusion

I went with this design because although immediately recognizable, the layout invokes some inquiry. The viewer first notices the C dropping below the baseline, then the horizontally mirrored s draws the viewer to the center of the word. Next the subtleties start to come out. The u and n’s are mirrored in the same way as the s and replace each other. Confusing.

Final compositions

Final Squares Composition
Five Squares depicting Comfort, Order, Tension, Playfulness, and Congestion

Comfort: A single square. It’s centered and balanced. The white space acts as a cushy boundary between the harsh black surroundings and the solid, but otherwise vulnerable square. Eyes rest easily at the center of the composition, ensuring a relaxed viewing experience for the audience.

Order: The composition is balanced and tiling. Although obfuscated by the surrounding blackness, the pattern tessellates to create an orderly checkerboard. This composition is vertically, horizontally and rotationally symmetric, adding to the feeling of control and governance.

Tension: Nine squares are organized into a neat gridded arrangement with consistant spacing. But there is something astray. The left, middle square is subtly out of line, causing an uncomfortable distraction. It breaks the mold, but not blatantly. Drawn to the pattern, viewers are upset by the small misstep of the one unruly square and they are caught in turmoil, inquisitive as to intent of the composer, “Did the designer mean to do that?”

Playfullness: Reminiscent of childhood imagery, this composition is bright and fluid. The figure creates an easy curve, encouraging the viewers eyes to dance around the composition.

Congestion:  Regular entropy; the composition is constructed to provide an even distribution of randomly placed elements. The white space is crowded by the black figures. Viewers feel cramped and confined as their eyes are entrapped in the tight white corridors created by the constraining squares.

Voice of Typography

infatuation_bauhaus_93
Infatuation set in Bauhaus 93

Bauhaus – a decorative typeface with constant width. The lack of variation in thicks and thins does not match the emotional response warranted by infatuation.

infatuation_blackletter_686
Infatuation set in Blackletter 686

When set in blackletter, infatuation is contextualized as being in an epic, medeval tale of romance. It’s handwritten nature provides a sense of intimacy that matches the meaning of the word.

infatuation_bodoni_bt
Infatuation set in Bodoni BT

In Bodoni, a vertically-stressed typeface, there is minimal inflection given to the strength of the word. However, the variations in thicks and thins and the slight ornamentation provided by the geometric serifs do add to the meaning of infatuation.

infatuation_dead_history
Infatuation set in Dead History

In Dead History, infatuation reads as a grungy realization of some scene. As if being spoken by a stalker in a crime novel, this typeface invokes a feeling of discomfort amongst otherwise balanced typefaces.

infatuation_edwardian_script_itc
Infatuation set in Edwardian Script

The most romantic of the type settings – Edwardian Script provides elegant ligatures to unify an engulfing emotion brought to light by the word infatuation.

infatuation_fat
Infatuation set in Fat

The title of the typeface, Fat, has more emotional drive than the typesetting itself in this case. There is little alignment between the extreme contrast and density in the letters and the inflection of the word.

infatuation_garamond
Infatuation set in Garamond

Garamond provides a straightforward and formal appeal to the word. This font would be well suited in a lengthy, modern work of fiction.

infatuation_helvetica
Infatuation set in Helvetica

Modern, linear and neutral – poorly correlated to the strong emotional pulls of infatuation. As renowned, Helvetica doesn’t provide a specific emotion to the word itself, but the implications of emotionlessness are not working with communicating the thought of infatuation.

infatuation_minion
Infatuation set in Minion

More precise than Garamond, Minion provides a more tightly kerned and therefore more intimate connection between the letterforms.

infatuation_myriad
Infatuation set in Myriad

Sans-serif, like Helvetica, Myriad is contemporary and clean. However, Myriad invokes a little more air and flexibility. The modernity of the typeface does not fit terribly well with infatuation though.

Thinking with Type – Letter

  1. How did computers change typefaces? How were they made before computers? And after? Typefaces were changed with the proliferation of computers due to the discrete pixel rendering inherent in digital displays. Typefaces for computers started as a pixel by pixel basis, and would display correctly only at very specific sizes. Later, advancements such as anti-aliasing and vectorization allowed for smooth on screen fonts that resembled physical type blocks. Before computers were ubiquitous, types were made by hand, carefully crafted with pen, paper, and etched into press-blocks.
  2. What is the anatomy of a typeface? What are all those little bits of letters called? A given letter contains various aspects, for example many types have serifs which are little protrusions on all letters that are an artifact from handwritten letter forms. All typefaces have a baseline, an x-height and a cap-height. Most letters perch on the baseline, the x-height is the distance from the baseline to the top of a lowercase x, and the cap-height is the height from the baseline to the top of a capital letter. Letters that poke through the baseline have ‘descenders,’ and likewise lowercase letters that extend passed the x-height are ascenders. The negative space within closed letters such as  ‘o’ or ‘e’ is called a counter. A round end to a letter, such as the top of an ‘f’ is a terminal. A terminal augments are serif typeface, and is not usually present in sans. A sharp and to a letter, as if written by a pen trailing off, is a finial. An example of a finial is the loose end of the letter ‘e’.
  3. How do designers choose what font to use? Designers choose a font based on the message they are trying to convey. Every font has its own associated emotions, and a keen designer will choose a typeface that enforces the literary message of a chunk of text. Otherwise, a font may be chosen to lack a specific response, such as when designer’s choose to set work in Helvetica. However, it is rare that there is such a plane message that can not be complimented with a well chosen font.
  4. What is a type family? What are its parts? A type family consists of a collection of fonts that all contain the same bones. A type family may consist of different weights of the same typeface, from light to ultra-bold. Likewise, letters may be modified for a condensed, or italicized member of the family. Throughout the family, elements of the typeface carry through such that the defining elements of the characters persist.
  5. Remember one font from this reading, or elsewhere, that you like. Find the name. Think about why you like it. Futura is an awesome typeface. Although not the most readable, the uniform weights and pure geometric shapes are well suited to creative arrangement. The font is simple, but clear and has a bright, modern feel to it. Between the perfect circles and sharp points, Futura can be a little oppressive as the body of a document, but for titling or other general purposes, Futura is a cool font.

Tracing typefaces

AMB garn in various typefaces
Tracings of Garamond, Helvetica, Bodoni, and Futura.
AMB garn set in various typefaces.
AMB garn, as composed in Illustrator for tracing.
  • What are the differences between these typefaces? What do they have in common? What is unique to each?
Futura and Helvetica are first and foremost sans-serif typefaces. Garamond and Bodoni are serifed. Futura and Bodoni both have strong geometrical features – Futura with its circular g and a, and triangular and pointed A and M, and Bodoni with its purely rectangular serifs. Garamond is more organic than any other of the typefaces in this selection, with its bracketed serifs and lightly italic form.
  • Where do they get thick or thin? Which ones have a lot of contrast?
The thicks and thins within the serifed fonts are motivated by a nibbed pen. The sans-serif typefaces have less variation in thicks and thins, comparatively. Garamond and Bodoni have the largest amount of contrast, followed at a distance by Futura. Helvetica has the least contrast of the group.
  • What is the angle of stress for each?
The angle of stress for all of these typefaces is vertical with the exception of Garamond. Garamond has a more acute angle of stress, as is characteristic of Old Style typefaces.