SVG and Typography

April 7, 2004

Fabio Arciniegas A.

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.

Foundations

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, Alignment, Direction

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>

Position

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.

Alignment and Direction

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.

Position, Direction, Anchoring

Let's look at some examples.

• Baseline shifts are used often in scientific notations to denote super and subscript. Note the use of the tspan element. Like its HTML counterpart, 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.
• Widget labels in GUIs are right aligned (anchor: end). This prevents their different lengths from translating into a visual mess.
• Writing Latin characters from top to bottom (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.

Fonts and Colors

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.

A Bit of Color Theory

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.

Color Schemes

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.

Typical issues of Type and Color

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:

• 'letter-spacing' indicates an amount of space that is to be added between text characters.
• 'word-spacing' indicates an amount of space that is to be added between text characters.

<?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.

Labels

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

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:

• textLength: determines the total length the glyphs and its intermingled spaces will take.
• lengthAdjust: determines whether the text is fit in the length by stretching only the space between glyphs or if the glyphs are stretched too. The two accepted values are 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:

• stroke: already used before in a number of occasions, this property when is applied to a text element means the outline color of the glyph.
• stroke-width: self-explanatory.

<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.