Hinting, Helvetica, Nimbus Sans and CSS

Orange's picture

Firstly, let me preface the post by saying that I am a complete newbie at everything pertaining to fonts, type, css or design, so please, be gentle.

The story thus far is as follows:

I'm designing a web page for a few friends (and myself), so that we have something (anything) online until our organisation has the funding to get a better page up and running. Luckily, I'm not doing the coding, a friend of mine is.

As I rushed into things, I skimmed the legality of using Adobe Helvetica LT Bold embedded in the code. As far as I could see, Adobe hadn't given a real answer in their forums, but the users were advocating that it was borderline, but legal; hence I thought I'd be in the clear. After designing the mock-up, I read some more, and it seems their license does not include web embedding. Tough luck, as I'm forced to get another similar font, which is where the Nimbus Sans comes into play. As I understand it, they allow usage on web pages (a confirmation from any of you would be great).

Now, my friend has already started to translate the design into code, but after a short conversation on why everything looks like absolute rubbish (where I suggest it's because the text uses hinting), he says that hinting is done per OS, and that he doesn't know of any way to fix this in the code.

Now, when I say "rubbish", I mean the letters are all over the place (overlapping each other), and they seem to have lost any semblance of AA. Blind persons and people who are completely deranged might say that they look "sharper". I would very much like to hit these individuals over the head with the largest fish I could possibly wield as a weapon.

Before I shell out the €60 on the needed Nimbus Sans fonts, can any of you tell me if (1) the Nimbus Sans Bold and Nimbus Sans Bold Italic are comparable to Adobe Helvetica LT Bold and Adobe Helvetica LT Bold Oblique to the point that I won't have to do over the whole design because of size/design differences; (2) if hinting is indeed the issue; and (3) if hinting (and maybe even other things like kerning) can be forced off with things like @font-face, making the font actually readable and looking like it has AA (in browsers like Opera/FF/Chrome/Safari — I couldn't care less about IE)?

Basically, can I get the fonts from URW++ and make the text in my web page look like the original design, or have I completely overestimated the status of web design and fonts, and need to wait another few decades before I can base a web site on anything other than Times New Roman and Arial?

Frank ADEBIAYE's picture

Nimbus Sans is part of the 35 URW core fonts under GPL, so I guess you can perform some tests by yourself for free :
http://www.ctan.org/tex-archive/help/Catalogue/entries/urw-base35.html

Bert Vanderveen's picture

Overlapping type in a browser is often an indication of corrupted font caches. Clear these and have another look — things may not be as bad…

Something that may be of use: Arial is almost omnipresent on computers, has the same metrics as Helvetica (eg widths of glyphs etc.), and is license-free if I am not mistaken.

jasonc's picture

Another possible contender:
Steve Matteson's Arimo is metrically compatible with Arial/Helvetica, and is available from Google's webfonts.
http://www.google.com/webfonts/family?family=Arimo&subset=latin

Jason C

Orange's picture

I appreciate the suggestion, but I've already tried Arimo, and quite frankly, it didn't look much like Helvetica. Using Arial or anything that might bear a slight semblance to Helvetica will not work either, as the whole design is based off both the shapes and sizes of Helvetica.

Thanks a lot for the "free" Nimbus Sans link, though, I'm currently testing it right now, and I've run into another problem. Namely ClearType.

The font looks perfect in Linux, but in both Win7 and WinXP, ClearType botches up the AA something fierce at under 13 px size (at 13 and over it looks fine, but not perfect).

After I was able to remove hinting and kerning, it does look a lot better, though, on both Linux and Win7/WinXP. I haven't been able to test OSX, yet, but I trust the sub-pixel rendering solution Apple has chosen is superior to ClearType (as they don't historically haven't ignored how type looks).

As it is quite late here, I can't continue with my experiments, but I am currently looking at trying to re-enabling kerning to get rid of the AA bugs. I will update tomorrow with results.

Also, line spacing seems completely different from Adobe Helvetica LT Bold to Nimbus Sans Bold, but that might be related to formats (used OpenType for the former and PFB for the latter). The fonts place themselves differently in text boxes, and there is differences in values between the lines that I can't seem to match. This won't be a huge issue, though; it just annoys me.

Jens Kutilek's picture

You're not using PFB files as web fonts, are you? (I'm not even sure if that's possible at all)

Font format and line spacing are related. The vertical metrics are defined differently in Type1 fonts (PFB) and OpenType fonts.

I would try to use the OpenType/TTF versions of Nimbus Sans, which I believe is available in the file urwfonts-1.41.tar.bz2 from this page: http://www.artifex.com/downloads/

Additionally the vertical metrics in web fonts need to be set in a certain way to avoid line-spacing differences between browsers. Here's a discussion related to that: http://www.typophile.com/node/78279

Frode Bo Helland's picture

http://webfonts.fonts.com/en-US/Project/ChooseFonts#keyword%3DHelvetica%...

You can try the fonts in-browser here. Make sure to check Win XP with standard rendering before you make up your mind. It's the lowest common denominator, and still very widespread.

Frode Bo Helland's picture

Your first post is very confusing. I think you might've misunderstood what hinting is and can do. Hinting Give "hints" to the rendering engine (in the browser or in the OS, depending on setup) about how the curves should be translated to pixels at low resolution. In the standard rendering mode which is default in Win XP the engine make use of different shades of grey. At small sizes, many font files override this use of greys to produce sharper text with b/w rendering only. These settings are default in Fontlab. If the fonts aren't hinted, they'll most probably look like shit under these conditions. Only very few fonts hold up very well: the web safe fonts. It takes months, maybe even years, to produce hinting like that of Verdana and Georgia.

I'm far from an exert on these matters, so please correct me if I'm wrong.

Orange's picture

You're not using PFB files as web fonts, are you? (I'm not even sure if that's possible at all)

No, they're the source. They're converted to TrueType.

Font format and line spacing are related. The vertical metrics are defined differently in Type1 fonts (PFB) and OpenType fonts. I would try to use the OpenType/TTF versions of Nimbus Sans, which I believe is available in the file urwfonts-1.41.tar.bz2 from this page: http://www.artifex.com/downloads/

Right, that's what I figured. I'm not sure I understand where you are going with your suggestion, though. On the actual web page, I'm forced to use TrueType. Going back to the mock-up now would be rather backwards. Right now I'm forced to go where the code lets me. I just mentioned this because I'm curious (so, thanks for the information!).

Additionally the vertical metrics in web fonts need to be set in a certain way to avoid line-spacing differences between browsers. Here's a discussion related to that: http://www.typophile.com/node/78279

I know, that's all sorted (they're set the same). I have no issues with that.

You can try the fonts in-browser here. Make sure to check Win XP with standard rendering before you make up your mind. It's the lowest common denominator, and still very widespread.

I have code up and running. I'm not sure how this will help (unless there are other Helvetica clones there that look as good as Nimbus Sans and renders differently without hinting at 12 px size).

Your first post is very confusing. I think you might've misunderstood what hinting is and can do.

I'm pretty confident I haven't, and it would help if you pointed out what was confusing about the post. It was made before I read up on things, by the way, I was just assuming things. There is no need for explanation of the technicalities right now, really.

The situation right now is that I've used PFB files, converted them to TrueType for web use. I've removed hinting and kerning information via the converter (which probably weren't there in the first place, as PFB doesn't contain this information, as far as I know), and I've basically settled for using a size 13 version of the font, because that's the only size that looks OK with the Windows sub-pixel rendering engine (ClearType). The only real issue is that some of the capital letters are missing a few pixels. I think I can live with that.

If only MS could make their Windows sub-pixel rendering work like in every other OS, this wouldn't have been a problem at all, and we could have had pretty much perfect rendering of all fonts. I haven't seen any case of hinting that made any font look better. As far as I'm concerned, hinting is completely useless for web (unless it's in combination with the so-called web safe fonts).

Frode Bo Helland's picture

"Hinting is completely useless for web"

This statement only adds to the confusion. Unless you are some kind of magnificent offspring of db & his female equivalent, that is.

Jens Kutilek's picture

I was suggesting that you could try using the available TrueType versions for your web page instead of your own converted versions, because the available TrueTypes are probably hinted and thus will look better on Windows in any size.

Orange's picture

This thread is essentially about wanting to remove hinting, and you want me to try hinting?

Are you saying the TrueType versions of Nimbus has better hinting than Helvetica?

I'm not looking to make the type more readable, I want it to look like the original type, hence this thread.

Frode Bo Helland's picture

On screen at small sizes type can not look exactly like it's printed counterpart. The resolution is nowhere near even the worst print conditions. Hence hinting. At larger sizes, hinting probably won't make any difference anyway. If your 16px type looks swell and fine hintless, what happens when I come marching with my enlarged text settings, or pinch zoom my touchscreen?

Frode Bo Helland's picture

Perhaps if you could provide some pictures we could give you some more relevant comments.

Orange's picture

On screen at small sizes type can not look exactly like it's printed counterpart. The resolution is nowhere near even the worst print conditions. Hence hinting.

No, hence sub-pixel rendering to make up for the lost resolution. Hinting is about added readability. Sure, the problem is basically the same, but the difference is that hinting is about adding or subtracting form (via controlling interpolated areas), sub-pixel rendering is about interpolating all data. Hinting destroys the type entirely. Sub-pixel rendering (done right) is basically proper AA.

Please read my posts. I am not after readability, the text is clear as day. I want the type on the site to be closer to the original type. Hinting does not do that, it decays it further, for crying out loud, with hinting it's not even remotely readable.

If your 16px type looks swell and fine hintless, what happens when I come marching with my enlarged text settings, or pinch zoom my touchscreen?

It will use a larger type and look even better?

Also, iOS and other devices typically use other formats, haven't looked into that yet, but I'm generally not too worried about Apple devices. Android might be another story. Then again, if we are to include hand held devices, the site would be better off with an own simple version. After all, it's just a site for publishing essays.

I will check out the hinting data of the Nimbus Sans, though, Jens, but I can't imagine how it will ever make it better. Like I said, I all but solved it with moving to 13 px; as in, it's very nearly a perfect replication of how it looks in the mock-up (sans a few pixels). If the hinting data manages to fix those pixels, and at the same time not **** up anything else, I'll eat my boots.

Frode Bo Helland's picture

John Fredrik, jeg innså akkurat at du er en Oslogutt. Jeg vet ærlig talt ikke om jeg forstår deg rett. Subpixelrendering utelukker definitivt ikke behovet for hinting, men jeg er helt på det rene med at for "hard" hinting kan bryte opp formene. Problemet er dessverre det at så mye som opptil en tredjedel av alle nettbrukere fortsatt ser XPs Standard GDI, og uten hinting blir resultatet håpløst. Det finnes heldigvis veier rundt problemet. Om du forsøker å ligge så tett opp mot mock-up'en din som mulig og få likt i resultat alle nettlesere er eneste løsning å bruke bilder.

Orange's picture

Ingen blir sure om vi snakker norsk?

ClearType er det samme på XP, Vista og Win7, og det er i ClearType problemet ligger. Hadde det ikke vært for ClearType hadde alt sett perfekt ut uten hinting. Saken er uansett den at siden ser nesten perfekt ut slik som det ligger an nå, på XP/Vista/Win7, uten hinting, det mangler bare noen pixler her og der. Mangel på hinting er absolutt ikke «håpløst», det er nettopp hinting i seg selv som er håpløst. Hadde dette vært en tynn type som hadde tynnere kropp enn et bildepunkt, så hadde saken vært en annen (om vedkommende som hadde laget hintingdataene hadde kunnet jobben sin), men det er snakk om tykke typer; det eneste som skjer er at formene blir ødelagt og teksten blir ulesbar.

Jeg kan ta noen grabs neste gang vi jobber på siden (i helga, antageligvis), så blir det lettere å forstå hvorfor hinting er helt utelukket i dette tilfellet (hvis ikke TrueType-versjonen har ekstremt god data, som nevnt).

Angående on-the-fly konvertering til bilder, så har jeg tenkt tanken, men jeg er usikker på om kompisen min har noen erfaring med det, hvor mye ekstraarbeid det innebærer, og om det kan implementeres lett i back-end. Jeg prøver å holde prosjektet så lite som mulig foreløpig, siden han gjør det pro bono.

Har du noen erfaring med slik kode?

Richard Fink's picture

orange,

I just took a close look at Nimbus Sans and I'm completely puzzled by your complaints.
(And BTW - I have no idea what 'AA' means in this context.)

I work quite a bit with fonts that need to be adapted for web use. And to me, Nimbus isn't challenging in any way. A piece of cake.

A screen shot or shots of the problems you're encountering would be a big help. I don't see any reason why this font would be so objectionable. Sounds like something went wrong somewhere along the line.

Rob O. Font's picture

If you are truing to get Hevetica to work on the web, why not use Helvetica?

Jens Kutilek's picture

This thread is essentially about wanting to remove hinting, and you want me to try hinting?

Yes, because I don't think the existence of hinting is the problem, rather the problem is the existence of bad hinting.

Are you saying the TrueType versions of Nimbus has better hinting than Helvetica?

Adobe Helvetica LT is not a TrueType font, so the comparison makes no sense.

I'm not looking to make the type more readable, I want it to look like the original type, hence this thread.

You can't get readable and original-looking TrueTypes on Windows/ClearType without hinting.

Frode Bo Helland's picture

Jeg har brukt et enkelt PHP-script til slikt tidligere. Går fort å sette opp. Men, la meg se om jeg forstår? Standard GDI er ok, Quartz er ok, Freetype er ok, Directwrite er ok, men Cleartype er nesten ok? Alle disse vil produsere forskjellige resultater, og med unntak av Quartz vil alle til en viss grad gjøre bruk av hinte-informasjonen og smoothing-innstillinger i fonten. Et annet problem er at det er umulig å vite hvilken størrelse sluttbrukeren ser, selv om du spesifiserer skriften i piksler. God hinting gjør ting konsekvent i alle størrelser. Uten hinting kan 16 px gjerne se perfekt ut, mens 17 px blir et kaos av forskjellige stammetykkelser og x-høyder. Du får tilgi meg om alt dette er håpløst åpenbart.

Skriften i din mockup er jo faktisk også en tolkning fra kurver til piksler (rendering) og følger på ingen måte de originale formene til Helvetica.

Syndicate content Syndicate content