Exercise » Classical Resume (Use a Classical Approach)

Overview of the Assignment

In this lesson, you redesign Jamie Peterson’s resume using a Classical approach.

  1. Choose a serif typeface with all the elements you need (an italic, pleasing caps and numbers).
  2. Make a copy of the resume folder from the last exercise. Rename it resume_classical. Rename your CSS file resume_classical.css, and link to it.
  3. Follow the walk-through provided. Read what a typographer looks for in the process.

Getting Started

Create the Lesson Folder

In this exercise, you’ll modify the resume you set up in the last lesson, so make a copy of the resume_details folder and name the new folder resume_classical. Keep it in the web_typography folder.

Set Up Your Files

Rename the CSS file resume_classical.css. Link it to the index.html file by going into the HTML file and changing the syntax in the head element to the following:

<link href="resume_classical.css" rel="stylesheet" type="text/css">

Change the title to

<title>Classical Resume</title>

Choose a Serif Font

The Classical page uses serif typefaces, and creates subtle emphasis with size, italics, and small caps with letter-spacing. As contemporary web typographers, we can mix and match fonts and styles. But for this lesson, start with a serif font.

I found my font at Google Fonts.

The day I searched for my serif font, as of October, 2016 there are 809 fonts available. Narrow down the options.

  1. Under “Categories” deselect all options except “serif”
  2. Click the box to choose “number of styles.” Look for 4+

I chose Crimson (I love Minion, which is available through Typekit, but not everyone has a Typekit account).

Use the New Font

Use your new font in your Classical resume. If you can’t remember how to use a web font, revisit the appropriate exercise: either @font-face Bibliography or Google Fonts Bibliography .

Crimson font added

I’ve changed my font to Crimson. All other styling remains the same.

Update Styling in the CSS

Once the new font is in use, make changes as needed. For example, traditionally, the Classical page didn’t use bold to create emphasis. So I’m not going to use Crimson bold or bold italic in my design. I need to remove all the bold styling I used in my original resume.

Remove bold

Since the Classical page didn’t traditionally use bold for emphasis, all text has been changed to normal weight.

Make sure your font size and line height are appropriate. For example, Crimson looks much smaller than Merriweather (my original font) even at the exact same size. I need to bump up the size of the type, then change the line-height accordingly.

Type size changed

I used 14px text with a 20px line-height when I used Merriweather for the first resume. Crimson needs to be set at 17px with a 22px line-height to have a similar visual size.

Just get a sense of how the type could work on the screen. Don’t worry about the details yet. You need to make sure this is a good font first.

Test the Font Cross Browser

Before continuing any further, you need to test the resume across popular browsers. If the font doesn’t hold up across multiple browsers and operating systems, you’ll need to look for another one. See the Test Fonts Cross Browser exercise for info on how to test fonts.

Design The Classical Page

I’ve decided to use Crimson Text. It’s not perfect on Win8 and 8.1 using Firefox, but trust me, it’s hard to find a font that is.

Start a Mock-Up

At some point, you’ll feel you can work more quickly and easily right in HTML/CSS. Until then, explore ideas quickly and efficiently by making a mock-up first. For this lesson, make your mock-ups in whatever software you feel most comfortable with.

Some Helpful Mockup Resources

Get the Fonts for the Mock-Up

I’m using Crimson Text from Google Fonts. You should use whatever font you want to use. There are two options for getting fonts to use in a mock-up.

  1. Download the font family. 
    • Select the font, and open the black bar/window (it pops up from the bottom of the screen)
    • download the family as a zip file (download icon is in upper right corner of the window).
    • Open the zip file, and put the fonts in your font library.
  2. Synch with skyfonts. I recommend this method, because as a font is updated on Google Font, your font files are automatically updated.
    • Go to fonts.com/web-fonts/google.
    • Click “install skyfonts” to install the software on your computer.
    • After skyfonts is installed, return to the fonts.com page, choose “browse google fonts” and type in the font family you want to use.
    • With your font selected, choose the “skyfonts” option, select “Add entire family” and click “add.”
    • You immediately have access to that Google Font family via whatever program you prefer to use for mocking up your design.

If you’re using fonts from another source, look for tips on how to use their fonts for creating mock-ups. You might find some have a utility that work with a specific program. Others might allow you to access their fonts for a given period of time. Still others might allow you to download OTF files to the desktop (which you then put into your font library).

Be Inspired by the Classical Page

The classical page tended to use a text frame (space framed the text). It has subtle contrasts and an overall lightness to the page. It may have ornaments, borders, and old-style numerals.

classical mockup

I changed the format to a two-column layout. This allows for more space to frame the text. Moving the address to a single line at the top emphasizes the frame. The background texture and ornament give the page a classic feel. I’m sad that Crimson doesn’t have old style numbers, but I chose a lovely italic over the numbers. I’m hoping I can use size to make them look more subtle. I’m not sure about the colors yet. The address line starts to look like navigation. I’ll figure out the colors when the page is built.

Attend to the Mobile Typography

In the last lesson, I had you start with the structure of the page, working your way down to the typographic details. Working from the meta view (overall layout) down to the micro view (typography) is one way to approach the page. Other times it makes sense to start with the the simpler issues, and work your way up to the overall structure. It depends on the project, the scope of the changes, and personal preference.

In this lesson, we’ll start with the simpler changes first. The typography. And, as usual, we’ll look at mobile first.

Size, Line-Height, Case, Weight and Style

My mobile version is not changing much. Most of the changes are aesthetic: changes to font, size, line-height; changes in case, weight and style to create a more subtle system of hierarchy.

In my Classical version, my typography changed as follows:

  • p is 18px Crimson Text on 23px line-height (I ended up making it bigger)
  • h1 is 32px Crimson Text on 33px line-height
  • .web-designer is 16px Crimson Text, uppercase with 1px letter-spacing
  • h2 is 16px Crimson Text on 23px line-height, uppercase with 1px letter-spacing
  • h3 is 20px Crimson Text italic on 23px line-height
  • strong is normal weight and style. I think I might add color for emphasis later.
  • .statement is 20px Crimson Text italic on 24px line-height
  • .acronyms are 17px

Line Height and Vertical Spacing System

I also changed the vertical spacing system to work with the line-height. The number 23 (the line-height is now 23px) is a prime number so I couldn’t create a perfect mathematical system based off it — I used 24 as my base. This allowed me to shift from a 5, 10, 20 system to a 6, 8, 12, 16, 24 system.

Changing the vertical spacing system might seem picky (what’s a few pixels here and there?) but it makes a difference. For example, the more subtle emphasis in the hierarchy plus the looser line-height tend to undermine the visual chunking of the text. When I changed the h2 margin-top from 20px to 24px, the chunking improved!

I went through and made sure all of my headings and classes used vertical spacing associated with the new (6, 8, 12, 16, 24) system.

The subtle hierarchy also made the mini-spaces below some of the headings and the job title / dates look odd. I set them to 0px.

Typographic Detail: Remove Bullets from the List

My “skills” are set using an unordered list. By default, the bullets are too strong for a page without bold or strong emphasis. I could fix this problem one of two ways.

My first option… I could make an image for a bullet with less emphasis (perhaps smaller, or not as dark) and tell my list items to use the image instead of the bullet, by adding the following syntax to the li styling in the CSS:

list-style-type: none;
list-style-image: url(images/bullet.png);

Notes on the CSS

  • The list-style-type refers to the “type” of bullet you want to see on each li. The value none tells the browser not to add any bullet types to the li.
  • The list-style-image tells the browser to use an image for each bullet. The value url(images/bullet.png) tells the browser to go into an images folder and use a png file called “bullet.png” as the bullet on each li.
  • Many web designers put this styling on the ul instead of the li. I put it on the li, because the bullets are on each li. It works fine on the ul as well.

My second option… is to remove the bullets altogether, and simply use a bit more space between each li to visually chunk the list. Again, styling would be on the li in the CSS:

list-style-type: none;
margin-bottom:8px;

Notes on the CSS

  • The list-style-type refers to the “type” of bullet you want to see on each li. The value none tells the browser not to add any bullet types to the li.
  • The margin-bottom would be set to 8px (a measurement from the new vertical spacing system, and bigger than the original 5px).

I elected to remove the bullets completely, since I’ll be centering the list on larger browsers. Bullets emphasize the start of a new item when the eye skims down the left edge of a list. Therefore, bullets and centered text (and right aligned text) do not mix!

Typographic Detail: Fix the Faux Italic

Testing the font cross browser revealed that my italic style is not working in IE8. To make a long story short, that’s because Google Fonts has us “load” all the styles and weights of a font in a single href up in the head of the HTML document, like so:

<link href='https://fonts.googleapis.com/css?family=Crimson+Text:400,400italic' 
rel='stylesheet' type='text/css'>

The way Google Fonts sets up their CSS (the way they set up their font-family names) behind the scenes, IE8 can’t render the bold and italic properly. IE8 needs each weight and style referenced separately. Unfortunately, this causes problems with other browsers, so we need to use a conditional comment for browsers less than or equal to (lte) IE8.

Thus, to fix any Google Font faux italic (or bold) problems in IE8, add a conditional comment in the head of your HTML document, and use a separate href for each weight and style of the font you’re using. Here’s an example of the syntax (using Crimson Text regular and italic):

<!--[if lte IE8]>
   <link href='https://fonts.googleapis.com/css?family=Crimson+Text:400' 
   rel='stylesheet' type='text/css'>
   <link href='https://fonts.googleapis.com/css?family=Crimson+Text:400italic' 
   rel='stylesheet' type='text/css'>
<![endif]-->

Detail: Fix the Border

I’m going to keep the border between Jamie Peterson’s statement and contact information on the mobile version of the page. But I’d like the border to feel a little lighter and more decorative. I changed my border to a 2px dotted border. I might change the color later.

Change the Structure as Needed

I no longer want a 3-column layout on larger browsers. There are many ways to approach changing the structure and moving content around on a page. I’m going to use the quickest and easiest method: cut and paste.

Moving content on the page

I want the address above Jamie Peterson’s name. I want the professional statement above the Professional Experience section of the resume. I can do this by cutting and pasting the content into the appropriate places.

I made my changes like so:

  • I cut the contact paragraph out of my contact_column and pasted it into my header above the h1.
  • I cut the professional statement paragraph out of my contact_column, and pasted it into my experience_column above the h2.

The results? Ack!

Ack!

What happened? The empty Contact column no longer takes up any space.

Now that my contact_column is empty, it doesn’t take up any space. So my experience_column has moved all the way over to the left edge of the browser. The header, on the other hand, continues to line up with where my experience_column used to be!

Fix the Structure as Needed

Whenever a page looks wrong, it helps to sketch out what needs to be fixed.

the new page structure

Keep the new structure in mind as you move forward. Sketching the structure can help!

Based on my sketch, I can fix my page in a couple of steps.

First, I need to delete my empty column. If it’s not being used, it doesn’t need to be there. I deleted the div from my HTML file. To keep things tidy, I deleted all of the div’s styling from my CSS (and from each media query within the CSS).

Next, I need to fix the width of my two remaining columns, plus fix the horizontal spacing between them and around them. I experimented with column width and padding-left for both columns at each media query size.

Finally, I need to make sure my header lines up with my Experience column. To do this, I set the padding-left on my header to match up with the padding-left on my Experience column at each break point.

Make Something Show Up in Two Different Places

When I view my page in my browser at to different sizes, it’s clear I have a problem.

Element in wrong place on mobile

On the small browser, the contact information is in the wrong place.

I want the contact information to show up in two different places in the structure — depending on the size of the browser.

  • On mobile and small browsers, I want the contact information under the professional statement.
  • On larger browsers, I want the contact information at the top of the page.

I can fix this using the display property.

Put Both Elements in the Page

I copied and pasted the contact information so it shows up in both places (top of the page for big browsers, under the statement for small browsers). The p element already uses a class called “contact” to style it differently from the other paragraphs on the page.

Apply a Different Class to each Element

To give each contact paragraph it’s own behavior, each one needs their own unique name. I changed the class from “contact” to “contact-big” (for the one that will show up on big browsers) and “contact-small” (for the one that will show up on smaller browsers).

I make sure each contact p has the correct class in the HTML, and make sure there are two classes (.contact-big, .contact-small) in the CSS. For right now, the two classes are exactly the same.

Identify at What Size Browser the Elements Will “Swap”

I know I will be changing the styling of both “contact-big” and “contact-small” at one of the larger browser sizes. I don’t know for sure which one yet.

I make an estimate that the change will take place at the media query where my layout shifts to a two-column layout (min-width: 766px).

Since I will be changing the styling for both of the contact classes at 766px , I copy the styling for both of the classes and paste them in that media query.

So I now have both classes (.contact-big, .contact-small) in both places (the original CSS up at the top for mobile browsers, down under the 766px media query).

When I stop and view the page in the browser, this is what I see.

Both elements are visible

The contact information shows up in both places regardless of the browser size.

Modify the CSS Using the Display Property

On mobile devices, I don’t want “contact-big” to display. I also don’t care what it looks like since it’s not going to be displayed. So I remove all styling and add the display property. The CSS looks like this in the top (mobile) portion of the CSS file:

.contact-big{
   border-top:2px dotted #999999;
   margin-top: 15px;
   padding-top: 5px;
   margin-bottom:20px;
   display:none;
}

On larger browsers, I want “contact-big” to display and I care what it looks like. All I do is add the display property. I set it to “block” because as a paragraph, it has a break above and below it. The CSS looks like this in my 766px media query:

.contact-big{
   border-top:2px dotted #999999;
   margin-top: 15px;
   padding-top: 5px;
   margin-bottom:20px;
   display: block;
}

Now I’ll work backwards, and apply the display property to the “contact-small” class.

On big browsers, I don’t want “contact-small” to display. I also don’t care what it looks like since it’s not going to be displayed. So I remove all styling and add the display property at the 766px media query like so:

.contact-small{
   border-top:2px dotted #999999;
   margin-top: 15px;
   padding-top: 5px;
   margin-bottom:20px;
   display:none;
}

On mobile devices, I want “contact-small” to display and I care what it looks like. All I do is add the display property. I set it to “block” because as a paragraph, it has a break above and below it. The CSS looks like this in the top (mobile) portion of the CSS file:

.contact-small{
border-top:2px dotted #999999;
margin-top: 15px;
padding-top: 5px;
margin-bottom:20px;
display:block;
}

Notes on the CSS

  • You might not need to set the mobile styling for “contact-small” to display:block; — I do it for two reasons. One, I like the pattern of “off/on, on/off.” Two, in the past, I’ve read articles about some browsers not reverting back to “mobile view” styling for display unless the display property was specifically styled. I can’t find those articles now, so it may not be necessary.
  • I used the display property because I wanted my contact info to disappear and not leave any empty spaces in the layout.
  • If you ever want something to disappear but still take up the space it occupies, you should use the visibility property.

When I stop and view the page in the browser, this is what I see.

Display property in use

The contact information is in the right place in each browser.

Make Changes to the Type as Needed

The type looks great on small browsers. But I haven’t styled it correctly for the larger browsers yet. I need to fix three things:

  • Fix the contact information so it’s a single line across the top
  • Center the skills and education information in the Skills column
  • Increase the size of the statement text

I fixed the contact information by removing the <br> tags and using the character entity for bullets (&bull;) to separate information on the line. I also removed the dotted top border on the .contact-big class, and increased the bottom-margin to 48px. This helps create more space to “frame” the top of the resume.

The contact information in a single line was a bit too long, so I changed the font-size to 16px. That’s fine for a small blurb of information. I wouldn’t use Crimson Text at such a small size for larger paragraphs of information.

When I made the contact information smaller, the acronyms (set at 17px) were too big for the text. I removed the <span class=”acronyms”></span> from around the numbers and acronyms in the single-line contact information only.

The added element across the top of the page looked a little too long/wide at the 766px media query, but too short/narrow at the full browser width. To fix this, I slightly changed left and right margins, as well as changed the max-width of the main container to 960px. As elements are added or removed from a design, spacing often needs to be modified.

I centered the skills and education information by targeting the h2, ul, and p in the Skills column, then changing the text alignment to centered. The CSS looks like this:

#skills_column p, #skills_column h2, #skills_column ul{
   text-align:center;
}

Notes on the CSS:

  • Whenever two elements are used with a space between them, it means “the element within the element.” For example, here the syntax #skills_column p means “the p within the element using the #skills_column id”
  • Whenever two elements are separate by a comma, that means “and.” For example, here we’re targeting the p within the Skills column, and the h2 within the Skills column.
  • I added this syntax in the CSS inside my 766px media query, because I don’t want this text to center until the point at which the layout becomes two columns.

I increased the size of the statement text by changing the font size to 22px and the line-height to 28px. I made this change at the 550px media query, because the size change worked nicely there, even though the layout is still only one column at that point.

Integrate Images

The Classical page is a perfect place to start using images. Pages were often decorated.

Add a Background Image

In the Gallery X exercise, you added a background image. Do it the same way here. To add a background image that repeats across the body of the page, use the following syntax in the CSS:

body{
background-image:url(images/nameofimage.png);
}

Notes on the CSS:

  • The background image is being applied to the body. It can be applied to any element, such as a specific div like the #main_container or the header.
  • The image here is saved in a folder named images that is in the same project folder as the CSS. So the CSS “looks” for a folder named images, goes into the folder, and finds the image to load.
  • The image can be a png, jpg, or gif. In this example, the image is a png.
  • The image will, by default, repeat both horizontally and vertically across the body (or div if you’re using it in a div). You can control how an image repeats, where it is positioned, and whether or not it scrolls or stays fixed in place. HTML dog has a good, simple CSS reference that includes controlling your background images.

I added another background image to the main container. On the largest version of of the resume, I want a single image of a leaf next to Jamie Peterson’s name. The easiest way to do this is to place the image as a background image, with no-repeat, placed 5% from the left and 140px from the top. The CSS looks like this at my 898px media query:

#main_container{
   background-image:url(images/leaf.png);
   background-repeat:no-repeat;
   background-position:5% 140px;
}

When I take the time to save and view my webpage, it looks like this:

images are in

The images are in place. But there are things I’d like to change.

As always, I see a couple of things I’d like to do.

First, I’d like to show a bit of the background image along the top of the page when the browser is too small to show the images I’ve placed. A nice strip of background image will add decoration to the page.

This is easily fixed. I add a margin-top of 15px to the main container for the mobile layout (top portion of the CSS). I then set the margin-top to 0px down in the 898px media query. That way, the top strip of background image disappears at the same time the leaf image appears.

Second, I’d like to pull some of the color palette from the background image into the text. A dark brown-gray would go well with the background pattern.

Add Color to Text

Bringing in some of the softer, brown-gray color of the background image will help make the text look more elegant, old, and subtle. When we think about adding color to a page, we often think about the background, headlines, and pictures. It’s easy to forget adding subtle color to the text itself!

Pick a Color

I recommend using the Hues Hub to pick a color.

When I’m trying to choose a color to go with an existing image, I’ll often place a browser window (with hues hub open) over the browser window with the image showing. Then I can see both the color swatches and the image at the same time. Here’s an example:

hues hub colors

I’ve placed a browser window with hues hub open over a browser window with the resume open. Looking at the color swatches, I think #5C503D might work.

Apply the Color

You can apply the color to each element (h1, h2, h3, p, and so on) in your CSS. If you will be using the color for all (or most) of the text, you can apply it to the universal selector. This will apply the color to all text on the page.

Once you’ve applied the color, view the page in your browser. Make changes as needed. I found #5C503D was too gray for my taste. I ended up using a slightly browner color (one color over to the right from my original choice), like so:

*{
   margin:0;
   padding:0;
   color:#6B532E; 
   }

Tweak the Color as Needed

I decided to use a slightly darker brown for my <strong> elements — so they’d pop out the tiniest bit. I added the color #523314 to strong in the CSS. The color difference is very subtle, but that’s OK on a Classical approach.

I also decided to use a slightly lighter brown for my statement paragraph. The text is bigger, and is standing out a bit too much. I applied the color #7A6A52. Again, the color difference is very subtle.

The results:

All text in color

The text uses three subtly different colors. One color is applied to all of the text via the universal selector (*). A slightly darker color is applied to the strong elements, while a slightly lighter color is applied to the statement paragraph (the text is bigger and I didn’t want it to stand out too much).

Make Changes as Needed

A typographer’s work is never done. There are a couple of slight vertical spacing issues I’ve been leaving until the end to fix. I was hoping that as I worked on other elements, the problems might get resolved. But they haven’t.

last fixes to vertical spacing

There are a couple of vertical spacing issues that need to be fixed.

The space under “Freelance Clients” is simply too big. The heading is not chunked properly with the text below it. This spacing is too big at all browser sizes, so the fix needs to happen up at the top (mobile) of the CSS.

I have a margin top of 16px on my .freelance paragraph. The subtle hierarchy requires extra space between the freelance jobs. I want the .freelance paragraph that comes after the h3 to have a smaller margin top that the others. I can fix this using the following CSS:

h3+.freelance{
   margin-top:8px;
   }

The space between the list items is too tight when the list is narrow and centered. Part of the problem is the shorter line length means some lines have more capital letters on them than others. Part of the problem is that without a stable left line, the text doesn’t chunk as clearly.

These problems only occur when the layout is two columns, so the fix happens at the 766px media query. The list items (li) are styled up at the top of the CSS with a margin bottom of 8px. I only need to change the margin bottom — and 12px works better with the centered text. The CSS looks like this at the 766px media query:

li{
   margin-bottom:12px;
   }

Finally, the Skills and Education headings in the centered text need a bit more space beneath them. This is probably a problem because of all the acronyms in the list plus the looser vertical spacing in the list. The work “Skills” especially starts to look like it is part of the list!

This problems only occurs when the layout is two columns, so the fix happens at the 766px media query. The h2 is styled up at the top of the CSS with a margin bottom of 4px. I only need to change the margin bottom of the h2 inside the Skills column — and 8px works better with the centered text. The CSS looks like this at the 766px media query:

#skills_column h2{
   margin-bottom:8px;
   }

After these last fixes, It all looks good!

Remember, there are many ways to approach a Classical page layout. And contemporary designers mix-and-match styles and approaches. As you learn more about web typography, feel free to incorporate different styles in a single design.

Quick Tips & Resources

Here are some resources related to this lesson
  • If you’re looking for a pattern for your page background, try Subtle Patterns (a curated site with free patterns — he just asks that you credit him in your HTML or CSS code).
  • There are also plenty of “Top 10” lists of places to find background images as well as tutorials on how to make your own background pattern. Google is your friend.
  • Testing fonts can be long and painful. I’ve tested hundreds of web fonts already and posted a few good ones at Good Web Fonts. They all work well across browsers and operating systems.