Typography Assignment

I worked for a while on the continuation of the Columbine website, and made several changes to the css in order to have my finished product look similar to the screenshot. The “big discovery” I made is that I can change the padding of the body to ensure that text does not wrap around the navigation bar. I was unable to figure out how to make my navigation bar stand alone when working on my portfolio page, so as soon as I made this discovery, I went to my typography assignment and changed the padding of the body. I embedded two different fonts: I used the same font for h1 and h2, and a sans-serif for the body text. I also changed the line height of the body text. I floated the picture of the flower to the right of the first subheading. I was able to get the font color of the navigation bar to change when the mouse hovered over it, and once again went to my typography assignment to make similar changes. I originally had the pullquote in a pullquote tag, but found that it was disturbing the surrounding text. On Jordan’s suggestion, I changed the pullquote tag to a span tag and that fixed the problem. My remaining problem is that I am unable to get the wrapper to go below the footer.

My "finished" product

My semi-finished product

For the typography assignment I used the text from a Richmond Times Dispatch article published the day after the disaster describing what happened and the scene at the Capitol. I embedded fonts for the headers and the body, included an image, a pull quote, and a block quote. Figuring out how to do the endnotes properly took quite a bit of time even though I only have three references. For some reason I cannot get the navigation bar and h2 to begin on the same “line,” so it looks like the navigation bar starts above the text of h2. I’ve played around with the margins and padding of h1, h2, and the nav bar and nothing has worked. I’m sure I’ll still be working on it up until the start of class on Monday, but until then this is my attempt at the typography assignment.

My comment on Stephanie’s post


  1. Your Typography page looks really good. I especially like your header font (Google Fonts?). Trying to get everything to line up is a hassle. Have you tried setting margins and padding to zero for the elements that you don’t specifically change the margins and padding? Some of the elements in my typography page needed to have their default settings reset to zero. I also lived in the inspect element function on Safari. It really helped me see where the element, its padding, and its margins were on the web page. (I am sure you use it a lot as well.)

  2. Hi Alyssa!

    Your typography page looks amazing! Reading your blog post this week has helped me a lot when trying to figure out my own Typography issues. Like Jordan, I am obsessed with your header font! It is fun, but still looks academic and professional. It was inspiring and has helped me decide to jump out of “Georgia” 🙂

    See you in class,


  3. Kudos on your typography page. I also struggled with trying to figure out how to get the text to not wrap around the navigation bar. I ended up just extending the bottom margin of the nav down to compensate. I’ll have to play around with your solution since I’m almost sure that’s a better way to accomplish that task.

Leave a Reply to Jordan Bratt Cancel reply

Your email address will not be published. Required fields are marked *