Improve Font Rendering in Modern Look and Feel

This page will assist you improving the quality, clarity and crispiness of text rendering. This is a very important aspect of the user experience that is over looked and, when properly configured, can yield better results considering the fact that the Font Engine that is currently shipped with every Linux Distribution has some limitations.

Tip number one - Pixel Density

The first trick when it comes to improve text rendering is to increase the pixel density of your monitor by using the highest resolution possible. The more pixels per square/inch(DPI), the better chance you have at improving the text clarity. Apple did it and even made up a new technology called Retina Display®, which is basically ultra high resolution monitor for the same physical size.  In the rest of the world, we call it HiDPI. It's more complex under the hood because UI components must now deal with variable font sizes and be able to adjust live the changes in pixel density.

Find out your native DPI by calculating it from this website. Keep that DPI information close because it will be used to adjust your X Display Server and in a XFT hint further down below.

What's my Reported Pixel Density

Now let's find out how the X Server is configured. One reliable way to find out is to use the xdpyinfo command as demonstrated below. From the output below we can establish the monitor resolution, its reported sizes and dot per inch, aka DPI.

$ xdpyinfo | grep -B 2 resolution
screen #0:
  dimensions:    3840x2160 pixels (1219x686 millimeters)
  resolution:    80x80 dots per inch
Adjust your X Server configuration

Editing your X Server configuration file is the simplest and most reliable way to adjust the desired DPI and to provide your  monitor(s) true physical dimensions.

You will need superuser access level for this manipulation

This tutorial is not a HOW-TO xorg.conf. Google is your friend in case you need to learn about the xorg.conf file content.

The example below is for a Linux system configured with a single xorg.conf file located in /etc/X11 directory. 

$ cd /etc/X11
$ su -                           // or sudo -s depending on your Linux flavor
cp xorg.conf xorg.conf.1         // making a backup first
/opt/MaXX/bin/xnedit xorg.conf
exit
$ 


Below is the Monitor Section of a xorg.conf configuration for a TCL 55" 4K HDR 60Hz Display.  Don't use as it is, but adapt yours :)
image-1594296438669.png

From the Monitor Section, in the first highlighted line we notice the DisplaySize attribute and values, they are the physical dimensions (in mm) of the viewable area. Not the monitor itself.  Add this line into your Monitor Section. 

Second line of interest, is the Option attribute with its values that instructs the X Server to not use the Monitor's EDID DPI, but rather the provided DPI values at the the line below.  This line is optional but relevant in many scenario where the reported DPI is wrong of off by any margin.

Third line of interest, is the Option attribute that specify the monitor's DPI value to use.  Add this line with your previously calculated DPI values.  

It is important to note that all those Monitor values are tied up to a Monitor Identifier and can be referred to later in a later configure section.

Save and Exit.  The best way to apply your settings is to either restart the X Server or simple Restart the system.

To Revert Back to your previous Configuration
$ cd /etc/X11
$ su -                           // or sudo -s depending on your Linux flavor
cp xorg.conf xorg.conf.2         // making a backup of your second file
cp xorg.config.1 xorg.conf       // restore original file
exit

Save and Exit.  The best way to apply your settings is to either restart the X Server or simple Restart the system.image-1594297932360.png

Tip number two - Tuning

By tuning up your Font Engine with custom hints, that are relevant to your reality (monitor hardware specs, its size and resolution), it can better render texts for you . 

Test you current monitor

User the following monitor test page to see where your monitor fit and which hints works best for you. This site is a gold-mine of information as well...

Tuning Font Rendering Engine

To give you all the possible chances, let's adapt the default values of the MaXX Desktop XFT/FreeType specific configuration file Xdefaults.xft file found in your MaXX Desktop $HOME/.maxxdesktop/Xdefaults.d configuration directory.   

Open the configuration file with the TextEditor and adapt the configuration based on your need.

From a Winterm, run xnedit Text Editor. You can refer to our Hints & Shortcuts page for alternative ways

$ cd $HOME
$ cd .maxxdesktop/Xdefaults.d
$ xnedit Xdefaults.xft

Below are the optimal settings we recommend for running MaXX Desktop in Modern Look and Feel. Apply the calculated DPI value and the optionally the subpixel mode found during your monitor testing (at the beginning of this guide).

...

!!! Font options - ~/.fonts.conf seems to override this

!! Resolution for Xft in dots per inch (e.g. 96 in my calculated DPI)
Xft.dpi:        96

!! Type of subpixel antialiasing (none, rgb, bgr, vrgb or vbgr)
Xft.rgba:       rgb

!! What degree of hinting to use (hintnone, hintslight, hintmedium, or hintfull)
Xft.hintstyle:  hintslight

!! Should always be left at false
Xft.autohint:   false

!! LCD Filtering to use (lcdnone lcddefault lcdlight lcdlegacy)
Xft.lcdfilter:  lcdnone

Xft.hinting:    true
Xft.antialias:  true

After you done with editing, save your changes, exit the TextEditor and run the commands below to update the desktop and restart the window manager with your new settings.

$ update-desktop
$ tellwm fast_restart

image-1594297932360.pngTip number three - Install better Fonts

Make sure you have installed the Noto-Font packages as per our Guide's Prerequisites section

Refer to your Linux Distribution Guide Prerequisites for the exact package names and instruction.  This step should already be done at the installation of MaXX Desktop v2.1+

Confirm that the Noto Fonts are installed

Open a Winterm from Toolchest, and type the fc-list command to query the system.  You should see something similar to the picture below. If not, go back to previous step, do not claim 200$ and install the fonts.

image-1594299118043.png

Here's a quick reminder of what works well for various situations

Interface

Noto Sans UI Regular 10

On Ubuntu 20.04 the font Noto Sans is to be used as a substitute

Documents

Noto Serif Regular 11

 

Monospace

Noto Mono Regular 13

 

Window Titles

Noto Sans UI Regular 11

On Ubuntu 20.04 the font Noto Sans is to be used as a substitute

Here is an excellent guide from someone very passionate about quality fonts.  Highly recommended.

 

Improve the Modern Look and Feel Fonts

Edit the Xdefaults.modern file in the Text Editor.

$ xnedit $HOME/.maxxdesktop/Xdefaults.d/Xdefaults.modern

Here are the changes we recommend for HD and above.  You may change the font sizes to better match your resolution and monitor size. Those are ideal for  a 4K (3820x2160) on a 37" or more monitor.

On Ubuntu 20.04 the font Noto Sans is to be used as a substitute

...

*windowTitleFont:       Noto Sans UI:style=Italic:weight=400:size=11
*feedbackFont:          Noto Sans UI:style=Italic:weight=400:size=10
*iconTitleFont:         Noto Sans UI:style=Regular:size=9

*renderTable:           xft
*xft*fontType:          FONT_IS_XFT
*xft*fontName:          Noto Sans UI Regular
*xft*fontSize:          12

After you done with editing, save your changes and run the commands below to update the desktop and restart the window manager.

$ update-desktop
$ tellwm fast_restart

 

Terminal Font Settings

Change the Winterm Font
File location : $HOME/.maxxdesktop/TerminalFontName
Noto Mono
Change the Winterm Font size

File location : $HOME/.maxxdesktop/TerminalFontSize

13