4

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?

Improve this question
6
  • 1
    What is your rationale for changing the font face? Also, doesn't the NY State Dept. of Labor have any sort of a CD manual?
    – vzwick
    Aug 24, 2012 at 12:46
  • There are reasons for why font faces can not be the same. Such fonts can not be used in such designs or should be replaced by an appropriate substitute. For example: Segoe UI is and ClearType effect: msdn.microsoft.com/en-us/library/windows/desktop/aa511282.aspx sixrevisions.com/web_design/…
    – Bartosz Rakowski
    Aug 24, 2012 at 12:54
  • 1
    Is Helvetica Neue included with Windows distributions by default?
    – kastark
    Aug 24, 2012 at 13:54
  • Note that Helvetica Neue is not Helvetica, and AFAIK, few devices come with Neue installed. Also, Helvetica and Arial are close...most consumers wouldn't know the difference, but I do have to ask the same question as vzwick...what is the rationale?
    – DA01
    Aug 24, 2012 at 16:07
  • @DA01: There was no real rationale just curiosity. I've read many articles saying not to change your text across platforms/devices for consistency's sake. However the text on some sites doesn't crossover well with other devices and have the appearance of looking choppy/blurry. Through research my curiosity peaked upon viewing css-tricks.com on my computer(Windows) and on my mobile phone (Android). Both displays had different styled text changes hence why I wanted to ask the community for feedback for insight on the subject. As for the fonts I have listed they were examples.
    – Courtney Jordan
    Aug 24, 2012 at 17:14

1 Answer 1

Reset to default
5

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!

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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