skip to content

CSS Typography – Text replacement techniques

Due the limited number of fonts available for web we need to make use of other techniques to make our design look the way we want.

Most of the time we simply cut the image from the psd file and place it in the html/css. But this has impact over the accessibility of the site and the compatibility with other browsers (for example text browsers or browsers with  images/CSS disabled)

Of course there are workarounds and fixes for this in orderto improve usability, but what do we do in case our page is dynamic?

In this case we can use text replacement techniques -  some of them presented below:

SIFR2

capture-1

SIFR2 is  updated with SIFR3  but deserves to be mentioned as it became SIFR3.  Read below.

SIFR3

capture-2

No need  to tell too much – it uses flash to replace the text in a webpage  with the font specified by the designer. The site presents all the required steps to setup the script.  For me as a non-flash user seems very complicated  and I think this is a huge drawback for this script – it also might discourage other people from using it.  The advantage? – Flash is supported by 99% of  today’s browsers.

There is a little online helper that is very handy in creating the needed files: sIFR Generator and a library for already generated fonts: sifrVault

Cufón

capture-3

Cufon takes a different approach using Javascript to apply some proprietary generated font files. The renderer creates a SVG canvas(non IE browsers) or a VML representation (IE browsers) altough  SVG seems to be slow in some browsers.

p+c dtr

capture-4

“P+C DTR allows you to take a vanilla standards-based (X)HTML web page and dynamically create images to replace and enhance page headings using only PHP + CSS.”

Some further stuff about it:

P+C DTR is based on Dynamic Text Replacement script  but allows you to integrate it in your site without any modification –  well… except the setup of the script.

An improvement of this script is done by João Makray , allowing you to have word-wraps.

Flir

capture-5

“Facelift Image Replacement (or FLIR, pronounced fleer) is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via Javascript and visible to all modern browsers. Any element with text can be replaced: from headers (<h1><h2>, etc.) to <span> elements and everything in between!” . No more comments –  it’s self explanatory.

typeface.js

capture-6

An alternative for cufon.

Fontjazz

capture-8

Fontjazz takes a different approach, generating one file with images for each glimpse in a font –  you can select which ones –  and then using Javascript to manipulate the DOM of your page & adding the fonts in specified locations.

Kernest

capture-9

Kernest technically is not a font replacement technique but it makes use of @font-face –  which is supported by modern browsers –  and allows you to use a free font, or to “rent” one for a year.

Do you know others? Let me know :)


Switch to our mobile site