Type Assignment Trial and Error

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.


  1. 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!

  2. […] week I commented on Beth and Claire’s posts. This entry was posted in H697 and tagged dl, h697. Bookmark the […]

  3. 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.

  4. 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.

  5. […] I commented on Beth’s post this […]

  6. […] I commented on Claire’s and Beth’s post this […]

RSS feed for comments on this post · TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: