6 ms·

Font Combiner – improvements to free web fonts

85 points by emily_b 13y ago

wickedchap 13y ago
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.
bberrry 13y ago
Looks great, this is something I'll use for sure.
cliveowen 13y ago
On my Mac+Google Chrome the difference is barely noticeable.
- twoodfin 13y ago
  Not on my rMBP. The "enhanced" versions are noticeably better spaced and easier on the eyes.
  - pragone 13y ago
    wow. on my macbook air, it's the opposite - the "enhanced" versions have letter smushed together and is overall a little harder to read.
molf 13y ago
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.
- wickedchap 13y ago
  http://fontcombiner.com/docs/demo http://fontcombiner.com/docs/demo
- micheljansen 13y ago
  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.png http://fontcombiner.com/docs/media/demo/linux_firefox_ubuntu...
  - noir_lord 13y ago
    Much prefer the left and in fairness so far I've preferred the non-fontcombiner version on everything I've seen.
  - ds9 13y ago
    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".
  - bhauer 13y ago
    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
  - lstamour 13y ago
    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.
- Sevores 13y ago
  Same here. Here's a gif to illustrate: http://i.imgur.com/3AmIB8Z.gif http://i.imgur.com/3AmIB8Z.gif
- driverdan 13y ago
  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.
- isani 13y ago
  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.
Kiro 13y ago
Big improvements on Windows 7 / Chrome.
- phaed 13y ago
  Same here.
micheljansen 13y ago
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 13y ago
  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 13y ago
    This is really the problem. Many fonts are poorly hinted and not designed with small sizes on a screen in mind.
    - michaelmior 13y ago
      That I will agree with. I highly doubt that Font Combiner could beat a font manually hinted by a trained fontographer though.
- DanBC 13y ago
  > 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 http://youtu.be/cISYzA36-ZY?t=1m25s)
krig 13y ago
On linux with slight hinting enabled, and I see no discernable difference between the examples.
colinbartlett 13y ago
On my MacBook Air, the original version looks much better than the "improved".
NateDad 13y ago
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.
quaffapint 13y ago
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.
Semaphor 13y ago
So essentially you want to deliver the font combiner version to Windows/Chrome and the normal version to everyone else.
swinglock 13y ago
Windows 7, Firefox 25 with no hardware acceleration. http://imgur.com/a/V8zTc http://imgur.com/a/V8zTc
deleted 13y ago
[deleted]
tenfingers 13y ago
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.
matthuggins 13y ago
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?
jbverschoor 13y ago
what does it do?
mtarnovan 13y ago
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.
lnanek2 13y ago
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?
wyck 13y ago
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 13y ago
  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.
ZeroGravitas 13y ago
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-web-font-requests.html http://googlewebfonts.blogspot.com/2011/04/streamline-your-w...
- emily_b 13y ago
  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.
emily_b 13y ago
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-rendering/ 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.
bzelip 13y ago
The fontcombiner versions appear more appealing to me, more crisp and bold and weightier, than the G webfonts. iphone 4s, ios7.
D9u 13y ago
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.
arunoda 13y ago
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.
rhythmvs 13y ago
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)
emily_b 13y ago
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

85 points by emily_b 13y ago

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.

bberrry 13y ago

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

cliveowen 13y ago

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

twoodfin 13y ago
Not on my rMBP. The "enhanced" versions are noticeably better spaced and easier on the eyes.
- pragone 13y ago
  wow. on my macbook air, it's the opposite - the "enhanced" versions have letter smushed together and is overall a little harder to read.

molf 13y ago

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.

wickedchap 13y ago
http://fontcombiner.com/docs/demo http://fontcombiner.com/docs/demo
micheljansen 13y ago
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.png http://fontcombiner.com/docs/media/demo/linux_firefox_ubuntu...
- noir_lord 13y ago
  Much prefer the left and in fairness so far I've preferred the non-fontcombiner version on everything I've seen.
- ds9 13y ago
  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".
- bhauer 13y ago
  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
- lstamour 13y ago
  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.
Sevores 13y ago
Same here. Here's a gif to illustrate: http://i.imgur.com/3AmIB8Z.gif http://i.imgur.com/3AmIB8Z.gif
driverdan 13y ago
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.
isani 13y ago
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.

Kiro 13y ago

Big improvements on Windows 7 / Chrome.

phaed 13y ago
Same here.

micheljansen 13y ago

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 13y ago
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 13y ago
  This is really the problem. Many fonts are poorly hinted and not designed with small sizes on a screen in mind.
  - michaelmior 13y ago
    That I will agree with. I highly doubt that Font Combiner could beat a font manually hinted by a trained fontographer though.
DanBC 13y ago
> 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 http://youtu.be/cISYzA36-ZY?t=1m25s)

krig 13y ago

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

colinbartlett 13y ago

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

NateDad 13y ago

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.

quaffapint 13y ago

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.

Semaphor 13y ago

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

swinglock 13y ago

Windows 7, Firefox 25 with no hardware acceleration. http://imgur.com/a/V8zTc http://imgur.com/a/V8zTc

deleted 13y ago

[deleted]

tenfingers 13y ago

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.

matthuggins 13y ago

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?

jbverschoor 13y ago

what does it do?

mtarnovan 13y ago

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.

lnanek2 13y ago

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?

wyck 13y ago

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 13y ago
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.

ZeroGravitas 13y ago

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-web-font-requests.html http://googlewebfonts.blogspot.com/2011/04/streamline-your-w...

emily_b 13y ago
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.

emily_b 13y ago

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-rendering/ 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.

bzelip 13y ago

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

D9u 13y ago

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.

arunoda 13y ago

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.

rhythmvs 13y ago

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)

emily_b 13y ago

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