RichardC
New Member
Hi,
I have 2 questions, and then below that I've given some background info. I don't know how important or not the background info is in answering the questions.
And thanks for any help
My 2 questions
First question: what size in Ems is ideal for body copy, and what size for labelling in forms?
And second: in building a site/web app, where there are some items of text in forms that are quite long, what are the best ways of dealing with this?
Simplified version:
Click for full size - Uploaded with plasq's Skitch - is this bad form design? - moving the input field for the the longer text like this.
I put 6 solutions that I can think of below. Number 7 or number 2 appeals to me, with some of number 1 where it's possible, but my web designer thinks number 2 would result in a cluttered layout (my answer to that is: not if it's done neatly and mindfully. I'd also consider some of number 6 but not if this means potential probs relating to the code.
1. Shorten the text of the label - disadvantage = can sacrifice clarity of message
2. Run text onto 2 lines - disadvantage = possibly less neat design?
3. Decrease size of font throughout the website - disadvantage = sacrifices readability throughout
4. Decrease size of font for specific labels - disadvantage = looks out of place
5. Move distance between labels and text fields throughout - disadvantage = sacrifices aesthetics
6. Move some form fields further to the right - disadvantage = my web designer said this is bad form design and would mean less streamlined code
7. Move labelling to above text fields. - disadvantage = while I think this would work for some items, there are some pages where I think this would make it less easy to review information - as it would be perhaps less easy to scan down the items with the responses in the same line of view as the labels... though maybe with the right typography for labels and for responses this would be doable...?
Background
I know I should be able to simply ask my web designer these questions, but for a couple of reasons, I'm looking for a second opinion:
I got some PSDs made showing layout of a site/web app I'm having built. I'm now working with a different person to do the CSS.
The PSD layout looked good and font sizing looked good. I understand that with the CSS build, there are some things that can't look exactly the same.
But font size of main body texts and text in forms just looked too small.
Font size is important - I want forms to be really easy to read and follow and for main body texts - such as About pages - I want users to be able to read effortlessly - so I want good typography/typesetting - on everything from line length to font size.
The site/app is not a standard brochure site - there are quite a few forms for people to fill in for example, and there are approximately 30 pages which each differ from other pages due to their respective content and functionality.
Some of the texts for items in forms - the labelling I guess you'd call it - is longer than other texts. This is because some items need a few words to describe what's needed in the form field.
For example, on one page, form labels range from 7 characters to 43 characters.
There was a case on one page in which the psd designer had run longer text on one line, with the form field being shunted further to the right than other form fields. It was neat and looked fine. My web designer said that this was bad form design and code would be less streamlined with this.
His answer was to reduce font size right across the board so things can be fitted in better, so font size is consistent, but to me it looked too small for good readability.
I think complexities of the layout mean that there might be compromises somewhere. I don't know enough about web design to know where the compromises should be, but I'm not keen on decreasing font size across the board.
Any advice?
I have 2 questions, and then below that I've given some background info. I don't know how important or not the background info is in answering the questions.
And thanks for any help
My 2 questions
First question: what size in Ems is ideal for body copy, and what size for labelling in forms?
And second: in building a site/web app, where there are some items of text in forms that are quite long, what are the best ways of dealing with this?
Simplified version:
Click for full size - Uploaded with plasq's Skitch - is this bad form design? - moving the input field for the the longer text like this.
I put 6 solutions that I can think of below. Number 7 or number 2 appeals to me, with some of number 1 where it's possible, but my web designer thinks number 2 would result in a cluttered layout (my answer to that is: not if it's done neatly and mindfully. I'd also consider some of number 6 but not if this means potential probs relating to the code.
1. Shorten the text of the label - disadvantage = can sacrifice clarity of message
2. Run text onto 2 lines - disadvantage = possibly less neat design?
3. Decrease size of font throughout the website - disadvantage = sacrifices readability throughout
4. Decrease size of font for specific labels - disadvantage = looks out of place
5. Move distance between labels and text fields throughout - disadvantage = sacrifices aesthetics
6. Move some form fields further to the right - disadvantage = my web designer said this is bad form design and would mean less streamlined code
7. Move labelling to above text fields. - disadvantage = while I think this would work for some items, there are some pages where I think this would make it less easy to review information - as it would be perhaps less easy to scan down the items with the responses in the same line of view as the labels... though maybe with the right typography for labels and for responses this would be doable...?
Background
I know I should be able to simply ask my web designer these questions, but for a couple of reasons, I'm looking for a second opinion:
I got some PSDs made showing layout of a site/web app I'm having built. I'm now working with a different person to do the CSS.
The PSD layout looked good and font sizing looked good. I understand that with the CSS build, there are some things that can't look exactly the same.
But font size of main body texts and text in forms just looked too small.
Font size is important - I want forms to be really easy to read and follow and for main body texts - such as About pages - I want users to be able to read effortlessly - so I want good typography/typesetting - on everything from line length to font size.
The site/app is not a standard brochure site - there are quite a few forms for people to fill in for example, and there are approximately 30 pages which each differ from other pages due to their respective content and functionality.
Some of the texts for items in forms - the labelling I guess you'd call it - is longer than other texts. This is because some items need a few words to describe what's needed in the form field.
For example, on one page, form labels range from 7 characters to 43 characters.
There was a case on one page in which the psd designer had run longer text on one line, with the form field being shunted further to the right than other form fields. It was neat and looked fine. My web designer said that this was bad form design and code would be less streamlined with this.
His answer was to reduce font size right across the board so things can be fitted in better, so font size is consistent, but to me it looked too small for good readability.
I think complexities of the layout mean that there might be compromises somewhere. I don't know enough about web design to know where the compromises should be, but I'm not keen on decreasing font size across the board.
Any advice?
