Typeface: Garamond
ABSTRACT
{to be updated}
RESEARCH
A compilation of my research on typography terminology as well as the history, unique characteristics, and uses of Garamond. Andrew mentioned looking into some of these topics:
- Use (current/intended)
- History (when/where)
- Family (side note: pro means that it has full feature set)
- Cultural implications (get drawn by many people?)
- Similar/related faces
- Classification
Typographic terminology:
General Information on Garamond:
- Garamond is an old-style serif typeface that was created by engraver Claude Garamond in the 16th century.
- Often used for printing body text and books
- Letters with relatively organic structure resembling handwriting with a pen but slightly more structured and upright
- Decline in popularity in 18th and 19th century, people tried to revive/develop different Garamond styles
- Many “Garamond” revivals are based on the punch-cutter, Jean Jannon, whose work commonly was misattributed to Garamond.
- Modern Garamond revivals have a matching bold and “lining” numbers at the height of capital letters, which was not present during Garamond’s time.
History of Garamond:
- Garamond displaced blackletter or Gothic type which was used in some early French printing.
- Lead contemporary export on French Renaissance painting consistently used Garamont (Hendrik Vervliet)
- Roman designs of Garamond, the most imitated font, was based on a font around 1495 for the Venetian printer Aldus Manutius. This was used in the book De Aetna, by poet and cleric Pietro Bembo, which was Manutius’ first printing in the Latin alphabet and won him international reputation. French typefounders saw this work as a source of inspiration.
- Garamond was first adapted from the font called De Aetna, and was first used for a book titled “Paraprasis in Elegantiarum Libros Laurentii Vallae”
- 1520–1560 (encompassing Garamond’s career), 1530–3 first Roman types designed by Claude Garamond
- Adobe’s Garamond release contain Greek designs that compromise between Garamond’s upright Latin design and his slanted Greek ones
Revival of Garamond:
- Most common Garamond is Monotype Garamond. This version was developed in the 1920s and used in many Microsoft products. (based off of Jannon’s work)
- Garamond we use today: Adobe Garamond (1989), Adobe Garamond Pro revamped in 2000
- Font used in Dr. Seuss, Harry Potter, Hunger Games series, Google’s original logo, Abercombie & Fitch logo, Apple’s Think Different Campaign
- http://www.neutrogena.com/
Distinct Characteristics:
- “e” — small eye, popularized idea that cross-stroke should be level
- “a” — sharp hook upwards at top left
- “M” slightly splayed with outward-facing serifs at the top (left)
- “R’– leg extends outward from letter
- Low x-height (height of lower-case letters), making capitals look relatively large
- Top serifs on ascenders of letter have a downward slope and ride above the cap height (Ex. d)
- Axis of some letters is diagonal (Ex. o)
- First to deviate from handwritten-style to make letters readable for printing
- Thinner and more delicate letterforms, which allowed ink to bleed on the page without distorting the words (uses less ink)
- Apertures/counters are smaller than average, closed off earlier at the stem
- Contains low line contrast
- Serifs have slightly cupped bases, serifs on the top of a character are sloped downwards, terminals are brush-like, rounded on ends
- Large difference between cap/ascender and x-height
- Oblique apexes
- Evokes elegance, airiness
- This member of the Roman type family has survived the centuries because of its remarkable readability. As one of the oldest typefaces, Garamond conveys a sense of solid tradition, yet still soft and attractive thanks to its elegantly rounded serifs and its diagonally emphasised strokes.
Typefaces/Variations:
- ITC Garamond
- Garamond 3
- Adobe Garamond
- Monotype Garamond
- Sabon Next
- SG Garamond
Sources:
- http://courseweb.stthomas.edu/mjodonnell/cojo232/pdf/type2.pdfhttps://i.pinimg.com/736x/5c/6b/8c/5c6b8c91345b375dfb837f91c806067a--typography-books-creative-typography.jpg
- https://i.pinimg.com/originals/56/bd/89/56bd8979bc7eb19f804d870de1cbf5cc.jpg
- https://www.nextdayflyers.com/blog/bembo-garamond-bodoni-old-fonts-still-in-use/
- https://www.fastcodesign.com/3028436/why-garamond-wont-save-the-government-467-million-a-year
TYPEFACE/TYPESETTING SPREAD
Before starting this project, we did an exercise of printing out different sizes and linespacing of a font to determine the best combinations. I decided to apply the same process for picking a size and spacing for this spread. I chose Futura, a san serif, for the body text to compliment the old style serif Garamond. I thought this font would be appropriate since Garamond’s serifs would stand out more.
I created very basic spreads with in-line images and neat columns. (In retrospect, these spreads look very standard and textbook-like.) I experimented more with the different stroke weights, sizes, and spacing to see which combination looks most legible in print. I found that text spanning one or five columns was too little or much respectively. Also, the bold Futura text made the paragraphs too heavy and detracted from the Garamond title/headers. The amount of text about the font constrained some of this experimentation and I had to edit information here and there.
After showing Vicky my initial spreads, she noted how my images were all very literal displays of the type. She suggested that I try to find images that represent and communicate the mood of Garamond. For instance, slab serifs are very industrial and mechanical, whereas bodoni has thick and thin characteristics. She said to not be afraid to break the margins and rules of a standard spread.
When thinking of Garamond, I thought of the following adjectives: classy, professional, and elegant. Garamond’s downward oblique serifs, and thin lines reminded me of a martini glass shape.
Andrew pointed out how the strong contrast and repetition of the glasses could be distracting the reader from reading spread’s actual content. The image should be supporting the content, not taking away from it. He said there might be more potential in the cropped images of the glasses.
I also tested out photos that portrayed the traditional, delicate, and airy aspects of Garamond. However, I did not think these photos captured the essence and characteristics of the text as well as the martini glass.
Notes on Principles of Design presentation:
- Readibility comes first
- “Good design reduces the effort of reading as much as posisble
- Unity/Harmony (proximity, similarity, repetition, rhythm) planes, large type, alignment (reiterated), use of scale , continuation of pattern — timeline?
- Balance (symmetry, asymmetry, radial symmetry– nyt spreads)
- Hierarchy (tress, nest, weights, common hang line, 3 column grid, choice of type/color tied together)
- Scale/Proportion (size, ratio, division)
- Dominance/Emphasis (where do you want the eye to be drawn first?)
- Similarity/Contrast (light & dark, line, texture, forms)
Things to figure out:
- what am I trying to communicate?
- what content do I need to show?
- what do I want people to remember about this typeface?
- how can I balance showing a somewhat abstract image and paralleling the features of my type?
- how do I want to handle captions?
I experimented further with the images and tried to highlight more of the letterforms, using scale, proportion, and repetition to unite the spread. However, I received feedback from a fried that a “g” alone looked too out of place. Additionally, I need an image to accompany the strong display of letterforms.
Before moving forward, I wanted to try out more sizes and spacing of text since I felt like I had not fully considered the different options.
I still concluded that two-columns of text showed enough characters in a line to make things easy to read.
I decided to keep playing with the martini glass concept and used letterforms to frame the page, so that there could be some sort of comparison between the image and typeface. I chose “G” and “d” for the first and last letter of the word Garamond.
I changed the color and moved the picture around the spread. I also tried two columns of text since it is similar to a newspaper-style, which ties in with the traditional feel of Garamond. I thought that the image at the left-side of the page drew the eye too much to the bottom and prevented a clean flow of information.
I also decided to use italics to credit the photo and text since it would show another version of the type and would communicate something separate from the content on the page.
I tried showing an entire display of the typeface (numerical numbers and letters) to allow a comparison between image and letterform. This format seemed too low-key/small and was not effective in creating a strong connection between the two items.
I kept trying to make a harmonious display between letterform, image, and color. I decided that showing big versions of the letterform was a clear way of tying in the image-letterform comparison since the shapes are relatively similar sizes. I especially though the big “d” would help draw out the wine glass connection because of its long ascender and backward sloping serif.
I received feedback in class that:
- Image is the most saturated and abstracted element of the spread. Due to it’s high contrast from other elements of the spread, it is the first thing the viewer looks at and becomes the element of most importance
- The uniform treatment of the text unifies the page
- Even when the number of columns used shifts and subtitles are added, text is harmonious, readable, and pleasing on the page
Changes to Consider:
- Negative space between sections of content unifies the viewing experience, except for the space between the “d” in the lower right and the “uses” paragraph, so consider making that spacing harmonious with the other space and reducing the tension in that area
After returning to the spread, I thought that the colors seemed a bit off and changed it to something that would match the image. I also realizes that I preferred the “g” over the capital “G” because the roundness of the letterform matched the bowl of the “d”. I played around with these round shapes to help create a flow through the spread.
I changed all the text to two-columns to make it feel more cohesive. I also wrote the full text of “garamond” for the title since it was no longer clear that the form of the “g” is a “g”.
TYPEFACE VIDEO
Key elements to keep in mind when creating the video:
- Visual voice to the piece of information and message. For example, how do you play up the elegance, geometric qualities of your font? Do you point to history? What feel/atmosphere do you want to show?
- Stage is the screen. Decide three things about every actor (word/letter/punctuation/image): how do they appear (fast/slow), their performance (move/fade), how do they exit?
- Performance (time based). Play motion in mind over and over based on intent. What is the sequence and narrative? What’s going to make your video stand out from other videos? How do you move big elements very quickly?
- Rhythm and pacing. Can you understand it? Does it make sense? Can you read it?
- Sound is suppose to communicate mood and feeling.
The length for this video (45 seconds) is not a lot of time so what is the most important things to emphasize?
As directed in the prompt, I started off with creating a list of adjectives that describe my typeface. I started with thinking of its main qualities and branched out into related items, such as letterpress to ink to brush to paint. This exercise not only helped me focus on characteristics of Garamond, but also the moods that I could potentially convey in the video.
Then moved on to the main points I wanted to talk about in the video. In each section, I thought about the text I would display and emotions I wanted to convey. I also thought about the type of sound, motion, and rhythm. Since Garamond is an old-style font, I thought it would be appropriate to try some sort of classical music with a steady rhythm. I also wanted a smoothness to the sound (possibly string instrument) to help represent Garamond’s legibility and flow.
I started off my storyboards with a sentence (my script) at the top and then snapshots of what the screen would look like, as well as my director notes beneath each frame. I created multiple examples for each part of the script.
After going over my storyboard with Natalie and discussing in class, I realized that the format and narrative of my video is very generic– going through history, characteristics, and uses. Natalie recommended that since my font is also a pretty standard looking as well (just another serif), I could try to play with a storyline where Garamond is writing a letter to the viewer where it feels underestimated in its usage even though it is one of the oldest fonts and used in many popular contexts. I thought this was a creative idea and tried to come up with a fun storyline.
A unique aspect of Garamond is that it is dated back into the 16th century and has undergone many revivals. I thought it might be an interesting narrative to talk about its changes overtime.
I also wanted to play with the idea of how it is used in the body text many popular books, including Dr. Seuss, Harry Potter, and the Hunger Games. I could allude to the storyline of one of those books.
However, all of this creative brainstorming for an interesting narrative lead me to a major roadblock. Is there enough time to effectively tell these stories? How would I visually show this? Does it change the type of music I should play?
After learning the basics of aftereffects, I knew that there were a lot of possibilities in representing my video but going for something complex might be difficult to execute and risky given the amount of time we had.
I searched for a music to fit my narrative and realized that I would have to play back and forth between the auditory and visual aspects, as well as the storyline. I went from classical piano music to chill violin music to anything similar I could find on the Youtube non-copyright playlist. I found a piano and jazz song which I thought could be a good fit since Garamond has gone through revivals and is old, yet modern. I started building an aftereffects based on this music.
I searched for a music to fit my narrative and realized that I would have to play back and forth between the auditory/visual aspects, as well as the storyline. I went from classical piano music to chill violin music to anything similar I could find on the Youtube non-copyright playlist. I found a piano and jazz song which I thought could be a good fit since Garamond has gone through revivals and is old, yet modern. I started building an aftereffects based on this music.
Then after talking to Dan, he noted that my song was a little too playful for Garamond. He said I could use the song for a part of the video when I talk about the revival and find more old song for the first part. This way I can incorporate storytelling to the music.
Unfortunately, I did not have enough faith in my musical abilities to piece together two songs together smoothly. Thus, I went back on a search for another song. Earlier when I had been talking about this project to a friend, he said that the font reminded him of what he would find in a French cafe. This lead me to think about honing in on the French history of the type, and looking for classical French music. I finally settled on a French baroque piece that had string instruments in it.
Time was running out and I still had not finalized what I wanted to say about the font. I refocused and made a list detailing what I wanted to say and reorganized my storyboard into cuts that followed the music.
I ended up reverting to a more “standard” storyline and wanted to display the mood/characteristics of the font. I thought I could also try to compare Garamond to other fonts, but decided against it since there was not much time in 45 seconds.
When I talked to Vicky in class she suggested that I focus on the idea of zooming in and out of letters (through counters, etc.) to display information. I could communicate my script in other ways than simply text.
Night before the video was due, I still found myself struggling to organize and fill the storyline in a logical and interesting manner (that also matched the music). There were a lot of components in play, I relied on mentally visualizing the movements instead of sketching it all out. (As shown in the last sketchbook photo above, my frames are mainly blank with few concrete director notes.) I mostly started working solely in Auto Effects, knowing that I just needed to keep going.
Post-Class Reflection:
- Some of my cuts were too fast, there was not enough time to perceive the information. This is in part due to my inexperience with After Effects, because I wasn’t sure how to pause before smoothly zoom in and out of letterforms.
- I should have clearly label the characteristics of the typeface that I was calling out. For example, the counters or serifs.
- A lot of my animation focused on the actual characteristics (like balance) rather than the typeface itself.
- The pink color I used did not convey the mood I was giving with my music
- The music and motions were not strongly intertwined
- Some people seemed to like the flowing of the letter. It was difficult to find more cuts to do that withe the music.
Changes to Make:
Honestly, I would want to completely redo with my video. I think some of the narrative roadblocks I faced was because I did not dive deep enough into my research about Garamond. I need to tell a story about why people should care about this font. I think I started to treat Garamond as just another font with slightly different characteristics. Over winterbreak, I want to ticker more with this project and look forward to doing Garamond justice.
