Posts Tagged ‘font typography on the web’

Web design fonts options

Saturday, July 25th, 2009

New techniques coupled with new Web browser capabilities promise to elevate web design typography from its current monotonous state into an actual creative discipline, and this might happen more quickly than expected.

This problem for web designers is dealt with either by making the most of the few fonts we have, or by entirely replacing our heading-text with images. Replacing and creating a few text header images is only okay when there are a set number of headings, but what about when the website is updated every day or even several times per week ?

Web Safe Fonts

Windows includes around 16 fonts and Macs have a little over 30.
Web design has suffered greatly, with the same 5 fonts being used over and over and over.

There are many tools out there to tackle this problem, but they are not widely used considering the number of web designs out there.

Download-able Font Services

Both Firefox and Safari now include the ability to download the two most common font file format types Open Type (OTF) and True Type (TTF) and Opera will soon follow suite. The only hold out, is Internet Explorer, which currently holds the majority of the Browser market.

• Kernest: Uses a link to tag to an external CSS file, which includes the @font-face rule sourcing a file specific to the browser type of the end user.
• TypeKit: Uses JavaScript to embed the font-file directly into the page.

Font Replacing Tools

sIFR 3
(my personal favorite because it appears to be SEO friendly)
A free web design tool for replacing text with Flash text images. It is useful for displaying fonts that aren’t generally on a Mac or Microsoft computer.

Cufón
This aims to become a worthy alternative to sIFR. Cufón consists of two individual parts – a font generator, which converts fonts to a proprietary format and a rendering engine written in JavaScript.

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

FLIR
This solution 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.

SIIR
The SIIR program serves to basically change dynamic text on your website into generated images with any font you choose.

DTR
A pretty old JavaScript and PHP technique by A List Apart.

Typeface.js
Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.

IFR
By using a dynamic Flash movie, some slick JavaScript and well-structured mark-up the same consistent branding can be achieved while greatly reducing production time and preserving the cleanliness of the mark-up.

PHP+CSS DTR
PHP+CSS Dynamic Text Replacement is a JavaScript-free version of the Dynamic Text Replacement method originally created by Stewart Rosenberger. This is the P+C DTR version with word-wrapping and the ability to use inner tags.

STR SwishMAX Text Replacement
Similar to sIFR in that it uses Flash movies to replace text in an HTML document. STR does not, however, use Macromedia Flash to create the movies. STR uses a combination of Flash, CSS and Javascript, leaving the markup semantical and minimal.

CSS Image replacement [static]
Several text image solutions were developed in 2004 and continue to be developed with .php, ASP, Java servlets and other server-side programming.