MacType and DirectWrite in Vivaldi browser

Aug
31
2016

For people interested in font rendering in current browsers, which has really gone downhill due to how horrible the font rendering in Blink based browsers on Windows is, and especially given that we’ve recently lost the possibility to even disable DirectWrite in Blink browsers completely, it might be worth noting that after three years, there’s finally been a new MacType release yesterday that also introduces the possibility to tweak DirectWrite behaviour.

MacType latest release

In case you don’t know, MacType is (somewhat contrary to the name of the project) an application that basically replaces Windows ClearType with FreeType, a font rendering engine that’s mostly used in Linux (and which in my opinion is absolutely superior to ClearType/DirectWrite and is also much more tweakable). It doesn’t offer the same amount of customizability when it comes to DirectWrite as it offers for general Windows font rendering, not by a long shot, but you can still tweak it a bit.

If you want to use the DirectWrite support, you have to specifically add a “DirectWrite=1” switch to your active MacType profile, and you also need to add another .ini file called UserParams.ini into MacType’s directory. You can get a default UserParams.ini file here:

UserParams.ini

There’s a bunch of parameters you can tweak in the UserParams.ini file, including the possibility to force DirectWrite to use GDI font rendering if you wish so.

This, for example, is the Vivaldi default (obviously click on the image and view the full size image at 100 %):

And this is with “GDI Classic” font rendering and grid fit enabled:

You may however note that there are some kerning issues when you use the GDI rendering with grid fit. Disabling grid fit fixes that, but then you’re bound to run into some nasty hinting artifacts here and there in return. Pick your poison.

Personally, I kinda grew accustomed to DirectWrite nowadays when I can’t have the full MacType/FreeType experience, as it makes the glyphs look more natural than the old rendering. So I only enabled grid fit to make the glyphs a bit sharper in general (my preffered hinting setting for native FreeType is “slight”, if anyone’s wondering) and set the DirectWrite rendering to “Natural symmetric downsampled”, as it seems to render the glyphs the best for my tastes and get rid of some of the hinting issues DirectWrite sometimes has.

However, I REALLY dislike the way Blink browsers always make the glyphs oversharpened and thin by applying some kind of internal postprocessing filter on Windows, so I always apply a tiny bit of shadow via user CSS to the glyphs to up the contrast and readability and make them look smoother, which is what I prefer. For example, here’s the above screenshot with my tweaks applied:

And here’s Wikipedia (default and my tweaks):

To my eye, this looks a lot better and it’s much easier to read for me. The default font rendering looks too washed out and smudged to me and always makes me squint a lot.

For anyone interested, this is the custom CSS I apply to everything globally (I use the Stylish add-on for this, but you can do it in different ways):

HTML, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, span {
-webkit-text-stroke: 0.0px !important;
text-shadow: 0.15px 0.15px 0.15px rgba(50,50,50, 0.13), 0.15px -0.15px 0.15px rgba(50,50,50, 0.13), -0.15px 0.15px 0.15px rgba(50,50,50, 0.13), -0.15px -0.15px 0.15px rgba(50,50,50, 0.13) !important;
}

Which you can of course tweak to your specific taste by changing the text-shadow parameters – they’re the X and Y offset of the shadow and the shadow radius, followed by an rgba value of the color of the shadow where the fourth number means transparency (0 is completely transparent, 1 is fully opaque). Applying shadow to all text is not the perfect solution, but it’s the only way I’m able to actually look at the text rendered by Blink browsers for prolonged periods of time.

BTW, it seems to me that even on Linux and OS X, the Blink core still applies some sort of postprocessing to the glyphs, though it seems it’s a less obnoxious alternative to what we get in Windows. So I do use the “shadow tweak” even in Linux and OS X, but with less pronounced shadow settings.

Be the first to like.
Napsal(a) dne 31. 8. 2016 v 20:50
Kategorie: Browsers,Guide

No Comments »

RSS komentářů k tomuto příspěvku. Zpětné URL


Napište komentář

Používá systém WordPress | Styl: Aeros 2.0 z TheBuckmaker.com

FireStats icon Powered by FireStats