Why do fonts appear differently across different browsers and devices?

Knowledge Base

Fonts can have surprisingly different appearances across different browsers and devices. For example on a PC running Windows 7, fonts may appear sharp, but lack certain details when they are used with a smaller size. And on device with a high pixel density the same font may appear nearly as good as printing industry standard.

The most common reason for this is the interpretation of the font itself. But there are other factors that play a role too. For example: high pixel density displays, such as a retina iPhone or iPad. Other factors are the web browser used, the operating system used and individual user preferences.

Platforms such as Barisco are not able to control the behavior of font rendering across devices. This is why we sincerely recommend you to test your magazines across different devices and platforms to ensure that the desired appearance of your projects is achieved.

Some tips:

  • When using large texts that need to cover a certain area, you might want to use an image of the text instead to ensure that all devices and browsers display the font the same way.
  • Try to avoid splitting texts into different layers. If the browser or device will render the text smaller or larger than the editor, you text will appear out of place.
  • Fonts might be rendered differently across different devices and platforms. Word wrapping could be different, across devices and platforms, than its appearance in the editor. Make sure to test this!

Leave a Reply