Texts as image

In this page we’ll deal with several topics regarding texts handled like images: images which contain text and the way the text is displayed on the screen of computers.

Capitals and illustrated initials
Overcoming typographic limitations (on the web)
Viewing type on the screen
Logotypes.
Calligrams and illustrations with text.

Illustrated initials

Capital letters, especially illustrated initials and decorated letters give a special touch of interest to the pages. Illustrated initials have been in use since very old times (we remember medieval books, manuscripts with detailed miniatures and ornaments.) Most programs of desktop publishing and text processors include some kind of utility to create this special kind of font automatically. Normally, they are created with a height equivalent to three lines of text, and the main options of positioning include surrounding them with the rest by the text or to bleed all the paragraph to the right. Nevertheless, the typesetting treatment which we can do with the ornamental letter will still be basic: to choose the wished font, with a colour and a certain style. If we want to create a really special effect, we can choose to create a graphic for the capital letter, with the wished size. The control on offer in this case is much bigger: we will be able to apply illustrations, forms, colors... just the way we want. Some ideas of what we can do:

Adding a calligraphic initial written in brush, pen...
Colocar una viñeta escaneada de un viejo libro de grabados incluso podemos recuperar letras capitulares utilizadas en uno de estos libros. Placing a scanned vignette from an old book with engravings —we can even recover old fashioned capital letters used in one of these books.
Putting the image that we’ll use as initial behind the text, and in a softer or dimmed color; or overlay it, with a transparency effect.

Overcome typographic deficiencies

One of the bigger complaints of designers regarding the Web is the limitation of this medium in comparison with printed media, in their respective typographic possibilities. The normal, editable text on the webpages has important limitations in the format and font availability. We have treated these limitations with some more detail in the pages of the section of Design for the Web.

There is a way to incorporate the letters that the designer really wants if he creates images (normally GIF or PNG) with the text that is must be shown. An advantage of this option is that we can use the typography effects and fonts that we want, since the image will be exactly the one we create, and it will not be necessary that they are installed on the viewer’s computer to see them; we will be able, in addition, to use more colour and typographic refinements than with the ordinary, editable text. Nevertheless, to include text in form of graphics has three distinct disadvantages:

The text is no longer editable: it is not possible to be copy it to another program, it is no longer text but a picture. Consider also the accessibility inconveniences this might cause for disabled users who rely on screen readers or other assistance to read your documents.
If the user has deactivated the automatic loading of images in his or her browser, he will not see anything, except the alternative text that we use to describe the image: for this reason it is important to include a brief description with the ALT tag (alternative text) in the edition of the page Web (anyway, if you code in valid XHTML you must include descriptive texts with all the images.)
The size of the page will increase, proportionally to the size of the images used, their number of colours and their complexity. This last disadvantage and the previous one of this list are becoming less and less important with present day computers and modems or systems of cable internet access, which are capable to download the pages at greater speeds than some years ago. But the first problem cannot be solved; texts in graphic form are not able to contain essential information, as they are actually pictures, not texts. That’s why it is advisable to limit this technique to for the titles or subtitles —always with an alt tag description— and for the rest, use normal editable text. Even in this case there are several Image Replacement techniques, based on CSS, which solve most accessibility issues. Essentially, the text substituted by a picture is still normal text, but it is defined by the style rules with a background image (the one that will be seen with the “text”).

Texts on screen.

The screen is not, indeed, the best support for the reader. The viewer reads with much more difficulty the characters on the screen than on paper, due to the low resolution and the light that the screen projects, in comparison with the reflected light and the higher resolution of the printing press materials. One of the consequences of the low resolution of the screens is that linear objects and characters show an appreciable aliasing, easily seen when they’re enlarged. Those that are small sized even suffer a poorer visualization for this reason.

A system to make the visualization of the characters and other objects more pleasant is to smooth their contours. Different drawing programs feature this option and they can generate images with their outlines smoothed, making them more apt to be see on the screen. This option is called font smoothing or antialiasing, and it’s one of the settings of the Windows system and other programs. In programs like Photoshop it is possible to choose the antialiasing amount within a range.

Antialiasing the letters is not always recommendable. If we must write really small characters, below 8 or 9 points, it is better to deactivate this antialiasing option, since the characters have an area too small to obtain satisfactory smoothing. In this case, you should leave the characters not antialiased, and select a font of excellent legibility in screen, like Verdana, Trebuchet, Tahoma, Times New Roman or similar. For this range of font size, you can even choose a fixed resolution font (screen font); there are many fonts of this kind, intended to be used at a fixed size. For example, we have used in diverse graphics a freeware font designed by Ray Larabie, from larabiefonts.com, called Orange Kid, which works optimally for texts set between 8 and 10 points.

Logotypes.

Logotypes (or, to save letters, logos) are a perfect example of the same essence of graphic design. In a single object all the considerations from communication projects of greater scope, such as style and technique are concentrated. And in addition, regarding digital design, it seems that the computers were invented to create logos; their design is a compendium of examples of the abilities of the drawing and painting programs.

The most famous logos impose their perception with any combination of colours or typography that reminds of them, be it directly or obliquely...

Importance of logos.

For a company, a product or an institution, the logotype is a key piece of its public identity. The logo is often what’s seen first about the company: in the correspondence and stationery material, in publications or the advertising... and therefore it is absolutely necessary to think in depth which image we want to project. Everything what we thought to communicate regarding the company has to be included somehow in this small and simple image. Not a simple task! Naturally, there’s no shortage of logo examples: you can even find books with them in your bookshop. Some are masterpieces of graphic design: those that we remembered at any time, those that we can draw from memory, those that we associate unequivocally to the brand or even those which let us understand other logos.

The most important companies carry out continuous redesigns of their logos and the rest of materials of corporate identity; often in an almost imperceptible form; sometimes only tweaking the object shapes or the typography. In other cases, the whole corporate image is completely and radically redesigned within more ambitious programs of reinvention rather than renovation or change of the previous image.

The requirements of a logo.

Simplicity. Frequently a complex image does not work either in certain surroundings and applications and it does not catch or the attention as well as one more streamlined and simple alternative.
Memorability. A good logo has to be easy to remember, must have an immediate and lasting impact. This can be a difficult task to accomplish in the atmosphere of visual saturation in which present-day city dwellers live.
To be able to work or in different media, printed or screen-based, different resolutions and distances, in colour or in black and white. This forces the designer, indeed, to a simplicity in the design.
Coherence with the rest of the corporate identity: the logo has to be perfectly integrated with the rest of materials that the company uses for its communications: stationery, wrappers and packaging, promotional material, the television, webpages, advertising, billboards and posters...

Techniques

Logotypes have two main ingredients: shapes and letters. One of both of them can be used, or one acceptable combination of both. The image may have more weight, or the other way around, being the letters more important. The forms of the typography can be more or less edited; it can be taken of a preexisting typography, or created especially for the logo. The logotypes demand design techniques which suppose a compendium of the edition of more or less simple geometric forms, combined in the most ingenious ways. Along with this, the restraint in the use of the colour, normally in flat areas, and the intensive use of modifications of the typography, makes the use of computers essential.

Many of the most famous logos have not been created electronically, but today it turns out inconceivable to develop a logo without using illustration programs, mainly by the easiness with you can draw logo-style illustrations. And unlike with traditional media, you can try as many versions as you want without destroying the work already done.

Logo design process

In the first place is necessary to write a list with the meaning or the function that the logotype is supposed to have. Which image must it project? How willthe public see it, and under which conditions? Must it be related to other products or companies? The designer must use a series of reference materials: he must know first the logos of the competitors or other similar products, companies or institutions; and he has to analyze in detail how they are constructed and what they represent.

The following phase involves some work in form of sketches. In the beginning we should close no doors, leave no possibility aside: draw forms with total freedom, with no inhibitions, to associate images and letters on the most unsuspected ways. Many designers have a departure point in the treatment of the letters, which will become later representative images, trying to flee from most obvious and, therefore, more seen. They try every kind of visual games, combinations of images... For the creation of logos, a good collection of typography is a fantastic arsenal. Some decorative fonts could work almost by themselves like a logo, alone or combined with some image. Some companies are represented by logos based only on letters, with no imagotype; only one or a few letters, sometimes with a minimum of distortion or adjustment. In those cases you can see the corporate use of a same type, on its publicity, stationery, and with consistent schemes of colour. If, on the contrary, the letters are only the departure point for a more complex logo, the vector drawing programs of drawing are perfectly enabled to make transformations, only limited by creativity of the designer.

Normally, to carry out any modification of the characters it’s necessary first to covnert them to editable outlines: the text becomes a vectorial, manipulable object. After all, the scalable fonts are already vector files and you just need a quick format conversion within your favourite illustration program: you can do it in any of them, with a command called “convert to curves”, “convert to editable shapes”, “create outlines” or similar. The definitive logo usually is created in any illustration program such as Freehand, CorelDraw, Xara, Deneba Canvas or Illustrator.

Useful techniques and tools in vector illustration programs

Many of the techniques of these programs are perfect for the logo design, and most times the effects are applied almost instantly and they are reversible, in case that they don’t yeld the desired results. All these techniques can be carried out in almost any vectorial drawing program; indeed most of them are there ever since the oldest versions of the programs. Some of these techniques include:

Adapt the text to a curve or a shape; the text may follow a contour and be placed inside a containing object.
Easy silhouette drawing; these outlines can be overlaid, reordered, blended...
Editable letterforms, after conversion to editable shapes, in an infinite number of ways.
Easy inclusion of clipart or dingbats which can also be very easily modified.
Modifications in the shapes: union, exclusion, punch, intersect, weld...
Symmetry operations, with multiple copies, creation of repetition patterns with a certain geometry...
Blends involving two or more objects, with many intermediate shapes.

Resources.

You can find many texts about logotypes and corporate image in your bookstore, and most graphic design journals publish interesting annuals about these topics.

In the net, in www.unleash.com there used to be available a complete section about logo design, called “Logos for the Design Challenged”, by the ubiquituous Gary W. Priester, where many techniques are seen in use. The complete series constitutes a whole book about graphic design with CorelDraw. In www.logo.nino.ru and Brands of the world hundreds of logos from all around the world are available for your study, in vectorial form (EPS). There’s a similar spanish resource, called Logoteca, which also offers the logos in vectorial format, AI (Adobe Illustrator.)

Calligrams or text illustrations

The caligraphers usually create illustrations which use the characters like graphical elements; for example, like the leaves of a tree, or the houses in a city, or people in a group. For this type of works in digital form, again, drawing programs are perfectly suitable, and in addition the composition can be changed almost with no limitations. See an interesting online tool to drawn calligrams in Typedrawing and in Robotype. Our own Antypepatics and Lletraparits were created (a few years before) and are still available at Typephases Design.