2

My company is proceeding with a branding initiative which involves a branded font. The desire of the external agency is to apply the branded font to all input controls on the page, including text input controls.

I've noticed many other sites (Youtube, Gmail, Apple, Stack Overlfow) restrict input controls to "Helvetica Neue, Helvetica, Arial, sans-serif". Is there any compelling argument to use a branded font in input controls?

  • The compelling argument would come from branding. So not sure this is really a UX question as much as maybe Graphic Design. – DA01 Aug 18 '15 at 20:03
1

First of all, it will all depend on your branded font. See how you mention "Roboto" and "Helvetica Neue, Helvetica, Arial, sans-serif" which are very similar. In that case, the answer to your question could be "no (relatively)". Now, use a branded font similar to Lobster and the answer will be a resounding "hell yeah!". You should really show a specimen of your font for an accurate answer.

However, it's very common to see regular system fonts for forms because there's a direct resemblance to code, data, stripped content. This means focus is put into content over visuals. There's no additional decorations, there's no gimmicks, just raw data. This is specially true in a pattern you probably have seen may times: monospaced fonts in forms. These fonts are used for legibility, spacing (they all take the exact same width, hence the monospace name) and it's the font family used for most technical and scientific documents. Take a read to this great description of monospaced fonts and why they're best suited for forms and code.

The above being said, there's a lot of discussion when it comes to monospaced vs variable-width fonts legibility, which in term is what should really worried about. enter image description here

But check this out: there are fonts specifically built for forms and code, like Droid or Mono, while other fonts are better for blocks of text, titles and such. Take a look to this font list.

There's an additional concern: Pattern Breaking. A form is not part of the content, so it's better to use a clear, different pattern to avoid confusion (specially on rendered form outputs) and improve legibility and block identification at first sight. I made a quick sample to show you why:

In short: despite your branded form (which has a lot of influence), the answer is: if you can, use a different form. It won't harm, only help

  • When fonts are simliar-but-not-quite-the-same, that's usually a compelling reason to push for a consistent branded font. – DA01 Aug 18 '15 at 20:04
1

From a UX perspective, there is none, as long as the font is very legible.

Remember, consistency is key when it comes to UX and Design.

1

So YouTube is actually a great example of a site that does use custom fonts in their input fields. Exploring the site CSS, you can see that the search field uses Roboto, which is the custom font that Google developed. Since the method of delivering custom fonts has become so sophisticated (typically CDN), there really is no longer a reason to limit where you use the custom fonts, including input controls.

The main concerns are going to be usability and site load time. As long as the font is hyper legible, it should be just fine for input controls. If it's the only custom font you're loading, load time is likely not an issue.

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.