You do this in CSS with modern browsers IE 6, 7 and 8 all support this. The size="60" attribute in the code refers to the character length of the text box.

Here's the selector you would use:

Blessings,
Tony

To change the "size" attribute would require a hook_form_alter or some javascript and you do want to give the user the ability to enter up to 60 characters. However, to make it appear a different size, simply use the css width:

/* To copy Anthony's code */
#user-login-form input.form-text {
  width: 120px;
}

If you want to also edit the user registration page AND the user profil page you'll need to add other selectors:

/* To copy Anthony's code */
#user-register input.form-text,
#user-profile-form input.form-text,
#user-login-form input.form-text {
  width: 120px;
}

You could also resize the field using a custom module.

For example, if you created mysite.module, you could use something like this to reduce the field size to 30 characters:

function mysite_form_alter(&$form, &$form_state, $form_id) {
  switch ($form_id) {
    case 'user_profile_form':
      $form['account']['name']['#size'] = 30;
      $form['account']['mail']['#size'] = 30;
      break;
  }
}

I'd be cautious about making the fields larger than the maxlength already specified, since that type of change could make your data larger than the field sizes in the user table, but you could use this to make them smaller. If you only want to do this for appearance sake, I'd use the CSS examples shown above.

Micah