2

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?

Evanss
  • 425
  • 1
  • 4
  • 11

3 Answers3

8

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.
3

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? )

Community
  • 1
rk.
  • 17,846
  • 1
  • 58
  • 87
2

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

Reactgular
  • 2,825
  • 17
  • 18
  • 1
    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 04 '13 at 15:56
  • 1
    @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. – Reactgular Jun 04 '13 at 16:12