12 ms·
Brick. Webfonts that look good
- greytwo 13y agoHow does one incorporate this into a webpage?
- alfredxing 13y agoUsage is at https://github.com/alfredxing/brick/wiki/Usage https://github.com/alfredxing/brick/wiki/Usage
- alfredxing 13y agoBrick is a free and open source webfont service that serves fonts in their original form for beautiful rendering and full feature sets (kerning, ligatures, etc.) Site: http://brick.im http://brick.im GitHub: https://github.com/alfredxing/brick https://github.com/alfredxing/brick Usage: https://github.com/alfredxing/brick/wiki/Usage https://github.com/alfredxing/brick/wiki/Usage
- jamiesonbecker 13y agoWhy do the demo pages have different styling (esp line-height, it looks like).. makes it harder to see differences in two different windows.
- alfredxing 13y agoSorry about that! It's probably a difference between the fonts served by Brick and those by Google. Just pushed the commit, should be fixed now.
- deleted 13y ago[deleted]
- jejones3141 13y agoOK, the only difference is in the link to show the other sample and the use of Brick versus Google Fonts. The ligature is nice. My eyes aren't good enough to notice kerning differences--but that may be because the HUGE difference between the two samples is the line spacing. Brick jams those lines together like sardines, and while Google Fonts goes at least somewhat overboard in the other direction, if I had to choose, that so-tight-it-squeaks line spacing makes Brick painful to read. UPDATE: Whew, thanks! Much better. I'll have to take a look and see what changed.
- huhtenberg 13y agoAlfred, I applaud the effort, but take a look at the baseline of /w/ and the stem of /a/ - http://imgur.com/O3QoCO8 http://imgur.com/O3QoCO8 Top is Brick, bottom is GF, both rendered in Firefox 27 on Windows.
- alfredxing 13y agoThanks! Hmm, seems to be an issue. Renders fine in Chrome though, and there doesn't seem to be anything wrong in FontForge either. I'll look into it for sure.
- codelap 13y agoHeh, they both look fine to me. I really couldn't see the difference... I'm a sucker for good design, but it seems my font style is in the incompetent zone.
- alfredxing 13y agoThe most noticable differences (apart from the rendering) are the fi ligature in the title ("overfilled") and the Q feature (where the tail is extended past the first letter ("Quisque").
- pygy_ 13y agoKerning is also better on OS X (with Firefox, Chrome and Safari 6), but it's hard to notice on the demo pages because, for some reason, the text body in the Google Fonts page is three pixels lower than in the Brick version. I glanced at the CSS but couldn't find the reason.
- martinml 13y agoI guess it depends on your setup. On Windows XP + ClearType + Chrome the difference is _huge_, it has a much better font smoothing.
- kbar13 13y agocool! how do I request additional typefaces and/or contribute?
- alfredxing 13y agoFor now, open up an issue on GitHub. I plan on extending the contributing page on the wiki with pull request instructions soon.
- guanche 13y agoAs far as I can see; iOS renders it just fine in both implementations
- noir_lord 13y agoiOS devices typically have a much higher DPI than a "normal" (though this is rapidly changing) screen. Because of that fonts often look far better and "truer" to their original intentions, Macs/iOS have always favoured fidelity over legibility (when pushed) so it is perhaps not surprising they both look good.
- makmanalp 13y agoComparison: http://brick.im/preview/brick.html http://brick.im/preview/brick.html http://brick.im/preview/google.html http://brick.im/preview/google.html On firefox on osx, I see: - better kerning (space between L and o in "Lorem") - better definition in some letters (like the l in "elit") - cool stuff like ligatures (f and i in "overfilled") - and swashes (the Q in "Quisque"). Great work! I'm consistently annoyed but how much stuff google fonts are missing and how slow they are to update their fonts to the newest versions. Crimson Text comes to mind.
- alfredxing 13y agoThanks! Unrelated note: I locked myself out of HN because I had noprocrast turned on...
- keeperofdakeys 13y agoOn firefox on linux, I see the opposite. The j's and t's in the title are too low, and there isn't enough space between the f and i. http://imgur.com/a/5FTc8 http://imgur.com/a/5FTc8 (top is brick, sorry for the misalignment).
- alfredxing 13y agoThe "low" seems to be a Firefox thing; the f and i are supposed to be like that; it's a ligature (http://en.wikipedia.org/wiki/Typographic_ligature http://en.wikipedia.org/wiki/Typographic_ligature)!
- ams6110 13y agoI don't see any difference whatsoever.
- chengsun 13y agoYou'll need to allow brick.im if you have NoScript, because NoScript blocks web fonts.
- esrauch 13y ago
- alfredxing 13y agoI want to give a big thank-you to the fine folks at Fastly (http://www.fastly.com http://www.fastly.com) who generously agreed to host Brick on their great CDN network. They're big fans of open source!
- kevinbowman 13y agoI think that should be www.fastly.com ?
- alfredxing 13y agoYep. I'm still locked out with noprocrast so while I can add comments, I can't edit. 5 more minutes...
- crazygringo 13y agoI dunno. On OSX in Chrome, at least, they look absoutely identical except for the 'fi' ligature, and the "E" in "Etiam" is kerned one pixel tighter, and there are maybe 3-4 other spots where there is 1px difference of kerning. I've got a sharp eye, but at 300k for Brick, vs 92k for Google Fonts, I've got to go with Google Fonts here, especially when I'll usually have a given Google Font cached anyways, so it's often 0. But I'm glad to be given the option, regardless, and the opportunity to compare. And as for character sets, Google Fonts lets you pick the character sets you want, too. Does Brick provide any characters which Google doesn't allow you to add?
- alfredxing 13y agoOSX seems to do a good job at rendering fonts. EB Garamond, at 300KB, is the largest font in the catalogue right now, since its character set is huge (the other fonts are around 80-100KB). And while Google does let you choose character sets, not all special glyphs are included (for example, ornaments). But I agree with you: choice is everything, and it's always better to have an alternative.
- bjxrn 13y agoSpeaking of the cache and download sizes, when I reload the Google specimen the font files return a 304 (not modified) status while the Brick ones return a 200 code and have me download the files all over each time. So for me it's 300k each time the page loads (Brick) vs 92k for the first page load and ~0 each time after that (Google). Is this just me?
- mineo 13y agoExcept for the `fi` ligature and the thing with the Q, they look the same in Firefox on Linux as well.
- jlas 13y agoSo these are slightly better versions of fonts already on https://www.google.com/fonts https://www.google.com/fonts ? At first glance I thought you were offering new ones.
- alfredxing 13y agoI chose 10 of my favourite open source fonts; some are on Google Fonts, others (like Latin Modern) are not.
- avodonosov 13y agoGoogle fonts look better to me (Chrome, Windows)
- richardwhiuk 13y agoAgree - especially the uppercase K and the lower case t. (Switching between between the two tabs in Chrome on Windows 7).
- deleted 13y ago[deleted]
- deleted 13y ago[deleted]
- deleted 13y ago[deleted]
- ezequiel-garzon 13y agoIf I understand correctly, Google Fonts may be used in commercial websites. Does the license vary between different fonts in this case?
- alfredxing 13y agoThe fonts that are also in Google Fonts should have the same license; for the ones that are not, consult the license file in each font's directory, but all of them should be usable commercially.
- devindotcom 13y agoWhat the heck is with the bottoms of the lowercase a, w, and t? Is it really supposed to dip below the line like that? And is the fi really supposed to join up in this font, or are they just overlapping and it's a happy accident that it looks like a ligature? Overall it looks quite a bit heavier. I can see that working sometimes but not always.
- alfredxing 13y agoIs this on Firefox? Seems to be an issue. I'm pretty sure the fi is supposed to be joined; if you highlight it with your mouse, it highlights as one character (though on copy-and-paste it's two, as expected). OpenType fonts usually look a bit heavier, but I don't think it's a big issue.
- hornbaker 13y agoAlfred, love the project and effort. Everything looks great on my Mac. On a current Windows 7 machine, Brick is much better than Google web font using Chrome, but both FF and IE v11 would be a show-stoppers for me, with random baseline shifts in the preview header making it look a little like a ransom note font. Is there any browser compatibility lost by offering up only the WOFF format?
- alfredxing 13y agoThanks! Yes, IE <9 doesn't support WOFF (only EOT). For a compatibility table, see http://caniuse.com/woff http://caniuse.com/woff
- noir_lord 13y agoSmall but significant win for Brick on Chrome (32)/Linux for me. Ligatures (nice), better weighting and nicer tracking all around. Very nice.
- bigbento 13y agoYou can request all subsets to include a font's ligatures with Google fonts. See: https://developers.google.com/fonts/docs/getting_started#Subsets https://developers.google.com/fonts/docs/getting_started#Sub... So if you add a `&subset=all` to the example page requesting from Google Fonts, they'll end up looking pretty much the same (though I think some things are missing in the example, like the swashes on the Qs). I discovered this in reading the Lobster font's documentation.
- krick 13y agoCool. But how does that stuff work? Are there any "typefonts for dummies" materials?
- deleted 13y ago[deleted]
- alfredxing 13y agoA reference for custom fonts via @font-face: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
- Buge 13y agoOn Windows Firefox "Vestibulum" is kerned the same between the fonts. Brick is a bit heavier and they both user subpixel rendering. On Chrome, Brick kerns "Vestibulum" better. Brick is the same weight as Google. But Brick does not use subpixel rendering while Google does. On both browsers there was no difference in the kerning of "Lorem".
- jbeja 13y agoThey look identical in chrome on Linux, the "fi" looks better with google fonts but the brick version make the fonts look a tiny bit more plump and darker.
- err4nt 13y agoI like what you're doing, anything to improve typography on the web makes the whole experience better no matter what the design. Is there any way I can use JavaScript to pick swatches or set options like the type panel in illustrator?
- alfredxing 13y agoThe features available in the OpenType panel should also be available through CSS's font-feature-settings property: https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings https://developer.mozilla.org/en-US/docs/Web/CSS/font-featur...
- bdcravens 13y agoName reminds me of Designmodo's "framework", The Bricks: http://designmodo.com/the-bricks-addons/ http://designmodo.com/the-bricks-addons/
- kisstheblade 13y agoGoogle fonts much better here (windows, firefox). Clearer, sharper, not so "bold" and much aliasing. Yes the ligatures are better with brick.
- lnanek2 13y agoI think I dislike the Brick version just for that ugly Q thing that takes up half a word, but it seems less bold and clear as well on Chrome on a Mac here. I often hear the Mac OS causes this sort of thing anyway, though, where "improved" fonts don't look much better in other web projects as well.
- alfredxing 13y agoYou can disable swashes with a line of CSS: `font-feature-settings: "swsh" off;` Of course you'll need to add vendor prefixes.
- SimeVidas 13y agoOnly woff means no support for IE8 and the Android browser (<4.4). I checked on my Android 4.1.2 stock browser, the fallback is regular sans-serif. I guess, this type of progressive enhancement is acceptable. That being said, this information should be explicitly presented (even highlighted) on the site, IMO.
- alfredxing 13y agoI'll put that in the GitHub usage wiki page.
- cfjedimaster 13y agoI thought you meant this first - http://mozilla.github.io/brick http://mozilla.github.io/brick.
- cheshire137 13y agoThe kerning between 'V' and 'e' in 'Vestibulum' is very obvious: http://brick.im/preview/brick.html http://brick.im/preview/brick.html versus http://brick.im/preview/google.html http://brick.im/preview/google.html
- sogen 13y agoCongrats, font rendering looks Awesome on Chrome (win7), miles ahead of Google Fonts (which honestly, sucks on Chrome, and made me lose an entire day searching for why webfont rendering looks so so bad on Chrome). Again, thanks a lot!