Setting up HiDpi on XFCE

I use the XFCE desktop environment and have 3 4k screens. These screens are 162.56dpi, which is a little hard to read at native 1:1 rendering. The benchmark for displays is 96dpi, I prefer somewhere around 112dpi natively. Applying a 144dpi custom multiplier will result in an effective 112.88dpi. You may ask: “Why 112dpi, where did that come from?” I have an IBM A30p laptop from 2001 that has a 1600×1200 screen which is 15.1 inches, I used this laptop for many years and prefer the native 112dpi. It’s not too tiny and not to big, it’s the goldilocks of native resolutions.

These are the changes I make to have a comfortable environment with very legible text reading. Yes, you are “throwing away” resolution, but the tradeoff is that everything is sharper.

• Install Clearlooks-Phenix packages
  This is my preferred GTK widget set, YMMV
  
  
• Change the widget style to Clearlooks-Phenix in the Appearance settings:

• On the Fonts tab set custom DPI to 144:

• In Window Manager settings, choose Default-hdpi on the Style tab:

I created my own window border, derived from Numix HiDPI, here is Numix HiDPI to the right of my remixed HiDPI window theme, Numix doesn’t have a border, which makes it difficult to grab handles on windows:

• Next you need to tell Firefox to render the window controls and content at the proper ratio.
  1. Go to about:config in a new tab
  2. Search for layout.css.devPixelsPerPx
  3. Change the value to 1.5
  4. Go to about:preferences in a new tab
  5. Go to Advanced under the Fonts and Colors section
  6. Set your minimum font size to 12, customize other fonts settings as desired
     
     
• Lastly, we need to fix GTK so the scroll bars render proportionally wider, Clearlooks-Phenix wasn’t designed for HiDPI, so we have to get creative.
  
  Create a the file ~/.config/gtk-3.0/gtk.css and put this in it:

scrollbar, scrollbar button, scrollbar slider {
    -GtkScrollbar-has-backward-stepper: true;
    -GtkScrollbar-has-forward-stepper: true;
    min-width: 20px;
    min-height: 20px;
    border-radius: 0;
}