Exercise : Classical Resume (Use a Classical Approach)

Overview of the Assignment

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 Web Fonts.

The day I searched for my serif font, there were 707 fonts available. Narrow down the options.

1. Opening the drop down menu of options under “Filters”
2. Select “Serif” only (turn all other filters off)
3. Sort by “number of styles”

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

Use the New Font

Use the 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 .

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.

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.

Make just enough changes to 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.

I recommend “live testing” files rather than using a simulator. Simulators won’t show you what a font actually looks like on someone else’s screen. And avoid using an “automatic screenshot” service. Screenshots are usually taken the instant a page loads—before the font loads. The results will suggest your web fonts aren’t working!

Put Files Online

Upload your Classical resume files to your server space. For example, I’ll put my resume_classical folder up on laurafranz.com in order to test Crimson.

Choose a Cross Browser Testing Service

I have used both Cross Browser Testing and Sauce Labs. There are other services out there, and you should use the one that is a best fit for you. Look for something that provides what you need, for the amount of time you need it, and at a reasonable cost. If a provider limits the number of minutes you can use their service per month, they should allow you to roll-over minutes (some months you’ll use it more than others).

There is no rush or reason to sign up for a (paid) service for this lesson!

Cross Browser Testing has a 1 week (60 minutes) free trial period. Sauce Labs offers a 14-day free trial period with unlimited manual testing. so I’ll show you the basics of testing fonts using  Sauce Lab’s free trial period.

Start Testing!

1. Go to saucelab.com
2. Sign up for their free trial
3. Log in if necessary
4. Start a new Interactive Session

5. Enter the URL you want to test, Choose an Operating System and Browser (from this chart of OS/Browser combinations to test), click “Test”
6. It takes some time, but the site will provide you with a live version of your page, as viewed on the OS and browser you selected.

7. Take a screenshot of your window (mac: command+shift+3 | pc: PrtScn key). Make notes on your chart as needed.
8. When you’re ready to test another OS and browser, create a new tab by clicking the + sign.

 

9. NOTE: Sauce Labs only allows 9 tests open at a time. When you reach the maximum, click on your name (in upper-right corner) and go to your account. When asked if you want to leave the page click “yes.” Then start a new Interactive Session.
10. Put all of your screenshots in a folder to review them later.

Review the Screenshots of Your Font Used Cross Browser

Testing Crimson, I found (as expected) it looks terrible on Win 8 and 8.1 in Firefox 40, and in WinXP on Opera 12. Even good fonts do that, so I’m not too concerned. What concerns me more is that I have to fix the faux italic that comes up on IE8 (Google Web Fonts and IE8 don’t play well together). What makes me happy is that Crimson appears to be acceptable (if not as spectacular as it is on my mac) on all the other OS/Browser combinations I tried.

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, take the time to make a mock-up first! You can explore more ideas quickly and efficiently. For this lesson, make your mock-ups in whatever software you feel most comfortable with.

Again, you might find my (empty) mock-up_templates handy. One is an eps (it can be opened in Illustrator or placed in other programs), the other is an inDesign file. Since we’re making slight changes to a primarily text page, and I work most quickly in InDesign, I’ll do my mock-up in InDesign.

Some Helpful Mockup Resources

• My (empty) mock-up_templates — eps and inDesign files
• how to download Google fonts to use in a mockup

Get the Fonts for the Mock-Up

I’m using Crimson Text from Google Fonts. I have two options for getting Crimson to my desktop so I can use it.

1. Add the font family to my collection, then download my collection as a zip file. Open the zip file, and put the fonts in my font library.
2. Synch with skyfonts. You need an account in order to do this. It’s a bit confusing, because when prompted for the name of your web font provider Google Fonts is not an option! You need to open a skyfonts account with another web font provider, then use it to access Google Fonts. For example, I have an account with myfonts.com, so I used that account to open a skyfonts account. I immediately had access to Google Fonts. You can set up your account with whatever service you prefer.

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.

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 overall layout down to the 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 mobile typography.

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.

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

I made my changes like so:

• I cut the contact paragraph out the the Contact column and pasted it into the header above the h1.
• I cut the professional statement paragraph out of the Contact column, and pasted into the Experience column above the h2.

The results? Ack!

Now that the Contact column is empty, it doesn’t take up any space. So the 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 the 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.

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

First, I need to delete the Contact column. If it’s not being used, it doesn’t need to be there. I deleted <div id=”contact_column”></div> from my HTML file. I deleted all the #contact_column styling from my CSS (and from each media query within the CSS).

Next, I need to fix the width of Experience and Skills 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.

My final measurements?

• At min-width 550px, both columns have a width of 70% and a padding-left of 15%.
• At min-width 766px, #experience_column as a width of 53% and a padding-left of 10%; #skills_column has as a width 24% of and a padding-left of 4%.
• At min-width 898px, #experience_column as a width of 43% and a padding-left of 17%; #skills_column has as a width 22% of and a padding-left of 5%.

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:

• At min-width 550px, both header and #experience_column have a padding-left of 15%.
• At min-width 766px, both header and #experience_column have a padding-left of 10%;
• At min-width 898px, both header and #experience_column have a padding-left of 17%.

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.

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 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 my 766px media query, since that is where my layout shifts to a two-column layout.

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 past them in again down in the 766px 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.

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 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 at the 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 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.

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

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 the 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:

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 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:

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 applied the color #523314. 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:

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.

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