User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

So I need to transform a web form into a pdf to be sent as an attachment.

Technically it is fine, but I need some help about best practices for the appearance of the printable document.

I generate the pdf from a web source, so I can use regular most of HTML and CSS to produce my paper

A printable form section looks roughly like this:

enter image description here

The issue I have:
The original paper version (the one that has been 'e'-ified) used some very thin font that was very light for the eyes but not greyish. Combined with hand written text and you have a form easy to read (not to decipher, but locations of things are clear).

On screen it is perfect, but it is a bit confusing on paper, and it is a bit hard to read. There are plenty of sections, and quite some fields and when printed everything inside a section looks the same and it is difficult to read.

I tried to play with the font weight value in the CSS, but it is a 'broken' feature since you have nine values available (from 100 to 900) but only few of them are really working (generally 2: regular and bold...).

Using bold on labels make the paper version very dim.

I'm considering using the italic but I'm not sure that's a correct move.

What should I do here with my labels and values to help the people to read the form on paper ?

share|improve this question

closed as too broad by DA01, Graham Herrli, JohnGB, Evil Closet Monkey, msparer Jan 26 '15 at 7:55

There are either too many possible answers, or good answers would be too long for this format. Please add details to narrow the answer set or to isolate an issue that can be answered in a few paragraphs.If this question can be reworded to fit the rules in the help center, please edit the question.

I'm not a professional in UX nor I know how this site works, so I better just comment: The field names should not be bold, if there's readability issues, change the font, there's plenty of good sans-serif fonts. For the field values, you might go well with typewriter font: this font still evokes that something has been "filled in". The question is: if someone sees both the HTML and the printed version, they might be a bit confused by that. Italics is, OTOH, a bad option, it should be used to indicate emphasis, which is not your case. – yo' Jan 26 '14 at 12:45
@tohecz, thanks for your advice. The html version used for the print view is not the same than the one for web usage. I'm just using html because it is convenient for generating PDF. I've tried one of those typewriter font, but IMHO, it is quite ugly. Maybe I can use a variant of the current font I have. – Guillaume Jan 26 '14 at 13:55
I have to ask: If you have a working web form, why oh why would you turn it into a PDF someone has to email? – DA01 Jan 25 '15 at 4:20
That said, asking how to best design paper forms is a really broad topic. – DA01 Jan 25 '15 at 4:21
@DA01 because sometime people still need or want to print form... – Guillaume Jan 26 '15 at 8:10

Can you add a row between the header and the form labels & responses?

[Section Name]

Field Label | Field Response

[label names] | [responses]

share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.