Skip to main content
Inspiring
December 19, 2022
Question

Fuzzy fonts

  • December 19, 2022
  • 2 replies
  • 212 views

I am uploading files that are a dyptch with a photographic image on one side and text on the other. The file looks great in Photoshop. It looks great everywhere else at all different resolutions, except when uploaded to the website, and then the text looks a little fuzzy. I have been trying to research this, but haven't come to any great solutions. I did try saving the file as a png. file and that helped a teeny bit. Anyone else have any thoughts on why this happens and what to do about it? Thank you for any insights you might have.

    This topic has been closed for replies.

    2 replies

    Jon Fritz
    Community Expert
    Community Expert
    December 20, 2022

    Are the images the same file size locally and on the server? If not, there may be some downsizing happening at the server level that's dropping the quality and making things fuzzy.

    Is your browser view at 100%? Browsers allow users to set their preferred zoom level. If yours is at more than 100% it will make jpeg text look fuzzy. Hitting Ctrl+0 should bring the zoom level back to 100% if it's set higher. This is a good example of why text should be html on a website. When viewers increase their browser zoom, the text scales up without distorting the edges. 

    Personally I rarely, and only for specific use items, ever put text in images online. Jpeg text isn't searchable by visitors, isn't indexable by search engines, gets fuzzy when zoomed, and is totally invisible to screen readers. If the text can be taken out of the image and turned into html, it should be. Your site will be better off in a LOT of ways.

    Nancy OShea
    Community Expert
    Community Expert
    December 19, 2022

    Such is the nature of pixel-based raster images.

     

    Solution:  Use math-based vector graphics instead, see screenshot.  Vectors are scalable to any size that's required without loss in quality.   Vectors are particuarly well-suited for fonts, icons, logos, comics, drawings and other non-photographic web graphics.

     

     

    Hope that helps.

     

    Nancy O'Shea— Product User & Community Expert
    Inspiring
    December 19, 2022

    Thank you, that is helpful. I appreciate your feedback.

    Nancy OShea
    Community Expert
    Community Expert
    December 20, 2022

    For fancy typography, why don't you use custom web fonts from Adobe Fonts or Google?  There is no chance of pixelation with actual fonts.

    https://fonts.adobe.com/

    https://fonts.google.com/

     

    Nancy O'Shea— Product User & Community Expert