I'm looking for some guidance on how labels should be styled for a data entry web application. My client feels that the labels detract from the user interface where I feel they provide necessary guidance.

Two competing theories are:

1 - Make the labels the same font size, bold, and black:

enter image description here

2 - Make the labels slightly larger (e.g. 9pt when the UI uses an 8pt default), normal weight, and a dim gray:

enter image description here

Rather than subjective debate, I'm especially curious if there is any science to one method or the other.

  • How did you narrow it to those two options? Also, can you provide graphic examples? Apr 17, 2013 at 19:16
  • 1
    @3nafish Samples added. The highlighted field is just a result of the way Chrome displays input elements.
    – Yuck
    Apr 17, 2013 at 21:06

2 Answers 2


It seems that there are some conflicting views when deciding to use a bold field input label or not.

“In this layout [with labels above the input fields], it’s advisable to use bold fonts for input field labels. This increases their visual weight and brings them to the foreground of the layout.”—Luke Wroblewski.

However, in an eye tracking study conducted by Luke Wroblewski, bold labels resulted in a 60% increase in saccade (fast movement of an eye) time to move from label to input field.

from 50ms without bold labels to 80ms with bold labels.

UXMatters.com wrote:

Reading bold labels is a little bit more difficult for users, so it’s preferable to use plain text labels. However, when using bold labels, you might want to style the input fields not to have heavy borders.

I’m my opinion, I wouldn't increase the font size of the field labels to increase the visual weight. Using bold field labels is a pretty common pattern in forms these days, and I’m sure big companies who employ this pattern, such as Google, have conducted their own research as to why they do it.


I don't particularly see the point of increasing font size unless it is a heading or something.


When possible, format the labels using bold text. Otherwise, put the labels in quotation marks only if required to prevent confusion.


With labeled data, use bold to emphasize whichever is more important for the data as a whole.

  • For mostly generic data (where the data has little meaning without its labels, as with numerals or dates), use bold labels and plain data so that users can more easily scan and understand the types of data.
  • For mostly self-explanatory data, use plain labels and bold data so that users can focus on the data itself.
  • Alternatively, you can use dark gray text to de-emphasize less important information instead of using bold to emphasize the more important information.
  • The OP specifically asks for evidence. Do you have any evidence to suggest that this way works better than others? Apr 17, 2013 at 19:32
  • 1
    There you go, added reference.
    – rk.
    Apr 17, 2013 at 19:38
  • The OP's labels are for data entry. That source is a guideline for labels on ribbons. Apr 17, 2013 at 19:46
  • How will you treat a label in 'data-entry' separately from another kind (ribbon) label?
    – rk.
    Apr 17, 2013 at 19:48
  • 1
    I appreciate the reference to MSDN. One would hope that Microsoft has research into their choices, or at least years of experience developing intuitive user interfaces.
    – Yuck
    Apr 17, 2013 at 21:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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