Patterns with letters
Letterforms
The selection of digital letterforms or fonts currently available is amazing, and font designers are constantly adding new styles and families. There are almost infinite permutations to the shape of the 26 letters of the alphabet.
As the architect Mies van der Rohe once wrote, ‘God is in the detail.’ There are at least 22 different terms for the individual parts of a single character of type. They range from the ‘x-height’, ‘descender’, and ‘serif’, to the ‘spine’, and ‘ear’.
Together, these terms allow us to name and describe the elements that make up the design and construction of each letter – thus helping us define what gives a font its special character, and what distinguishes one font from another.
Perhaps the most noticeable difference between fonts is that some are ‘serif’ while others are ‘sans serif’. Serifs are the short strokes at the end of the stems, arms, and tails of a letter.
Even serifs have a wide variety of different forms: beaked, bracketed, hooked, slab, spur, or wedge. Fonts generally come in ‘families’. These are essentially variations on a theme, with each face in a single family sharing the same design characteristics.
The most common families are: roman, italic, light, light italic, bold, and bold italic. Roman faces are upright, italic faces are sloping, light faces have thinner strokes than normal, and bold faces have thicker strokes than normal.
Of course, there are many further variations: condensed, ultra light, ultra bold, heavy, fat face, and so on. If this wasn’t variety enough, the technological changes of the last 25 years or so have brought type into the digital world.
Fonts are now designed, used, and output on computers. Type is no longer physical. Each letter no longer exists as a solid block of metal. This means that the possibilities for further manipulating letterforms are virtually unlimited.
They can be squeezed, stretched, flattened, elongated, twisted, twirled, inverted, or otherwise distorted in every imaginable way. And they can be coloured, textured, patterned – and even animated.
There are many traditional rules that are supposed to limit the way we present typographic information on a page. For instance – in body copy, serif type is more legible than sans serif, and headlines set in all caps are less legible than those set in upper and lower case.
Smaller pieces of information sometimes need to be made more interesting, or they will be missed. For the digital artist using type as a ‘medium’, these rules can be forgotten.
Play as many tricks as you like with scale, position and shape. Set type vertically or diagonally instead of horizontally. Run it along flowing, irregular lines to create patterns on the page. Use colour and texture as imaginatively as you can.
Type can be combined with illustrations, photographs, and other graphic elements, or used to create pictures from the letterforms themselves.
Right: A word or phrase can be typed in a word processing application, then copied and repeated several times. The size (known typographically as ‘point size’) can be altered to create lines of different weight, and individual words coloured to create a powerful graphic image.
This piece, based on a design by John Maeda for a cover for the New York Times Magazine, was created in Illustrator using colour blends and the distort filter.
Right: The range of digital fonts available is breathtaking. Though many downloadable fonts can be used freely, be aware that font usage in general is covered by strict licensing rules that prohibit the purchaser supplying fonts to a third party such as a print company.
The term font was originally spelled ‘fount’. It derives from the type foundry, where individual letters were cast from lead alloys to form metal blocks, and then combined with one another by the typesetter to build up words.
Blank metal ‘slugs’ were inserted to separate words, and sometimes to add a little extra space between individual letters. Most fonts are designed either for setting large quantities of text (such as a book) or for decorative display.
In the case of the former, legibility is vital. In the case of display, there’s more scope for experimentation.
Above: A page-layout program has been used to type and repeat a phrase without punctuation. The text boxes are duplicated, offset over one another, and the colour tint varied for each. The final message is typed along a curving line.
Above: A single word is duplicated many times, each tilted or ‘rotated’ by varying degrees. Using an enlarged letterform as a template, the individual words are randomly placed to build a representation of the single letter.
The ‘template letter’ is subsequently removed. The same method has been used to create the background texture, the individual words duplicated and their position shifted in groups to speed up the process.
Right: Type as pure visual pattern is taken to the extreme by representing each letterform as a simple block of colour. Even though the traditional medium of communication is lost, the brain still tries to make some sense of the pattern as it understands the recognized metaphors of paragraph indents and ragged lines.
This example has been created manually in a basic word processing application by selecting a colour for each letter and then changing it to a square ‘dingbat’. Programming code that generates this effect purely by using the keyboard has been explored not only by mathematicians, but exponents of digital art, such as John Maeda and Joshua Berger (with his 1999 Colorface Color font).
Based on the theory of Semiology, which reassessed the relationships of language and objects with the concept of the ‘semiotic sign’, Berger argues that ‘language is anything that communicates information’.
Type is no longer solely the letters and punctuation marks that from words and sentences, but ‘the building blocks of meaning in whatever form that meaning arises – type can now be an image, a sound. Type can be a colour.’
Above: The meaning of the word has been removed by striking through each line of text with a colour rule, leaving only a hint of the actual letterforms.
The effect is intriguing, as the viewer is both confused and frustrated by his inability to understand the true meaning, while being stimulated by the resulting pattern of colour and form.
Above: By taking the letter and word spacing (kerning and tracking) and the space between lines (leading) to extreme levels, the words themselves become less important than the textural effect.
Tutorial by Jonathan Raimes, DIGIT magazine © IDG 2006
- star1
- Please log in to rate
Above: Based on an experiment in typography by German designer Hans-Rudolf Lutz, these words, created in a vector program and converted to outlines, were overlaid with concentric circles.
A ‘divide’ filter cut the path elements and the resulting ‘rings’ were turned by degrees to produce configurations of the fragmented letters.
Above + below: Colour can play as important a role in design as the letterforms themselves. Here, the letters are used merely to create the composition. Converted to vector paths and filled with solid colour, the transparency blending modes have been adjusted to allow the colours to interact.
Above: In this simple, colourful design, the letters have been scaled and cropped to reveal only suggestions of their shape. Surprisingly, they are still recognizable, and we still try to make some sense of their meaning.
This article was extracted from The Digital Canvas by Jonathan Raimes. This book is highly recommended by Digit, and is available now at a retail price of £19.99 from ILEX, the digital creative’s publisher of choice.
The book is a visual celebration of onscreen creativity, encompassing everything from the imaginative manipulation of basic shapes to utilizing the full range of tools available in today’s graphic software.
Drawing inspiration from a rich heritage of computer art, the book opens up a world of creative possibilities. Digit has teamed up with the ILEX Press – publisher of hundreds of digital design books – to offer readers a discount on its latest titles, including The Digital Canvas.
To order your copy with a 20 per cent discount and free P&P (usually £3.50), visit www.ilex-press.com/digit. Alternatively, please write to Digit Offer, ILEX Press Ltd, 3 St Andrews Place, Lewes, East Sussex BN7 1UP or telephone 01273 487 440.