[tutorial] font smoothing/thickening

Okay, quite a few people have asked me how I made my fonts to look the way they are, so I've decided to create a tutorial instead of regurgitating the same process to people every single time. Attached below are what my fonts look like before modification (with ClearType) and after modification (with Grayscale rendering). If you like what you see....read on....

The left side snapshot is HandelGotD with ClearType (full preview @ deviantART).

The right side snapshot is HandelGotD with grayscale rendering (using this tutorial) (full preview @ deviantART).

http://www.aqua-soft.org/board/attachment....ntid=6544&stc=1

* This method has been tested only on TrueType fonts (.ttf). Other types of fonts such as Type1 or OpenType fonts seem to use a different method of rendering in Windows and as such, the steps described below may not apply to these types of fonts.

* This method has been tested on CRT monitors only. I have a NEC MultiSync FE700+ 17" Flatscreen CRT and all my testers own CRTs. I am told that this method does not look quite as well under LCD monitors, although I have never tried it on an LCD myself.

* When you modify fonts, you are modifying it from the original so be sure to adhere to any copyrights bound to the particular font.

Grayscale Font Smoothing with TrueType TTF Fonts

By JesterMania

For this tutorial, I will use High-Logic Font Creator available at http://www.high-logic.com . A free trial is downloadable there. This tutorial is in no way restricted to only this program and can be applied to many other font editors. I just happen to use Font Creator for my own work. If you wish to use FontLab Studio 5, instructions are given further down by Paralex outlining the method for that specific edititor. This tutorial will assume you know the basics of operating Windows (as in how to copy/paste files, how to install fonts, etc.). In this tutorial, I will be using the HandelGotD font (HandelGotD.ttf).

1. Preparing your system

If you don't have a copy of the font file available, all your installed fonts are located in C:WindowsFonts, so you can copy the font from there into a separate location to work with. The reason for doing this is so you always have a backup of the original and working with fonts directly in the WindowsFonts folder is not a good idea. Make a copy of your font in order to modify now and rename it to a name different than its original (not required, but recommended - i.e. HGSmooth.ttf).

Enable "Standard" font smoothing. This can be done by right-clicking the desktop and selecting "Properties". Click on the "Appearance" tab and click on the "Effects" button. Ensure "Use the following method to smooth edges of screen font" is checked and select "Standard" and click "OK".

RESTART YOUR COMPUTER (trust me on this one).

*NOTE: If you are using Styler, unchecking "ClearType" under the "Desktop" tab turns off font smoothing totally. You still have to go and activate "Standard" font smoothing as described in the above paragraph.

2. Renaming your font

Open the copy of your font you would like to modify in Font Creator (File->Open).

(Format->Naming). Under "Platform", select each entry and on the right-hand side, replace the any text string with the font's original name (i.e. "HandelGotD") with a unique name of your own (i.e. "HGSmooth"). Be sure to click the "Advanced" button and ensure the names in there are changed also if they happen to exist. You can ignore the other text strings that contain the font foundary, author, etc. - only the name matters.

When you are done with each "Platform" and each "Language", click "OK". You have successfully renamed the font.

3. Enable GASP at all sizes

(Format->Grayscale) and delete all entries under "Gasp Ranges". Click the "Insert" button, check "Grayscale Rendering" and click "OK". You should have a single entry which says Limit: 65535 Flags: Grayscale rendering. Click "OK" again to close the dialog box.

4. Adding boldness to the font

At this point, you can start using your font (by installing and launching an application such as wordpad to test). I don't recommend using the default previewer in Font Creator as the quality of the results aren't accurate. Usually, the font will appear very light and faint, sometimes barely readable at this point. This is a problem with the Windows font rendering engine and this step will provide you with the means to darken the font to a level of your liking.

(Tools->Glyth Transformer). Ensure that under "Range", "All" is selected. Click on "Effects" dropdown and select "Bold". Click the -> arrow to add it to "Script". Under "Horizontal", enter the value '5' and in "Vertical", enter the value '4' and click "OK".

*NOTE: This adjusts the strength of boldness applied each time. In my experience I get better results by bolding a little each time. You can try other values other than H:5 V:4.

You have now successfully darkened your font. Save the font, reinstall it, and test it. Repeat this step over and over until you get the boldness strength that you like. You can use the same boldness strength (such as Bold(5, 4) each time, you needn't increase the intensity to make the font bolder).

That's all there is to it. As a side note, this type of font rendering will make your fonts appear "fatter" when the letters are displayed in a light colour (such as white). You may wish to create one font for dark-coloured text and another for light-coloured text.

+ Addition

Instructions for FontLab Studio 5

By Paralex

For those of you who use Fontlab Studio 5, I found a quite simple/easy/lazy way to do this.

Open up your font in Fontlab studio.

Go to Edit > Select All. (This will select all the characters.)

Next, go to Tools > Action > Effects > Bold. Set the H weight to 5, and the V weight to 4. (Just like in Jester's settings in Font Creator.) Click OK.

Then, go to Tools > Repeat Bold/Outline. Then do it again. (This will cause the Boldness to be applied 3 times)

Don't know how to save as TTF?

No worries, just go to File > Generate font. (Or just hit in Ctrl + Alt + G) In the click-down box next to "Save as Type", select "TrueType/OpenType TT (*.ttf)" and save it anywhere (best place to put it is in C:WindowsFonts)

Enabling Grayscale

To add enable grayscale font smoothing in in FontLab Studio:

File->Font Info

TrueType-specific settings->Font smoothing

On the right pane, you will see "PPM Ranges". Here, you can specify the font sizes which are smoothed. For our smoothing purposes, make sure each font range has "Apply instructions to range" (hinting) is unchecked and "Apply smoothing to the range" (grayscale) is checked. For example, I opened up the font "Agency FB", and the settings were:

0 - 8 S

9 - 16 G

17 - ... SG

And after changing, you'll end up with something like:

0 - 8 S

9 - 16 S

17 - ... S

How to change the font name.

(Just in case you want to install the regular and modded font)

Go to File > Font info. (For example, I am using Lucida Grande for this. And I want to change the name to Lucida Grande Mod.)

Go to Names and Copyright. (Make sure you keep the copyright statement from the original creator!)

I would simply put it "Lucida Grande Mod" into the Family Name, PS Font Name, Full Name, Menu Name fields.

Then go to Version and Identification. Change the version number by .1 (Such as if the original version was 2.0, you would simply change it to 2.1)

Then save.

Enjoy!

#330396

great tutorial!

Thanks alot man!

#330400

on the LCD monitor (SONY LCD HS95PS) very blurry, screenshot it's not good, sorry. But tutorial is very helpful. Thanks...

#330610

Does this cause Grayscale rendering to work with fonts below 14pt? (or 12pt? I forgot the standard cutoff for Windows)

#330866

This tutorial causes Grayscale rendering to work at all font sizes (step 3). There is no standard Windows cutoff, it is the font which determines the cutoff size.

#330988

Ahh, that I did not know. It always bothered me that (in my thinking) Windows caused that cutoff, yet there was no registry hack for it. That solves *that* problem. This might make Souless' fonts no longer needed. I'll check this out later when I have some time. Thanks!

(Nice avatar, btw.)

UPDATE:

OMFG. Cookie for you!

#331076

Haha thanks and glad you like it.

#331203

There is one small problem with the way my font turned out. It might be the font the I used (Lucida Grande), or another issue. (Almost) everything works wonderfully -- however, the font seems to be set lower than the rest of them. For example, if I write 'asdfasdf' into Wordpad, then change the second half of that to my modified Lucida Grande, the whole line shifts downward, similar to the effect of using 1.5 line spacing. Is this solely due to my source font, or a side-effect of the bolding process?

EDIT:

Found the answer to my question on my own, should have done that first. It was the source font. Now I'm using IceMan's version of Lucida Grande, and not only does it look better (IMO), but it also does not have the aforementioned problem.

#331343

hey Jester awsome tutorial but im have one problem the font is making my buttons look diffrent everywhere i was wondering if you have a soloution of an idea of wat has gone wrong.

#331609

By different, did you mean that by using the font, the buttons (originally #1) became shorter in length (#2)? Have you found out if this problem occurs with different visual styles? How about if you used different fonts (not modified by this tutorial)?

#331745

BLITZR:

I would try using a different source font. That looks like Lucida Grande to me, and I would highly suggest using IceMan's port of the font. If you PM me, I could send you my version of Lucida Grande as reference (or to use, if you like it).

#331750

hi there good tutorial I looking for something like that a long time

thx :worship:

#332058

Brilliant. Just brilliant. Thank you so much.

One question though. I just tried this out with OpenType fonts (specifically Trebuchet MS) and as you rightly mentioned, it does not work. Can someone tell me how to convert that OpenType font into regular TrueType?

#332929

Try opening the font in Font Creator and then saving it as TTF. You may/may not experience any side effects though, as conversion from one format to another (especially as OpenType is more advanced than TrueType) may exhibit some irregularities.

#332973

Thanks a lot man!! I'm gonna try it just when I come back from school!

#333056

Thanks for your tutorial- it works perfectly! However, cleartype cannot be used to get this wonderful effect for my fonts, and there are places where the font does not look good at all(see attatchment.) Is there a way I could change this font? Thanks.

#334066

Yes I know what you mean and there are several ways to circumvent this problem. The first is to actually modify and replace those fonts that look bad (in XP, you want to take a look at Tahoma, which is usually used when a visual style fails to specify which font to use for a particular UI element). The second way is to modify the visual style to specify which fonts to use for each UI element. I know some authors of msstyles (and probably WB styles) neglect to specify what fonts to use for elements such as tabs. You can modify this very easily in StyleBuilder/SkinStudio, I've had to do this on several occassions. If you don't want to modify the visualstyle/font, then another way is to change the MS Shell Dlg font:

HKEY_LOCAL_MACHINESoftwareMicrosoftWindows NTCurrent VersionFontSubstitutes

• MS Shell Dlg

• MS Shell Dlg 2

#334161

No, it's not just you, that's just the effects of grayscale rendering. That's also why it makes fonts look "smoother" on CRTs. The reason why it is called grayscale is that it uses gray pixels to smooth out the fonts, unlike ClearType which uses colored-pixels. A good example of the difference between no smoothing, greyscale smoothing, and cleartype (subpixel) smoothing can be found on this page: http://tomtia.plala.jp/PC/ttfont/index.htm (sorry Japanese only). Scroll down a little and you'll see a picture comparing these three (無し=none, 標準=standard/grayscale).

#334206

You're correct. Most laptops use LCD monitors- Liquid Crystal Display- and are thinner than CRT monitors(I don't know what it stands for )- the big TV looking like displays. I hope that clears it up for you!

@JesterMania: thanks for the tip, but I have to ask you a question. Where would "HKEY_LOCAL_MACHINESoftwareMicrosoftWindows NTCurrent VersionFontSubstitutes" be? This might be a dumb question, just bare with me!

#334305

CRT == Cathode Ray Tube.

-NC

#334307

You're correct. Most laptops use LCD monitors- Liquid Crystal Display- and are thinner than CRT monitors(I don't know what it stands for )- the big TV looking like displays. I hope that clears it up for you!

@JesterMania: thanks for the tip, but I have to ask you a question. Where would "HKEY_LOCAL_MACHINESoftwareMicrosoftWindows NTCurrent VersionFontSubstitutes" be? This might be a dumb question, just bare with me!

This is a registry key, which you can access by using Microsoft's Registry Editor. Start -> Run -> "regedit" .

#334318

This tutorial is really sweet!

But when I turn off ClearType almost every other font looks lite crap...

Is there a way to go around this or will I have to modify all the fonts using this metod?

Plus, Windows is protecting some of the fonts. How do I turn that off?

Thanks alot for the tutorial!

#341980

I'm glad you like it . First of all, yes it's true most other fonts don't look that great without ClearType. That means to get around that, you'll probably have to make a set of fonts. There's not too many though considering that you'll probably only be seeing two fonts frequently: one for the UI (used by the visual style), and another more "readable" font (used for web page rendering - you can specify the font used in most any modern web browser). Also, please note that Type1 fonts (such as Souless' fonts) display great under Standard font rendering as Windows displays these fonts using grayscale regardless of whether ClearType is on or off, unlike TTF and OTF fonts which are displayed differently. You can test this yourself. So, using a Souless font for web page rendering for example would work pretty well in combination with your own custom UI font.

The font Windows is protecting, and which annoyingly propagates itself throughout the Windows interface is Tahoma. Replacing Tahoma in Windows is a real pain and I've been lazy trying to figure out a way (Tahoma looks bad w/o ClearType). First, try telling Windows to use some font other than Tahoma in the registry (#17 post). You can also theoretically replace Tahoma entirely with something like Linux (Live-CD distro with write-access may do).

#342588

can someone zip and upload grayscaled lucida grande and lucida mac, please?

#344061

I think you could replace Tahoma if you boot into XP's safe mode. I might be wrong though

#344065