Creating great effects using web fonts
It is a commonly held belief that it is only possible to achieve even the very simplest of text effects online by converting characters to images. But this is very definitely no longer the case with the standard browsers now available. Just as texts can be readily individualised with the help of web fonts, it also possible by means of the correct selection of CSS parameters to create a range of interesting text effects.
Linotype.com offers an extremely straightforward online service that will enable you to discover and begin experimenting with these effects. Simply select the detailed view of the font you are interested in and switch to the web font view. Using the ‘Edit’ button, you can now change the example text and the font style. In addition to standard parameters, such as point size, line spacing and colour, the last pop-up window in the series allows you to activate certain text effects and preview these. Displayed below the preview is the relevant CSS code and you can either use this as it is or employ it as the basis for further adaptations.
A few selected effects are described below, all of which can be generated by the appropriate choice of CSS text shadow parameters.
Contour
This allows you to give your text an outline. The effect is frequently used to enhance linear-based designs.
Shine
A radiating colour glow effect, when used with restraint, is the ideal way to enhance the legibility of a text when it is set against an irregular background. You can use this effect, for example, to integrate text perfectly in an image.
Letterpress
Employed correctly, slightly embossed letters can represent the finishing touch to any design, particularly headlines. Let yourself be inspired.
Vintage
This is a linear, slightly off-set 3D effect that is evocative of the typefaces of the 1950s and 1960s. Nobody will realise at first that this is attributable to a CSS effect!