Question: What are best practices for web printing?

[chachasikes]

Wes (from Department of Cannabis Control) is creating a template that will used throughout an agency (pdf first).

We are discussing "web-first" templates, and also design affordances for these documents and want to make sure our direction is in line with the direction of the Design System.

• For colors, are there accessibility guidelines for print outs hosted on websites? Does our color accessibility system consider print outs & how much color ink is used? (would the recommendation be black & white only, or certain value/percentages (like 10%)?

Any guidance will be appreciated, and also asking for general awareness.

[chachasikes]

@kmbrlygl @rkojik If you know anyone who can answer this, your advice is welcome!

[xjensen]

My knowledge may be a little out-of-date, but here's my take.

• Try to avoid color text in print-outs. Black text is easiest to print and easiest to read on paper.
• Limit color to graphics/photos and highlighted items (like headings, rules, borders).
• Ensure the content is high contrast. Soft colors often wash out when sent through the printer.
• Ensure fonts use medium and heavier weights. Smaller weights do not print well. Bolder, not thinner.
• Take care to maintain appropriate leading/line-height and letter spacing.
• Include adequate page margins.
• Test your prints in grayscale. There are still many printers out there, like office laser printers, which don't do color.

[kmbrlygl]

Jon's notes are on point 👌 and I agree with all of them generally. Here are my additions:

• Agree w/ Jon re: colors. If you are going to use them, designs with higher contrast ratios carry over best to print outs
  • Try to avoid using colors inverted (like white text on navy background) or using full color backgrounds to save on ink
  • The accessibility guideline around not using color as the only means of conveying information still holds
• Minimum page margins of .25" will work for most printers
• Fonts
  • Sans serif fonts work best (especially for body copy) since they have more consistent strokes and lines
  • Agree with using heavier weights, though Regular/Roman should be okay to use as well. Avoid the light font weight or fonts that are condensed.
  • 12pt font-size minimum (meaning 12pt for the smallest content like captions or footers)
• Keep line lengths (measure) in the range of 50–75 characters in body copy for best readability. You can achieve this by using large enough font size, breaking content into columns or call-out boxes, thoughtful use of white space, etc.

That's all I can think of at the moment. Hope it helps!

[chachasikes]

Thank you!!! Will share with Wes & thank you so much for contributing your excellent knowledge to our shared public issue bank.

[extinah]

Agree with Kimberly and Jon. :)

Some more feedback

• Headings/typography: Adjust headings/text size. E.g. regular text is similar to 12 pt font. Headings should still have size hierarchy - just not incredibly large
• Color: Same comments as Jon. Think grayscale.
• Header/footer: Remove site header/footer - use one tailored to print
• Images: Remove decorative images
• Ensure content is print friendly - e.g. links
• Links within content: We used a footnote system so all URLs are spelled out at the end (since it's being printed, just underlined text wasn't helpful - but link text keeps the context of the sentence)

Here's an example at FTB - if you print this page, you'll see how it looks https://www.ftb.ca.gov/pay/withholding/index.html (do a print preview).