Web text layering for real?

[hrant]

This topic was imported from the Typophile platform

A news item on Typophile* claims that "the latest introductions of web based typography allows for layering and transparency". This is really juicy if it is in fact robust and widespread. And it might be the nail in the coffin of Photofonts.

So my question is: For real reals?

hhp

[gargoyle]

Transparency and shadowing are widely supported through CSS. Layering can be achieved using pseudo elements and further javascript trickery, aided by libraries like lettering.js.

An example of what's currently possible (scroll down):
http://lostworldsfairs.com/eldorado/

Further reading: Typography And Text With CSS

[hrant]

Thanks for the reply.

So on that page, is the light brown supposed to be misaligned with the dark brown (leaving a white gap)?

Any other examples? Something like a properly deployed FF Primary? I'd like to know if this really is reliable.

hhp

[Si_Daniels]

"the latest introductions of web based typography allows for layering and transparency".

If "latest" means since 1997*, then this would be accurate. :-) However, cross platform/browser alignment/registration problems are an issue, but in this case I think the effect is by design.

* http://www.microsoft.com/typography/web/embedding/demos/5/about5.aspx

[hrant]

Maybe they mean HTML5?

hhp

[chrisburton]

No not HTML5. Those offset light brown numerals were created with lettering.js. So was this, http://trentwalton.com/2011/11/18/workspace. If you highlight the hanging letters, you will see they actually highlight. Not what you see when trying to highlight an image. So it's actual characters manipulated via javascript. You can also put background images in the shape of the letter.

We are also able to use ligatures and swashes with CSS.
http://elliotjaystocks.com/blog/the-fine-flourish-of-the-ligature
http://elliotjaystocks.com/blog/say-it-with-a-swash

[hrant]

Cool.

Now let's see layered type that's perfectly registered.

hhp

[abattis]

"You have to use you're HANDS? That's like a babies toy!"

http://manufacturaindependente.com/colorfont/

:-)

[chrisburton]

hrant

Now let's see layered type that's perfectly registered.

What do you mean by "perfectly registered"?

[hrant]

http://manufacturaindependente.com/colorfont/

Cool. So is it pretty robust across platforms/browsers? Is the top title supposed to look like this?

I have a feeling the gray layer with the half letters is supposed to be sitting higher (on top of the ~green layer). Ergo: Not even close to "perfectly registered" (AKA aligned).

BTW:

proprietary fonts always forbid redistributing modified versions.

That's misleading because you're not really redistributing the fonts, and some font houses -like Adobe- do allow you to modify their fonts.

Also, if you commission a font (the ultimate in "proprietary" 🙂 you can decide to do anything you want with it (like happened when I was commissioned to make Arasan back in the day).

One more thing: you can always make your own and distribute it up the wazoo! 🙂

hhp

[chrisburton]

hrant

Colorfont.js only works in modern browsers. I just tested IE7 and IE8 and they both failed. IE9 does work. And to answer your question. yes it is supposed to look like that.

Here is a gallery of sites using lettering.js - http://letteringjs.com

[gargoyle]

Now let's see layered type that's perfectly registered.

Here's what that earlier example looks like after adjusting the CSS positioning values (tested in Mac Firefox and Safari).

I would agree that the original offset effect was intentional, it's consistent with the overall motif.

[gargoyle]

yes it is supposed to look like that

The Colorfont header appears properly aligned in Mac Firefox and Safari. Windows Firefox and IE9 have the vertical misalignment issue seen in hrant's screenshot. Since only the slab-serif header font is misaligned in Windows (the DIN font looks fine), it's likely an issue with cross-platform vertical metrics in that particular "colorfont."

[oldnick]

Come on, people! Is it really THAT HARD to develop a fully HTML5/CSS3 compliant browser that will work CONSISTENTLY on all (two? three?) platforms? I used to think Firefox would do the trick, but the last three or four revisions have introduced more problems than they have solved (Seriously? You can't load a PDF in the browser window? Your stupid pop-up blocker causes PayPal to loop, necessitating browser reload). Will Google Chrome lead us out of the wilderness, or will it keep crashing?

Plus…

@hrant:

BTW:

proprietary fonts always forbid redistributing modified versions.

That's misleading because you're not really redistributing the fonts, and some font houses -like Adobe- do allow you to modify their fonts.

Also, if you commission a font (the ultimate in "proprietary" :-) you can decide to do anything you want with it (like happened when I was commissioned to make Arasan back in the day).

One more thing: you can always make your own and distribute it up the wazoo! :-)

Have you been reading the iLUVfonts prospectus? Why is it that so many commonsensical solutions get overlooked by the brain-dead lemmings in this forum?

And, FWIW: “out the wazoo” is the preferred form…

[hrant]

Colorfont.js only works in modern browsers.

1) So the latest (release) version of Firefox is not a "modern browser"?
2) What use is targeting a "modern browser" if 5 people are using it?

Justin, the registration in your adjusted version does look great (thanks). Could you put up some kind of test page (the more comprehensive the better) that could be checked on pretty-much-modern browsers?

I would agree that the original offset effect was intentional, it's consistent with the overall motif.

Agreed, but I would worry that that motif was chosen exactly because good registration is brittle over too great a proportion of browsing setups...

it's likely an issue with cross-platform vertical metrics in that particular "colorfont."

That would be good news - although a site that's trying to promote an idea should try to make sure all its parts work correctly often enough. Windows Firefox and IE aren't exactly legacy annoyances...

hhp

[chrisburton]

hrant
That is a modern browser. However, if people are not going to take the initiative to make sure their products work cross-browser and cross-platform, it won't be successful.

That would be good news - although a site that's trying to promote an idea should try to make sure all its parts work correctly often enough. Windows Firefox and IE aren't exactly legacy annoyances...

IE is the biggest problem developers have to deal with. IE 6 isn't as popular as it once was and now developers are pushing to rid IE 8. Chrome is now the most widely used browser surpassing IE.

[hrant]

Chrome is now the most widely used browser surpassing IE.

The thing is, it's not who's ahead, it's who's alive.

hhp

[ahyangyi]

@oldnick

No, you can't. As far as I know, browsers don't follow standards. Instead, standards follow the most popular browsers.

[abattis]

That's misleading because you're not really redistributing the fonts, and some font houses -like Adobe- do allow you to modify their fonts.

I firmly believe that @font-face really is redistributing fonts.

Also, if you commission a font (the ultimate in "proprietary" :-) you can decide to do anything you want with it (like happened when I was commissioned to make Arasan back in the day).

John Hudson pointed out to me years ago that there is a namespace slash around the word 'proprietary' in the software and typographic communities.

"Proprietary" in typography means 'bespoke'

"Proprietary" in software means 'not respecting the 4 software freedoms'

This can obviously be rather confusing, since if you can decide to do anything you want with it, its very much a libre font, that software and type freedom is about the users, and there is not requirement to make libre works public, although since @font-face makes readers into users, private libre type is unlikely.

[chrisburton]

hrant
And what do you mean by that?

[hrant]

I firmly believe that @font-face really is redistributing fonts.

I admit that stance is not without merit.

"Proprietary": terms can indeed have different meanings depending on context. But I don't think the term was used very rigorously in the passage I quoted. And:

private libre type is unlikely.

If you mean it's unlikely that an organization would pay for having a font made and then allow others to modify it, I agree. But I was referring to internal modification: if you're worried about not being able to modify a non-libre font to make it work for you, commission one so you can do with it what you like.

Christopher, what I mean is that much more important that what browser happens to be on top at the moment is the set of browsers that are in play (which thankfully changes much more slowly) because you can't ignore big chunks of users.

hhp

[dberlowgone]

So, I guess a no, unless you want leave the standards.

[hrant]

Well, Justin did fix the "24", and if he's right that the Colorfont* title being misaligned is the font's fault, it might still be workable.

* http://manufacturaindependente.com/colorfont/

We need a good test page.

hhp

[oldnick]

No, you can't. As far as I know, browsers don't follow standards. Instead, standards follow the most popular browsers.

Oops: somebody better tell W3C…

[hrant]

Dave, trying harder to explain myself:
The problem with the passage I quoted is that it jumps too conveniently* from "we can't use retail fonts" to "we should use free fonts". I mentioned some other avenues, and would offer the crux of it as: sometimes a better solution than not spending any money might actually be spending more money. :-)

* Perhaps even agenda-drivenly.

hhp