Font Combiner – improvements to free web fonts | Hacker News Reader

Font Combiner – improvements to free web fonts

fontcombiner.com

85 pointsemily_b44 comments

From the explanation beneath "How is this possible":

> The Font Combiner application uses a couple of different techniques to overhaul fonts. All glyph forms are extracted from vectors present in the original fonts and scaled to size where appropriate, the vertical metrics are recalculated from scratch, and spacing and fresh automated hinting are applied to the result.

Now, I don't know a lot about the gory details of typography, but I do know that type designers spend a lot of time thinking about things like "appropriate size and scale" and other metrics. Can these really be automatically recalculated from scratch and how can this possibly lead to a better result?

I can't imagine that it would do better than carefully designed and hinted font. But I doubt such care is given to all fonts.

This is really the problem. Many fonts are poorly hinted and not designed with small sizes on a screen in mind.

That I will agree with. I highly doubt that Font Combiner could beat a font manually hinted by a trained fontographer though.

> I do know that type designers spend a lot of time thinking about things like "appropriate size and scale" and other metrics. Can these really be automatically recalculated from scratch and how can this possibly lead to a better result?

Do most people really see any difference?

(http://youtu.be/cISYzA36-ZY?t=1m25s)

Some rendering screenshots would help. I'm viewing this on my iPad and the only difference I see is bad kerning in the examples on the right.

http://fontcombiner.com/docs/demo

Same here (OS X, Safari). It doesn't look much better in the demos either. Their demos include some truly horrific examples, like Linux, Firefox 24, Ubuntu: http://fontcombiner.com/docs/media/demo/linux_firefox_ubuntu...

Much prefer the left and in fairness so far I've preferred the non-fontcombiner version on everything I've seen.

Thanks for the screenshot, the sample just shows as browser-default fonts for me with Iceweasel.

Both of these have the horrible rainbow effects around the edges of the letters, presumably from sub-pixel anti-aliasing.

But I'm an outlier, basically the only way I can read text without serious eyestrain is aliased with good hinting. Somehow the "jaggies" which so distress most people are completely innocuous for me, while I can't tolerate any of the fuzzy/blurry look that most readers bizarrely call "sharp".

I, like many here, prefer the original on the left both in my browser (Firefox 27 on Windows 8) and in the example you linked.

Most notably, to my eye, the text on the right has unappealing kerning changes.

A concrete example, visible in the screen-shot you linked: look at the words "little three" at the top right of the second paragraph. In the original rendering, the space between the pair of 't's and the 't' and 'h' pair is correct. In the modified rendering on the right, there is an excess pixel between the pair of 't's and the 't' and 'h' pair.

Uneven spacing of letters is one of the reasons I am unhappy when I use Chrome, since it still doesn't support DirectWrite on Windows [1].

[1] http://code.google.com/p/chromium/issues/detail?id=25541

If you're on Linux, you might already have the Ubuntu font, and if so will get better results using it. In addition, Ubuntu is likely a decent font, where this will drive the most improvements is in fonts of single weights designed for a fixed size and not easily resized from body text to headline or display to body.

It seemed right to try to offer transparent comparisons for screenshots rather than cherry pick. Linux font rendering can vary a lot depending on how things are set up.

Same here. Here's a gif to illustrate: http://i.imgur.com/3AmIB8Z.gif

I agree. For me (OS X, Chrome, rMBP @ 1920x1200) the kerning is much worse for Font Combiner. The letter "l" in Varela Round, for example, has far too little space after it.

I agree. I'm not sure what kind of an algorithm they use for kerning, but it seems to ignore how letters interact optically. Pairs like "ve" and "ro" are set too far apart.

I was under the impression that Google Fonts stripped hinting to speed download since its entirely ignored by many platform/browser combinations.

And for platforms that do use it I thought it ran ttfautohint to generate it, which sounds incredibly similar to what these guys do.

Relatedly, Google fonts also has sophisticated subsetting options which this page claims as an improvement over Google's offering.

edit: relevant links

http://www.freetype.org/ttfautohint/index.html

http://m.youtube.com/watch?v=QTX1lU97z08 (27 minutes in for stripping hints on non-windows requests)

http://googlewebfonts.blogspot.com/2011/04/streamline-your-w...

I don't know if Google strip hinting, but that sounds broadly accurate. Font Combiner makes use of ttfautohint as part of hinting types B and C, with slight modifications where a subset omits character 'o'. Hinting and truetype instructions make little difference to OSX and others.

On my MacBook Air, the original version looks much better than the "improved".

I see clear difference on both Windows and Linux, your product makes the fonts more clear and sharp thus making it more readable and less fuzzy than taking fonts straight out of Google Fonts. Looks to me like a solid thing, definitely bookmarked.

They look mostly the same to me on a 30" screen (chrome on linux). Slightly different kerning is all I can really tell. Certainly no significant difference.

So essentially you want to deliver the font combiner version to Windows/Chrome and the normal version to everyone else.

Can't see a difference, other than a slight change in spacing between letters. Maybe the site should explain what I'm supposed to be looking for since it's not obvious? As it stands, there's no explanation about what changes, and there's no real visible difference. Why would I use this?

Big improvements on Windows 7 / Chrome.

Same here.

This affects mainly Windows users (why I do not know.. but the default Google fonts have always look like shit on my Windows machine).

If you don't see any difference think about how many people are viewing your app/site on windows machines and having to look at the horrible default rendering.

You can always tell when a site is build with Apple and not throughout tested on Windows, the fonts are always horrible, and there are very few tested services that render fonts across OS/browsers the right way, so this is a great idea.

Actually this affects Linux users too. I tested on Elementary OS, which is a distro based on Ubuntu and uses sub-pixel font rendering. Fonts made with font combiner are more crisp and clear (but not pixelated) than the default google fonts, which are fuzzy.

Definitely worse for me under FF25/linux with the autohinter. Kerning also seems to be worse in certain common cases ("ow").

Fortunately, I enforce my own fonts on web pages, as I cannot stand the incredibly poor quality of most "web fonts". Proper hinting makes a world of difference for reading on a screen. If you really care for typography on your website, you should pay for a decent font, or use a common system font.

Forgive the slow response to some of the comments. Font Combiner's utility is intended to be as much in the facility to combine glyphs from more than one font and to adjust spacing characteristics and hinting to taste, along with scaling fonts to size for greater consistency.

Hinting and vertical metrics are quite the rabbit hole across platforms. This is a good article http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-...

Font kerning is very new to web browsers. So far as I'm aware neither of the fonts demonstrated at the top of the post contain kerning information. The heavy fonts lower down do.

Font Combiner itself is still very new. Tracking or character spacing (as opposed to kerning) may benefit from some additional tweaks for OSX. This is outside of the scope of the current UI.

On linux with slight hinting enabled, and I see no discernable difference between the examples.

Great project! Web designers need absolute control over charset and font size (load), kerning, word and letter spacing, etc. Support for OpenType features [1] would be a dearly needed addition. Editing/tweaking of glyph shapes [2] would make this tool really into an in-browser font editor.

[1] http://en.wikipedia.org/wiki/List_of_typographic_features [2] Check nodebox.github.io/opentype.js/ (https://news.ycombinator.com/item?id=6459778)

I notice improvements on windows8/chrome on the 2nd one. First one is about the same. I've always hated how bad web fonts can look on chrome on windows and why they have yet to resolve the issue.

View statistics for Font Combiner following some exposure on HN show upwards of 70% Linux and Mac. This probably isn't representative of the audience most fonts in use would be presented to. If you're interested in the differences, do try a test in Windows on a browser without DirectWrite.

This is a screenshot showing Windows 7 and Chrome 30: http://i.imgur.com/WBbUIFi.png

Windows 7, Firefox 25 with no hardware acceleration.

http://imgur.com/a/V8zTc

On Chrome, on a retina Mac Book Pro here. Kind of liked the right side they produced at first glance, but actually reading the text, the left side is clearer, sharper, and lighter and easier on the eyes. Reading the right is like reading an entire book set in bold. Maybe their stuff is just good for heavy title fonts or something?

I first viewed the examples on my Macbook Air, and didn't see much difference (except what looked to me as marginally better kerning for the Font Combiner version).

Viewing them again on Chrome/Win7, the ones served by Font Combiner seem to have much better hinting.

No 1's to compare against upper case "I" and lower case "l." No 0's to compare against upper case "O."

I don't see any differences.

On my Mac+Google Chrome the difference is barely noticeable.

Not on my rMBP. The "enhanced" versions are noticeably better spaced and easier on the eyes.

wow. on my macbook air, it's the opposite - the "enhanced" versions have letter smushed together and is overall a little harder to read.

Demo didn't show diff for me. (OSX Chrome) But the actual font-combiner tool seems to be great, I can create my own font combining few fonts. Which is nice.

The fontcombiner versions appear more appealing to me, more crisp and bold and weightier, than the G webfonts. iphone 4s, ios7.

Looks great, this is something I'll use for sure.

what does it do?

Reply on news.ycombinator.com