Open Sans
Open Sans Spread
This next project is all about delving into a typeface. Mine happens to be Open Sans, a very very commonly used font throughout both web & in print (although from what I’ve seen it’s more prevalent on the web). So we had to write an essay & also a short statement about it & while all the technical, kind things about this font are in the essay, I just have a need to say that there are a lot of Open Sans haters out there. While I was doing research on this typeface, it seems like a lot of designers (I’m not sure if they’re all actually designers) have very negative, strong opinions about it. Personally, I think I just don’t really like Humanist fonts so I don’t really like it. But I think these people just have a vendetta against it because it’s overused. But like I saw somewhere, it’s difficult to find a typeface that is both well-designed & FREE. So no wonder everyone’s using it.
Spread iterations
I started by doing just text to see how different layouts would look. I haven’t worried about image yet.
I don’t know how to choose an image for “neutral” or “friendly” so I found a bunch of random things that made me think of my adjectives that I initially started with to describe Open Sans
i dont know what to do with my images (this is placeholder text for some actual real thoughts on images coming soon)
The images I chose to use relied on the words “natural” a little too much. Yes, I think the letterforms are natural looking because of certain curves, but having fruit or plants or anything “earthy” gives the wrong impression. As I was talking to Vicki, she suggested that the picture of the circle window was a better direction to go with for images. The circle is a “natural” shape, but it’s still man made. The angle of the photo adds “organic” back into this perfect shape because it warps the edges a little. The cross in the middle of the circle just relates back to the fact that whatever this photograph depicts, is a structured, man-made object.
Also, I was under the impression that we were supposed to use the other typeface that we had gotten to practice typesetting for the spread as well, but I was wrong. So I basically started over after these iterations & started using open sans for my text.
I personally really enjoy looking at letterforms & seeing how they can be manipulated using scale & color to create an “image”. I think I explored that a little bit in the last project, but I felt like for this project, since it’s literally all about the typography, it would be extra appropriate to keep going in that direction. So I stopped playing around with image & went into Illustrator with Open Sans.
From what I know about typography, “O” is always a good letter to start with since it includes the stroke contrast, stress, & x-height. Open sans is also sans serif so I didn’t have to worry about how the serifs looked. “O”s are also pretty close to circles which I think allows the letter to lend itself to becoming this image on a page, which was what I wanted to do with my spread anyway.
I started very simple, with just a big O in the background, open sans in the middle, & text on the right hand side of the page. As I was working with the text, I felt like it was too long to nicely fit in the page, so I shorted it A LOT to make room for the other elements of the page.
Then I started to change the colors & add more things to the page that would help the viewer see the different aspects of open sans without having to actually read the article.
I started off by keeping the O at the left end & then putting 5 different h’s on the other side, in the 5 other weights to show the range of weights open sans offered. Then I put “yea” at the bottom just to make it say “ohhhhh yeah”. Making it a little humorous so that it would draw the viewer in. I wasn’t sure if that really communicated anything other than the weights, or if it was truly necessary to the spread, so I decided to also make another version of the O but with open sans inside the counter of the O where I would show the x-height, stress, contrasts, & all those aspects of the type using the characters included in “open sans”. But as I was doing this, it started to look kinda messy & too small for it to really include all the information that I wanted to include.
As I was making spreads, I simultaneously was still looking up how open sans was actually used. Where it was used, how it was formatted, how much it was used, etc. I started to notice that it was frequently used in a very similar way; first of all, lots of websites. I saw some print examples, but not nearly as many compared to the amount of websites. Within the websites though, open sans was usually formatted in the same way. It was consistently used as body text but it wasn’t very tiny. There were usually moderately long lines of text that served as captions or descriptive phrases. Because this was such a stand out usage of open sans, I decided to change the concept of my spread to be web-focused.
I thought a good way to show that it was primarily used for websites & web-based materials was to incorporate code into the spread. I felt like using code would be a inexplicit way to show that open sans is web-heavy/web-friendly, but also a way to show that the origins have its roots in internet history, & that using open sans in a website is accessible to anyone.
I started off by typing out what the code would look like & then putting the actual essay text inside. I made a few iterations where it was first just code, & then I decided to put in a title & I had it on the left side. But, I still wanted to incorporate the actual “open sans” as a way to show the qualities of the typeface so I created a diagram for it. Then, as a way to put captions for each part of the diagram, I chose to depict them as “images” in the code by listing a few at the bottom of the page. I knew before I did this that white text on a black background wasn’t the most readable, so I tried to tone down the black a little to make it grayish, & then the white text was a very light gray over top. The color palette for this concept is the google colors (red, blue, yellow, & green) as a way to allude to open sans’ history. I decided that it being a part of Google Fonts was particularly important to its description. Even though it’s not Google’s official typeface or explicitly affiliated with Google, the importance of Google Fonts is that the fonts included are open source & free, the reason why this typeface is so prevalent on the web. & therefore, I decided to stick with those colors for this spread & all the spreads afterwards too.
After talking to Vicki & Andrew about this concept, I had given up on the code concept. It, first of all didn’t really correlate with the essay that I had written about Open Sans & because of that, wasn’t the best vessel to communicate the typeface with. It also was pretty overpowering because of the black background, extraneous coding information, & the secondary typeface I had used for the code text (Courier New). They had suggested maybe making a new version with black text on white to see if that would make it a stronger piece, which I tried, but it didn’t look any better, & also didn’t resolve any of the bigger issues about communication. After looking at that “O” spread, Vicki suggested I go back to that kind of concept.
I had a few spreads that I had made earlier that included blown up versions of letterforms on them, but they were all really messy & not very interesting looking on the page. Either way, I focused on the O, n, & b with my initial concepts. The lowercase “n” has a lot of characteristics all in one letterform. It shows x-height, stroke contrast, wideness, stress, & also the terminals. The lowercase “b” shows all of what n has except it also shows the ascender (the d, p, & q are also pretty equal to b).
I made a lot of art boards where I blew up those three letterforms & tried to show the aspects of the forms in a very highlighted way. My initial drafts were very O heavy, with a few n & b artboards sprinkled in. There was also a few where I spelled “open” but I played around with the scale of each letter to create an interesting composition.
When I showed the concepts to Vicki, she said that the ones with “open” spelled out were the strongest compositionally, but weren’t clear because of the placement of the e & n. I also really resonated with that composition so I decided to move further with it. I had put the body text on the backburner for this part of the project because I was getting committed to this “no image” idea, & since I had made a lot a lot of cuts to my original essay, I was already planning on it being only one column, not super intrusive to the spread. I settled on a few iterations I liked compositionally & started putting the text in. I didn’t realize how intrusive the text was actually going to be in a few of them, considering how big I had made all the letters. So I decided to shift the scales a little bit to fit the text in & still maintain balance.
When I introduced body text, I tried doing some with everything just in one column, but I thought that didn’t create enough interest in the page or hierarchy overall, so I separated the first paragraph from the rest.
Everything until this point was purely black & white, which is fine, except I felt like the large letters served no real purpose other than to decorate the page. Which, I guess it’s true, I was using the letterforms to replace an image. Even though specific characteristics of open sans were highlighted in those forms, they weren’t being called out enough to be as useful to the page as they could be. So I highlighted different aspects of each letter with a color taking up a segment of the form. I stuck with Google colors for my color palette & I was nervous that it’d make it really Google-y & obviously affiliated, but I feel like the colors were used pretty minimally to the point where it wasn’t so in your face Google.
The captions were different in each version. I tried one outside of the shape, one inside the shape, & one inside the shape but the text color correlated with the highlight color on the letter.
After showing these versions to Vicki, the biggest issue was exactly that, everything was far too big. The text was 10/15, which I thought would be too small maybe, but it was actually a little too big to look like it was part of print body copy. The captions were 9 pt, which Vicki pointed out would be a better size for the actual text. She also suggested not separating the first paragraph from the rest, even though it did show the order in which everything should be read. But separating didn’t really make sense for the type of writing that it was.
The highlighting on some of the shapes didn’t communicate what I was trying to say about them in the best way either. On the “p” the descender has this little sloped in area nearing the joint of the letter. I highlighted that with a horizontal stripe on the descender, which works, but more highlighted the width of the descender rather than the shape of the slope. With the letter e I tried to show x-height by putting a vertical blue stripe down the middle. However, just having a line doesn’t show the comparison between the cap height & the x height in a clear way, all it shows is the middle of the e, especially since the top & bottom of the letterform are curved.
Also mentioned, putting a “sans” somewhere in there instead of just leaving it as “open”. The large letterforms can serve as an image, examples, & title all in one.
Using this feedback, I decided to first figure out where I wanted to put the “sans”. I figured that sans could include a capital S which I could then compare to another lowercase letter & fix the whole x-height representation thing. However, finding a spot for sans was a challenge. Not making everything look awkward, not cutting off too much of the letters, but also cutting them off just enough that it would create balance throughout the page. I also didn’t want to concentrate too much of the letters in one area, because even though the forms created interesting white space around them, I was worried about the body text looking too closed off & looking like it was contained behind this fence of black lettering. I wanted to keep the open feeling that the first iteration had. I made a decision to make the letters super big, but I didn’t want it to overwhelm the page & take away from the actual text. Throughout the process of making this, I had to constantly remind myself that this wasn’t a poster, but it was supposed to be a readable book spread. It was important to create something interesting, yes, but I felt like if this were to be a real book spread, it should maintain certain book-like elements to it (that was a large reason I set the body text the way that I did. Therefore, keeping the open space & not putting too too much color throughout the page, even though I could’ve made the background color something other than white, I felt like wasn’t necessary & didn’t enhance the composition on the page or the actual text.
The colored highlights didn’t change drastically, other than the x-height one. The “p” I had changed from a horizontal stripe to a vertical one so that it could follow the slope created on the descender. Now, even from a distance, that subtle angle is easily seen with the contrast of the green on top of the black. The x-height, which I struggled with in the composition, ended up being a comparison between the S & a in “sans”.
All the lowercase letters were the same size but I thought that it would be an overwhelming presence of blue if it spanned the entire word. So what I decided to do was fill in the entire letter a in blue & just cut off the part of the S where the x height ended. I tried another version where the bottom curves of the S & a were omitted from the blue highlight, but it was far too small of an area of black on the a for it to look like the blue was a segment rather than an illustrative mistake. So even though filling in the entire letterform isn’t technically accurate, I feel like it does communicate the x-height in a clear way.
After I had resolved the main title part of the spread, I started working on the column of body text. First I made it one big column & made the O in the first sentence big to indicate a starting point. I had tried leaving it as is & looking at it from different distances, but it still looked off, just having this rectangle box in the corner. I think if this was an actual book spread within a bunch of pages it wouldn’t be too hard to figure out that’s where you should start to read, but since this is a stand-alone spread, I think adding the bigger sized letter to start communicates the text a lot better, from a number of different distances. I messed around a lot with the type size because there were always these random orphans at the ends of paragraphs, or the rag just turned out wild, but after going down to 8.5/10, I think that text space has a really nice shape to it & sits comfortably in the corner.
I wanted to keep the color incorporated at least a little bit with the captions. Making the text the color of each highlight seemed too much for what it was meant for & made it all look kinda goofy. After looking at the initial spreads, I also gave up the idea of putting the captions right next to each letterform because I felt like putting even those little boxes of text really did not mesh well or add to the composition of the title in a pleasing way. So instead, I decided to color code/number each highlighted area with a tiny circle & then below the body text, have each caption correlate to a colored number. I felt like this style kept the spread feeling open & still playful without being messy.
The page numbers were present throughout a few of the earlier spreads & I decided to optically place where the numbers would land. I consistently kept them aligned to the inside & outside of the grid, but in terms of where they were placed on the bottom, I left that up to my eye, especially since this was a stand-alone spread & not a series.
Reflecting on the final spread, I wanted to communicate the simplicity, technical characteristics, & webbiness of Open Sans. Keeping the spread mostly black & white I think helped a lot to communicate the personality of the typeface. Adding a tiny bit of color to it & keeping it the Google colors was enough in communicating the web heavy nature of it as correlating to the essay. I personally really like how much white space there is on my spread because it doubles down on the simplicity & versa
Open Sans Video
The next part of the assignment was to create a 1 minute video out of Open Sans. Similar to the spread, it’s an overall description & representation of the typeface, except this time we get to use time & motion to tell the story of the typeface.
This is the part where we get to use that 50 word thing that we wrote alongside our essay, as a starting point for our storyboards. I didn’t really like the 50 words I came up with to tell the story of open sans because I didn’t think it was super interesting, but also I don’t really like open sans all that much as a typeface. I really didn’t want to sit there & make a video about how amazing & perfect the typeface was.
Instead of drawing out my storyboard at first, I decided to refine the script so I could figure out exactly what I wanted to say about open sans. I knew I wanted it to be somewhat critical of open sans, but I didn’t want the video to be overly negative & thus not entertaining.
First draft:
An easy go-to
A one size fits all
Open Sans
Designed by Steve Matteson
Released by Google Fonts in 2011
Adaptable
Flexible
FREE
Vertical stress
Minimal stroke contrast
Wide/round
heads/spurs triangles
ascender/descender slope in at joints
Optimized for web & print
Legible at a lot of sizes
Versatile
& yet it’s just… ok.
Overused
Emotionless
Warped
but it has a large x height
cheers on being able to read one of the most boring typefaces
Feedback:
My script goes very negative at the end but also drags on unnecessarily. Vicki suggested I stop at “ok” so that the viewer is left to think about how it’s simply an ok font. Her advice on the actual story board was to keep things simple, pull in characteristics from open sans to inform the visuals of the storyboard.
1st storyboard:
Feedback: Things are just way too big, & everything looks like it’s screaming. Some of the parts “adaptable”, “versatile” kinda drag on & aren’t necessary. The header/body text section doesn’t fit the other sections, it’s the first & only time I ask a question & it would be better to just take that out. Maybe only have one free, it’s enough. Also thinking about transitions, how is it going to go from one color to the next. That especially goes for the web/print section. The expansive section doesn’t make sense, it just looks like I switched to Russian for some reason. Similar to how the big is way too big, the small is also way too small.
At this point, I started to feel really unconfident about my script, I didn’t have a visual in m head at all for where this script was going. I had tried making thumbnails in Illustrator for what I thought things could look like, but nothing felt well realized as I was working. So I stepped back & kinda went back to square one. I felt like the script was unorganized & not informative in the way I wanted it to be. So I started off by looking at all the characters in open sans & made a list of all the characteristics I noticed. Then I created an outline & then filling in the blanks with information.
Characteristics:
Optimized for web & print
Legible at a lot of sizes
Versatile (5 weights/italics/alternate characters/those other characters)
Overused
Accessible
Neutral
Human-y but also geometric-y, it’s a bastard
friendly/welcoming
emotionless
Dopey
Free
The caps & mins honestly dont match idk
widely for both body text and headers
“One size fits all”
Bottom terminals vertical/top terminals angled
Vertical stress
Wide
Caps
B is the only letter with distinct stroke contrast, it’s just not a thing
Optically very straight
Mins
Curvy
More distinct stroke contrast
heads/spurs triangles
ascender/descender slope in at joints
Tall x height
Apex triangle
Ear triangle
Oval tittles
Outline:
Initial information
Origin
Objective
Name
Anatomy
Application
Qualities
User response
2nd script:
An easy go to
One size fits all
Medium center of the screen comes on line by line
Open sans
Push to the side
Appears on the screen
Designed by steve matteson
Released by google in 2011
Make open sans smaller
Lines come from bottom
Widely used for web & in print design
Scroll down black screen, Code thing right side, “widely used on the web”
“Printing” from right to left
Five weights with matching true italics, containing 897 glyphs
“n” big on side with five weights matching true italics
Line by line other glyphs
But it’s also.. FREE
Small on side FREE big
$0
Large x height for maximum legibility
Oo
Minimal stroke contrast enhances humanist qualities
Wide apertures/counters creates natural shapes
Terminals are angled adds consistency to the typeface
Ascenders and descenders slope in at joints to create distinct features
Popular
Simple
Neutral
Google’s #1 typeface
& yet it’s just.. ok.
This time I decided to add what I envisioned as the storyboard under some of the lines just to make the storyboard making process easier.
2nd storyboard:
Feedback:
The small type is too small
Have more consistency
Too many colors
Figure out transitions between boards
Take out the background in the web section
Keep the “free” simple, don’t need to add the $0
Have all the captions for the characteristics section be on the same baseline
Final video:
The song I picked had strong beats in it so I wanted the flow of the video to follow the sound primarily. Because of this, there were a bunch of last minute changes I made to the script to make the narrative clearer, but also so that it could better follow the music.
My final reflection on the video, I wanted to make something fairly simple for the video & a little critical to show my opinion about it. I think the video was pretty simple looking, although it was tough to have everything line up the way I envisioned it. & when the video was playing in the final, when that final “ok” came up on the screen, I heard a few “what”s in the crowd, & I didn’t really know how to feel, but a classmate came up to me afterwards & told me that they thought it was interesting how I said that the typeface was just, ok, in comparison to other videos glorifying the typeface.