1

Recently I've started noticing odd text rendering problems on Chrome. The main one being the letters 't' and 'e'. I don't know what caused the problem as I don't remember updating Chrome or anything else when I started seeing it. I'll use a the word 'Sticker' as an example: when it happens, the word Sticker looks like this:

Misrendered 't' 100% zoomed, misrendered 't'

The t in that image is missing it's crossbar and now looks like a lowercase 'L'. Confusing to read. Now if I zoom in to 110%, the word sticker now looks like this:

Misrendered 'e' 110% zoomed, misrendered 'e'

The 't' looks better but now the 'e' is now missing it's horizontal line so it looks like a 'c'!

After some brief testing, the same thing doesn't happen in Firefox. However, opening a slightly different page in Chrome (the text or it's CSS hasn't been modified), the letter seems fine:

Sticker, as it should be rendered

Despite how the images look, the CSS for the word Sticker was identical in each one. This problem makes some texts very awkward to read.

One thing that may have happened is that I changed my ClearType settings around about the time this problem started, but it doesn't seem to be fixing when I re-adjust ClearType to a thicker setting.

2
  • Which operating system? Can you give an example page that we can have a look?
    – harrymc
    Oct 26 '16 at 5:52
  • Things to check: (1) In chrome://flags enable/disable LCD text antialiasing, (2) In Control panel > Fonts > Adjust Clear Type do Turn on ClearType, (3) In "Adjust the appearance and performance of Windows" enable Smooth edges of screen fonts.
    – harrymc
    Oct 26 '16 at 9:03
0

I am assuming you are using Windows. It seems clear that your adjustments have to do with your ClearType adjustment. You will need to fiddle around with it to revert back to normal.

Step 1: Use the text tuner

  1. Close Chrome.
  2. Click the Start menu.
  3. In the search box, type ClearType.
  4. Click Adjust ClearType Text.
  5. In the ClearType Text Tuner, check the box next to "Turn on ClearType."
  6. Click Next, then complete the steps.
  7. Click Finish.
  8. Open Chrome ans see if the problem is fixed.

Step 2: Change your Windows appearance settings

If Step 1 doesn't work, try changing your Windows appearance settings.

  1. Close Chrome.
  2. Click the Start menu.
  3. In the search box, type Appearance.
  4. Click "Adjust the appearance and performance of Windows."
  5. Next to "Smooth edges of screen fonts," uncheck the box.
  6. Click Apply.
  7. Open Chrome again.

Step 3: Disable GPU Accelerated Canvas 2D

If still having the problem, try this:

  1. In Chrome, type about:flags in the URL bar
  2. Look at the settings for GPU acceleration. Graphics Processing Units, or GPUs, have specialized hardware for shading that have enormous floating-point and vector computational power, way beyond what a general purpose CPU has. Applications like Photoshop and Chrome have started to take advantage of that by offloading certain types of work to the GPU. You can see the options in about:flags for that.
  3. Find GPU Accelerated Canvas 2D and check if it is enabled. If so, you can try disabling it.
  4. Press the button on the bottom of the page to restart Chrome.

Step 4: Update your video card drivers

If all else fails, you can try to update your video card drivers from your GPU manufacturer's website to see if it fixes the issue. It could accidentally solve the issue by resetting GPU settings in chrome on the backup when you update your drivers, something you can't do manually in Chrome.

1
  • I've already tried readjusting ClearType multiple times to no avail and my video drivers are always up to date. The Chrome flags however, I didn't know that GPU Acceleration could potentially cause things like this. I'll look into it.
    – Pyroglyph
    Nov 1 '16 at 18:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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