Designing for Print with HTML and CSS

Can designs implemented in HTML and CSS be effectively used for reproduction via commercial printing processes? Resolution, file export and industry standards should all be taken into account. My first experience is documented here as I developed a simple promtional business card for a silly side project and had it produced at a commercial printer.

Layout

Standard CSS rules are used for layout, positioning and style with one notable difference from designs for the web; all units are specified in either in or pt. Even Twitter Bootstrap was used to incorporate familiar styles from the actual application. The markup for a business card with bleed would look similar to:

.card {
    position: relative;
    width: 3.75in;
    height: 2.25in;
}
.card-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 3.75in;
    height: 2.25in;
}
.card-body {
    position: absolute;
    top: .125in;
    left: .125in;
    width: 3.5in;
    height: 2in;
    padding: .125in;
}
<div class="card">
    <div class="card-background">
        <img src="http://radbow.com/1125x675.png" style="width:100%">
    </div>
    <div class="card-body">
        <h1 style="color:white;">Radbow</h1>
        <h4 style="color:black; font-weight:bold;">placeholder image generator</h4>
        <h4 style="color:black;">RESTful API, CDN hosted, <br>Python &amp; Django powered</h4>
        <h4 style="color:black;">http://radbow.com</h4>
    </div>
</div>

Bleed

.125in of bleed for any background that extends to the edge of the print is the industry standard. It is also advisable to hold content from the edges of the final size by .125in. The example above incorporates both of these practices. Displaying the finished size of the card for design purposes can be accomplished with a simple rule, which should be excluded from the final export:

.card-body {
    border: 1pt solid gray;
}

Images

Printers produce images at a much higher resolution than most computer screens; typically 300dpi compared to 72dpi respectively. The CSS background-size declaration can be used to preserve the sizing of background images, but using <img> elements with the width set to 100% was used in this example. Simple math is used to determine the size of any images incorporated in the design:

pixels = inches * 300

Color

RGB and CMYK

Since I had existing RGB assets and an existing RGB color palate, I opted to let my vendor do the CMYK conversion for me. This may not work well in your case, and your printer may flatly reject the file, so an explicit conversion is recommended. Software like Prince supports the CSS cmyk color definition nativelty.

Tip: Pure Colors

Try to use pure shades of color, or “high percentage” blends, whenever possible. In order to blend colors, printing presses use screens (varied size dots of a solid process color) to replicate colors present in your design, which may cause rough edges. Typography can especially benefit from the use of solid colors, so avoid the off-black text that has become ubiquitous in design for the web.

Export

The largest source of frustration was exporting the completed design. On Mac OS, built-in support for PDF generation in the print dialog would seem to make this easy. However, most (all?) modern browsers attempt to improve print styling for more reliable reproduction on consumer printers by removing backgrounds and changing text color. The -webkit-print-color-adjust declaration was tried, but the results were not adequate. A standalone HTML-to-PDF application would end up being the best solution.

PDF

Prince was chosen for it’s support of the CSS @page declaration, which includes the ability to set the final print size, incorporate bleed, and display crop marks. For a business card, the following declaration worked well:

@page {
    margin: -.125in 0 0 -.125in;
    size: 3.5in 2in;
    marks: crop;
}

wkhtmltopdf was also tested, but did not include support for the @page property or any related attributes. It’s use of WebKit is notable, since my design was previewed in the same rendering engine durring design, giving greater compatibility and consistency. Crop marks could be implemented in CSS, but of concern is the alignment; CSS borders run along the edges of a container, making it difficult to align the mark on the center of the cut-line.

Raster Formats

TIFF or JPEG exports were not attempted, due to the benefits afforded by maintaining vector data present in a majority of the design.

Results

The final HTML/CSS source code can be seen here.

The final files which were sent to the printer look like this (when rasterized for convenient display):


These are the cards I got back from the printer (click to enlarge):

I am pleased with the final printed result, though my iPhone didn’t capture it accurately; the purple areas have enough contrast for the text to read easily, and the text color on the back is quite saturated. I was admitidley a bit worried about sending RGB formatted files, but the results are better than I expected.