HIST 697: @font-face
Edit: My type page design is now mostly polished and done, complete with my executed plan to included Courier New in the design. It’s very spartan – I am realizing that I am perhaps too much of a minimalist – but I think it’s a good first start, especially considering how frustrating the design process was at times. Those footnotes! I still can’t figure out how to italicize the titles, but I have to step away for a while or I’m going to pull out my hair. /Edit
Here is my type project as it stands so far. It is not finished in so far as meeting the requirements (no endnotes yet, for example), but I didn’t feel I could discuss it in my blog without posting a link, and it’s finished enough to discuss my font choices.
I am not happy with it. Well, I’m not completely happy with it. I found my biggest challenge for this project was selecting a set of different fonts that went well together and also matched my historic time period.
The text of the page comes from an old paper I wrote as an undergrad on civil defense, which I examined through the lens of a short story by Philip K. Dick (the king of science fiction) entitled “Foster, You’re Dead.” Because this is a web format, I tried to grab a few key paragraphs from the much longer essay and break them up using sub-headings so that the flow of the text would be logical and easy to read on the web, without being TOO texty. You know, so as to keep the attention of those roving eyes. I’ve chosen this specific topic because it fascinates me, and I’m considering trying to do something concerning the civil defense program for my final project. The image I’ve chosen to include is actually taken from the National Archives’ website (if you click it, you will be taken to the image’s specific page in their catalog), and at this stage I’m pondering how I might make use of their digital and physical archives to help my own project.
Anyway, more specifically about the type. I decided to host all my own fonts, partially because I thought for this exercise it would be easiest and cleanest in my code if I began by working only with @font-face. I think this decision must have made my life about 100% easier in terms of building, because I had zero trouble getting my fonts to work (at least as far as I can see).
I’ve mentioned before that I have a weakness for grunge fonts, and I was pleased to discover that I could actually sneak one into my header, HVD Peace. The design of my page is supposed to evoke the feel of a fallout shelter sign (hence the color scheme) – one that is worn, a relic. HVD Peace, despite its name, has a military and perhaps more appropriately utilitarian appearance to it. It mimics a worn, graffiti stencil, giving it the sense of being aged that I wanted. I actually built a second grunge font, Gesso, into my stack. I really like Gesso, and it was just a bit too modern for this project, but if for some reason HVD Peace doesn’t show up for some, Gesso still presents the aged look, but it casts a more sci-fi feel to the project, especially as a serif. I think that’s actually okay – my paper does discuss science fiction, after all.
So the logo font was the easy part. It’s the body I struggled with and that I’m still not happy with. I really like my sans-serif, Gentium, which I’ve used in various weights and styles for my headers, caption, footer text, and (unfinished) navigational menu. I had a lot of trouble finding a serif that I liked, probably because I just have my heart set on Futura. That font is so perfect for the time period, especially something attempting to mimic the appearance of instructional text. I think it would’ve looked great. But, it’s not an option – it’s not a webfont. So after much back and forth I went with Roboto. I’m still not sure how I feel about it. I may still change it.
One thing I do want to do between now and Monday is actually work with some Courier New. Those basic fonts can work for us too! I want to use it as a stylized text. I hope to add another header in between by “subtitle” and my first “subsection” explaining very briefly that the text is an excerpt. This little bit will be in a larger size. I also want to style my pull quote in Courier New, if not Gentium. My thinking with Courier New is that the font will give my page a sort of “typed,” look, as it the text were being pulled from an old military report. If it doesn’t work, maybe I’ll post screenshots just to show the difference, or to demonstrate visually what I was thinking.
All in all it was a fun exercise, but I found trying to make the page period appropriate to be most difficult. In my case, my content speaks to both a military theme and also a cultural, science fiction theme. Most graphic design I see around Civil Defense spins the biazzaro, Philip K. Dick, angle of it. I went the other way. But my choices were also dictated by my images. I don’t hold the copyright to any pictures of families sitting in their shelters in front of mountains of canned goods, smiling like they’re not prepared for the nuclear apocalypse. Copyright, I’m anticipating, is going to be my biggest problem. So goes the life of a 20th century cultural historian.
Edit: This week I commented on Megan and Jeri’s blogs.
I really like your use of a serif font in the blockquote. I hadn’t thought of that, but I like the way it very visually distinguishes it from the rest of the text. The right margin on it looks about the same as your regular ps. Intentional?
I’ve also been struggling with image licensing. Have you tried Wikimedia or other public domain image databases? This list of federal options might be helpful. Wikimedia also has a pretty comprehensive guide to copyright across the globe. I ended up being able to use images I had scanned from a 1984 monograph thanks to Argentina’s laws, but I doubt I will always be so lucky. It makes you realize how rarely informal websites follow the rules.
I really like your use of the monospace font! It adds visual interest and works well with the tone and content of your topic!
One suggestion – I really like the yellow that you’re using. It’s very visually striking. But I am having trouble reading the text against it. It could be b/c I stare at the computer all day, but perhaps a lighter color behind the text or increasing the spacing between the letters. Just a thought!
And by that second sentence, I mean that it works well with the content.
Great job with the Courier New! It fits in nicely and really works well with your concept and the other fonts. I agree with Jeri re: the main text and the yellow background. Maybe a shade or two lighter on the background will add some more contrast to make the text easier to read. I’d also suggest increasing the text size to help with that as well. I’m struggling with getting the footnotes to italicize too, so good luck there!