

Font Combiner – improvements to free web fonts - emily_b
http://fontcombiner.com/docs/whyfontcombiner

======
micheljansen
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?

~~~
michaelmior
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.

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

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

------
molf
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.

~~~
micheljansen
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...](http://fontcombiner.com/docs/media/demo/linux_firefox_ubuntu.png)

~~~
bhauer
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](http://code.google.com/p/chromium/issues/detail?id=25541)

------
ZeroGravitas
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://www.freetype.org/ttfautohint/index.html)

[http://m.youtube.com/watch?v=QTX1lU97z08](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...](http://googlewebfonts.blogspot.com/2011/04/streamline-your-web-
font-requests.html)

~~~
emily_b
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.

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

------
wickedchap
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.

------
NateDad
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.

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

------
matthuggins
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?

------
Kiro
Big improvements on Windows 7 / Chrome.

~~~
phaed
Same here.

------
wyck
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.

~~~
wickedchap
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.

------
tenfingers
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.

------
emily_b
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-...](http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-
rendering/)

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.

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

------
rhythmvs
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](http://en.wikipedia.org/wiki/List_of_typographic_features)
[2] Check nodebox.github.io/opentype.js/
([https://news.ycombinator.com/item?id=6459778](https://news.ycombinator.com/item?id=6459778))

------
quaffapint
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.

------
emily_b
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](http://i.imgur.com/WBbUIFi.png)

------
swinglock
Windows 7, Firefox 25 with no hardware acceleration.

[http://imgur.com/a/V8zTc](http://imgur.com/a/V8zTc)

------
lnanek2
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?

------
mtarnovan
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.

------
D9u
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.

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

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

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

------
arunoda
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.

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

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

------
jbverschoor
what does it do?

