Don’t Fear Web Typography A Massive Introduction

In this “epicsode”, Jessica covers some type history and many CSS terms you’ll come to know and love

Woah! This is a really intense episode but I think you’ll know more about type by the end of it than most of your design contemporaries! Below are links to the HTML and CSS files for all the steps I walk you through in the video. Since a lot of information is covered in this episode, I recommend that you watch it more than once and that you use your web inspecting skills liberally with all of these sample files.
By the end of the video (and after examining the files) you should feel pretty confident to start editing existing blog CSS files. We’re really excited to help you learn, so look forward to the next few episodes when we tell you how to get your site online and how to do some beginning to advanced level layout design, all within the browser.

Step 1 / CSS

In our first step, I change the typeface to Georgia and make some small tweaks to Russ's last html file including adding a larger image to give us more flexibility later.

Step 2 / CSS

In the second step, I make the lists look a bit less gross and set a parameter for our images to make sure they never exceed the size of their containers.

Step 3 / CSS

In this step, I add ornaments around the prices that have a class of "ornament" so if I feel like adjusting them later it will be easy as pie.

Step 4 / CSS

In this step, I made the menu items more readable by breaking up the text a bit.

Step 5 / CSS

In this step, I centered all the text and made tweaks to the headlines using some of the terms we're already familiar with. I also explain how to add a border to text or images and show all the ways you can customize borders.

Step 6 / CSS

In this step, I target some of the individual headlines with classes and ID to further fancify them.

Step 7 / CSS

In this step, I show a little bit of inline styling, explaining what “font-variant: small-caps;” means and how to fake it if a typeface doesn’t come with real small caps.

Step 8 / CSS

In this step, I add one of my Daily Drop Caps to the layout and make a few adjustments to our main image using our new border knowledge.

Step 9 / CSS

Step 10 / CSS

Step 11 / CSS

In these steps I make a bunch of little stylistic tweaks that you can feel free to inspect but are beyond what we learned in the video today.


  1. There is one thing I have had a lot of problem with. I am trying to upload a logo with a transparent background. I’ve saved it as .png, uploaded it to flickr, and then copy and pasted the url into my html file. The background is always white..
    Is there a way of linking the .png file directly from my computer without passing through the internet (flickr)? Where should I be storing my images to use them on the website?

    • Sophie,

      We’re going to cover buying website domains and hosting in a future video. Once you have your own hosting you’ll be able to host your own images (huzzah!). The specific problem with Flickr may be that they’re converting your .png file to a .jpg file on their end in order to reduce file size costs on their end. Usually .pngs are much larger in file size than .jpgs and this is a common thing large image hosting sites do to save on server space.

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>