In working on this week’s type assignment, I notice myself becoming more and more adept at CSS problem-solving. While I still think my styling could be more concise and “less specific” (I hate having different floats for images without captions and images with captions, etc.), I think I’m on the right track in terms of understanding how to differentiate between each element.
For my header, I finally managed to snag Pan Am, the P22 font of my dreams. I had given up hope on it last week when I realized that P22 licenses don’t allow @font-face embedding, but it turns out they’d licensed it to myfonts.com for sale as a webfont. I also embedded Calluna, a nice, clean sans-serif that I think is quite readable. I haven’t decided whether to buy its italic and bold counterparts, so for now I’m having to improvise within my content.
At this point, I’m just trying to cut down my research paper into something the casual visitor might actually be willing to peruse, while putting finishing touches on my footnotes. Feel free to comment with suggestions for the page.
UPDATE: If anyone is struggling with embedding multiple styles or weights of fonts, this post by Metal Toad Media kept me from pulling my hair out. In my case, I kept creating new rules for “em” tags so that the Italic style of my font would apply, but online all my italics kept showing up as ugly obliques. Apparently you have to reset the font-weight (for bold fonts) or the font-style (for italic fonts) in order for the embedded fonts to do their thing. If my explanation is nonsensical, just check out the Metal Toad site.
This week I commented on posts by Claire, Amber and David.
Megan said
I love Calluna, it really is remarkably readable. I think it might be worth investing in. The Pan-Am type makes a great header font.
I think my favorite thing in your page is how you’ve added the splash of color to your endnote references. It’s so subtle that it doesn’t distract from the text, but at the same time it makes them stand out. Kudos!
H697 Comments | A Magpie Historian said
[…] week I commented on Beth and Claire’s posts. This entry was posted in H697 and tagged dl, h697. Bookmark the […]
David Patrick McKenzie said
Agreed with Megan’s assessment–I like how you highlighted the footnote numbers in the text itself. That helps to get them out.
I too had trouble getting my italics to actually be, you know, italics–that was even when I was using Georgia as the main font. After some Googling I found this rule for the style sheet: em {font-style:italic;} — that seemed to do the trick. Good to know about the reset, too.
Jeri said
Thank you for sharing that link! I hadn’t paid much attention yet to how to deal with italics and the new fonts, beyond calling on the italic by name for particular elements. Hopefully now I can avoid hair-pulling entirely!
I really like the look and feel of your site! It is very clean and feels nicely balanced! And, as David and Megan have mentioned, the fonts work really well with your content.
My Sandbox · Typography, part 2 said
[…] I commented on Beth’s post this […]
Hist 697: Typography, part 2 « Wandering but not Lost said
[…] I commented on Claire’s and Beth’s post this […]