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!