I have an ad that looks fine when the web page is at 100%, but when the user changes the screen size, my responsive design takes over and while the image is still correct looking, the text has reduced to a size that is almost unreadable.

Is there a font where even when reduced inside an image that is still relatively easy to read?

  • 1
    Load a different image for smaller screens.
    – dnbrv
    Feb 17, 2015 at 5:25

2 Answers 2


If you're doing responsive design well, then you're showing appropriate layouts, images, and content for the dimensions of the device viewing the page. This doesn't mean shrinking everything for smaller devices.

Instead, it's most often necessary to server different layouts, different images, and sometimes different content for different devices. So the answer to your question is that you're serving the wrong content to smaller devices.

To fix that, I suggest using one of the following solutions:

  • use a different image
  • separate the image and the text so that you can scale the text separately from the image
  • if appropriate, don't server the image, and serve formatted text instead.

If the text is being rendered smaller than 7-9 pixels high, it will make just about any font illegible. As there simply isn't enough space to fit the shapes within the pixel grid.

If you can serve a vector based version of the text, either as a SVG file or using HTML. You can then control the size of the font independently of the image.

Alternatively you could serve two versions of images to different resolution screens, using a media query.

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.