Writing a Resume in HTML/CSS

When it comes to making a proper resumé, there seems to be an endless array of options. You can use Word or Pages and the multitude of templates they provide. You can look online for a resumé creator that has a desirable theme and format. If you’re brave, you can follow in the footsteps of someone else’s LaTeX template. However, each of these options comes with its own downsides. Rich document editors are finicky, online platforms are limited, and LaTeX is…LaTeX. Instead, I decided to make my life as difficult as possible and write my resume from scratch—with pure HTML and CSS.

The Dream

The goal of this project was not just to redesign my resumé, but do so on a printable HTML page. Sure, in part for the granular control over placement and appearance pure HTML and CSS lend, but also because I just wanted to see if I could do it (prior to starting this, I had been chatting with Devin Rousso, a developer at Apple who did the same thing with his).

Implementation Details

The key challenge of this endeavor was that the end product had to be easily exported to PDF for printing. And, while it’s easy enough to open the print menu and save the page to your documents, it turns out to be incredibly difficult to get everything to line up and fill the page correctly if you’re paying close attention. To manage this we’ll use physical measurements such as in and pt offered by CSS. To then deal with inconsistencies between displays of different dimensions and pixel densities, we’ll use a separate stylesheet for screen viewing with vaguely analog measurements in em and px.

Print Stylesheet

If you’re unfamiliar, it’s worth noting that CSS has a full set of suffixes for working in physical measurements. These include in, pt = 1/72 in, and pc = 12 pt, as well as cm and mm for all the non-degenerate metric users. The first step in setting up the resume page was to set a page width and reasonable internal padding:

body {
  width: 8.5in;
  padding: 0.7in 0.8in 0 0.8in;
  margin: 0;
  box-sizing: border-box;
}

Note that we use border-box spacing because we want the width to be 8.5 inches regardless of the padding. We also remove the bottom margin to avoid bleeding over onto a second page when printing.

The next step was to make sure that all header, paragraph, and list elements had appropriate font sizes in pt. Don’t forget to do the same for embedded images. In addition, I had to adjust the grays in my document to be darker in print, as they’d show up to be too faint to be easily readable when I printed out the first iteration.

Finally, to actually print the resume I used the File > Export to PDF... feature of Safari, which produces a more consistent PDF version than the print menu for some reason.

Web Stylesheet

The web stylesheet was relatively easier to set up, as I didn’t have to spend hours messing around with the lower margin of the page. However, it’s worth reviewing what the screen measurements correspond to: em is a relative measurement to the default font size of the current element and px is of course a single pixel on the screen.

Including the Stylesheets

Including the proper stylesheets for the correct scenario is surprisingly easy; the <link> tag includes a directive for when it should be applied. Here’s what I used for my particular case. Note that I included a shared stylesheet for overall structural stuff.

<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/web.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/print.css" media="print">

Closing Remarks

Having spent an unreasonable amount of time fiddling with this stuff myself, I hope you can jump ahead to the actual interesting bit of designing your HTML/CSS resume without having to deal with technical formatting. Feel free to take inspiration from what I’ve done, and especially don’t be afraid to experiment with what you can do! A lot of developers don’t realize just how remarkable of a tool CSS really is.

And of course, the final product and the GitHub repository.