Did You Know Fonts Might Do All This?

Freetype, included within the font stack on
Unix, is kind of
complicated. There are such a lot of layers to get it to do what it does that
it’s simple to get misplaced. From discovering the font, to truly rendering it,
and every little thing in between.
Like a lot of the world, I take advantage of a somewhat low screens definition
(1366×768 with 96 dpi) and somewhat old-ish laptop computer, not like some font
designers that live in a filter bubble where everyone has the latest
macbook. Thus, good and legible font
rendering is essential.
Let’s play with lesser identified toggles out there to us with regards to font
rendering and see what they do, let’s have enjoyable and discover prospects.

A Normal Image

Usually, to make a font look higher on screens, that are arrays of
pixels, we use a mix of those three:

• Antialiasing: Making use of a light-weight shade across the glyph. It’s helpful
  at small scale, while you don’t have sufficient pixels, however it makes most
  glyphs look bolder.

• Subpixel rendering: A way much like antialias however utilizing
  subpixels, the colour parts contained in the pixels. By making use of a
  small quantity of colours on the edges you may attain extra granular
  precision. Nevertheless, if utilized clumsily, or should you merely transfer the
  window containing the textual content, these coloured subpixels will grow to be
  obvious, what we name fringe.

• Hinting: Pixels are blocks however textual content is made from curves, meaning
  these curves won’t ever match precisely with display pixels. Hinting
  is about repositioning or deciding on the closest pixels whereas making an attempt
  as a lot as attainable to maintain the form of the glyph intact. There are
  a number of ranges of hinting, hinting info offered by the font
  itself (bytecode interpreter hinting), and hinting offered by the
  rendering library (auto-hinting).

NB: “It’s simply textual content”… This text is one more that
exhibits how fonts aren’t as simple as they appear. For more information
concerning the font stack, please go to my previous article on the
topic, and should you
need an thought of what it means to attract them on the display have a look a
this article.

What’s utilized, when, how you can management all of this, can we see what they
do, and will we even care?

Freetype and fontconfig default rendering nowadays is fairly good,
so there shouldn’t be something to fret about; Till there’s one thing
to fret about, like a font not wanting the way in which you need.
Our first cease shall be one thing that intrigued me as a result of I haven’t
heard many speak about it: the Freetype driver’s properties.
The Freetype driver is used at any time when hinting is required, so that is the
half it really modifications — how hinting is utilized.

Let’s begin with arming ourselves with methods to simply take a look at all this.
Freetype2 demos utilities are a should, you may clone them
here
or fetch them out of your bundle repositiory, for instance
Debian and Arch
Linux.
These offers you a bunch of helpful instruments akin to ftdiff, ftview,
ftstring ftgrid, fttimer, ftbench, and others. A very powerful
ones for us are ftdiff and ftgrid.

Instance utilization:

ftdiff -r 96 -s 10 ~/.native/share/fonts/instances.ttf
ftgrid -r 96 -f 20 10 ~/.native/share/fonts/instances.ttf
ftstring -r 96 -m 'Hey World!' 10 ~/.native/share/fonts/instances.ttf

Moreover, you may set up pango-view from pango-tools
to later take a look at if fontconfig applies your configurations
correctly. It may be utilized by making ready a file written in pango
markup
and displaying it utilizing pango-view --markup file.pangpang.
You possibly can set the fontconfig debug degree greater to see which font is
really loaded by setting the FC_DEBUG to one thing like 4096,
FC_DEBUG=4096.

Extra values might be discovered right here, we’ll use them later to see if our
fontconfig settings are utilized correctly:

Identify         Worth    Which means
---------------------------------------------------------
MATCH            1    Temporary details about font matching
MATCHV           2    Intensive font matching info
EDIT             4    Monitor match/take a look at/edit execution
FONTSET          8    Monitor loading of font info at startup
CACHE           16    Watch cache information being written
CACHEV          32    Intensive cache file writing info
PARSE           64    (now not in use)
SCAN           128    Watch font information being scanned to construct caches
SCANV          256    Verbose font file scanning info
MEMORY         512    Monitor fontconfig reminiscence utilization
CONFIG        1024    Monitor which config information are loaded
LANGSET       2048    Dump char units used to assemble lang values
MATCH2        4096    Show font-matching transformation in patterns

Yet one more manner is to check immediately in your browser URL bar:

information:textual content/html,<meta charset="utf8"><p fashion="font-family: Instances New Roman;">Hey World</p>

The Freetype2 Drivers Properties

So let’s get again to our testing of Freetype2 drivers.
On this documentation
page,
ft (freetype) properties are listed and are mentioned to have an effect on the conduct
of the drivers, every touching a distinct one. They’re set by modifying
the FREETYPE_PROPERTIES surroundings variable, usually loaded from
/and so forth/profile.d/freetype2.sh.
Nevertheless, a lot of the ones listed are focused on the CFF, Sort 1,
and CID fonts driver and never at TrueType fonts, in order that they do nothing
should you don’t have these font varieties. The one toggle available for
TrueType
is the interpreter-version which controls the bytecode interpreter,
the rasterizer, and thus how the define will get hinted.

The choices out there to us are the next:

• 35 — For traditional mode GDI (Win 98/2000)
• 38 — GDI+ outdated (Vista, Win 7), Infinality, thought of gradual
• 40 — For minimal mode (stripped down Infinality, that is the default)
  (After Win 7)

Form of bizarre that we bounce from 35 to 38, the place did 36 and the remaining go? The
reply is that it’s a alternative from the Freetype devs to solely embody these
and never those in between.

And the variations look as follows, discover the native hinter within the
left column:

FREETYPE_PROPERTIES="truetype:interpreter-version=35" ftdiff -r 96 -s 10 ~/.native/share/fonts/instances.ttf

FREETYPE_PROPERTIES="truetype:interpreter-version=35" ftgrid -r 96 -f 36 10 ~/.native/share/fonts/instances.ttf

FREETYPE_PROPERTIES="truetype:interpreter-version=38" ftdiff -r 96 -s 10 ~/.native/share/fonts/instances.ttf

FREETYPE_PROPERTIES="truetype:interpreter-version=38" ftgrid -r 96 -f 36 10 ~/.native/share/fonts/instances.ttf

FREETYPE_PROPERTIES="truetype:interpreter-version=40" ftdiff -r 96 -s 10 ~/.native/share/fonts/instances.ttf

FREETYPE_PROPERTIES="truetype:interpreter-version=40" ftgrid -r 96 -f 36 10 ~/.native/share/fonts/instances.ttf

We will additionally take a look at utilizing pango-view (bear in mind once more that this needs to be a font
that has native hinting enabled however not the auto-hinter):

<span font_family="Instances New Roman" font="10" foreground="black" alpha="83%">
Lorem ipsum dolor sit amet, c
onsectetur adipiscing elit, s
ed do eiusmod tempor incididu
nt ut labore et dolore magna 
aliqua. Ut enim advert minim venia
m, quis nostrud exercitation u
llamco laboris nisi ut aliquip
ex ea commodo consequat. Duis 
aute irure dolor in reprehende
rit in voluptate velit esse ci
llum dolore eu fugiat nulla pa
riatur. Excepteur sint occaeca
t cupidatat non proident, sunt
in culpa qui officia deserunt 
mollit anim id est laborum.
</span>

You can even change the font through the --font= argument of pango-view.

FREETYPE_PROPERTIES="truetype:interpreter-version=35" pango-view --markup textual content.bangarang

So undoubtedly, older interpreter variations have been rougher with hinting, a lot
bolder, and will deform the glyphs. The newer ones are extra minimal with
it. We additionally discover that the auto-hinter isn’t that unhealthy and that avoiding
hinting will help. I took the particular case of the Home windows font ‘Instances New
Roman’ as a result of it has the status of rendering badly with Freetype,
largely due to the job the interpreter does. Making use of very gentle or no
hinting in any respect helps tremendously, even at very small level dimension as you
can see within the subsequent comparability. The hinting does certainly assist legibility
at this scale however the font form and persona is totally destroyed.

From left to proper: v35, v38, v40.

How Fontconfig Works

We’re not accomplished with hinting but, there might be many ranges of hinting
that may be utilized, however let’s first take a detour and study a bit about
fontconfig and how you can use it.

Fontconfig is the layer within the font stack answerable for loading the
font together with the configurations that inform the subsequent layer how you can discover
the font file and what modifications to use when rendering it. It’s normally
composed of a library, a preset of configuration information, and a bunch
of useful instruments all beginning with the prefix fc- akin to: fc-cache,
fc-query, fc-match, and fc-conflist, to call a number of.

The configuration information are normally present in /and so forth/fonts/ and cut up into
the presets out there /and so forth/fonts/conf.avail, and the chosen presets in
/and so forth/fonts/conf.d, that are symbolic hyperlinks to the previous.
The priority of the foundations is alphanumerical, a first-come
first-served precept, thus 01-custom-rule.conf shall be loaded
earlier than 99-not-important-rule.conf. Native person configurations, in
the person’s $XDG_CONFIG_HOME/fontconfig listing, are loaded from
one in all these configurations that accommodates an embody assertion. On
my machine it’s the 50-user.conf, so it’s priority is decrease
than something loaded earlier than it. This isn’t sensible when testing
guidelines so rename this file to one thing like 01-user.conf. Now
something you set in $XDG_CONFIG_HOME/fontconfig/conf.d or
$XDG_CONFIG_HOME/fontconfig/fonts.conf ought to have precedence.
You may make certain the order and configurations are loaded correctly by
utilizing the fc-conflist command. It lists so as of priority the
configurations discovered, those beginning with a + are loaded, those
with - are usually not.

These information are composed of primarily 4 parts:

• Match guidelines: If one thing matches, then edit the properties
  talked about. There are ton of matching and enhancing guidelines, even together with
  stuff like this system identify that’s presently making an attempt to load the fonts
  and {custom} ones. You can even match at totally different instances: when wanting
  for a sample/font, after discovering the font, when scanning the font.
• Aliases creation: An alias is a font identify shorthand, it’s helpful when
  querying generic household names akin to “monospace”.
• Inclusion of different configurations: There might be so many configuration
  information that it’s good apply to separate them.
• The place to search for settings and fonts, and if some fonts needs to be
  skipped solely (like in the event that they aren’t scalable — bitmap): It’s possible you’ll
  suppose that the situation of fonts is a continuing worth, however it’s not. For
  instance, on my machine it’s set in /and so forth/fonts/fonts.conf as:

<!-- Font listing listing -->
<dir>/usr/share/fonts</dir>
<dir>/usr/native/share/fonts</dir>
<dir prefix="xdg">fonts</dir>
<!-- the next ingredient shall be eliminated sooner or later -->
<dir>~/.fonts</dir>

Modifying XML information is cumbersome, sadly right now there aren’t many
GUIs or less complicated instruments to set these. I’ve discovered a single one to this point
that’s named fontweak however that
isn’t full (I’ve additionally discovered font-manager which does a few issues too, and there are a whole lot of font viewers like gnome-font-viewer, fontbase or fontmatrix but in addition missing an identical rule enhancing characteristic).
It’s a disgrace as a result of it’s uncommon to search out those that have a clue about
how you can really set font configuration properly.

If you need extra information, you may seek the advice of man 5 fonts-conf. It’s heavy
content material and might be complicated content material, however nonetheless nice content material.

NB: Fontconfig isn’t sufficient to configure each graphical program,
some applications load font settings in a less complicated manner by means of Xresources, the
RESOURCE_MANAGER of X.

Testing Totally different Hinting

Let’s shut this parenthesis and get again to hinting.
Fontconfig has 4 settings associated to it, of which one is an identical
criterion and the opposite three are edit guidelines. They’re the next.

• fonthashint: Matching take a look at to examine if the font has built-in hints,
  particularly bytecode interpreter hinting.
• hinting: If set to true, it tells the subsequent part, the rasterizer,
  that hinting generally shall be utilized.
• autohint: Use the autohinter as a substitute of the traditional hinter. It will
  skip solely the bytecode interpreter.
• hintstyle: The harshness of the hinting that shall be utilized. It
  may both be hintnone, hintslight, hintmedium, or
  hintfull. It must be talked about that these will use a mixture of the
  autohinter and bytecode interpreter if the font has hints. For instance,
  hintslight will snap on the vertical grid solely however hintmedium and
  hintfull will snap more durable on the horizontal grid too.

Virtually, what does it imply? Let’s present what a font appears to be like like with a
mixture of those hinting configurations.
Keep in mind that should you’re having points making use of these configurations in
your person fontconfig file that you would be able to set the FC_DEBUG surroundings
variable we talked about earlier than. At all times make certain every little thing masses correctly
by checking fc-conflist and the presently utilized match guidelines through
fc-match --verbose YourFontSearchHere

Let’s take a look at hinting enabled, autohint enabled, and full on grid snapping.

<edit mode="assign" identify="hinting">
	<bool>true</bool>
</edit>
<edit identify="autohint" mode="assign">
	<bool>true</bool>
</edit>
<edit mode="assign" identify="hintstyle">
	<const>hintfull</const>
</edit>

What about disabling autohint and full on grid snapping.

<edit mode="assign" identify="hinting">
	<bool>true</bool>
</edit>
<edit identify="autohint" mode="assign">
	<bool>false</bool>
</edit>
<edit mode="assign" identify="hintstyle">
	<const>hintfull</const>
</edit>

Not so fairly, perhaps simply snapping vertically is healthier, let’s strive
no-autohinter and a slight hinting.

<edit mode="assign" identify="hinting">
	<bool>true</bool>
</edit>
<edit identify="autohint" mode="assign">
	<bool>false</bool>
</edit>
<edit mode="assign" identify="hintstyle">
	<const>hintslight</const>
</edit>

Higher however it nonetheless appears to be like too daring. Let’s strive once more the autohinter however
with a softer hinting now.

<edit mode="assign" identify="hinting">
	<bool>true</bool>
</edit>
<edit identify="autohint" mode="assign">
	<bool>true</bool>
</edit>
<edit mode="assign" identify="hintstyle">
	<const>hintslight</const>
</edit>

It appears to be like similar to the total hinting, let’s take a look at with out hinting
in any respect.

<edit mode="assign" identify="hinting">
	<bool>false</bool>
</edit>

It looks like the auto-hinter is doing an excellent job at aligning the letters
vertically in a delicate manner. When zoomed in, you may clearly see how the
letters appear a bit extra compressed with the auto-hinter turned on.

General, for the particular font I examined, “Instances New Roman”, no hinting
in any respect or slight auto-hinting are the perfect on my show.

Subpixel Rendering

Let’s transfer to subpixel rendering.
Fontconfig gives some preset to how harshly the subpixel rendering
is completed. lcddefault is color-balanced and normalized, lcdlegacy is
neither normalized nor color-balanced, it makes use of any sub-pixels it may possibly
discover, lcdlight is much like lcddefault however applies a lighter trace
to the encompassing pixels, and lcdnone disables it.
Moreover, there’s additionally methods to allow Microsoft’s Cleartype subpixel
rendering by recompiling Freetype (disabled by default due to patent),
and methods to tweak the subpixel rendering matrix by manually enhancing the
Freetype code. However why undergo the effort.

Earlier than testing these, you must discover out what’s the
subpixel geometry of your display by consulting this
page, and set it because the
rgba property. Usually, preset information akin to 10-sub-pixel-rgb.conf
already come put in so that you merely should symlink them to the
/and so forth/fonts/conf.d listing.

NB: These checks don’t appear to point out variations with pango-view
however beginning another graphical program needs to be sufficient.
NB: Fringes are extra obvious with white textual content on black background.

Right here’s the results of the comparability, you may clearly see the fringes
when the incorrect subpixel geometry is chosen, right here my display has rgb
geometry. Additionally, no-subpixel rendering in any respect looks like an excellent
alternative for bitmap fonts, preserve this in thoughts.

I’ve tried to note the variations between lcddefault, lcdlight,
and lcdlegacy however it’s so minimal that it isn’t value mentioning. So
lcddefault needs to be superb normally. Somebody made a comparison
on this website if you need
to examine.

NB: It’s uncommon, but when fonts look deformed in your display it would
be as a result of your DPI isn’t detected correctly by fontconfig. Discover it
on X11 by doing xdpyinfo | grep -B 2 decision and set it with the
following match:

<match goal="sample">
	<edit identify="dpi" mode="assign">
		<double>96.0</double>
	</edit>
</match>

Antialiasing

Antialias is the settings you must virtually by no means flip off, until your
font is bitmap/non-scalable.
This image clearly exhibits the benefit of antialias on scalable
fonts. On the appropriate is the non-antialiased model.

Bizarre issues occur when the 10-scale-bitmap-fonts.conf preset is
current. The next picture exhibits a bitmap font with out hinting and
antialias on the left and on the appropriate with them. Eradicating this file
ought to repair the font and present it as crisp as attainable.

NB: If you wish to convert bitmap/pcf/bdf fonts to be
supported by Pango see this thread on the nixers.net
forums.

Making use of What We’ve Realized

Some fonts are identified to render badly with Freetype, akin to Home windows
fonts. So let’s take a look at what we’ve discovered to make them look higher.

You will get a duplicate of the Home windows font from a Home windows machine, they
are current within the C:WindowsFonts* listing (PS: I don’t take
accountability should you do that, for authorized causes).
It is best to now have the fonts, put them in both $XDG_DATA_HOME/fonts
(normally $HOME/.native/share/fonts) or $XDG_DATA_DIRS/fonts (normally
/usr/share/fonts).
Make sure you have adopted the earlier recommendation of renaming 50-user.conf
to 01-user.conf, and make sure that your native font configuration is
the primary by executing fc-conflist.

Now let’s take the identify of all of the Home windows font we received:

fc-query --format='%{household}n' * | kind | uniq

• Arial
• Arial Black
• Calibri
• Calibri Gentle
• Cambria
• Cambria Math
• Comedian Sans MS
• Consolas
• Georgia
• Influence
• Javanese Textual content
• Segoe Print
• Segoe Script
• Segoe UI
• Segoe UI Emoji
• Segoe UI Historic
• Segoe UI Black
• Segoe UI Gentle
• Segoe UI Semibold
• Segoe UI Semilight
• Segoe UI Image
• Tahoma
• Instances New Roman
• Trebuchet MS
• Verdana
• Webdings
• Wingdings

And let’s add some guidelines to our fontconfig file as follows:

<?xml model="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>

	<description>Make Home windows Font Look Good</description>

	<match goal="font">
		<edit identify="iswindowsfont" mode="assign">
			<or>
				<eq>
					<identify>household</identify>
					<string>Arial</string>
				</eq>
				<eq>
					<identify>household</identify>
					<string>Arial Black</string>
				</eq>
				<eq>
					<identify>household</identify>
					<string>Calibri</string>
				</eq>
				<eq>
					<identify>household</identify>
					<string>Calibri Gentle</string>
				</eq>
				<eq>
					<identify>household</identify>
					<string>Cambria</string>
				</eq>
				<eq>
					<identify>household</identify>
					<string>Cambria Math</string>
				</eq>
				<eq>
					<identify>household</identify>
					<string>Comedian Sans MS</string>
				</eq>
				<eq>
					<identify>household</identify>
					<string>Consolas</string>
				</eq>
				<eq>
					<identify>household</identify>
					<string>Georgia</string>
				</eq>
				<eq>
					<identify>household</identify>
					<string>Influence</string>
				</eq>
				<eq>
					<identify>household</identify>
					<string>Javanese Textual content</string>
				</eq>
				<eq>
					<identify>household</identify>
					<string>Segoe Print</string>
				</eq>
				<eq>
					<identify>household</identify>
					<string>Segoe Script</string></eq>
				<eq>
					<identify>household</identify>
					<string>Segoe UI</string>
				</eq>
				<eq>
					<identify>household</identify>
					<string>Segoe UI Emoji</string>
				</eq>
				<eq>
					<identify>household</identify>
					<string>Segoe UI Historic</string>
				</eq>
				<eq>
					<identify>household</identify>
					<string>Segoe UI Black</string>
				</eq>
				<eq>
					<identify>household</identify>
					<string>Segoe UI Gentle</string>
				</eq>
				<eq>
					<identify>household</identify>
					<string>Segoe UI Semibold</string>
				</eq>
				<eq>
					<identify>household</identify>
					<string>Segoe UI Semilight</string>
				</eq>
				<eq>
					<identify>household</identify>
					<string>Segoe UI Image</string>
				</eq>
				<eq>
					<identify>household</identify>
					<string>Tahoma</string>
				</eq>
				<eq>
					<identify>household</identify>
					<string>Instances New Roman</string>
				</eq>
				<eq>
					<identify>household</identify>
					<string>Trebuchet MS</string>
				</eq>
				<eq>
					<identify>household</identify>
					<string>Verdana</string>
				</eq>
				<eq>
					<identify>household</identify>
					<string>Webdings</string>
				</eq>
				<eq>
					<identify>household</identify>
					<string>Wingdings</string>
				</eq>
			</or>
		</edit>
	</match>

	<match goal="font">
		<take a look at identify="iswindowsfont" examine="eq">
			<bool>true</bool>
		</take a look at>
		<edit mode="assign" identify="hinting">
			<bool>false</bool>
		</edit>
		<edit identify="autohint" mode="assign">
			<bool>false</bool>
		</edit>
		<edit mode="assign" identify="hintstyle">
			<const>hintnone</const>
		</edit>
		<edit mode="assign" identify="antialias">
			<bool>true</bool>
		</edit>
		<edit identify="embeddedbitmap" mode="assign">
			<bool>false</bool>
		</edit>
	</match>

</fontconfig>

File also hosted here

This will likely seem like a giant script and it could be your first time seeing
somebody write such script for fontconfig however don’t fear. It’s fairly
easy general, it checks the identify of the household of the font and units
a variable to true iswindowsfont if it matches. Then, if that is set,
it configures the values we wish for this group of fonts. You possibly can play
with the values should you aren’t happy, the grouping ought to assist.
You shouldn’t even should run fc-cache, this could take impact as
quickly as you restart an software that makes use of fontconfig.

fc-match --verbose 'Cambria' | grep iswindowsfont
# iswindowsfont: True(w)

Conclusion

That is it for this publish.
I hope you’ve discovered a factor or two about font configurations with
Freetype and Fontconfig and have been stunned by a minimum of one in all them.

In case you’ve loved my article, have feedback, strategies, or just need
to say thanks, please depart a remark.

References

Attributions

• Web Archive E-book Photographs / No restrictions

If you wish to have a extra in depth dialogue I am at all times out there by email or irc.
We will talk about and argue about what you want and dislike, about new concepts to think about, opinions, and so forth..
In case you do not feel like “having a dialogue” or are intimidated by emails
then you may merely say one thing small within the remark sections beneath
and/or share it with your pals.