Journal

Consistent Form Styling

21 September 2006 › 9 comments

Well, there’s only about an hour left before I leave for Gospelcon, and I am gitting a bit nervous about giving my presentation. I am sure it will go well, and have my Apple Keynote slideshow all prepared. I will be posting that after I present, as I might be adding slight tweaks here or there as I think of them.

Anyway, I just had a thought that I wanted to share real quick, and that’s styling form elements consistently. By default, this is what the input and textarea look like for most browsers. There is typically Arial or some sans-serif font for the text input, and then Courier New or some monospace font for the textarea. Given that the two normally are used in conjunction with each other, it is beyond me why nearly all browser makers do this.

Inconsistent:

Consistent:

To achieve consistent font usage in form elements is so easy, that I find it surprising more people don’t do it, even designers that I highly respect (not naming any names). I suspect that form elements are not something they really think about in their design comp mockups, so it just doesn’t translate into code on their live sites. Anyway, just do this…

input, textarea
{
  /* Your styles here */
}

Notice that I did not actually provide any declarations inside the brackets. That is because it really does not matter how you style the text inside, just as long as you keep it consistent. I think that about covers it. That concludes this brief public service announcement, thanks for listening. Go fix those forms!

Discussion + Dissension

1. #1 Jared Christensen

   You pickin’ on me, son??? ;)

   Good luck presenting!

2. #2 Nathan Smith

   Jared: Not picking on ya. There were quite a few sites I checked, of guys I know are solid designers / CSS’ers, and many of them suffered from the same mis-matching of form fonts. Hopefully it’ll be a non-issue if enough people read this little reminder article. Thanks, by the way – I hope my presentation goes well, and I’m not too nervous or fumbling for words.

3. #3 Chris Harrison

   Best of luck to you Nathan. Hope your presentation goes well!

4. #4 Yannick

   Hmm..come to think of it I didn’t even realise that was the case. Thanks for pointing that out.

   All the best with your presentation. I know your presentation will go well. The Lord is with you, He will help you and He will guide you. Take care Nathan.

5. #5 Jon-Michael

   Yeah, I’ve never understood the different fonts. It’d be so much more logical if they’d inherit the declared font.

   For me, out of sheer laziness, I usually use this:

   body,form * { font-family: verdana,sans-serif; }

   That way, I’ll only have one other font family declaration (headings—serif) per stylesheet.

6. #6 Wesley Walser

   I hadn’t realized that this was the case either. Good quick tip before walking out the door. Good luck on presenting.

7. #7 Antoine

   Ooooh; good catch. Thanks for the headsup and best of blessings on your presentation.

8. #8 David

   I got to this posting a bit late… Good idea, I’ll have to take care of that tomorrowish…

   And from what I hear, you did really well on the presentation. Good work on both.

9. #9 Grant Day

   Thanks, implemented and looking good.

   Found you site through your loading-animation from thickbox and then this tip.

   Cheer, Grant

Comments closed after 2 weeks.