Live data from Hacker News

Brick. Webfonts that look good

github.com

51–60 of 73 posts

Re: Brick. Webfonts that look good

#52
post #50

Comparison: http://brick.im/preview/brick.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 upda…

Out of curiosity, why are ligatures considered good? I commonly notice them in print because it catches my eye and hinders my scanning. Is it just because I am adjusted to digital media that commonly lacks it and the surprise factor is outweighing some other benefit?

In some cases the results of not having ligatures can look terribly bad. For example for fonts where the 'f' ends with what looks like a dot: if you put that kind of 'f' with an 'i' after it, the dot of the 'i' and the end of the preceding 'f' make for a very, very ugly artefact which looks like two dots connected to each others. Not only I find this ugly but also actually distracting. It depends on the font used, the kerning, etc.

This kind of uglyness due to the lack of ligature if not as noticeable on digital media, where we typically don't have the 1200+ dpi that print does and where, hence, you tend not to have these kind of 'f' (for example) because fonts have been hinted (or specifically chosen / created) not too have these issues.

I hope my explanation makes sense: I'm not a native english speaker but I did write and typeset myself about a dozen books (most with Quark XPress, one with LaTeX)... And they were all using ligatures IIRC (I should check for my LaTeX one: it's been a long time).

Re: Brick. Webfonts that look good

#53
I 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?

Re: Brick. Webfonts that look good

#55
post #50

Comparison: http://brick.im/preview/brick.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 upda…

Out of curiosity, why are ligatures considered good? I commonly notice them in print because it catches my eye and hinders my scanning. Is it just because I am adjusted to digital media that commonly lacks it and the surprise factor is outweighing some other benefit?

I agree, "fi" looks terrible with that ligature. Much harder to read.

Re: Brick. Webfonts that look good

#56
post #50

Comparison: http://brick.im/preview/brick.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 upda…

Out of curiosity, why are ligatures considered good? I commonly notice them in print because it catches my eye and hinders my scanning. Is it just because I am adjusted to digital media that commonly lacks it and the surprise factor is outweighing some other benefit?

Exactly. Ligatures may be neat and pretty for titles and covers, they are certainly not convenient for paragraph text.

Re: Brick. Webfonts that look good

#58

I 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…

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

Re: Brick. Webfonts that look good

#59

I 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…

Except for the `fi` ligature and the thing with the Q, they look the same in Firefox on Linux as well.

Re: Brick. Webfonts that look good

#60
post #50

Comparison: http://brick.im/preview/brick.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 upda…

Out of curiosity, why are ligatures considered good? I commonly notice them in print because it catches my eye and hinders my scanning. Is it just because I am adjusted to digital media that commonly lacks it and the surprise factor is outweighing some other benefit?

Out of curiosity, why are ligatures considered good?

Ligatures are just single glyphs that represent multiple letters (or their equivalents). So for example the classic ‘fi’ pair is often turned into a ligature as I’ll discuss below, but the ampersand symbol ‘&’ is also a ligature (it originally came from the Latin word et, meaning “and”, although in many fonts today a much more stylised form is used).

In languages like English, ligatures are basically useful for two things: decoration (usually in slightly quirky fonts going for a certain stylised look, rather than everyday typesetting) and tidying up clashes between adjacent letters.

The ‘fi’ pair is an example of the second type. In classical typefaces designed for printing, the ‘f’ would often have quite a long overhang at the top. That worked fine when the following letter was something low like an ‘a’ or ‘o’; you’d just close up the spacing a little, perhaps allowing the top of the ‘f’ to reach over the next letter a little, and everything looked lovely.

Unfortunately, if the following letter was something tall, like an ‘l’ or a dotted letter such as ‘i’ or ‘j’, this left the typesetter an unwelcome choice between moving the letters further apart (creating an awkward space in the lower half) or keeping them close together (creating a dense area or even touching/overlapping symbols in the upper half). Either way, the result tended to be distracting when set at typical body text sizes. So, ligatures like a combined ‘fi’ were adopted as a solution, in that particular case following the spacing and general shape of the original letters but slightly adjusting the top area to avoid the clash.

Unfortunately again, at some point the idea that using such ligatures was automatically a good idea caught on, and instead of serving a useful purpose (fixing clashes in fonts where the design of the font created a clash) they became something supposedly desirable for their own sake, one of those examples of typographic snobbery that just won’t die.

That means today we see them not only where they are genuinely useful but also where they’ve been forced artificially. For example, you’ll get a sans serif screen font where the regular ‘f’ has a short overhang and would quite happily sit next to a normal ‘i’ or ‘l’ with no problems, and then someone comes along and creates a distorted ‘fi’ ligature for it where the ‘f’ is extended and then clumsily wrapped into the dot over the ‘i’, even though there’s no reason to do that and actually it distorts the shaping and reads worse than the original.

The other common mistake is to try and use techniques that work at body text sizes (where the useful kind of ‘fi’ ligature is a minor adjustment that should go unnoticed by a typical reader) and apply them at larger sizes for things like headings or pull quotes (where the adjustment becomes a big, obvious distortion when scaled up). In most cases, text set at large sizes would have been just fine with the original ‘f’ and ‘i’ glyphs and perhaps a touch of extra spacing, but sadly modern digital typography often lacks the hand-finished refinement that the old masters used to produce (at least in my rose-tinted view of history), because it’s just too much extra work to fine-tune everything.

And thus we get things like the example here, where perhaps the ligature has been applied at a size a little larger than it really suits, and so you get what looks like an ‘h’ in the middle of the word and to some readers it then becomes the very distraction it was supposed to avoid.

Post reply on HN