SVG and Typography
Editor's Note: SVG is back in style on XML. Fabio Arciniegas and Antoine Quint will be covering typography, video and mobile topics over the coming weeks.
Mixing the worlds of documents, programming, and visual design is a familiar experience for XML developers, especially when dealing with presentation technologies like SVG. Such mixtures can produce exciting new representations of information. They can also become ugly messes if one fails to learn the relevant aesthetic and design principles.
 |
| Fig.1 Type can be essential for Charts, Diagrams, and GUIs, as well as for Artistic Works |
One aspect that you want to get a good grasp on, if you work with SVG, is typography. Few things have its power to make or break a visual work. The goal of this article is to review key ideas about typography so that you can use it effectively, either by applying the rules in visual explanations and GUIs or by bending the rules in your artistic output (Fig.1.)
This article is divided in four parts, each corresponding to a particular area of the combination of SVG and typography:
Foundations and Character Treatment
Position, Alignment, Direction, Colors, Fonts
Character Treatment
Hyphens, Quotations, Spaces,
Symbols, Ligatures, Non-Latin characters
Static Design Strategies implemented on SVG
Crop,
Backward/Forward, Blur, Contour, Crowd, Contrast Weight, Gradation, Highlight,
Path, Outline, Overlap, Repeat, Reverse, Shadow, Tilt
Dynamic Presentation Strategies implemented on SVG
Fade ins, Color Tweening, Scrolling, Type Effect, Bounce, Animate through contour,Size Transitions,
Menus, Montage.
Before we begin, please make sure you have the Adobe SVG plug in installed, as most images from this point on are SVG.
Using the text element, its attributes, and CSS
styling one can position and format glyphs in SVG in the ways one
has come to expect in desktop graphics. The following sections
outline the basics and the particular features SVG offers for their
treatment.
Positioning of text in SVG appears quite obvious: The two
attributes x and y determine the position of
the text:
<text x="44" y="62">Hello World</text>
That's only the beginning of the story. The first thing to point
out is that the values accepted by x and y
are lists of points, not necessarily single values. Positioning,
therefore, is not restricted to just one value for the beginning of
the text but can be specified independently for each glyph of the
text, as illustrated in the billboard of Listing 1:
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="350"
height="155" version="1.1">
<rect x="1" y="1" width="320"
height="130"
style="fill:#008683; stroke:black;"/>
<g style="font-family:Beachman Script; font-size: 36pt; fill:#D5E9D7">
<text x="22 47" y="62 65">TheMerryWives</text>
<text x="150" y="100">ofWindsor</text>
</g>
</svg>Listing 1 Positioning
For the sake of a less monotonous appearance, in Listing 1 we have
specified that the first glyph of the string "The Merry
Wives" is positioned a little higher, at
coordinates (22,62); after that, we have specified that
the next glyph will be positioned at (47,65). The
remaining glyphs, since they are not explicitly positioned, are
automatically rendered sequentially according to the left-to-right
default writing.
As usual, knowing one more answer creates two more questions. What
part of the glyph is exactly being positioned
at (22,62)? what other options for direction, apart
from left-to-right, are available?
The position specified by the coordinates refers to the alignment-point of the glyph (Figure 3). What the alignment point is depends both on the font you are using and some SVG parameters. When dealing with Latin characters, the alignment point is by default the intersection of the left-most point of the glyph and the baseline.
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220"
version="1.1">
<rect x="1" y="20" width="220"
height="220" style="fill:black;"/>
<text x="20" y="120" style="font-family:Arial;
font-size: 42pt; fill:white;">TVC15</text>
<line x1="20" x2="20" y1="0" y2="220"
style="fill:white"/>
<line x1="0" x2="220" y1="120" y2="120"
style="fill:white"/>
<circle cx="20" cy="120" r="2" style="fill:white"/>
</svg>Fig 3. AlignmentPoint.svg
Writing "left to right, with left anchoring, aligning to the baseline" (i.e. the default Latin way) is not the only option possible. The rendering of glyphs can altered by specifying the direction of writing, the anchoring, and the alignment baseline. These other three SVG features complete our basic picture of positioning, alignment, and direction; they are illustrated in the code and graphic below (Fig 4):
The "text-anchor" property is used to align a string
start, middle, or end to the specified point. The reason for these
names (as opposed to "horizontal left-, middle-,
right-alignment") is that they must serve also for characters
that are displayed top to bottom, in which case the start is the top
and the end is the bottom. The possible values are start |
middle | end | inherit.
The "writing-mode" property controls the initial
direction of the text. It is controlled by three logical directions:
left to right, right to left, or top to bottom. The actual possible
values for this property are: lr-tb | rl-tb | tb-rl | lr | rl |
tb . We will revisit this and other properties
like glyph-orientation-horizontal in the light of
internationalization in the next section.
Finally, the "alignment-baseline" property is used to determine
the vertical alignment of the text with respect to its parent; for
example, it can be used to align text by its middle points. The
possible values are auto | baseline | before-edge |
text-before-edge | middle | central | after-edge | text-after-edge |
ideographic | alphabetic | hanging | mathematical. Since a
thorough discussion of all the options is too long for this article,
let me just point to the appropriate SVG
specification section. The key point, however, is to know that you
can escape the baseline as the vertical alignment for a text
chunk. Another useful property for these purposes
is baseline-shift; its possible values are baseline
| sub | super | <percentage> | <length> | inherit.
Let's look at some examples.
| Fig 4. AlignmentPoint.svg |
span, this element temporarily overrides
styling properties on the text. In this case we use it to write the
superscripts (baseline-shift:super) without having to
create a new text element, calculating by hand its position
point.anchor:
end). This prevents their different lengths from translating
into a visual mess.writing-mode:tb) is not unusual in tables and charts
when horizontal space is scarce. Note that in the code for Fig. 4
(listing 2) we also use alignment-baseline:middle to
center the horizontal labels on a very tight space.The code for Figure 4 is included here, in listing 2:
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="450" height="450">
<!-- WRITING MODE TOP TO BOTTOM EXAMPLE -->
<g>
<line x1="30" y1="120" x2="30" y2="240"/>
<text x="40" y="170" style="writing-mode:tb">March
10</text>
<line x1="50" y1="120" x2="50" y2="240"/>
<text x="60" y="170" style="writing-mode:tb">March
11</text>
<line x1="70" y1="120" x2="70" y2="240"/>
<text x="80" y="170" style="writing-mode:tb">March
12</text>
<line x1="90" y1="120" x2="90" y2="240"/>
<text x="100" y="170" style="writing-mode:tb">March
13</text>
<line x1="110" y1="120" x2="110" y2="240"/>
<line x1="20" y1="165" x2="170" y2="165"/>
<text x="115" y="165" style="alignment-baseline:middle;
font-size:10">Defect 21 Fixed (Networking)</text>
<line x1="20" y1="155" x2="170" y2="155"/>
<text x="115" y="155" style="alignment-baseline:middle;
font-size:10">Defect 22 Fixed (COM)</text>
<line x1="20" y1="145" x2="170" y2="145"/>
<text x="115" y="145" style="alignment-baseline:middle;
font-size:10">Defect 23 Fixed (GUI) </text>
<line x1="20" y1="135" x2="170" y2="135"/>
<text x="115" y="135" style="alignment-baseline:middle;
font-size:10">Defect 24 Fixed (GUI) </text>
<line x1="20" y1="125" x2="170" y2="125"/>
<text x="115" y="125" style="alignment-baseline:middle;
font-size:10">etc.</text>
<circle cx="40" cy="160" r="2"/>
<circle cx="80" cy="140" r="2"/>
<circle cx="100" cy="150" r="2"/>
<circle cx="100" cy="130" r="2"/>
</g>
<!-- LABELS ALIGNED TO THE LEFT EXAMPLE -->
<g>
<text x="100" y="80" style="text-anchor:end; font-size:10">Name:</text>
<text x="103" y="80" style="font-size:10;font-style:
italic">Jean Cocteau</text>
<text x="100" y="90" style="text-anchor:end; font-size:10">Email
Address:</text>
<text x="103" y="90" style="font-size:10;font-style:
italic">jean@filmcocteau.com</text>
</g>
<!-- SUPERSCRIPT EXAMPLE -->
<g>
<text x="80" y="50" style="font-size:10">y=x<tspan
style="baseline-shift:super">2</tspan>+z
<tspan style="baseline-shift:super">42n</tspan></text>
</g>
</svg>
Other aspects of position and direction, including bidirectionality, will be discussed in the internationalization section.
It is no secret that by varying the
colors and fonts in a GUI, a poster, or any other graphic you can
dramatically affect the message it contains. Consider Figure 3. By
changing the fonts and colors used, it can easily appear as an
invitation for the Shakespeare play, a really cool name for a soccer
league, or even the title of some questionable DVD.
The cultural implications of our font and color choices are only one aspect illustrated by this example. Another visible issue is readability. Both the fonts used and the contrast provided by the colors chosen will affect the readability of the text, making it even more important to understand the principles and common practices.
Since there are whole books written about color theory, the goal here is not to go through it all, but to understand the basic terminology and the notion of color schemes, that is, the strategies to come up with good color combinations. Armed with that knowledge we can discuss some time-honored strategies for combinations of type and color and discover an infinite amount of color combinations in a sound way.
Ever since Newton first arranged colors in a circle in 1666, there has been discussion about the best way to arrange color wheels. Several kinds of color wheel exist, including those based on red, blue, and green, the additive primaries (i.e., visual wheels), and some based on red, blue, and yellow (mixing wheels).
For our purposes, the classic 12-hued wheel developed by Johannes Itten at the Bauhaus (left) seems appropriate. After all, although we are used to RGB codes, it is a bit more obvious to say "yellow and red produce orange" than to say "the difference between yellow and orange is the average of their green components".
The SVG graph below shows Itten's mixing wheel (click on "play animation" for some SVG family fun). The primary hues are red, yellow, and blue. The secondary hues are obtained by mixing two primaries; the result are violet, orange, and green. Finally, the tertiary hues are made by mixing a secondary and an adjacent primary.
Using the wheel we can talk about strategies for picking colors or color schemes. For example, complimentary colors are located opposite to each other in the wheel, like orange and blue. Normally, it is not a good idea to use complimentary colors for digital type because of their diminished legibility; complimentary vibrant colors like red and green will compete for the eye and become tiresome over long texts.
Some other color schemes include:
|
Primary, Secondary, Tertiary. As color schemes, these names refer to any combination of their respective set of hues. For example, a secondary scheme is any combination of secondary hues, i.e. orange, violet, and green. |
|
Monochromatic: A color scheme with various tones of a single hue. A tone is the result of mixing a hue with white or black. A color with added white is a tint, a color with added black is a shade |
 |
Analogous: Colors that are adjacent to each other on the color wheel. |
|
Neutral: Combination of different tones of a single hue. |
|
Split complementary: Combination of a hue and two hues adjacent to its complement. |
|
This article won't go into a catalog of color combinations; for that purpose there are excellent swatchbooks (e.g. Krause's color index) and software (e.g. ColorImpact 2). The goal was to review how combinations are chosen and the terminology that will allow us to identify common issues and sort them confidently in our SVG practice (the terminology introduced here is used in all three parts of the article). Let's then review some of them:
text
control this feature in SVG include:
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="450" height="150"
version="1.1">
<g style="font-family:Arial; font-size: 10pt;word-spacing: -2">
<text x="20" y="20">
I quickly wake up, there is confetti everywhere, </text>
<text x="20" y="34">
brief flashes of Ernesto Sabato Jr. talking to Linda:
</text>
<text x="20" y="48">
'honey, you're looking positively
<tspan style="text-decoration:bold">uma-esque</tspan>'
</text>
</g>
<g style="font-family:Arial; font-size: 10pt;word-spacing: 1;letter-spacing:.5"
transform="translate(0,90)">
<text x="20" y="20">
I quickly wake up, there is confetti everywhere, </text>
<text x="20" y="36">
brief flashes of Ernesto Sabato Jr. talking to Linda:
</text>
<text x="20" y="52">
'honey, you're looking positively
<tspan style="text-decoration:bold">uma-esque</tspan>'
</text>
</g>
Smaller Type needs Higher Contrast: The smaller the type the higher the contrast you will need to make it legible. Avoid mixing small text with an analogous or neutral color schemes.
Liberal on Display, Conservative on Text: There are two basic categories of type, text and Display. Text type must be readable at small sizes and display the time-honored ideals of readability and elegance that you see in fonts like Bodoni or Times New Roman. On the other hand, display type (fonts like Shadow Tag) is often not concerned with legibility as much as it is with style and is not really intended for blocks of text. Using classic fonts and color palettes for text and limiting all those avant-garde experimental fonts and colors for display is a good heuristic.
Defaults: It is a well known design practice to have a set of default fonts/color combinations to work with. For example, Bodoni, Century Gothic, Garamond, and Bakerville are usually a good base for your serif needs (Arial, Futura, Helvetica and Franklin Gothic good sans serifs). Similarly, since SVG designs and GUIs usually comprise similar elements, it is a good idea to have defaults for recurrent elements like menus, tooltips, labels, and so on. The SVG below illustrates two of my personal defaults, as we delve into the other parts of this article we will grow this list to accommodate other UI elements and design strategies.
Avoid bold and other variations in labels. Assuming the label is part of a dialog or a larger UI, a good default for its background is pure white; or, if you want to give a less modern, yet acceptable look, use neutral gray (RGB 192,192,192). Use sans-serif fonts, preferably Tahoma. Always align labels to the right. If you want to use color for required types (as opposed to an icon or note) use red.
<text x="100" y="120" style="font-family:Tahoma; text-anchor:end;
font-size:10;text-anchor:end; fill:#ff0000;">Zip Code:</text>
Tooltips are small and stay in the screen for very short spans of time, so you want to keep them as readable and high-contrast as possible. Use sans serif fonts, tints of yellow (or pure white) for their background
<rect x="47" y="58" width="50" height="16"
rx="4" ry="4" style="fill:#FEEFB8; stroke:black;"/>
<text x="50" y="70" style="font-family:Arial; font-size:10;">16
Valves</text>
In-lined Emphasis: To add emphasis to a portion of
the text, we may vary a number of attributes, like weight, color,
italics, kerning, etc. To do so without having to calculate the start
point of several pieces of <text>, we use
the <tspan> element as shown in previous
examples. Do not use underline for emphasis and prefer italics and
subtle inter-word spacing to bold for emphasis.
Thin Strokes: Although
most popular SVG viewers do a good job at anti-aliasing fonts, avoid
using fonts with thin strokes if they are to be used in small
sizes. Chances are some stokes will be lost on the resize. This goes
double if you are using a color background.
Primary tints: When using a primary or secondary color scheme try to stay away from pure hues for background, especially for UI elements. Although not an iron rule, tints generally make for better backgrounds and enhance readability. Take for example the tooltip on the "favorites" list above.
Stretches: In SVG the total length occupied by the text can be specified using two attributes:
spacing and spacingAndGlyphs.
There might be good exceptions, but in general, stretching or compressing glyphs looks gimmicky and amateurish. Avoid it.
Outlines: Not as dramatic a no-no as stretches, but still to be handled with care are outlines. Outlines are controlled via two CSS property:
<g style="font-family:ITC Machine; font-size: 20pt; fill:#065188; stroke:#E4E9ED;
stroke-width:.5">
<text x="22" y="190">The Merry Wives of Windsor</text>
</g>
Don't be concerned if you don't see "shadowing" or some other favorite design trick in the above list. The above covers only the most common issues/strategies dealing with type and color; part III of this article will be devoted explicitly to a wider array of static design strategies implemented in SVG.
XML.com Copyright © 1998-2006 O'Reilly Media, Inc.