text - Should Font Faces be the Same Across Different Devices?

My company has been working on a fluid grid design for our website so users can access information through their mobile phones and tablets. I was thinking of incorporating a font change on various displays.

Computer and Tablet displays would use a Helvetica font and Mobile Phone displays would use an Arial font.

Should font faces be the same within displays or can they be different?

Answer

You should strive for consistency whatever you do. There's two relevant types of consistency: consistency with the operating system and internal consistency within your application(s).

If you want to keep consistent with the platform's look and feel; this means stuff like using Segoe UI on Windows/Windows Phone and Helveteca Neue on retina iOS. However since this is a website it's less common to adhere directly to platform conventions unless your site is designed for a particular device.

Alternately there's keeping the experience consistent for your platform. Twitter's recent applications have been pushing this in a huge way. This is most relevant if your users are likely to be using your site from multiple devices; users might notice things look just a bit "off" if the font is suddenly different when they reach the site from their iPhone instead of their desktop.

A complication is how well your font looks at small/large size. Certain fonts do not have good Hinting which results in very poor display at low resolution screens. Other fonts were designed for low resolution screens ^{(Comic SAAAAAAAAAAAAAANS!)} so you'll want to be sure they look okay on very high density displays like the Retina iPad.

And of course you're limited by the fonts people have on their device; this is a problem that @font-face and Google Web Fonts try to solve, but you can't be 100% sure a user's browser will support them, hence why you always have fall-back fonts in CSS.

Generally I'd recommend going with internal consistency and falling back to a reasonable substitute where not applicable. Break with consistency where it's necessary to support low/high density displays; readability trumps consistency!