Communications Studio I, Project 2: Typographic Hierarchy

An exploration of how typographic variables can be used to clarify content based on hierarchy.

Part 1: Type

7 November

starting copy — Acumin Regular, 24/30

(As a note: I tried to play around with placement of the overall text block on the page; however, this isn’t really obvious due to the white-page-on-white-background in Medium)

1: Stroke Weights

As I played around with the different weights, I realized how much subtle differences added up. Contrasting the light weight to the bold weight produced a very different result from using the regular and bold weights. The amount of contrast (thick/thin) between the weights also affected how much the different parts of the content were differentiated. More contrast seemed to imply a greater difference in hierarchy than something subtler.

2: Linespacing

Linespacing physically moved and grouped the content, which made it visually easier to navigate (for me) than just changing the weight of some lines. It was also interesting to see the importance a line of text gained simply by separating it slightly from the rest of the text, though it made me wonder if using linespaced conveyed groupings more than hierarchy.

3: Horizontal shift: two flush-left margins

I found that when I started using two flush-left margins, I easily read “no indent — more important, indent — less important” due to conventions I was familiar with. I tried using the two margins to just group off content like in the linespacing exercise, but I felt this kind of organization more readily implied some kind of hierarchy.

4: Horizontal shift: three flush-left margins

I found the use of three flush-left margins the clearest in showing hierarchy in the content (as opposed to just grouping). This was probably because I had assigned more than two levels of hierarchy to the content, and this allowed me to finally show this graphically. I did notice that, even with the relatively low “levels” of differentiation, the organization of the content overall could start to get unclear (especially with the center experiment). Introducing more factors could lead to more clarity, but also more confusion.

Part 2: Color & Scale

9 November

1: Color

I started with one of the linespacing exercises that I felt grouped the information the most clearly. At first I was interested in how just how adding color two one or two lines (or entire sections) would impact how the content as a whole was read, though I did begin experimenting with using color to show hierarchy.

Adding blocks of color to the background opened up a lot of color options, so I decided to stick with a few colorways to keep from being overwhelmed. Contrast definitely came into play here a lot, with areas of higher contrast drawing the most attention. I also tried to play around with calling out or highlighting certain sections with color, but I think the results may have been slightly too heavy-handed. And again, like the two flush-left-margins experiments, the amount of variations meant organization started getting a little muddy at points.

2: Scale

Experimenting with scale was interesting since I also began moving the text around the page. I tried to put aside personal preferences and what I thought was “best” for posters in order to play around the most with what I could do with scale and positioning. I didn’t really reach the extreme of experimentation, but I did notice how — even just using the same font and weights — the tone/ overall mood of the layout could be radically different. I also struggled with using both different weights and sizes a little; if I made a certain line a very large size, did I also need to make it a different weight, or was its importance already conveyed?

To consider:

  • what do you want to a viewer to notice first? second? third?
  • what’s the viewing distance for each of these levels?

Part 3: Image

14 November

Initial experiments

Even before I started incorporating images into my layouts, I found it a challenge to find imagery that reflected qualities of the poster’s events. I primarily used Unsplash to source my images, but since I didn’t have a particular physical subject in mind it was interesting to try to browse by mood or color, and see what could work well with my copy.

the fire one is very cliché but I wanted to see how text would look on such a high contrast, textured background
some of the more interesting experiments

I ended up pulling from a variety of different images, but wanted to keep with brighter, warmer colors to represent the intensity/ determination in the film series’ subject matter. Actually incorporating the images into the design proved to be a whole other challenge. At first I was mostly concerned with readability of the text when layered on top of an image. As I experimented with different layouts, though, I also tried to consider how the image and elements within the image would interact with the various sections of text. It was particularly interesting to figure out how parts of the image would affect the overall hierarchy of the overlaid text.

Playing with sketches

I also wanted to try incorporating hand-drawn graphics, to try to capture the feel of vibrancy and diversity in the film series. I ended up with a handful of very quick sketches that may or may not have been very effective, but it was interesting thinking through how the graphics could interact with the text layout since I was completely in control of both elements.

I also played around with incorporating one of the sketches into a slightly more finished design with color. These ended up having a fairly different feel from the layouts that incorporated photographic imagery, though I did try to stick to similar color usage.

Part 4: Poster

16 November

Illustration

I decided to continue with one of the sketch ideas, as I felt that it conveyed the tone of the series without falling too much into cliche images or photographs. I also wanted to incorporate more color this time (versus just keeping the drawing grayscale), and tried to stick with a warmer, more energetic color scheme.

variations on illustration

Layout

I began with a very similar content layout to one of my earlier image-sketch concepts. This worked fairly well with the image, though I did have some trouble playing certain elements so that they would both retain their hierarchy and feel cohesive to the piece as a whole.

round 1: initial placement of text (I was struggling with how to arrange the film info & location, particular since they were over overlapping/contrasting areas of the image)
round 2: made some slight adjustments to the image height & experimented with the saturation, played around with header size & positioning
round 2 continued: more title experiments, tried a different color scheme

After receiving feedback on my layout, I ended up returning to the original color scheme and adjusting more individual elements of the poster, including the illustration. I struggled a lot with where to place the location information on the poster, since moving it to the top of the poster seemed to change how it fit in the hierarchy of the overall content.

round 3: moved the leftmost figure down to give the composition as a whole more rhythm, shifted all the content closer to the left edge

Final poster

My final layout ended up being very similar to the original sketched draft I had made, but this was partially due to me illustrating the poster (since I had already had to figure out how the text would work with the image while I was creating it). Printing the poster out also affected the final design, since the image came out slightly lighter than I intended. This made it much harder to read the white text/ film information, an area of content that was supposed to be important. If I was to continue working on the poster, I would definitely try to refine the color use and output, as well as refine the positioning of both poster elements and illustration to maintain the clarity of the poster as whole.

Refinement

I decided to go back in and slightly refine some aspects of the type, as well as the overall color of the poster. I felt that even these smaller changes helped resolve some of the problems of my previous design.

final, refined poster