typographic hierarchy

Sabrina Zhai
7 min readSep 11, 2018

Before any exercises, I divided up the text into four sections: title, name of band, date, and extra information.

Stroke Weights

I started off with highlighting the first two types of information: title and everything else. Because the title is generally bolded, I made the stroke weight thicker. However, because it was only one line of information compared to an entire text of differing levels of importance, this was pretty weak.

Second, I began to differentiate between the name of the band and the dates. I kept all other information (title and extra info) the same weight as the band and the date, respectively. This was a little better but I started to play around with it. My first attempt I used regular and light. Then I changed the light font to ultra thin, making the differences more extreme. Remembering that Andrew mentioned to use thin stroke weights with larger text, I decided to use it on the title as well, making the name of the band the only item on the list with a thicker stroke weight. This is because generally the title is the larger despite it being all the same scale here. This change allowed the name of the band to be highlighted against everything else. To take a step even further, I made the name of the band stroke weight medium, which made the contrast even more stark. I realized from doing this that this really highlights the name of the band which helps when that is the most important information on the list (wanting to know which bands to listen to). (This would not be the case in a pamphlet or brochure, where the date and time would become more relevant. I also noticed this worked better because the name of the band and the date is something that is repetitive across the entire list whereas the title and the extra information acts more like headers and footers, appearing only once so they do not stand as much out and thus I deemed not as important to highlight.

Linespacing

For line spacing, I began with keeping the name of the band and the date all together, as this was the biggest chunk of repeating information, and separated it by: title, name of band + date, extra information. This helped differentiate more things as compared to the line weights (the line weights only left room for two differences), but the big chunk in the middle was still confusing. I then took the same one and decided to separate it by date. So the chunk in the middle would be “name of band, date” so each event was separated. This allowed for the date to become the “extra information” within each section and allowed for the band to be highlighted and given attention.

I also tried separating the big chunk in the middle by year, so there was a space between December and January, which helped make the big chunk of information a little smaller, but not by much.

Lastly, I separated by each category, so every change in “title, name of band, date, and extra information” I put a line space. However, this was too much spacing and rendered the emphasis of a linespace useless.

Horizontal shift: two flush-left margins

Having two columns allowed me to play with how the eye reads the text. In my first try, I was able to give it an illusion that the band name and the date were on the same line by having a huge tab space. This made it easier to connect the information if desired. I also tried to separate the information into more column like, but had little success due to the lack of linespacing. Everything looks more cluttered and the the second column looks more like a detail to the first. I then tried to separate the details (the dates) with two tabs but the results only help the hierarchy a bit.

Horizontal shift: three flush-left margins

By having three columns, the information can be further spread and the separation becomes much more distinct. This allows for an easier way to define the different information, but because it is done in a way that is not exactly traditional for a poster of concert schedules, it looks a little awkward to the eye.

Next Steps: Poster

In creating the actual poster, I struggled with conveying the idea of “folk music” in order to bring out the spirit of Calliope Concerts. I played around with different types of imagery, both literal and abstract, as well as the way the text was given to me.

I first used various photographs in the background of my poster to convey this, but ultimately decided it didn’t really correlate with my text; it felt like slapping an image on the back of everything.

I also tried putting the artist/band and the date all on the same line…

…but ultimately scrapped this idea.

I played with shapes, trying to mimic a record player:

Colors aside, I felt like the shapes were too modern to fit the vibe of my poster.

I began playing with shapes next, drawing random, squiggly lines around the text that I had laid out.

From the critique on Tuesday, I decided to move further with my lines, but in a way that could evoke the sense of “folk”. I went back to the basics, and made fives squiggly lines, mimicking the guitar strings but still staying close to the original squiggles I had. I added circles to complete the idea of a banjo or guitar, but kept it off center to stick with the abstract imagery I had before.

I also thought about making one of the guitar strings orange in order to spread the orange accent color around a bit, so that the blue imagery of the strings wouldn’t looked slapped on, but instead incorporated within the poster.

After finalizing my imagery, I continued to refine the hierarchy of my text.

I was deciding between staggering my blocks of text with the musicians and dates; I felt like having them aligned was easier to read and followed the rules of hierarchy better (two columns) while having them staggered helped the over all composition and gave the poster most movement.

I also thought about overlaying the title with the lines, because I thought it helped with the imagery and composition, but thought it made the title a little harder to read (especially a crucial part: the initial letter) and aligned it with the bands instead.

As for the year and the extra information, I also struggled with deciding to keep them together or separate (like in the third image). I tried following my original layout where I had two even columns and the date and extra information just followed it, but because I now had the added imagery of the guitar and the circle, it offset the year. Therefore, I decided to move the year back to the top with the title, and aligned the extra info with the circle.

Andrew also mentioned that because of the shape of a letter, although they could be aligned, the designer may need to manually adjust it so the eye is fooled that they are aligned. Because the letter ‘C’ has a lot of spacing on the left side, I intentionally nudged my year and my left text over a little bit so they’re off-aligned, but visually have more of a similar alignment.

--

--