Type Assignment
February 20, 2012 Leave a Comment
The first big assignment for History 697 was to create a webpage with text and design in mind. As discussed in my previous post, I wanted to present the content in a way that was scholarly, yet aesthetically pleasing.
http://rfloresportfolio.com/portfolio/type.html is the result. While I’m still making adjustments as I post this, I had extensive help for a couple of my classmates, but I was able to put together something not so bad. I had an idea in mind of what font to use from my cartography design project, so MyFonts and a few other sites guided my search with a few keywords. Since I had a “metro” style in mind, I used words like “metro”, “subway”, “transit”, etc. to see what came up. I even did searches with words like “punk” and “music”, but none of those were useful. They were either too stylized (something to avoid), very expensive, or just plain illegible (anyone familiar with black metal album covers would understand this). In the end, I went with ContaxSans55, a free MyFonts pick which kept the mood of a streamlined font but wasn’t too boring (I hope) and was a nice replacement for Futura.
I decided to keep the whole content from the study up to help disperse the paper at the conference should anyone want to read it (my panel is at 8am, so at this point, I’m hoping I’ll actually have an audience). Otherwise, I would have cut it down to a more palatable size. MyFonts made it pretty easy to embed both the font and the license, but I only got it to work once I made a few adjustments. This was a problem: in the code below, everywhere it said ‘fonts’ originally said ‘webfonts’, and for some reason, I had to change all that to ‘fonts’, and it mysteriously worked only then.
@font-face {font-family: ‘ContaxSans56-Italic’;src: url(‘fonts/201DCB_0_0.eot’);src: url(‘fonts/201DCB_0_0.eot?#iefix’) format(‘embedded-opentype’),url(‘fonts/201DCB_0_0.woff’) format(‘woff’),url(‘fonts/201DCB_0_0.ttf’) format(‘truetype’);}
@font-face {font-family: ‘ContaxSans55′;src: url(‘fonts/201DCB_1_0.eot’);src: url(‘fonts/201DCB_1_0.eot?#iefix’) format(‘embedded-opentype’),url(‘fonts/201DCB_1_0.woff’) format(‘woff’),url(‘fonts/201DCB_1_0.ttf’) format(‘truetype’);}
How one was supposed to know this, I couldn’t tell you. This highlights the benefits of working collaboratively, but also how such a small detail can pull the brakes on a project.
Still making adjustments as I said; I can’t seem to get the padding right on the content, and I’m going to insert some of the argumentative images as well. Stay tuned.
PS-For those of you looking for an example of what straight edge is:
EDIT: I also commented on Meg’s blog.




