Scaling up a font for web use

gtivr4's picture

So I've run into an issue with backup fonts for a client specific font being used on a templated web site.

The client font runs about 10% smaller than every other font, so that means if I specify the font-size at say 32px, and the user can't use the custom font for whatever reason, the displayed backup (in this case Impact) ends up a fair bit larger and can break unexpectedly.

As far as I can tell the only solution is to take the custom font and scale it up to create a more custom version. Whats the best way to do this? Is there a quick piece of software capable of this or do I have to go into a font editing software and scale every single glyph (ughh!)?

ralf h.'s picture

There’s fontsize-adjust in CSS for that: http://www.w3.org/TR/css3-fonts/#font-size-adjust-prop
Doesn’t work in older browsers though.

fontsquirrel's picture

Assuming your fallback fonts are standard, you can use the Font Squirrel Generator (in Expert mode) to auto-resize the glyphs to match your target fallback font.

John Hudson's picture

If you do opt to adjust the scaling of your custom font, the easiest way to do this is simply to change the font UPM value. To increase the size of the font +10%, you would reduce the UPM value by 10%. So, for instance, if your font has a UPM value of 1000, you would reduce this to 900. This is the best way to scale an already mastered font, because it means that you don't have issues with rounding of outline geometry, loss of hints, having to recalculate vertical metrics, etc.

The one caveat with this approach is that if your font is PS format some PDF creation software will incorrectly scale a font whose UPM does not equal 1000.

gtivr4's picture

Ralf - font-size-adjust only seems to work with Firefox (darn, that would have worked too!)

fontquirrel - The fallback is Impact which is generally an accepted standard. Font Squirrel seems to mess up the custom font though for whatever reason when converting. I set it to match x-height of the various options, and it just returns nothing for that letter. It works if I don't match x-height

John - What software would I use to change the UPM? Anything free by chance?

John Hudson's picture

Ideally, you want to change the UPM while not touching anything else in the font, so I would recommend using TTX for this, if you want a free tool. I use DTL OTMaster for this kind of work, but it isn't free.

Using TTX, you would decompile the font's head table using this syntax from the command line:

ttx -t head [inputfontfilename]

Then open the resulting .ttx xml file in a text editor, change the UPM value and save the xml file. Then merge the .ttx xml into the font:

ttx -m [inputfontfilename] [inputttxfilename]

JanekZ's picture

Thanks John, it works!
BTW TTX for win: http://typophile.com/node/67406#comment-469074

Tim Brown's picture

Nathan, you can also leave the fonts as-is and apply different CSS rules based on whether the custom font has loaded or not — which WebFont Loader can tell you: http://code.google.com/apis/webfonts/docs/webfont_loader.html

We sometimes write about "font events" on the Typekit blog, because WFL is baked right into our standard JS. Here's an example you can follow even if you don't use Typekit: http://blog.typekit.com/2010/11/02/font-events-fallback-fonts-and-styles-2/

billdavis's picture

Silly question, but if the client's font is Impact, wouldn't it be a lot easier just to use Impact as a web font from the Fonts.com web fonts service? (www.webfonts.fonts.com) That way it would be automatically downloaded to all the major web browsers.

Si_Daniels's picture

At ATypI Font Bureau demonstrated a range of hinted fonts on Impact-like metrics. Might be good alternatives if you want to have an Imapact fallback story/minimal reflow when the web font loads in.

Rob O. Font's picture

"Doesn’t work in older browsers though."
ugly
"...you want to change the UPM..."
uglier
"...but if the client's font is Impact..."
ugliest
"Font Bureau demonstrated a range of hinted fonts on Impact-like metrics..."
Say ahhhhh refreshedly!

Time rewards all beautiful thoughts, though time is also the payment required for those who pursue such thoughts through to excellence in web type. ;)

We had to write a complicated py script to take proper aim at the issue and strike within a few hours of intelligent work from the target.

Syndicate content Syndicate content