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;
}

Leave a Reply

Your email address will not be published. Required fields are marked *