Fonts rendered incorrectly on 4K monitor

[jwellbelove]

I've just upgraded my setup to 4K monitors and tried to edit my website. When the monitor is set to 3840 x 2160 many of the fonts are rendered incorrectly; sizes are wrong (too small or too large) and they change when a text box is selected for editing.
The previewed pages in the browser also have incorrectly sized fonts.

If I reduce the resolution of the monitor to 1920 x 1080, all fonts are rendered correctly. Everything also renders correctly when edited on my laptop (1920 x 1080).

The software version is 14.3.2
Windows 10 64bit.
GTX 1660 graphics card with up-to-date drivers.

Also notice that in the 4K image the fonts show a lot more aliasing than the lower resolution, which is the opposite of what would be expected.

1920 x 1080


3840 x 2160

[BaconFries]

It is possible your DPI settings in Windows may have changed. Go to Windows Control Panel and search for 'DPI' then adjust the settings. The default is 100% (96 DPI).
In the programme maybe you need to enable High DPI support in Tools->Options->User Interface

Pablo's reply. from a previous similar post

Maybe you have accidentally installed the 64bit version, which may use different DPI settings?
In that case, make sure the settings are the same as in the previous version.

[jwellbelove]

If I set 'High DPI support' in WYSIWYG Web Builder and set 'Change the size of text, apps and other items' in the Settings app to 100% (previously 150%) then the text renders correctly.

Unfortunately, everything on the screen is now incredibly tiny and I almost need a magnifying glass to read the menus!

[Pablo]

First note that fonts are rendered by Windows, so the software has no control over how they are rendered.

However, I also have 4k monitor and with High DPI support enabled, everything looks good (on 150%).
You do not need to adjust the DPI setting of Windows.
But you may need to restart your computer after making this modification.

[jwellbelove]

I've tried another reboot.
High DPI settings enabled.
Windows display set to 150%

Some fonts look a little better, but it still looks wrong.
A non-edited text box shows weirdly aliased fonts, but double clicking in the text box to edit cleans them up to look normal.
The web page also renders incorrectly.

Non-edited text box


Edited text box


Previewed web page

[jwellbelove]

The current web page looks like this.

[jwellbelove]

The work-around at the moment seems to be...

Set the display to 100%
Open WYSIWYG Web Builder
Set the display to 150%
Edit the website with correctly rendered fonts.

[Pablo]

Maybe you have set the zoom level of the WWB workspace?
Again, I would like to note that WWB has no control over the quality of the rendered text. All text is rendered bu windows (GDI)
Unfortunately, the text quality of GDI (the default graphicc egine of windows) is not that great on 4k monitors.
I am planning to add support for Direct2d (GPU rendering) in WWB in the future, but this will require major redesign of the software.

[jwellbelove]

I'm still puzzled as to why a non-edit mode text box renders differently to one that is being edited (and only for 4K).

The zoom level is set to 100%.

[Pablo]

I'm still puzzled as to why a non-edit mode text box renders differently to one that is being edited (and only for 4K).

In edit mode an inline editor (richedit) will be placed on top of the workspace. richedit uses direct2d for rendering.

Also, I find it strange that the text quality in the browser is affected.
Do you have the same problem in a new project with new text?

The entire WWB website was created on a 4k monitor and I never ran into this issue.

[jwellbelove]

I'll give a new project a try.

[jwellbelove]

I've found a solution.
I changed the High DPI settings for the application and everything is now crisp and clear (both edit and non-edit text boxes), the fonts are correct and renders perfectly in the browser.

Hope that is of help to anyone else having similar problems.

[Pablo]

Thanks for sharing your solution.