David Patrick McKenzie

Digital Public Historian

Playing with Type

This week’s homework was our typography assignment, in which we experiment with type styles to prepare a page–one that may influence our final project website.

One of the documents that provided my inspiration: letters sent from Texas by Santa Anna during his captivity. The main horizontal rule came from here.

Since my final project will be about the journey of Antonio López de Santa Anna to Washington in 1837, I chose to have the page reflect documents surrounding the Texas Revolution and U.S.-Mexican relations in the early 19th century. I borrowed elements from two documents, which I have pictured here: a Mexican Army order from the Texas Revolution, and a compilation of letters sent by Santa Anna from his captivity in Texas.

The first task was font matching. I was happy to discover WhatTheFont from myFonts.com. I took screenshots of parts of my documents, and uploaded them to this site. It returned some good choices–with commensurate price. So I then checked Google Fonts. I chose the font Alegreya, which was pretty close to the fonts that I saw in those documents, and helped give the look and feel. I just checked, and it appears that font is on FontSquirrel, as well, and for free. So I may switch to embedding the font, rather than running it off of Google.

I used that font for the h3 and h4 (the headers and subheads). For the text I went with Georgia and its associated serif fonts; I chose these in order to keep the page consistent. Although I realize that sans-serif can be easier to read on the screen, the contrast between Alegreya and the sans-serif was just too much, and Georgia remains readable.

I also chose some decorative elements based on the two documents. The main horizontal rule, as the caption says, comes from Santa Anna’s letters. The subhead horizontal rules come from the Mexican government letterhead, as shown here. To create both of these rules, I took screenshots from the documents, erased the surrounding white, and converted them to .gif files. Then I set up CSS rules that made these into the horizontal rules in specific instances. I also made sure that the left margin of the text lined up with the middle of the decorative rule from the Mexican laws document.

As others experienced, I was unsure how to make the footnote numbers become superscript. I took Megan’s suggestion and inserted “vertical-align:super” into the CSS for the sup command. That worked.

Overall I’m happy with the page as it’s turned out so far. For the final assignment I may add some more color to it, as it was a bit jarring when I added a color image into the document; hence I went with black-and-white completely. But we shall see. Nonetheless, I found this to be a rewarding experience. As others have noted, playing with it became addictive; I continually wanted to see what I could do. I suspect it will be that way for the rest of the assignments, and I will look forward to putting up my final project!

5 Comments

  1. Looks great, David. I struggled for a while with drop caps and ultimately gave up (I didn’t want them in every paragraph, but rather just the first paragraph of each section). Yours really contribute to the scholarly feel of your site, though, as do the header image and color scheme. That is something I’ve been struggling with on my project.

  2. Did you try using a span class for your endnote? I looked that up on google and used that superscript also in the CSS. I’m not sure which is the better method, but that is something that is sometimes frustrating: figuring out the proper way to achieve the desire effect. I can often figure out how to make the page look properly, but I know that across browsers there will probably be issues because of the way in which I’m “creatively” getting the effect to work.

    • David McKenzie

      February 20, 2012 at 12:55 pm

      Good question. I didn’t use one–looking back at the CSS, I just did my footnotes as an ordered list (ol) — so here’s the code I used:
      .footnote ol {
      font-size:.8em;
      padding-left:75px;
      }

      Hope that helps!

  3. I tried doing drop caps like you did, but they just weren’t working out for me so I abandoned them to focus on other aspects of my page (I’m jealous). And I also had difficulty with footnotes, although they aren’t completely necessary for me. It would have been nice just to cite some information in my Glasgow biography just to get the experience of creating footnotes. On the other hand, I did include two image credits which look almost like footnotes. Like you I did them as an ordered list.

  4. David,

    You did a tremendous job on your type assignment.

    First, I really enjoyed your choice of font. I feel that your font presented an superb feel for the time frame you are covering. When I initially saw your page, I felt like I had been transported back to the early-nineteenth century West.

    Moreover, there is a certain subtlety and sophistication to your font. It is not anything along the lines of the font that you see during the “Wild West” period, even as replicated during shows like Gunsmoke or Bonanza. Still, it goes to show the depth and nuance you are using when selecting a font.

    One question I do have: Do you think you will be alternating between left and right when placing photos and pull quotes in the future? I like how you have them all on the right side, which gives your page a certain symmetry. However, maybe if you alternate the location, you will add additional rhythm to your page.

    Again, what a fantastic page you created!

    Richard

Leave a Reply

%d bloggers like this: