Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

If im making a fully responsive site then how should I alter my font-size for the different size displays (breakpoints)?

Phones and tablets are held closer to the user so it would make sense for the text to be a little smaller than a desktop size display. A games console plugged into a TV will have a high resolution but be far away from a user so would benefit from larger text, however is this quite a niche case?

share|improve this question
add comment

3 Answers

up vote 6 down vote accepted

Websites typically don't alter their font based on display size, and I don't think you should, either. Why not?

  • Other websites don't do it. Your site's behavior will be unexpected.
  • You can't really do it accurately. There are at least three key variables here: screen size, screen resolution, and distance of viewer from the screen. You only know screen resolution, and by itself this isn't really enough to say anything about the appropriate text size.
  • This is properly handled at the device level. The proper way to control this is by the user tweaking a setting on their device that gives them a good text size for everything. Not everyone is doing this, but some are--and if they are, your "helpful" size correction will actually be a miscorrection.
share|improve this answer
add comment

Ideally, you would want to use 1 em and let the respective browsers handle the exact size.

On desktops, 16pt is good for reading, but you can squeeze it to 12pt if you want.

On mobile, I would suggest using the 'medium' size handled by the respective OSes.

Credit: Kevin ( Font Size For Mobile Sites? )

share|improve this answer
add comment

Make it CSS compliant, and the user will be able to resize text without destroying the layout. Don't hardcode things in pixel px values but use em.

There are many responsive layouts that change font sizes based upon the screen requirements. The important thing to remember is pixel density is more important than screen resolution. Don't assume that a 1920x1080 size is a desktop screen. There are mobile phones now with these sized screens, but they are only 5" in size.

Optimising for High Pixel Density

A pixel is not a pixel is not a pixel

share|improve this answer
    
Aside from old versions of IE, there's no reason not to use PX these days. They're equally resizable by the end user. –  DA01 Jun 4 '13 at 15:56
    
@DA01 em are good too, because they are relative to the font size. Whereas px is relative to page scale. One advantage is using a third-party stylesheet. If they use em then it scales correctly, but if they use px it won't match your other style sizes. –  Mathew Foscarini Jun 4 '13 at 16:12
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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