Print designer's terms converted to Web terms

Over my 20 years of web development/design, I have run into a lot of terms that only print designers use. I was lucky enough to work at a really cool design shop where I picked up a few terms that “new” developers might not know but clients or designers use often.

One thing that frustrates print designers is that the web is very limiting. People going from print to web lose where they can place elements, control of spacing between letters, effects on letters, and even font selection is limited. Due to CSS3 and HTML5, we now can replicate a lot of effects, but with print a designer can do just about whatever they want as long as it fits on the size of piece of paper they are printing to.

We convert Photoshop files to WordPress themes regularly, but sometimes Illustrator files and even sometimes Indesign files that we have to convert. (Quark Express still exists, but I haven’t gotten one of those in a decade). If you are converting files like this to web pages, you should know these terms.

Before the fold

This is a newspaper term that somehow made it into web terminology. It would be awesome if I could fold my monitor, but that technology doesn’t quite exist yet. What the designer means is “before you have to scroll”, it comes from the front page of a newspaper. They wanted content to show up before someone had to unfold the article to read more.

With web, there fold is moving. Right now, I’m using my 24″ monitor to write this and when I view the page, I’ll see a lot of text. When I switch to my laptop, I’ll see fewer words. So, where is the fold? When I client wants it before the fold, you have to think about what shows on an 11″ laptop.

Kerning

From the dictionary: Kern is to adjust the spacing between (letters or characters) in a piece of text to be printed.

The closest we get in the web realm is the CSS rule “letter-spacing”. Print designers are used to being able to edit the kerning between individual letters. When I worked at that design firm, I saw a designer on a huge 19″ monitor (yes, in 1998 that was huge) and he was zoomed in to fixed the kerning between two letters. He was so zoomed in you only saw parts of the two letters. Quite crazy for a web developer to comprehend, but that is the control that a print designer is used to having.

In the web, we can only adjust the spacing for the whole HTML element, for example:

p {
letter-spacing: 1px; // default is 0
}


Tracking

Tracking is very similar to Kerning, but it involves the whole word, not just a single letter. Again, we don’t have a good way to do this. The closest you can get to in the web is by using a span:

.span {
letter-spacing: 10px;
}

Example:

This is an example of one word.

Leading

This term is pronounced like Pb, the chemical on the periodic table lead, not like someone that is winning the race (for clarification “ledding”). What the designer means is the CSS term of “line-height”. So, if they need more spacing between lines of text, you can do something like:

p {
line-height: 2rem;
}


Serifs and Sans-serif

Serifs are pretty straightforward, fonts like Times has little dangly things called serifs. Fonts like Arial or Helvetica are “without serifs”, but they like to use the Latin term “sans-serif”. I’m guessing that “sans” is from Latin, makes sense.

CMYK, RGB, Pantone

CMYK stands for cyan, magenta, yellow, and black. RGB stands for red, green, and blue. Print using CMYK and monitors use RGB.

Pantone makes no sense when it comes to the web. It is short for Pantone Matching System (PMS), and everyone gets angry when they have to deal with it (bad joke?). It is a term from the 1950’s and it exists so manufacturers of ink can have some kind of standard on colors. If a client asks for the Pantone, I have to tell them I do not know and tell them I’m sure there are converters out there somewhere.

And if you were wondering, the Pantone Color of the Year for 2017 is “Pantone 15-0343”, aka Greenery.

Hopefully these terms help you guys out.