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

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

"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

Maybe they mean HTML5?

hhp

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

Cool.

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

hhp

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

http://manufacturaindependente.com/colorfont/

:-)

hrant

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

What do you mean by "perfectly registered"?

http://manufacturaindependente.com/colorfont/

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

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

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

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.

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."

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…

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

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.

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

@oldnick

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

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.

hrant
And what do you mean by that?

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

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

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

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…

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

hrant
I apologize but I'm still not following. Who/what is ignoring users and what changes more slowly (please be specific)?

http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
http://en.wikipedia.org/wiki/Usage_share_of_operating_systems
It doesn't matter that Chrome is at #1, you still have to make sure your site works properly (or at least adequately) on Chrome, IE, Firefox and Safari (at least) on Windows7, Vista, XP, OSX, iOS and Android (at least).

Also, in a year it's much more likely that Chrome will not be on top than the possibility that there will be a new browser/OS to [not] worry about.

hhp

hrant
Not true. You only need to make sure your site works depending on your user base. 3% of users of my portfolio site use IE which allows me to completely disregard it. What I do is add a redirect to a page that asks the person to install the Chrome Frame or I can simply just say that the site doesn't support IE 6 thru IE 8. I even asked a W3C member if I needed to support up to IE 8 and she said no.

Edit: I do agree that your site should at least support the latest of all the major browsers (IE 9, Chrome, Firefox, iOS).

You only need to make sure your site works depending on your user base.

I certainly agree - but that's simply a refinement of the stance I'm advocating. For example if you're making a site for a Bentley dealership you shouldn't worry about 800×600 displays; but if it's a site about the Aakash, you do.

On the other hand: maybe your portfolio site isn't getting IE people because you're not supporting that browser properly? And/or you might be doing something [else] wrong if you're only getting ~10% of the people using IE.

You can dislike something (like the historic intransigence of IE or the neighbor's teenager) but if you pretend it doesn't matter you end up the bigger loser.

I even asked a W3C member if I needed to support up to IE 8 and she said no.

Please ask me if you should be making Armenian fonts.

hhp

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.

That's not what I meant, and I note that there are libre fonts publicly available from Google, Adobe, soon Mozilla, and already a few nameless corporations with identity type in GWF; http://www.google.com/webfonts/specimen/Scada just went up this week in fact :)

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.

But 'internal' fonts almost inevitably become external because @font-face, as John Hudson is known to opine :-)

And that is almost what I meant: that if an organisation modifies a libre font intending for it to be 'internal' then they will likely soon find themselves distributing it externally to anyone who visits their website -- thus paying for having a font developed and then allowing others to modify it. Obviously if its original work, not derived from an existing libre font's outlines, then they can choose to make it libre or non libre for other users, while due to title ownership it remains libre for them.

The problem with the passage I quoted is that it jumps too conveniently (Perhaps even agenda drivenly.)

Absolutely agenda drivenly ;-)

from "we can't use retail fonts" to "we should use [libre] fonts"

Seems logical to me.

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. :-)

Spending more money results in libre fonts! :)

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

Alas, I chatted to Tab Atkins about making the kind of overlays that this thread is about part of CSS3 about 2 years ago, and then never wrote a concrete proposal as he suggested, and I guess that now its too late to add something like that.

hrant
It seems you're talking about resolution when I'm talking about the standards IE doesn't support such as CSS3 or HTML5. With respect to resolution, this is why we have media queries.

Actually my site at the moment is only 1 page which shows my logo heading and email. It supports IE pretty well. I am in the development stage to release my new one that will not support IE 8 or less based on my user analytics. I'm also a former web designer.

It's about the browser not supporting the latest technology and in return making developers waste time just to get something to work correctly with hacks. It's about supporting innovation. And tell that to Microsoft when they themselves recently have encouraged others to use a different browser because of major vulnerabilities in theirs (IE 5 I think, up to IE 9).

Dave, I don't think we're disagreeing on too many points, but for some reason I am failing to explain my original complaint... Let me try this:

You want to do layered type. You can't use virtually any retail font because you're not allowed to redistribute* a modified font (but more below). So you figure to use a libre font. Sure. But there's another way: pay somebody to make a font for you which you can do anything you want with. Why would you spend money when you technically don't have to? The usual reasons: design quality (there's still a difference there between free and not) and exclusivity.

* For the sake of argument working with the "@font-face implies distribution" stance.

BTW if @font-face does imply redistribution, then you're breaking the EULA even if you don't modify it, right? What I mean is: if a font house doesn't mind @font-face they won't mind @font-face used for a modified version*. So using an imaginary impediment as an endorsement for libre fonts isn't sincere.

* Assuming a house like Adobe that allows modification.

Libre fonts do have a role to play, especially concerning this layering business. But "proprietary fonts always forbid redistributing modified versions" remains misleading, exaggerating the centrality of libre fonts. There is another way.

hhp

you're talking about resolution

I was just using an obvious example from web design to support your point about designing for an audience.

Question: isn't it important to try to figure out why ~90% of IE users are not visiting your site?

It's about supporting innovation.

That's certainly honorable. I hope you find [enough] clients willing to sacrifice a chunk of potential users for that cause.

hhp

hrant

Isn't it important to try to figure out why ~90% of IE users are not visiting your site?

(97% to be exact) - Why would I waste time to do that when my current website works fine in IE? Also, how would you propose actually going about that? It's not important.

I hope you find [enough] clients who agree.

And I'd love for you to read what a client would say if you asked them why they wanted to support IE 6 or IE 7. I bet their answer would be something along the lines of "IE 6 and 7 is still somewhat popular", which is false. Or, "I want it to work on everything". But as Lea Verou has said, if you charged the client to do the work for their site to support those versions, I bet most wouldn't want to. Unless the clients' analytics show they have a sufficient IE user base, there is no reason to support anything but the latest IE version.

Please read this.
http://www.smashingmagazine.com/2012/07/10/dear-web-user-please-upgrade-...

Since this is not a web design forum, I should stop.

hhp

There's an obvious sense in which @font-face involves a kind of 'redistribution' in that the font file, in whatever format, is served from one place and ends up being cached some place else. But I don't think this broad use of 'redistribution' is very helpful to discussion, since it misses the point about which someone who wishes to restrict redistribution is most likely to be concerned, i.e. the use to which the font is put. Font makers and vendors are right to be concerned about @font-face, both in terms of web served fonts and as part of epub packages, in that the font files are out-and-about and are exposed to various kinds of unlicensed use. But the purpose for which they are served or packaged is not to redistribute them for use -- creating new documents, setting new text --, whether licensed or unlicensed, but to make them available to be read. Distribution of the font file is a by product of that intention.

If someone sends me an email asking is he can redistribute one of my fonts, I know what kind of question that is and while details may vary I know, generally speaking, what it implies: making the font available to some third party for use. If someone is wondering if he is able to serve the font as a web font, that is what he asks. He doesn't ask if he can redistribute the font, because there's a common sense use in which that term doesn't include web font serving any more than it included PDF embedding. We can and should have sensible discussions in such terms, mindful, yes, of both the legal specificity of license agreements and the technical obviousness of a file being copied to some remote location via @font-face, but not ignoring common sense understandings.

I apologize if I'm off topic (perhaps I can move this comment elsewhere) but why do we even need web font distributors such as Typekit? From what I've seen they all seem to use base64 encoding with @font-face.

It's not a terribly semantic nor accessible technique, though.

For instance, to make a headline:

"This is a Headline!"

An '8 layered font' using this technique would actually have this for markup:

This is a Headline!
This is a Headline!
This is a Headline!
This is a Headline!
This is a Headline!
This is a Headline!
This is a Headline!
This is a Headline!

Kind of annoying especially if you are using something like a screen reader.

Granted, at least for this type of typeface one would only be using it for display text, and there's certainly arguments for using it at times. But it's definitely a 'hacky' solution (and is by no means a 'new' solution, either).

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

It's both. Always has been, and probably always will be. Standards are made, browsers adopt them to varying degrees. Browsers make custom features. The Standards group adopts them to varying degrees.

Chris: Until browser support for WOFF and Opentype is commonplace, web font distributors like Typekit, Webtype, WebINK etc. simplify something very advanced (a basic four font family requires at least 16 font files + heaps of code). Then, there is the layer of security you mention. Besides, subscription pricing makes it easier to buy (lease) than it is to steal.

"It's both."

I thought there's three: Browsers don't follow standards. Standards follow browsers. Browsers follow browsers.

"Until browser support for WOFF and Opentype is commonplace, ... (a basic four font family requires at least 16 font files + heaps of code)"

...tip of the fontberg.

frode frank
What sort of code are we talking about? Isn't it just @font-face or am I missing something?

the "24" looks better with the white hangout. Sometimes a person just wants to do stuff that is outside the box ;-)

Well, Chris— What is cool behavior for nonconformist Greeks is frowned upon by cat owners…

LOL!!!

@font-face isn’t "just". Adding a background image is one line of CSS. (And herein lies a hopeful request for future versions of WOFF: wrapping multiple fonts in one file. Not sure if it makes sense though.)

frode frank
Well sure it's not as simple as applying a background-image but it's certainly not as difficult as applying a border-image. But then again, I guess it depends on the knowledge one has with CSS.

Syntax:
@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}

Don't forget "there is the layer of security you mention"...

hhp

I think what I'm trying to get at is, can't we base64 encode ourselves? Do we really need a web font distributor to do this for us?

Let's say that Typekit allows this. They could have a form where we choose the fonts we need and after purchase it lets us download them. The form then asks us to paste in the url where the fonts are hosted (on our own server obviously) then generates the css and base64 encodes it for us to paste in our CSS file.

Am I the only one who dislikes the whole "leasing" idea?

Sorry Chris. I don’t mean that I don’t understand how to do it, just that there are so many variables (multiply that code by x members of a family, what happens if there are more than four members to a family? which browsers support which files? which browsers will download which files? what happens if you have a font file installed locally with the same name? which browsers can handle postscript based web fonts? which files am I allowed to upload to a server? how do I stop others from downloading the files? +++), that implementing web fonts is a hurdle for many.

frode frank
Yeah, you're right. Would be nice if we had one font format.