Font size

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?
 
Best font-size is open to debate but this post is great: Relative readability / Wilson Miner
Form labels shouldn't really be of differing size as they're no more important than surrounding content, they just serve a different purpose.

As for labels' positioning, on top is better with the field underneath (and any form help info below that).

Code:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Nunc rhoncus dui et mauris. Nam augue felis, dapibus.Proin sem risus, pretium ut, mattis nec, aliquet sed, magna.Nam suscipit massa ac nunc. Sed diam. Aenean at sapien.Sed laoreet, odio sit amet auctor aliquam, magna dolor bibendum.Form label+-----------------------+| Form field            |+-----------------------+form help infoForm label+-----------------------+| Form field            |+-----------------------+Form label+-----------------------+| Form field            |+-----------------------+Date of birth+-----------------------+| Form field            |+-----------------------+dd/mm/yy
 
Thanks Harry.

That's a great article - and some of the links from it. I'm including that in my email about this to the web designer.
 
No problemo. I've done loads of work on form based apps, they're really interesting for usability etc.
 
Personally and it depends on your layout or design, I would wrap the labels in the label tag with the right for attribute, check the accessibility thread in my sig for details if you are unsure and give it CSS similar to ~

label{display:block;float:left;min-width:200px;border-top:1px dashed #CCC;padding:20px 0}

That way all your labels will be the same width the inputs will all be the same way away and the border will show where they align up. You could add the border around both the input and the label that would be better TBH.

Font size I would say 80% on the body and then 1em on the main text.

key:
Green ~ CSS
 
Font sizes are an important part of Web design because they are the first hurdle to overcome in creating a page that is readable by your customers. Fonts that are too large take up too much space on the page and are as unreadable as ant-sized tiny fonts.
...........................................
home based business,home business
 
Thanks Jazajay,

I don't see a link to your portfolio... do you have a folio site I can take a look at?
 
No I do free lancing programming, but I maintain → Roger Needle, window cleaners in Sutton Coldfield and Birmingham for a family member check the readability link on the font size question as well, details on how I pulled it off are well detailed in my accessibility thread.

Readability is a lot more than just the right font size it's about line height, colour contrast and removing distracting items from the page as well.

But I also agree with Harry underneath each other can make a lot of sense it's just whats good for your design as I use both ways if space doesn't permit, so.... :)
 
Back
Top