Step Four: Typography & Images

A. Style the typography.

1. Select some nice google web fonts.

In CSS, we can always set our type to any font we want, but if that font does not exist on the computer where a site is viewed, then it will default through a list of options we provide. This means we have to stick to basic fonts. That's fine, especially for text that needs to be very readable, and in fact, that's exactly what we're going to do that for our body copy.

Another option is to include the font files along with the site using @font-face in our CSS, which better ensures our font choice will be viewable. This is somewhat tricky to implement because different browsers require different font formats, so we're going to go with an intermediate option.

Google Web Fonts provides fonts that can be linked to in our HTML or CSS files, then used at-will. It requires your computer be connected to the Internet to work, but most of the time that's not a problem. We will use a google web font for our headlines.

For our hot dog site, we're going to use the web font 'Pacifico' for our headlines, and a more common font called 'Baskerville' for our body copy. Add the Google Web Font link at the top of your CSS.

/* 
    The Chicago Dog Tutorial
    ONA 2014
*/

@import url(http://fonts.googleapis.com/css?family=Pacifico);

2. Style the typographic elements.

Now let's add in our basic typographic choices. What you can't see here is what the default size of a basic <p> tag is. In general, it's about 16px, but it does vary slightly from browser to browser. To be safe, we're going to set all our fonts using ems which is relative to this base font size. This will keep our fonts in proportion within our site.

Just a few notes on what is happening here:

Save and refresh your browser.

CSS:

/*
    TYPOGRAPHY
    http://type-scale.com/
*/

html { font-size: 1em; }

body {
    font-family: 'Libre Baskerville', Baskerville, 'Times New Roman', serif;
    font-weight: 400;
    line-height: 1.45;
    color: #333;
}

p { margin-bottom: 1.3em; }

h1, h2, h3, h4 {
    margin: 1.414em 0 0.5em;
    font-weight: inherit;
    line-height: 1.2;
}

h1, h2, h3 {
    font-family: 'Pacifico', cursive;
    color: #D00002;
    margin-top: 0;
}

h1 { font-size: 3.998em; }

h2 { 
    font-size: 2.827em; 
    border-bottom: 2px dashed black;
}

h3 { font-size: 1.999em; }

h4 { 
    font-size: 1.414em;
    margin: 0.5em 0 0;
}

small { font-size: 0.707em; }

Hey! This is starting to come together.

Links or <a> tags (originally from the word anchor) have five states that can each be styled: link, visited, hover, active and focus.

In this case, our links will be red, bold, and only underlined when we roll over or click on the link.

CSS:

/*
    TYPOGRAPHY
    http://type-scale.com/
*/

...

a { font-weight: 700; }

a:link, a:visited {
    color: #B00002;
    text-decoration: none;
}

a:active, a:hover {
    color: #D00002;
    text-decoration: underline;
}

B. Adjust our images.

Our images are displaying at whatever native size they happen to be. In real life, we would do a more complicated process to optimize and possibly load different images for different screen sizes (viewports). Today, we're going to just make the ones we have look better!

CSS:

/*
    MAIN / ARTICLE / ASIDE
*/

...

figure img {
    width: 100%;
}

figure.right {
    float: right;
    width: 40%;
    margin-left: 10%;
}

.hot-dog-stamp {
    float: right;
}

We're not quite done. If you save, then refresh the browser, you'll notice that although the images now fit nicely within our container, none of our images are aligned to the right. This is because we have to hook the style choice into the HTML. We can do this with an "id" or a "class".

In your HTML file, add in the following classes:

<h1>The 'Classic' Chicago Dog</h1>
<img class="hot-dog-stamp" src="images/hot-dog-stamp.png" alt="authentic Chicago hot dog">
...
<aside id="hot-dougs">
    <figure class="right">
        <img src="images/gene-ha-hot-dougs.jpg" alt="Gene Ha waiting for hot dogs">

The hot dog stamp and the image of Comic Book Artist Gene Ha will now adjust.

C. Adjust the details.

You might notice that some of the text, especially the text associated with our figures, doesn't look quite right. We want to add in styles for these elements and override any generic style that doesn't work in a particular instance.

NOTE: More sophisticated ways of selecting special pieces of content to style exist than what I've done here. If you're curious, look up CSS selectors.

1. Add in a style for our introductory text and quote.

HTML:

<p class="lead">Close your eyes and picture a Chicago dog, and this is probably what you'll see. Tomato slices, dill pickle spears, and celery salt have joined the fray, along with that poppy seed-encrusted bun. This is the fully-loaded, dragged-through-the-garden hot dog most often seen on sausage paraphernalia, and it's easy to see why. When properly constructed, this version of the Chicago dog, with all seven-toppings accounted for, is a true feast for the eyes. It is beautiful.</p>
...
<h3>Directions:</h3>
<p class="directions">Boil the hot dog, steam the poppy-seed bun and top with mustard, relish, onions, tomato slices, pickle, hot peppers and a dash of celery salt.</p>
...
<blockquote class="byline">&mdash; Chicago columnist Mike Royko</blockquote>&mdash; Chicago columnist Mike Royko</blockquote>
...
<p class="alert">Hot Doug's will be closing forever on October 3, 2014. While you are in Chicago for ONA, if you can, sneak away and try this special Chicago Dog.</p>

CSS:

/*
    MAIN / ARTICLE / ASIDE
*/
...

.lead {
    font-size: 1.414em;
}

ul li, .directions {
    font-size: 1.2em;
}

blockquote {
    font-size: 1.2em;
    padding: 0.3em 2.0em; 
}

.byline {
    font-style: italic;
}

.alert {
    font-size: 1.2em;
    font-weight: bold;
    font-style: italic;
}

2. Style any figure sections, including the captions.

HTML:

<!-- Figure : hot-dougs.jpg -->
<figure class="reverse-bkg">

CSS:

/*
    MAIN / ARTICLE / ASIDE
*/
...

.reverse-bkg {
    background: #333;
    color: #fcfaf2;
}

figure {
    background: #dcd5c2;
}

figcaption {
    padding: 1em 4em 2em;
}

#hot-dougs figcaption {
    padding: 1em 2em;
}

3. Style the definition list.

A definition list is not a commonly used HTML tag, but it works in this case. It consists of a term and a definition.

/*
    MAIN / ARTICLE / ASIDE
*/
...

dt {
    font-weight: 700;
}

dd, figcaption {
    font-family: 'Myriad Pro', Helvetica, Arial, sans-serif;
}


Step 4A | Step 4B | Step 4C


Step Five & Six: Responsive & JS plugin   ➳

0 | 1 | 2 | 3 | 4 | 5-6 | 7-8