Rich Accessible Typography
There is a PHP + CSS image replacement technique you can use on your site to dynamically generate beautiful typographic headings that are also completely accessible. The best part is it is all server-side scripting so your viewers browser doesnt need to depend on having any special plugins to get it to work.
considerations:
- You need to have access to your web server so you can upload fonts etc
- It doesnt work when images are turned off in the browser
Now there is a new option: sIFR 2.0. sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of javascript, CSS, and Flash. See it in action on Wales in Style:
considerations:
- Requires Flash and Javascript to be installed in the browser to work
- If Flash isn’t installed (or obviously if javascript is turned off), the (X)HTML page displays as normal and nothing further occurs. If Flash is installed, javascript traverses through the source of your page measuring each element you’ve designated as something you’d like “sIFRed”.
sIFRed is a great option for those who need to create large paragrahps of text, or those who are struggling with the old CSS + PHP method to get their fonts looking nice and crisp.
olivia
Yeah I have the same problem. Im looking forward to the new version coming out soon which is supposed to fix a bunch of quirks.
abendigo
I just have to say that this is a bit weak, after a decent amount of testing… I often find words’ baseline-shifting, or letters getting cut off. A refresh typically undoes it but if someone comes to the site for the first time, well…
niqkita
sweet! I currently have a crush on the Lilith font, not sure how it’d look on the site, but it sure would be nice to have options for headings other than the current standards!
nic johnson
Looks like a really cool technique. I like that it degrades nicely without javascript. You could always generate the image serverside and avoid the need for flash altogether using something like the GD library.