Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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
1  
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. –  tohecz Jan 26 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 at 13:55
add comment

1 Answer

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
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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